واجهة Intl.NumberFormat البرمجية

مقدمة

تخيل عرض الرقم 1234567.89 في تطبيقك. استخدام toString() ينتج "1234567.89" وهو صعب القراءة ويفترض أن الجميع يستخدم النقاط للفواصل العشرية ويقرأ الأرقام من اليسار إلى اليمين. الأمريكيون يتوقعون "1,234,567.89" والألمان يتوقعون "1.234.567,89" والمستخدمون في الهند يتوقعون "12,34,567.89" مع قواعد تجميع مختلفة.

تحل واجهة برمجة التطبيقات Intl.NumberFormat هذه المشكلة من خلال تنسيق الأرقام وفقًا للاتفاقيات الخاصة باللغة المحلية. فهي تتعامل مع فواصل الآلاف والنقاط العشرية وتجميع الأرقام ورموز العملات وعلامات النسبة المئوية ووحدات القياس وأنظمة الترقيم. هذا يلغي الحاجة إلى التلاعب اليدوي بالسلاسل النصية أو مكتبات الطرف الثالث.

يشرح هذا الدليل كيفية استخدام Intl.NumberFormat لتنسيق الأرقام بشكل صحيح للمستخدمين في جميع أنحاء العالم، بدءًا من الاستخدام الأساسي والتقدم إلى الميزات المتقدمة مثل تنسيق العملات والتدوين المضغوط وأوضاع التقريب المخصصة.

تنسيق رقم بالإعدادات الافتراضية

قم بإنشاء منسق عن طريق استدعاء new Intl.NumberFormat() مع سلسلة لغة محلية، ثم استدعاء طريقة format() الخاصة به مع رقم.

const formatter = new Intl.NumberFormat('en-US');
formatter.format(1234567.89);
// "1,234,567.89"

يضيف المنسق فواصل الآلاف وينسق النقطة العشرية وفقًا للغة المحلية. بدون تحديد لغة محلية، يستخدم المنسق اللغة المحلية الافتراضية لبيئة التشغيل، والتي تعتمد عادةً على إعدادات نظام المستخدم.

const formatter = new Intl.NumberFormat('de-DE');
formatter.format(1234567.89);
// "1.234.567,89"

تستخدم الاتفاقيات الألمانية النقاط لفواصل الآلاف والفواصل للنقاط العشرية، عكس الاتفاقيات الأمريكية. يتعامل المنسق مع هذه الاختلافات تلقائيًا.

فهم رموز اللغات المحلية

يحدد رمز اللغة المحلية لغة واختياريًا منطقة، مكتوبة بالصيغة language-REGION. تستخدم اللغة رمزًا من حرفين وفقًا لمعيار ISO 639-1 مثل en أو es. تستخدم المنطقة رمزًا من حرفين وفقًا لمعيار ISO 3166-1 مثل US أو MX.

new Intl.NumberFormat('en-US').format(1234.56);
// "1,234.56" (الإنجليزية الأمريكية)

new Intl.NumberFormat('en-GB').format(1234.56);
// "1,234.56" (الإنجليزية البريطانية)

new Intl.NumberFormat('es-ES').format(1234.56);
// "1234,56" (الإسبانية الأوروبية)

new Intl.NumberFormat('es-MX').format(1234.56);
// "1,234.56" (الإسبانية المكسيكية)

تستخدم كلتا النسختين الإنجليزيتين نفس التنسيق، لكن النسخ الإسبانية تختلف. الإسبانية الأوروبية تحذف فواصل الآلاف للأرقام المكونة من أربعة أرقام وتستخدم الفواصل للأرقام العشرية، بينما تتبع الإسبانية المكسيكية الاتفاقيات الأمريكية.

اختر اللغات المحلية بناءً على مواقع المستخدمين أو تفضيلات اللغة. تحدد التطبيقات عادةً اللغة المحلية من إعدادات المستخدم أو لغة المتصفح أو تحديد الموقع الجغرافي لعنوان IP.

اختيار نمط التنسيق

يحدد خيار style فئة التنسيق. قم بتمرير كائن خيارات كوسيط ثانٍ إلى المُنشئ.

