كيف تعرض أسماء العملات الكاملة بدلاً من الرموز؟
استخدم خيار 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.
استخدم رموز العملات للعروض المدمجة حيث توجد قيود على المساحة ويكون السياق واضحًا للعملة. استخدم الأسماء الكاملة عندما تكون الوضوح وإمكانية الوصول ذات أولوية.