مدونة جوارا: تطبيق عملي: بناء دالة لتنسيق العملات بمرونة في JavaScript

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

بعد أن تعرفنا نظرياً على قوة Intl.NumberFormat في تنسيق العملات، حان الوقت لنضع أيدينا في الكود ونبني دالة عملية ومرنة يمكننا استخدامها في أي مشروع JavaScript.

تحدي تنسيق العملات يدوياً

قبل استخدام أدوات مثل Intl.NumberFormat، كان المطورون يواجهون صعوبة في تنسيق العملات يدوياً. كان عليهم التعامل مع:

إضافة رمز العملة (هل هو قبل الرقم أم بعده؟).
تحديد عدد المنازل العشرية.
وضع فواصل الآلاف والعلامات العشرية بشكل صحيح حسب اللغة.
التعامل مع العملات المختلفة.

كان هذا يتطلب الكثير من الأكواد الشرطية المعقدة وغير المرنة. لحسن الحظ، الكود الذي سنعمل عليه اليوم يحل هذه المشكلة ببراعة!

بناء دالة `formatToCurrency`

لنلقِ نظرة على الدالة التي ستمكننا من تنسيق أي مبلغ إلى عملة محددة بمرونة:


// دالة لتحويل أي رقم عادي إلى تنسيق عملة محلية
function formatToCurrency(amount, currencyCode = 'SAR', locale = 'ar-SA') {
  // استخدام واجهة Intl الحديثة لتنسيق الأرقام
  const formatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currencyCode,
  });
  
  return formatter.format(amount);
}

شرح تفصيلي للدالة:

تعريف الدالة والمعاملات الافتراضية:
```
function formatToCurrency(amount, currencyCode = 'SAR', locale = 'ar-SA') {
```
تأخذ الدالة ثلاثة معاملات:
- amount: المبلغ الرقمي الذي نريد تنسيقه.
- currencyCode: رمز العملة (مثل 'SAR' أو 'USD'). لاحظ أن القيمة الافتراضية هي 'SAR' (الريال السعودي)، مما يعني أنك إذا لم تمرر هذا المعامل، فستقوم الدالة بتنسيق المبلغ كـ 'SAR'.
- locale: اللغة والمنطقة (مثل 'ar-SA' أو 'en-US'). القيمة الافتراضية هي 'ar-SA' (العربية السعودية).
استخدام المعاملات الافتراضية (Default Parameters) يجعل الدالة سهلة الاستخدام دون الحاجة لتحديد كل شيء في كل مرة.
إنشاء منسق الأرقام (Formatter):
```
  const formatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currencyCode,
  });
```
هنا نقوم بإنشاء كائن جديد من Intl.NumberFormat. نمرر له locale التي تحدد قواعد التنسيق الإقليمية، وكائن خيارات يحدد أن النمط هو 'currency' وأن العملة هي currencyCode التي تم تمريرها للدالة.
تنسيق المبلغ وإرجاع النتيجة:
```
  return formatter.format(amount);
```
أخيراً، نستخدم الدالة format() الخاصة بكائن formatter لتنسيق المبلغ amount الذي تم تمريره. هذه الدالة تعيد سلسلة نصية (string) تحتوي على المبلغ المنسق بالكامل، بما في ذلك رمز العملة، فواصل الآلاف، والعلامات العشرية المناسبة.

تجربة الدالة في العمل

الآن لنرى كيف تعمل هذه الدالة مع بعض الأمثلة:


// تجربة الدالة مع الريال السعودي والدولار الأمريكي
const price1 = formatToCurrency(1500.5);
const price2 = formatToCurrency(499.99, 'USD', 'en-US');

console.log(`السعر بالريال: ${price1}`);
console.log(`السعر بالدولار: ${price2}`);

شرح الأمثلة:

المثال الأول (price1):
```
const price1 = formatToCurrency(1500.5);
```
هنا قمنا بتمرير المبلغ 1500.5 فقط. بما أننا لم نحدد currencyCode أو locale، فسيتم استخدام القيم الافتراضية: 'SAR' و 'ar-SA'.

الناتج المتوقع: ١٬٥٠٠٫٥٠ ر.س.‏ (أو ما يعادله حسب بيئة التشغيل، مع ملاحظة أن الأرقام قد تظهر هندية في بعض البيئات العربية).
المثال الثاني (price2):
```
const price2 = formatToCurrency(499.99, 'USD', 'en-US');
```
هنا قمنا بتمرير المبلغ 499.99، وحددنا العملة 'USD' واللغة 'en-US'.

الناتج المتوقع: $499.99.

الكود كاملاً:


// دالة لتحويل أي رقم عادي إلى تنسيق عملة محلية
function formatToCurrency(amount, currencyCode = 'SAR', locale = 'ar-SA') {
  // استخدام واجهة Intl الحديثة لتنسيق الأرقام
  const formatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currencyCode,
  });
  
  return formatter.format(amount);
}

// تجربة الدالة مع الريال السعودي والدولار الأمريكي
const price1 = formatToCurrency(1500.5);
const price2 = formatToCurrency(499.99, 'USD', 'en-US');

console.log(`السعر بالريال: ${price1}`);
console.log(`السعر بالدولار: ${price2}`);

الخلاصة:

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

تطبيق عملي: بناء دالة لتنسيق العملات بمرونة في JavaScript