new Intl.NumberFormat('en-US', {
  style: 'decimal'
}).format(1234.56);
// "1,234.56"

نمط decimal هو الافتراضي. الأنماط الأخرى هي currency وpercent وunit.

تنسيق العملة بالرموز والأكواد

يتطلب نمط currency خيار currency مع رمز عملة ISO 4217.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(1234.56);
// "$1,234.56"

يضيف المنسق علامة الدولار وينسق إلى منزلتين عشريتين افتراضيًا، وهو المعيار لمعظم العملات. تضع اللغات المختلفة الرمز بشكل مختلف.

new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
}).format(1234.56);
// "1.234,56 €"

التنسيق الألماني يضع رمز اليورو بعد المبلغ مع مسافة. يحدد خيار currency العملة التي سيتم عرضها، وليس اتباع اصطلاحات أي لغة محلية. تحدد اللغة المحلية اصطلاحات التنسيق، بينما تحدد العملة الرمز.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR'
}).format(1234.56);
// "€1,234.56"

اصطلاحات التنسيق الأمريكية مع رمز اليورو تضع علامة اليورو قبل المبلغ، متبعة الاصطلاحات الأمريكية بدلاً من الأوروبية.

التحكم في تنسيق عرض العملة

يغير خيار currencyDisplay كيفية ظهور العملة في السلسلة المنسقة.

const amount = 1234.56;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(amount);
// "$1,234.56"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(amount);
// "USD 1,234.56"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(amount);
// "1,234.56 US dollars"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(amount);
// "$1,234.56"

خيار symbol هو الافتراضي ويعرض رمز العملة مثل $ أو €. يعرض خيار code رمز العملة المكون من ثلاثة أحرف. يعرض خيار name اسم العملة كاملاً. يستخدم خيار narrowSymbol رمز العملة الضيق للغة المحلية، والذي قد يكون غامضًا ولكنه يوفر المساحة.

يظهر الفرق بين symbol وnarrowSymbol بوضوح مع العملات التي تشترك في الرموز.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
}).format(100);
// "CA$100.00"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'narrowSymbol'
}).format(100);
// "$100.00"

تظهر الدولارات الكندية كـ CA$ مع خيار symbol لتمييزها عن الدولارات الأمريكية، ولكنها تظهر فقط كـ $ مع narrowSymbol.

تنسيق المبالغ النقدية السالبة باستخدام التدوين المحاسبي

يتحكم خيار currencySign في كيفية ظهور المبالغ السالبة.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'standard'
}).format(-1234.56);
// "-$1,234.56"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting'
}).format(-1234.56);
// "($1,234.56)"

خيار standard هو الافتراضي ويستخدم علامة الطرح. أما خيار accounting فيضع المبالغ السالبة بين قوسين، وفقًا للاتفاقيات المحاسبية. هذا يجعل الأرقام السالبة أكثر تميزًا بصريًا في التقارير المالية.

تنسيق النسب المئوية

نمط percent يضرب الرقم في 100 ويضيف علامة النسبة المئوية.

new Intl.NumberFormat('en-US', {
  style: 'percent'
}).format(0.1234);
// "12%"

new Intl.NumberFormat('en-US', {
  style: 'percent'
}).format(0.1256);
// "13%"

يقوم المنسق بالتقريب إلى أقرب عدد صحيح افتراضيًا. يمكن التحكم في المنازل العشرية باستخدام خيارات الأرقام.

new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2
}).format(0.1234);
// "12.34%"

قم بتمرير الشكل العشري للنسبة المئوية، وليس الشكل المضروب. المنسق يتعامل مع عملية الضرب.

تنسيق القياسات بالوحدات

نمط unit يتطلب خيار unit مع معرف الوحدة.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
}).format(100);
// "100 km/h"

new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'mile-per-hour'
}).format(100);
// "100 mph"

تشمل الوحدات المتاحة قياسات الطول (meter، kilometer، mile)، والمدد الزمنية (second، minute، hour)، والتخزين الرقمي (byte، kilobyte، megabyte)، ودرجات الحرارة (celsius، fahrenheit)، وغيرها الكثير. الوحدات المركبة مثل kilometer-per-hour تجمع بين الوحدات البسيطة باستخدام الشرطات.

