如何显示完整的货币名称而不是符号？
使用 currencyDisplay 选项，将“美元”显示为“US dollars”而不是“$”
简介
货币符号在国际化应用中容易引起歧义。美元符号 $ 既可以表示美元，也可以表示加拿大元、澳大利亚元以及十几个其他国家的货币。用户仅凭符号无法判断具体是哪种货币。
完整的货币名称可以消除这种困惑。与其显示 $1,234.56，不如直接显示 1,234.56 US dollars。这样货币类型一目了然，用户能够准确理解所见内容。
JavaScript 提供了两种方式来显示完整的货币名称。你可以通过 Intl.NumberFormat 格式化带有名称的货币金额，或者使用 Intl.DisplayNames 获取独立的货币名称。
使用完整名称格式化货币金额
在 Intl.NumberFormat 中，currencyDisplay 选项控制货币在格式化金额时的显示方式。将其设置为 "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。
在空间有限且货币上下文明确时，使用货币符号以节省空间。当需要清晰和无障碍时，优先使用完整名称。