如何以符号、代码或名称显示货币

简介

在显示价格或金额时，需要决定如何呈现货币。产品价格可以显示为 $25、USD 25 或 25 US dollars。每种格式适用于不同场景，满足不同需求。

符号格式适合日常购物界面，用户通常知道所用货币。代码格式适用于包含多种货币的国际业务文档，可消除歧义。名称格式则为无障碍工具和教育内容提供最大清晰度。

JavaScript 在 Intl.NumberFormat 中提供 currencyDisplay 选项，用于控制货币的显示方式。本教程将介绍四种可用格式、它们在不同语言环境下的差异，以及如何根据实际需求选择合适的格式。

了解 currencyDisplay 选项

currencyDisplay 选项用于控制格式化金额时货币单位的显示方式。它不会改变数值，只影响货币的呈现形式。

可用的四种取值为：

symbol 显示本地化货币符号，如 $ 或 €
narrowSymbol 显示紧凑型符号，如 $，而不是 US$
code 显示 ISO 货币代码，如 USD 或 EUR
name 显示完整货币名称，如 US dollars 或 euros

每种格式都会以不同的视觉方式展示相同的金额。选择哪种格式，取决于界面需求、可用空间和用户期望。

使用符号格式进行日常显示

symbol 格式是默认的 currencyDisplay 值。它会显示用户所在地区常见的本地化货币符号。

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

console.log(formatter.format(25));
// Output: "$25.00"

这种格式为用户提供最熟悉的货币表示方式。美国用户期望看到美元符号，欧洲用户期望看到欧元符号，英国用户则期望看到英镑符号。

该符号会根据地区和货币自动适配。例如，将美元格式化为德国地区时，格式化器会使用带有国家标识的本地化符号。

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

console.log(usFormatter.format(25));
// Output: "$25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 $"

请注意，德国格式化器会将美元符号放在金额后面，并使用逗号作为小数分隔符。这些地区特定的约定会自动应用。

当欧元在不同地区格式化时，虽然都会显示欧元符号，但具体的格式规则会有所不同。

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

console.log(usFormatter.format(25));
// Output: "€25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 €"

当用户只涉及单一货币时，符号格式非常适用。例如，美国电商网站显示美元价格可以直接使用美元符号，欧洲网站显示欧元价格可以使用欧元符号。

但当多种货币共用相似符号时，符号格式可能会造成歧义。例如，加拿大元、澳大利亚元和美元都使用美元符号。在这些情况下，某些地区会添加国家前缀以区分。

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

console.log(usFormatter.format(25));
// Output: "CA$25.00"

格式化器会添加 CA$，以便在美国地区格式化时区分加拿大元和美元。

使用 narrowSymbol 格式进行紧凑显示

narrowSymbol 格式会显示不带国家前缀的货币符号。这种更紧凑的表示方式适用于空间受限的界面。

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

console.log(symbolFormatter.format(25));
// Output: "$25.00"

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

console.log(narrowFormatter.format(25));
// Output: "$25.00"

对于美国本地的美元，两种格式的输出相同，因为不需要国家前缀。只有在格式化可能包含国家标识的其他货币时，差异才会显现。

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

console.log(symbolFormatter.format(25));
// Output: "CA$25.00"

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

console.log(narrowFormatter.format(25));
// Output: "$25.00"

窄符号格式会去掉 CA 前缀，仅显示美元符号。这样可以节省空间，但会丢失区分加元和美元的能力。

当界面其他部分已明确货币类型且空间有限时，建议使用 narrowSymbol。移动应用、紧凑型仪表盘和数据表格适合采用更短的格式。但请确保用户能通过其他方式（如货币选择器或标题标签）识别当前货币。

窄符号格式也会影响不同本地化环境下的其他货币显示。

const narrowFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "25,00 €"

每个本地化环境会根据本地习惯定义自己的窄符号格式。

使用代码格式实现明确的货币显示

code 格式会显示 ISO 4217 货币代码，而不是符号。该三字母代码可唯一标识每种货币，避免歧义。

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

console.log(formatter.format(25));
// Output: "USD 25.00"

代码会替代符号显示，使金额所代表的货币一目了然。该格式在所有本地化环境下都能保持一致的缩写方式。

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

console.log(usFormatter.format(25));
// Output: "EUR 25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(deFormatter.format(25));
// Output: "25,00 EUR"

EUR 代码在两种格式中都会出现，但其位置和数字格式会遵循本地化规范。将通用货币代码与本地数字格式结合，使代码格式在国际场景下极具价值。

代码格式可消除共享符号的货币之间的混淆。

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