خيار unitDisplay يتحكم في تنسيق الوحدة.

const distance = 1234.5;

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
}).format(distance);
// "1,234.5 kilometers"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'short'
}).format(distance);
// "1,234.5 km"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'narrow'
}).format(distance);
// "1,234.5km"

خيار long يكتب اسم الوحدة كاملاً. خيار short يستخدم الاختصارات. خيار narrow يستخدم الشكل الأكثر اختصارًا، والذي قد يكون غامضًا.

عرض الأرقام الكبيرة بتدوين مختصر

يغير خيار notation طريقة التعبير عن الأرقام. يستخدم القيمة compact أشكالًا مختصرة خاصة باللغة للأرقام الكبيرة.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234567);
// "1.2M"

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(987654321);
// "988M"

يقوم التدوين المختصر بالتقريب إلى منزلة عشرية واحدة افتراضيًا ويضيف لواحق مثل K للآلاف، وM للملايين، وB للمليارات. يظهر هذا التنسيق في عدد متابعي وسائل التواصل الاجتماعي، وعدد مشاهدات الفيديو، ولوحات التحليلات.

يتحكم خيار compactDisplay في طول اللاحقة.

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  compactDisplay: 'short'
}).format(1234567);
// "1.2M"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  compactDisplay: 'long'
}).format(1234567);
// "1.2 million"

خيار short هو الافتراضي ويستخدم الرموز. يقوم خيار long بتهجئة كلمة الحجم. تستخدم اللغات المختلفة لواحق مختلفة.

new Intl.NumberFormat('zh-CN', {
  notation: 'compact'
}).format(123456789);
// "1.2亿"

تستخدم اللغة الصينية 亿 لمئات الملايين، مما يعكس نظام التجميع العددي للغة.

التعبير عن الأرقام الكبيرة جدًا أو الصغيرة جدًا بالتدوين العلمي

يعبر التدوين scientific عن الأرقام كمعامل مضروب في قوة العشرة.

new Intl.NumberFormat('en-US', {
  notation: 'scientific'
}).format(123456789);
// "1.235E8"

new Intl.NumberFormat('en-US', {
  notation: 'scientific'
}).format(0.00000123);
// "1.23E-6"

يعمل هذا التنسيق بشكل جيد للأرقام الكبيرة جدًا (المسافات الفلكية، عدد الجزيئات) والأرقام الصغيرة جدًا (كتل الجسيمات، قياسات النانو). يظهر الأس دائمًا كمضاعف للواحد.

استخدام التدوين الهندسي للتطبيقات التقنية

التدوين engineering مشابه للتدوين العلمي ولكنه يقيد الأسس على مضاعفات الثلاثة.

new Intl.NumberFormat('en-US', {
  notation: 'engineering'
}).format(123456789);
// "123.457E6"

new Intl.NumberFormat('en-US', {
  notation: 'engineering'
}).format(1234);
// "1.234E3"

يتوافق التدوين الهندسي مع بادئات وحدات النظام الدولي (كيلو، ميجا، جيجا)، مما يجعله معيارًا في سياقات الهندسة والفيزياء. يتراوح المعامل من 1 إلى 999.

التحكم في المنازل العشرية باستخدام أرقام الكسور

تتحكم خيارات minimumFractionDigits وmaximumFractionDigits في عدد الأرقام التي تظهر بعد الفاصلة العشرية.

new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
}).format(1234.5);
// "1,234.50"

new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
}).format(1234.567);
// "1,234.57"

يضمن الحد الأدنى ظهور الأصفار اللاحقة عند الحاجة. يقوم الحد الأقصى بتقريب الكسور العشرية الأطول. تستخدم منسقات العملات افتراضيًا منزلتين عشريتين. تستخدم منسقات الأرقام العشرية افتراضيًا صفر كحد أدنى وثلاثة كحد أقصى.

new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 0,
  maximumFractionDigits: 0
}).format(1234.567);
// "1,235"

