كيفية إضافة مسافات أو فواصل عند تنسيق الأرقام في JavaScript: دليل كامل

كيفية إضافة فواصل عند تنسيق الأرقام في JavaScript؟ دليل مفصل

هل تساءلت يومًا لماذا يصعب قراءة 1000000 بينما 1,000,000 تُقرأ فورًا؟ العين البشرية ببساطة غير مصممة لسلاسل الأرقام الطويلة. فواصل الآلاف (commas أو مسافات أو نقاط) ليست مجرد مسألة جمالية، بل هي مسألة سهولة الاستخدام وإدراك المعلومات.

إذا كنت تكتب بلغة JavaScript وتتعامل مع الأسعار أو الإحصائيات أو المعرفات أو أي بيانات رقمية، سيطرح السؤال عاجلاً أم آجلاً: "كيف يمكن تنسيق رقم بإضافة فواصل أو مسافات بين منازل الآلاف؟". على Stack Overflow، حصد هذا السؤال آلاف المشاهدات - مما يعني أنه يهم الكثيرين.

في هذه المقالة، لن نقدم لك كودًا جاهزًا فحسب. بل سنشرح ثلاث طرق رئيسية: من واجهة برمجة التطبيقات المدمجة الحديثة إلى التعبيرات المنتظمة الكلاسيكية. ستتعلم كيف تجعل JavaScript "تتحدث" لغة الأرقام القابلة للقراءة. هيا بنا!

لماذا الرقم البسيط يمثل مشكلة؟

تخيل أنك تعرض على موقع: السعر: 1234567.89 روبل. العين تتعثر. كم هذا؟ مليون؟ اثنا عشر مليونًا؟ أما إذا أضفت فواصل: 1,234,567.89 - يتضح فورًا: أكثر بقليل من مليون.

في JavaScript، الرقم هو مجرد Number. ليس لديه تنسيق عرض "مدمج". كل ما نراه هو نتيجة تحويله إلى سلسلة نصية. وهنا يأتي دورنا كمطورين.

الطريقة 1: toLocaleString() - ملك البساطة

الطريقة الأكثر أناقة وحداثة هي استخدام الدالة toLocaleString(). وهي متاحة لأي رقم في JavaScript وتسمح بمراعاة لغة المستخدم.

const number = 1234567.89;\nconst formatted = number.toLocaleString('ar-SA');\nconsole.log(formatted); // "1٬234٬567٫89"\n

لاحظ: بالنسبة للغة العربية (مثل ar-SA)، فاصل الآلاف هو فاصل ألفي (٬) والفاصل العشري هو فاصلة عشرية (٫). بالنسبة للغة الإنجليزية الأمريكية (en-US) - فاصلة ونقطة:

console.log(number.toLocaleString('en-US')); // "1,234,567.89"\n

المزايا:

\n
• أقل كود ممكن.
\n
• يراعي المعايير المحلية (مسافات، نقاط، فواصل).
\n
• يعمل في جميع المتصفحات الحديثة و Node.js.
\n

العيوب:

\n
• تحكم أقل في التنسيق (لا يمكن استبدال المسافة بفاصلة بسهولة دون معالجة إضافية).
\n
• المتصفحات القديمة (IE11) قد لا تدعم الوسيط الثاني (locales).
\n

الطريقة 2: Intl.NumberFormat - المرونة والقوة

إذا كنت بحاجة إلى تحكم كامل، استخدم الكائن Intl.NumberFormat. إنها نفس آلية toLocaleString() ولكن مع إعدادات موسعة.

const formatter = new Intl.NumberFormat('ar-SA', {\n    style: 'decimal',\n    useGrouping: true, // تفعيل فواصل الآلاف\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2\n});\n\nconsole.log(formatter.format(1234567.8)); // "1٬234٬567٫80"\n

تريد عملة؟ بسهولة:

const currencyFormatter = new Intl.NumberFormat('ar-SA', {\n    style: 'currency',\n    currency: 'USD',\n    minimumFractionDigits: 0\n});\nconsole.log(currencyFormatter.format(1000000)); // "١٬٠٠٠٬٠٠٠ US$"\n

هل يمكن تغيير فاصل الآلاف يدويًا؟ لا يوجد خيار مباشر، ولكن يمكن استخدام replace:

let result = formatter.format(1234567.89);\nresult = result.replace(/\\s/g, ','); // استبدال المسافات بفواصل\nconsole.log(result); // "1,234,567,80"\n

المزايا:

\n
• أقصى مرونة (عملة، نسب مئوية، وحدات قياس).
\n
• أداء عالٍ (يمكن إنشاؤه مرة واحدة وإعادة استخدامه).
\n

العيوب:

\n
• كود أكثر قليلاً من toLocaleString().
\n
• لا يزال يعتمد على اللغة.
\n