كيفية تنسيق العملة برموز خاصة بالمنطقة

مقدمة

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

تنسق البلدان المختلفة مبالغ العملات بشكل مختلف. يكتب الأمريكيون $1,234.56 مع الرمز قبل المبلغ. يكتب الألمان 1.234,56 € مع الرمز بعد المبلغ وفواصل مختلفة. يستخدم التنسيق الفرنسي 1 234,56 € مع مسافات بين مجموعات الأرقام. عندما تقوم بترميز تنسيق العملة بشكل ثابت مثل "$" + amount، فإنك تفترض أن جميع المستخدمين يتبعون نفس الاصطلاحات.

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

تختلف رموز العملات حسب المنطقة

تستخدم العملات المختلفة رموزاً مختلفة. يستخدم الدولار الأمريكي $، ويستخدم اليورو €، ويستخدم الجنيه الإسترليني £، ويستخدم الين الياباني ¥، ويستخدم الفرنك السويسري Fr. أو CHF حسب السياق. يساعد كل رمز المستخدمين على تحديد العملة التي يشاهدونها بسرعة.

تمثل بعض الرموز عملات متعددة. تُستخدم علامة الدولار $ للدولار الأمريكي والدولار الكندي والدولار الأسترالي والبيزو المكسيكي والعديد من العملات الأخرى. بدون سياق إضافي، لا يمكن للمستخدمين معرفة أي عملة دولار يمثلها السعر.

يختلف موضع رمز العملة حسب المنطقة. تضع البلدان الناطقة بالإنجليزية الرمز عادةً قبل المبلغ مثل $100. تضع العديد من الدول الأوروبية الرمز بعد المبلغ مثل 100 €. تتضمن بعض البلدان مسافة بين المبلغ والرمز بينما لا تفعل ذلك دول أخرى.

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

تنسيق العملة باستخدام Intl.NumberFormat

ينشئ المُنشئ Intl.NumberFormat مُنسِّق عملة عند تمرير style: 'currency' في الخيارات. يجب عليك أيضاً تحديد العملة المراد تنسيقها باستخدام خيار currency مع رمز عملة ISO 4217.

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

console.log(formatter.format(1234.56));
// Output: "$1,234.56"

ينشئ هذا مُنسِّقاً للإنجليزية الأمريكية يعرض المبالغ بالدولار الأمريكي. تحوّل الدالة format() الرقم إلى سلسلة نصية تحتوي على رمز الدولار وفواصل الآلاف ومنزلتين عشريتين.

يتطلب خيار currency رمز ISO 4217 المكون من ثلاثة أحرف. تشمل الرموز الشائعة USD للدولار الأمريكي، وEUR لليورو، وGBP للجنيه الإسترليني، وJPY للين الياباني، وCAD للدولار الكندي.

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

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

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

console.log(usdFormatter.format(100));
// Output: "$100.00"

console.log(eurFormatter.format(100));
// Output: "€100.00"

console.log(gbpFormatter.format(100));
// Output: "£100.00"

يُدرج كل مُنسِّق تلقائياً رمز العملة المناسب. لا تحتاج إلى معرفة الرمز الذي يتوافق مع كل رمز عملة.

تحدد الإعدادات المحلية موضع الرمز والتنسيق

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

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

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
});

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR'
});

console.log(usFormatter.format(1234.56));
// Output: "€1,234.56"

console.log(deFormatter.format(1234.56));
// Output: "1.234,56 €"

console.log(frFormatter.format(1234.56));
// Output: "1 234,56 €"

تعرض جميع المُنسِّقات الثلاثة اليورو، لكن كل منها يستخدم اصطلاحات مختلفة. يضع مُنسِّق الإنجليزية الأمريكية الرمز قبل المبلغ مع نقطة كفاصل عشري. يضع المُنسِّق الألماني الرمز بعد المبلغ مع مسافة، ويستخدم النقاط لفواصل الآلاف، ويستخدم الفاصلة كفاصل عشري. يستخدم المُنسِّق الفرنسي مسافات لفواصل الآلاف.