ضبط كليهما على صفر يؤدي إلى التقريب لأقرب عدد صحيح.

التحكم في الدقة الكلية باستخدام الأرقام المعنوية

تتحكم خيارات minimumSignificantDigits وmaximumSignificantDigits في الدقة الإجمالية بغض النظر عن موضع الفاصلة العشرية.

new Intl.NumberFormat('en-US', {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3
}).format(1234.567);
// "1,230"

new Intl.NumberFormat('en-US', {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3
}).format(0.001234);
// "0.00123"

تحسب الأرقام المعنوية جميع الأرقام باستثناء الأصفار البادئة. يقوم المثال الأول بالتقريب إلى ثلاثة أرقام، مما ينتج 1230. يحتفظ المثال الثاني بثلاثة أرقام بعد الأصفار البادئة، مما ينتج 0.00123.

تتجاوز خيارات الأرقام المعنوية خيارات أرقام الكسور عند تحديد كليهما.

اختيار استراتيجية التقريب باستخدام أوضاع التقريب

يحدد خيار roundingMode كيفية تقريب الأرقام عند الحاجة إلى الاقتطاع.

const value = 1.5;

new Intl.NumberFormat('en-US', {
  maximumFractionDigits: 0,
  roundingMode: 'halfExpand'
}).format(value);
// "2"

new Intl.NumberFormat('en-US', {
  maximumFractionDigits: 0,
  roundingMode: 'halfTrunc'
}).format(value);
// "1"

وضع halfExpand هو الوضع الافتراضي ويقرب 0.5 بعيدًا عن الصفر، وهي استراتيجية تقريب شائعة تُدرس في المدارس. يقرب وضع halfTrunc 0.5 نحو الصفر.

تشمل الأوضاع الأخرى:

• ceil: التقريب دائمًا نحو ما لا نهاية موجبة
• floor: التقريب دائمًا نحو ما لا نهاية سالبة
• expand: التقريب دائمًا بعيدًا عن الصفر
• trunc: التقريب دائمًا نحو الصفر
• halfCeil: تقريب 0.5 نحو ما لا نهاية موجبة
• halfFloor: تقريب 0.5 نحو ما لا نهاية سالبة
• halfEven: تقريب 0.5 نحو أقرب رقم زوجي

const prices = [1.5, 2.5, 3.5];

prices.map(price =>
  new Intl.NumberFormat('en-US', {
    maximumFractionDigits: 0,
    roundingMode: 'halfEven'
  }).format(price)
);
// ["2", "2", "4"]

وضع halfEven، المعروف أيضًا باسم تقريب المصرفيين، يقلل من تحيز التقريب في الحسابات المتكررة. عند تقريب 0.5، يختار أقرب رقم زوجي. هذا ينتج 2 لكل من 1.5 و2.5، ولكن 4 لـ 3.5.

تستخدم التطبيقات المالية ceil لتقريب الرسوم للأعلى وfloor لتقريب المبالغ المستردة للأسفل. تستخدم التطبيقات الإحصائية halfEven لتقليل أخطاء التقريب التراكمية.

التحكم في فواصل الآلاف باستخدام خيارات التجميع

يتحكم خيار useGrouping في ظهور فواصل الآلاف.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(123456);
// "123,456"

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(123456);
// "123456"

القيمة true هي الافتراضية. القيمة false تزيل جميع الفواصل. توفر القيم النصية تحكمًا أدق.

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

القيمة always تستخدم الفواصل في جميع الحالات. القيمة min2 تحذف الفواصل للأرقام المكونة من أربعة أرقام. القيمة auto تتبع تفضيلات اللغة المحلية، والتي عادة ما تطابق سلوك min2.

تستخدم الترميز المضغوط min2 افتراضيًا لأن الأرقام المضغوطة نادرًا ما تحتاج إلى فواصل داخلية.

إظهار الإشارات بشكل صريح باستخدام خيارات عرض الإشارة

يتحكم خيار signDisplay في متى تظهر إشارات الموجب والسالب.

new Intl.NumberFormat('en-US', {
  signDisplay: 'auto'
}).format(100);
// "100"

