كيفية تحويل سلسلة نصية إلى رقم في TypeScript: أهم الأخطاء وكيفية تجنبها

مقدمة: لماذا تكسر مهمة بسيطة الكود

كل مطور يعمل مع TypeScript، عاجلاً أم آجلاً، يواجه مهمة: "كيفية تحويل سلسلة نصية إلى رقم؟". قد يبدو الأمر بسيطاً؟ لكن هذه العملية، التي تبدو تافهة للوهلة الأولى، تصبح مصدراً لعشرات الأخطاء، خاصة عند التقاطع بين الواجهة الأمامية والخلفية، حيث تأتي البيانات من نماذج الإدخال أو API أو تحليل CSV.

على Stack Overflow، حصد سؤال "How to convert a string to number in TypeScript?" عشرات الآلاف من المشاهدات. وهذا ليس من قبيل الصدفة. يغرق المطورون في التفاصيل الدقيقة: NaN، parseInt مقابل Number()، فقدان الدقة والسلوك غير المتوقع مع السلاسل الفارغة. في هذه المقالة، سنحلل أهم الأخطاء عند تحويل سلسلة نصية إلى رقم في TypeScript ونوضح كيفية تجنبها. ستتعرف على الطريقة التي يجب اختيارها لمهمة معينة وكيفية كتابة كود موثوق حقاً.

الطرق الأساسية لتحويل سلسلة نصية إلى رقم في TypeScript

قبل الحديث عن الأخطاء، دعنا نتذكر الأدوات المتاحة لمطور TypeScript. كل منها يتصرف بطريقته الخاصة، واختيار الطريقة الخاطئة هو الخطأ الأول والرئيسي.

1. الدالة Number()

الطريقة الأكثر وضوحاً. تحاول Number(value) تحويل القيمة المُمررة إلى رقم. إذا كان ذلك مستحيلاً، تُرجع NaN.

const str: string = "42";\nconst num: number = Number(str);\nconsole.log(num); // 42\n\nconst invalid: string = "hello";\nconst badNum: number = Number(invalid);\nconsole.log(badNum); // NaN

2. علامة الجمع الأحادية (+)

صيغة مختصرة تفعل نفس ما تفعله Number(). موجزة، لكنها قد تربك المبتدئين.

const price: string = "99.99";\nconst numericPrice: number = +price;\nconsole.log(numericPrice); // 99.99\n\nconst empty: string = "";\nconst zero: number = +empty;\nconsole.log(zero); // 0 — انتبه، هذا فخ شائع!

3. parseInt() و parseFloat()

دوال متخصصة لتحليل الأعداد الصحيحة والكسرية. هي "تقتطع" الجزء الرقمي من السلسلة، متجاهلة الأحرف التالية.

const userInput: string = "123px";\nconst width: number = parseInt(userInput, 10);\nconsole.log(width); // 123 — تم تجاهل الأحرف 'px'\n\nconst height: string = "45.67em";\nconst parsedHeight: number = parseFloat(height);\nconsole.log(parsedHeight); // 45.67

4. عوامل البت (~~, | 0)

طريقة غريبة جاءت من JavaScript. تعمل فقط مع الأعداد الصحيحة وتتجاهل الجزء الكسري.

const str: string = "7.8";\nconst result: number = ~~str;\nconsole.log(result); // 7 — فقدان الجزء الكسري

أهم 5 أخطاء عند تحويل سلسلة نصية إلى رقم في TypeScript

الآن بعد أن حللنا الأدوات، دعنا نرى أين يتعثر المطورون في أغلب الأحيان. هذه الأخطاء هي "أشواك" حقيقية يقع فيها حتى المبرمجون ذوو الخبرة.

الخطأ رقم 1: تجاهل NaN

الخطأ الأكثر شيوعاً هو عدم التحقق من النتيجة للتأكد من أنها ليست NaN. لن يُصدر TypeScript خطأً إذا استخدمت NaN في العمليات الحسابية أو المقارنات، لكن النتيجة ستكون غير متوقعة.

const input: string = "not a number";\nconst value: number = Number(input);\n\n// خطأ: NaN يشارك في العمليات الحسابية\nconst total = value + 10;\nconsole.log(total); // NaN\n\n// المقارنة مع NaN تكون دائماً خاطئة\nif (value === NaN) {\n  console.log("هذا لن يعمل أبداً");\n}

كيفية تجنبه: استخدم دائماً isNaN() أو Number.isNaN() للتحقق. الخيار الثاني أفضل، لأنه لا يحول الأنواع غير الرقمية.

if (Number.isNaN(value)) {\n  console.error("المدخل ليس رقماً");\n  // يمكن إرجاع قيمة افتراضية أو إظهار خطأ