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