new Intl.NumberFormat('en-US', {
  signDisplay: 'always'
}).format(100);
// "+100"

القيمة auto هي الافتراضية وتظهر علامات الطرح للأرقام السالبة ولكن ليس علامات الزائد للأرقام الموجبة. القيمة always تظهر كليهما.

new Intl.NumberFormat('en-US', {
  signDisplay: 'exceptZero'
}).format(0);
// "0"

new Intl.NumberFormat('en-US', {
  signDisplay: 'always'
}).format(0);
// "+0"

القيمة exceptZero تحذف الإشارات للقيم الصفرية حتى مع سلوك always. هذا يمنع الارتباك بين عرض +0 و -0.

new Intl.NumberFormat('en-US', {
  signDisplay: 'never'
}).format(-100);
// "100"

القيمة never تزيل الإشارات تمامًا، وتظهر فقط القيمة المطلقة.

تستخدم التطبيقات المالية always لإبراز المكاسب بعلامات الزائد. تستخدم شاشات درجة الحرارة exceptZero لتجنب إظهار +0° أو -0°.

تقسيم المخرجات المنسقة إلى أجزاء

تُرجع طريقة formatToParts() مصفوفة من الكائنات تمثل كل مكون من السلسلة المنسقة.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).formatToParts(1234.56);

هذا يُرجع:

[
  { type: 'currency', value: '$' },
  { type: 'integer', value: '1' },
  { type: 'group', value: ',' },
  { type: 'integer', value: '234' },
  { type: 'decimal', value: '.' },
  { type: 'fraction', value: '56' }
]

كل كائن يحتوي على type يُحدد المكون وvalue يحتوي على السلسلة النصية. يمكن أن يكون type هو currency أو integer أو group أو decimal أو fraction أو literal أو minusSign أو plusSign أو percentSign أو غيرها.

هذا يُمكّن من تخصيص تنسيق المكونات الفردية.

const parts = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).formatToParts(1234.56);

const formatted = parts.map(part => {
  if (part.type === 'currency') {
    return `<span class="currency">${part.value}</span>`;
  }
  if (part.type === 'integer') {
    return `<span class="integer">${part.value}</span>`;
  }
  return part.value;
}).join('');

// <span class="currency">$</span><span class="integer">1</span>,<span class="integer">234</span>.56

هذا ينتج HTML مع مكونات منسقة. نفس النهج يعمل لتطبيق ألوان مختلفة على المبالغ السالبة، أو تكبير رموز العملات، أو تحريك الأرقام الفردية.

تنسيق نطاقات الأرقام

تقوم طريقة formatRange() بتنسيق رقمين كنطاق.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).formatRange(100, 200);
// "$100.00 – $200.00"

يستخدم المنسق فاصل نطاق خاص باللغة المحلية (شرطة في اللغة الإنجليزية) ويتضمن رمزي العملة. إذا كانت القيم تنسق إلى نفس السلسلة، فإن المنسق يُرجع قيمة واحدة مع علامة التقريب.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).formatRange(1200, 1800);
// "~1K"

كل من 1200 و 1800 يتم تنسيقهما كـ 1K في التدوين المضغوط، لذا يُظهر المنسق تقريبًا 1K.

طريقة formatRangeToParts() تُرجع أجزاء النطاق.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).formatRangeToParts(100, 200);

هذا يُرجع:

[
  { type: 'currency', value: '$', source: 'startRange' },
  { type: 'integer', value: '100', source: 'startRange' },
  { type: 'decimal', value: '.', source: 'startRange' },
  { type: 'fraction', value: '00', source: 'startRange' },
  { type: 'literal', value: ' – ', source: 'shared' },
  { type: 'currency', value: '$', source: 'endRange' },
  { type: 'integer', value: '200', source: 'endRange' },
  { type: 'decimal', value: '.', source: 'endRange' },
  { type: 'fraction', value: '00', source: 'endRange' }
]

خاصية source تُحدد ما إذا كان الجزء يأتي من القيمة البدائية، أو القيمة النهائية، أو فاصل النطاق.

تستخدم نطاقات الأسعار، ونطاقات التواريخ، ونطاقات القياسات هذه الطريقة للتنسيق المناسب الحساس للغة المحلية.