تتعامل واجهة برمجة التطبيقات Intl مع هذه الاختلافات تلقائيًا بناءً على اللغة المحلية التي تحددها. لا تحتاج إلى معرفة قواعد التنسيق لكل لغة محلية.

يتضمن تنسيق العملة الأماكن العشرية

تحدد أدوات تنسيق العملة تلقائيًا العدد المناسب من الأماكن العشرية بناءً على العملة. تستخدم معظم العملات مكانين عشريين للسنتات أو الكسور المعادلة.

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

console.log(formatter.format(100));
// Output: "$100.00"

console.log(formatter.format(100.5));
// Output: "$100.50"

console.log(formatter.format(100.567));
// Output: "$100.57"

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

بعض العملات لديها صفر أماكن عشرية. الين الياباني ليس لديه وحدة كسرية، لذلك تُعرض المبالغ بدون أماكن عشرية.

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

console.log(formatter.format(1234.56));
// Output: "¥1,235"

يقرب المنسق إلى أقرب عدد صحيح لأن مبالغ الين لا تتضمن وحدات كسرية. تعرف واجهة برمجة التطبيقات Intl الدقة العشرية لكل عملة وتطبقها تلقائيًا.

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

بدلاً من تحديد لغة محلية معينة بشكل ثابت، يمكنك استخدام تفضيلات لغة متصفح المستخدم. تُرجع الخاصية navigator.language اللغة المحلية المفضلة للمستخدم.

const userLocale = navigator.language;

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

console.log(formatter.format(1234.56));
// Output varies by user's locale
// For en-US: "$1,234.56"
// For de-DE: "1.234,56 $"
// For fr-FR: "1 234,56 $US"

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

يمكنك أيضًا تمرير مصفوفة navigator.languages بالكامل لتمكين سلوك الاحتياطي عندما يكون التفضيل الأعلى للمستخدم غير متاح.

const formatter = new Intl.NumberFormat(navigator.languages, {
  style: 'currency',
  currency: 'USD'
});

console.log(formatter.format(1234.56));

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

إعادة استخدام منسقات العملة

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

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

const prices = [19.99, 29.99, 49.99, 99.99];

prices.forEach(price => {
  console.log(formatter.format(price));
});
// Output:
// "$19.99"
// "$29.99"
// "$49.99"
// "$99.99"

هذا النمط أكثر كفاءة من إنشاء منسق جديد لكل سعر. يصبح الفرق في الأداء كبيراً عند تنسيق المصفوفات أو القوائم التي تحتوي على العديد من القيم.

عرض الأسعار في التطبيقات

يمكنك استخدام منسقات العملات في أي مكان تعرض فيه الأسعار للمستخدمين. يشمل ذلك قوائم المنتجات وعربات التسوق وصفحات الدفع والفواتير ولوحات المعلومات المالية.

const formatter = new Intl.NumberFormat(navigator.language, {
  style: 'currency',
  currency: 'USD'
});

const productPrice = 29.99;
const taxAmount = 2.40;
const totalPrice = productPrice + taxAmount;

document.getElementById('product-price').textContent = formatter.format(productPrice);
document.getElementById('tax-amount').textContent = formatter.format(taxAmount);
document.getElementById('total-price').textContent = formatter.format(totalPrice);

تعمل السلاسل النصية المنسقة مثل أي قيمة نصية أخرى. يمكنك إدراجها في محتوى النص أو السمات أو أي سياق تعرض فيه المعلومات للمستخدمين.

التعامل مع عملات متعددة

تحتاج التطبيقات التي تدعم عملات متعددة إلى إنشاء منسقات منفصلة لكل عملة. يحدد رمز العملة الرمز الذي يظهر، بينما يحدد اللوكال كيفية تنسيق المبلغ.

const locale = navigator.language;

const usdFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'USD'
});

const eurFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'EUR'
});

const gbpFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'GBP'
});

console.log(usdFormatter.format(100));
console.log(eurFormatter.format(100));
console.log(gbpFormatter.format(100));

يعرض كل منسق الرمز المناسب ويتبع اصطلاحات لوكال المستخدم لتلك العملة. يضمن ذلك أن تكون الأسعار دقيقة وقابلة للقراءة بغض النظر عن مجموعة العملة أو اللوكال المستخدمة.