显示货币名称和符号

问题

应用程序需要引用一种货币，例如 “USD”。仅显示该代码会让用户感到困惑。显示完整名称 “US Dollar” 更好，但这个名称本身也需要被翻译（如 “美元”、“dólar estadounidense”、“Dollar américain”）。此外，正确的符号（$、US$、CA$）在没有上下文时也可能产生歧义。

解决方案

请使用 FormattedNumber 组件（来自 react-intl），并结合 currencyDisplay 选项。这样可以将货币以符号（默认）、本地化全名或 ISO 代码的形式显示，并且会根据当前语言环境正确格式化。

步骤

1. 创建用于货币显示的客户端组件

必须在客户端组件中使用 FormattedNumber 组件。创建一个 app/components/LocalizedCurrency.tsx 文件，并将 currencyDisplay 选项作为 prop 传入，以实现复用。

// app/components/LocalizedCurrency.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

该组件现在支持一个 displayAs prop，可直接控制 currencyDisplay 选项。

2. 在页面中使用该组件

现在可以在页面中使用该组件，通过更改 displayAs prop 来展示不同的货币格式。

// app/[lang]/page.tsx
import LocalizedCurrency from '@/app/components/LocalizedCurrency';

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>Currency Display Options</h1>
      <p>
        Default (symbol):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Full name (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO code (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

当访问 /en 时，'name' 选项会显示为 “1,250.75 美元”。访问 /es 时，同一行会显示为 “1.250,75 美元”，这表明货币名称已被正确翻译和格式化。