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

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

مقدمة

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

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

توفر JavaScript طريقتين لعرض أسماء العملات الكاملة. يمكنك تنسيق مبالغ العملات مع الأسماء باستخدام 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));
// Output: 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));
// Output: $100.00

code

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

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

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

name

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

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

console.log(formatter.format(100));
// Output: 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;

// English
const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(enFormatter.format(usdollar));
// Output: 1,234.56 US dollars

// French
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

// Japanese
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(). تُرجع الطريقة اسم العملة المترجم.

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

// Get currency names in French
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.

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