显示货币名称和符号

问题

一个应用程序需要引用一种货币，例如“USD”。仅仅显示这个代码会显得晦涩难懂。显示全名“US Dollar”会更好，但这个名称本身需要被翻译（例如“美元”、“dólar estadounidense”、“Dollar américain”）。此外，正确的符号（$、US$、CA$）在没有上下文的情况下可能会引起歧义。

解决方案

使用 react-intl 的 FormattedNumber 组件，并结合 currencyDisplay 选项。这允许您以符号（默认）、完整的本地化名称或 ISO 代码的形式显示货币，同时确保根据当前语言环境正确格式化。

步骤

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

FormattedNumber 组件必须在客户端组件中使用。创建一个文件 app/components/LocalizedCurrency.tsx，将 currencyDisplay 选项作为一个属性传递，以便于复用。

// 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 属性，直接控制 currencyDisplay 选项。

2. 在页面中使用该组件

现在，您可以在页面中使用此组件，通过更改 displayAs 属性来显示不同的货币格式。

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

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

  return (
    <div>
      <h1>货币显示选项</h1>
      <p>
        默认（符号）：
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        全名（名称）：
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO 代码（代码）：
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

当访问 /en 时，您将看到“1,250.75 US dollars”作为“name”选项的显示。当访问 /es 时，同一行将显示为“1.250,75 dólares estadounidenses”，表明货币名称本身已被正确翻译和格式化。