كيف تعرض أسماء العملات الكاملة بدلاً من الرموز؟

استخدم خيار currencyDisplay لعرض 'دولار أمريكي' بدلاً من '$'

مقدمة

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

تزيل أسماء العملات الكاملة هذا الالتباس. بدلاً من عرض $1,234.56، يمكنك عرض 1,234.56 دولار أمريكي. تصبح العملة واضحة ويفهم المستخدمون بالضبط ما يرونه.

توفر جافا سكريبت نهجين لعرض أسماء العملات الكاملة. يمكنك تنسيق مبالغ العملات بالأسماء باستخدام Intl.NumberFormat، أو الحصول على أسماء العملات المستقلة باستخدام Intl.DisplayNames.

تنسيق مبالغ العملات بالأسماء الكاملة

يتحكم خيار currencyDisplay في Intl.NumberFormat في كيفية ظهور العملات في المبالغ المنسقة. قم بتعيينه إلى "name" لعرض اسم العملة الكامل.

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

console.log(formatter.format(1234.56));
// الناتج: 1,234.56 US dollars

يتضمن المنسق اسم العملة الكامل بعد المبلغ. يتبع الاسم القواعد النحوية للغة المحلية التي تحددها.

قيم خيار currencyDisplay

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

symbol (الافتراضي)

يعرض رمز العملة المحلي.

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

console.log(formatter.format(100));
// الناتج: $100.00

code

يعرض رمز العملة المكون من ثلاثة أحرف وفقًا لمعيار ISO 4217.

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

console.log(formatter.format(100));
// الناتج: USD 100.00

name

يعرض اسم العملة المحلي الكامل.

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

console.log(formatter.format(100));
// الناتج: 100.00 US dollars

narrowSymbol

يعرض تنسيق رمز مختصر بدون تمييز للبلد.

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

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

خيار narrowSymbol ينتج $ بدلاً من US$ للدولار الأمريكي. استخدم هذا عندما يكون السياق يجعل العملة واضحة.

كيف تؤثر اللغة المحلية على أسماء العملات

اللغة المحلية التي تمررها إلى Intl.NumberFormat تحدد لغة وقواعد اسم العملة.

const usdollar = 1234.56;

// الإنجليزية
const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(enFormatter.format(usdollar));
// Output: 1,234.56 US dollars

// الفرنسية
const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(frFormatter.format(usdollar));
// Output: 1 234,56 dollars des États-Unis

// اليابانية
const jaFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(jaFormatter.format(usdollar));
// Output: 1,234.56 米ドル

كل لغة محلية توفر ترجمتها الخاصة لاسم العملة. يتغير أيضًا تنسيق الرقم وفقًا لاتفاقيات اللغة المحلية.

الحصول على أسماء العملات بدون مبالغ

استخدم Intl.DisplayNames عندما تحتاج إلى اسم العملة وحده دون تنسيق مبلغ.

const currencyNames = new Intl.DisplayNames('en-US', {
  type: 'currency'
});

console.log(currencyNames.of('USD'));
// Output: US Dollar

console.log(currencyNames.of('EUR'));
// Output: Euro

console.log(currencyNames.of('JPY'));
// Output: Japanese Yen

مرر رموز العملات وفقًا لمعيار ISO 4217 إلى طريقة of(). تعيد الطريقة اسم العملة المترجم محليًا.

يمكنك الحصول على أسماء العملات بأي لغة محلية.

// الحصول على أسماء العملات باللغة الفرنسية
const frCurrencyNames = new Intl.DisplayNames('fr-FR', {
  type: 'currency'
});

console.log(frCurrencyNames.of('USD'));
// Output: dollar des États-Unis

console.log(frCurrencyNames.of('EUR'));
// Output: euro

متى تستخدم أسماء العملات الكاملة

استخدم أسماء العملات الكاملة في هذه الحالات.

التقارير والبيانات المالية

اعرض الأسماء الكاملة في المستندات المالية حيث تكون الدقة مهمة.

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

console.log(`Total revenue: ${formatter.format(1500000)}`);
// Output: Total revenue: 1,500,000.00 US dollars

تطبيقات متعددة العملات

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

const currencies = [
  { code: 'USD', amount: 1000 },
  { code: 'EUR', amount: 850 },
  { code: 'GBP', amount: 750 }
];

currencies.forEach(item => {
  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: item.code,
    currencyDisplay: 'name'
  });
  console.log(formatter.format(item.amount));
});
// Output:
// 1,000.00 US dollars
// 850.00 euros
// 750.00 British pounds

واجهات اختيار العملة

اعرض أسماء العملات في القوائم المنسدلة أو قوائم الاختيار.

const currencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD'];
const displayNames = new Intl.DisplayNames('en-US', {
  type: 'currency'
});

const options = currencies.map(code => ({
  value: code,
  label: displayNames.of(code)
}));

console.log(options);
// Output:
// [
//   { value: 'USD', label: 'US Dollar' },
//   { value: 'EUR', label: 'Euro' },
//   { value: 'GBP', label: 'British Pound' },
//   { value: 'JPY', label: 'Japanese Yen' },
//   { value: 'CAD', label: 'Canadian Dollar' }
// ]

إمكانية الوصول

تعلن قارئات الشاشة أسماء العملات الكاملة بشكل أوضح من الرموز. يفهم المستخدمون ذوو الإعاقات البصرية 100.00 US dollars بشكل أفضل من $100.00.

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