console.log(usdFormatter.format(25));
// Output: "USD 25.00"

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

console.log(cadFormatter.format(25));
// Output: "CAD 25.00"

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

console.log(audFormatter.format(25));
// Output: "AUD 25.00"

每种美元变体都有独立的代码。用户可以立即区分美元、加拿大元和澳大利亚元。

在财务报告、国际发票、会计系统以及任何对货币清晰度要求极高的场景中，建议使用代码格式。在 API 和数据导出等符号可能导致编码问题的场景下，这种格式同样适用。

这种做法的权衡是降低了熟悉度。大多数用户认识 $，但可能无法立即理解 CAD 代表什么。只有在受众能够理解代码，或对精确性要求高于熟悉度时，才建议使用代码。

使用名称格式以获得最大清晰度

name 格式会以本地语言显示完整的货币名称。这可以让金额所代表的货币类型一目了然。

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

console.log(formatter.format(25));
// Output: "25.00 US dollars"

货币名称会完整拼写，完全消除金额含义的歧义。该格式对无障碍场景尤其有价值。屏幕阅读器可以清晰朗读货币名称，而符号可能会被不一致地播报。

货币名称会根据本地化自动适配，显示为相应语言。

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

console.log(enFormatter.format(25));
// Output: "25.00 euros"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(25));
// Output: "25,00 Euro"

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(frFormatter.format(25));
// Output: "25,00 euros"

英文显示 euros，德文显示 Euro，法文显示 euros。API 会自动处理这些语言差异，包括适当的复数形式。

不同货币会在每个本地化环境下显示为相应语言的名称。

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

console.log(enFormatter.format(1000));
// Output: "1,000 Japanese yen"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(1000));
// Output: "1.000 Japanische Yen"

英文显示 Japanese yen，德文显示 Japanische Yen。这样的本地化有助于用户用自己的语言理解不熟悉的货币。

当清晰度比空间更重要时，建议使用名称格式。教育内容、无障碍界面以及用户可能遇到不熟悉货币的场景，拼写全名都更有利。该格式也适用于语音界面，因为货币名称比符号更易于识别。

权衡点在于空间。货币名称通常比符号或代码要长得多。在紧凑的移动端界面中，显示“25.00 US dollars”可能会占用过多空间，而“$25.00”则完全没问题。

选择合适的显示格式

根据空间限制、用户熟悉度和歧义风险，选择合适的 currencyDisplay 格式。

在用户只使用单一货币的日常界面中，建议使用 symbol。电商网站、价格页面和消费类应用适合用符号，用户能快速识别，且占用空间极小。

当空间极为有限且货币上下文明确时，建议使用 narrowSymbol。移动应用、紧凑表格和仪表盘小部件都适合这种简短格式。请确保界面其他地方已标明货币类型。

需要明确区分多种货币且避免歧义时，建议使用 code。金融应用、货币转换器、国际商务工具和会计系统都需要代码带来的精确性。在技术场景下，代码格式也能避免符号带来的问题。

当需要最大清晰度时，建议使用 name。注重无障碍的界面、教育内容、语音交互以及涉及不常见货币的场景都适合用全称。该格式也有助于用户了解国际货币。

你可以让用户在多种格式间切换，从而提供同一数据的不同视图。例如，金融仪表盘默认显示符号，用户可切换为代码以便详细分析。货币转换器界面可用代码，提示信息则显示名称。

请考虑用户的专业水平。金融专业人士熟悉货币代码，普通消费者更习惯符号。国际用户可能需要代码来区分货币。无障碍需求用户则更适合使用名称。

结合 currencyDisplay 与其他选项使用

currencyDisplay 选项可与所有其他数字格式化选项配合使用。你可以在选择货币格式的同时，控制小数位数、四舍五入和符号显示。

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

console.log(formatter.format(25.5));
// Output: "USD 25.50"

代码格式会按照指定的小数位数设置显示。你可以将 currencyDisplay 与 signDisplay、notation 或自定义的四舍五入规则等其他选项结合使用。

不同的显示格式可与会计记账法配合使用。

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

console.log(formatter.format(-25));
// Output: "(25.00 US dollars)"

会计格式的括号可与货币全称拼写结合显示。

需要记住的要点

currencyDisplay 选项用于控制货币单位在格式化金额中的显示方式。日常常用显示可用 symbol，空间受限界面可用 narrowSymbol，国际场景下可用 code，而 name 则适用于需要最大清晰度和可访问性的场景。

请根据可用空间、用户熟悉程度以及是否存在货币歧义等因素选择合适的格式。你可以将 currencyDisplay 与其他格式化选项结合，满足应用的具体需求。