فحص الخيارات المُحلّة

تُرجع طريقة resolvedOptions() كائنًا يعرض الخيارات الفعلية المستخدمة بواسطة المنسّق.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

formatter.resolvedOptions();

هذا يُرجع:

{
  locale: 'en-US',
  numberingSystem: 'latn',
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol',
  currencySign: 'standard',
  minimumIntegerDigits: 1,
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  useGrouping: 'auto',
  notation: 'standard',
  signDisplay: 'auto',
  roundingMode: 'halfExpand'
}

يتضمن الكائن الخيارات المحددة صراحةً والقيم الافتراضية. قد تختلف locale عن اللغة المطلوبة إذا قام النظام بالحل إلى لغة مختلفة ولكنها متوافقة. يوضح numberingSystem أي أحرف رقمية يستخدمها المنسّق.

تساعد هذه الطريقة في تصحيح التنسيق غير المتوقع من خلال الكشف عن جميع الإعدادات النشطة.

إعادة استخدام المنسّقات لأداء أفضل

يتضمن إنشاء نسخة من NumberFormat تحميل بيانات اللغة ومعالجة الخيارات. أعد استخدام النسخ عند تنسيق قيم متعددة بنفس الإعدادات.

// غير فعّال: ينشئ منسّقًا جديدًا لكل قيمة
prices.map(price =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(price)
);

// فعّال: ينشئ المنسّق مرة واحدة
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

prices.map(price => formatter.format(price));

النهج الثاني أسرع بشكل ملحوظ عند تنسيق العديد من القيم. قم بإنشاء المنسّقات خارج الحلقات ووظائف عرض المكونات.

تقوم محركات JavaScript الحديثة بتخزين نسخ NumberFormat داخليًا، لكن إعادة الاستخدام الصريحة توفر أداءً أفضل وكودًا أوضح.

التحقق من دعم المتصفح

تدعم جميع المتصفحات الحديثة واجهة برمجة التطبيقات Intl.NumberFormat. دعمت Chrome وFirefox وSafari وEdge واجهة البرمجة الأساسية منذ عام 2016. اكتسبت الميزات المتقدمة مثل formatRange() وformatRangeToParts() وخيارات roundingMode الموسعة دعمًا مؤخرًا ولكنها متاحة الآن في إصدارات المتصفح الحالية.

تحقق من الدعم باستخدام:

if (typeof Intl !== 'undefined' && Intl.NumberFormat) {
  // NumberFormat مدعوم
  const formatter = new Intl.NumberFormat('en-US');
}

تحقق من ميزات محددة:

const formatter = new Intl.NumberFormat('en-US');

if (typeof formatter.formatRange === 'function') {
  // formatRange مدعومة
}

يمكن للتطبيقات التي تتطلب دعمًا للمتصفحات القديمة استخدام polyfills مثل @formatjs/intl-numberformat، ولكن يمكن لمعظم التطبيقات الحديثة استخدام واجهة البرمجة الأصلية دون الحاجة إلى بدائل.

متى تستخدم NumberFormat

استخدم Intl.NumberFormat لـ:

• عرض الأرقام للمستخدمين في أي سياق واجهة مستخدم
• تنسيق مبالغ العملات في تطبيقات التجارة الإلكترونية
• عرض النسب المئوية في لوحات تحليلات البيانات
• عرض عدد المتابعين، وعدد المشاهدات، وغيرها من مقاييس التواصل الاجتماعي
• تنسيق القياسات والقيم العلمية
• بناء تطبيقات دولية تدعم لغات متعددة

لا تستخدم Intl.NumberFormat لـ:

• العمليات الحسابية الداخلية أو معالجة البيانات
• تخزين القيم في قواعد البيانات
• تسلسل البيانات للواجهات البرمجية
• تحليل مدخلات المستخدم وإرجاعها إلى أرقام

NumberFormat هي أداة لطبقة العرض. احتفظ بالقيم الرقمية الخام في العمليات الحسابية والتخزين، وطبق التنسيق فقط عند عرض القيم للمستخدمين.