تنسيق الأرقام إلى عملة في JavaScript: أفضل 3 طرق

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

المال يحب النظام: كيف تحول الرقم إلى سعر جميل باستخدام JavaScript؟

تخيل: أنت تكتب متجرًا إلكترونيًا. الخادم يعيد سعر المنتج — مجرد رقم 1999.5. عرض الرقم "الخام" للمستخدم أمر غير لائق. العميل يريد رؤية "$1,999.50" أو، إذا كنت في روسيا، "1 999,50 ₽".

هذا السؤال يؤرق آلاف المطورين على Stack Overflow. اليوم سنفهم مرة وإلى الأبد كيفية تنسيق الأرقام بشكل صحيح إلى سلاسل عملة في JavaScript. ستتعرف على الطرق المضمنة، خصائصها، ومتى يكون استخدام كل طريقة أفضل.

لماذا مجرد استخدام `.toFixed(2)` فكرة سيئة؟

كثير من المبتدئين يفعلون هكذا:

const price = 1999.5;console.log('$' + price.toFixed(2)); // "$1999.50"

يبدو أنه يعمل. لكن هذه قنبلة موقوتة. لماذا؟

لا يوجد فواصل للآلاف. قراءة $1999.50 أصعب من $1,999.50.
لا توجد توطين (Localization). في أوروبا، الفاصلة هي الفاصل العشري، والنقطة هي فاصل الآلاف. شفرتك ستنهار.
رمز العملة مثبت بشكل صارم. تغيير $ إلى € يعني العبث بالشفرة.

لحسن الحظ، توفر لنا JavaScript الحديثة أدوات أنيقة. دعنا ندرسها.

الطريقة رقم 1: `Intl.NumberFormat` — ملك التنسيق (موصى به)

هذا الكائن هو جزء من Internationalization API. تم إنشاؤه خصيصًا للعمل مع الإعدادات المحلية والعملات والأرقام. هذه هي الطريقة الأصح والأكثر مرونة.

مثال أساسي

const formatter = new Intl.NumberFormat('ru-RU', {    style: 'currency',    currency: 'RUB'});

console.log(formatter.format(1999.5)); // "1 999,50 ₽"

هذا كل شيء! JavaScript نفسه قام بترتيب المسافات والفواصل وأضاف رمز الروبل. سحر، أليس كذلك؟

كيف يعمل هذا؟

المُنشئ (Constructor) يأخذ وسيطين:

locales — سلسلة نصية برمز الإعداد المحلي (مثل 'en-US'، 'de-DE'، 'ru-RU').
options — كائن الإعدادات. الأساسي: style: 'currency' و currency: 'USD'.

تخصيص لأي عملة

هل تريد الدولار للولايات المتحدة؟

const usFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD'});console.log(usFormatter.format(2500)); // "$2,500.00"

اليورو لألمانيا؟

const deFormatter = new Intl.NumberFormat('de-DE', {    style: 'currency',    currency: 'EUR'});console.log(deFormatter.format(2500)); // "2.500,00 €"

لاحظ: في ألمانيا، النقطة هي فاصل الآلاف، والفاصلة هي العلامة العشرية. Intl يفعل كل شيء نيابة عنك.

خيارات إضافية

هل تريد إزالة الجزء العشري (لا يوجد سنتات)؟

const formatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 0,    maximumFractionDigits: 0});console.log(formatter.format(1999.5)); // "$2,000" (تم التقريب)

هل تحتاج دائمًا إلى إظهار 4 أرقام بعد الفاصلة العشرية؟ تفضل:

const preciseFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 4});console.log(preciseFormatter.format(1.2)); // "$1.2000"

الإيجابيات: أصلي، سريع، يدعم جميع عملات العالم، يغير الإعداد المحلي بسهولة.

السلبيات: لا يعمل في المتصفحات القديمة جدًا (IE 10 وما دونه — لكن هذا أصبح من الماضي).