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

مقدمة

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

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

توفر جافا سكريبت واجهة برمجة التطبيقات 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));
// الناتج: "$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));
// الناتج: "$100.00"

console.log(eurFormatter.format(100));
// الناتج: "€100.00"

console.log(gbpFormatter.format(100));
// الناتج: "£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));
// الناتج: "€1,234.56"

console.log(deFormatter.format(1234.56));
// الناتج: "1.234,56 €"

console.log(frFormatter.format(1234.56));
// الناتج: "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));
// تختلف النتيجة حسب لغة المستخدم
// للغة en-US: "$1,234.56"
// للغة de-DE: "1.234,56 $"
// للغة 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));
});
// الناتج:
// "$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));

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