如何在 Next.js (Pages Router) v16 中显示货币信息

问题

应用程序经常需要显示货币信息，但不显示实际价格。例如，货币选择器可能列出可用货币，文档可能引用汇率，或者支付表单可能显示接受哪些货币。简单地显示 "USD" 对于非技术用户来说是晦涩难懂的，而硬编码 "US Dollar" 则需要手动翻译和维护。像 "$" 这样的货币符号具有歧义——同一个符号代表美国、加拿大和澳大利亚的美元。适当的表示方式取决于上下文和用户的语言。

解决方案

使用 react-intl 的格式化功能，以符合上下文的格式显示货币信息。对于完整的货币名称，使用 formatDisplayName 和货币类型，它会自动将 "US Dollar" 等名称本地化为用户的语言。对于符号，使用 Intl.NumberFormat 和 formatToParts 提取给定货币代码的本地化符号。对于 ISO 代码，直接显示代码。这种方法确保货币引用既清晰又正确本地化，无需手动翻译工作。

步骤

1. 创建一个提取货币符号的辅助函数

使用 Intl.NumberFormat 和 formatToParts 从格式化的数字中提取货币符号。

export function getCurrencySymbol(
  currencyCode: string,
  locale: string,
): string {
  const parts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: "narrowSymbol",
  }).formatToParts(0);

  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart ? currencyPart.value : currencyCode;
}

currencyDisplay 选项控制形式："symbol"、"narrowSymbol"、"code" 或 "name"。此辅助函数返回任何货币代码的本地化符号。

2. 创建一个货币显示组件

构建一个组件，根据显示模式以不同格式显示货币信息。

import { useIntl } from "react-intl";
import { useRouter } from "next/router";
import { getCurrencySymbol } from "../utils/getCurrencySymbol";

interface CurrencyDisplayProps {
  currencyCode: string;
  display: "symbol" | "name" | "code";
}

export default function CurrencyDisplay({
  currencyCode,
  display,
}: CurrencyDisplayProps) {
  const intl = useIntl();
  const router = useRouter();
  const locale = router.locale || "en";

  if (display === "symbol") {
    const symbol = getCurrencySymbol(currencyCode, locale);
    return <span>{symbol}</span>;
  }

  if (display === "name") {
    const name = intl.formatDisplayName(currencyCode, { type: "currency" });
    return <span>{name}</span>;
  }

  return <span>{currencyCode}</span>;
}

使用 formatDisplayName 方法和 type: 'currency' 返回本地化的货币名称。组件根据 display 属性调整其输出。

3. 在不同的上下文中使用组件

在需要显示货币信息但不涉及价格的地方应用货币显示组件。

import CurrencyDisplay from "../components/CurrencyDisplay";

export default function PaymentOptions() {
  const acceptedCurrencies = ["USD", "EUR", "GBP", "JPY"];

  return (
    <div>
      <h2>支持的货币</h2>
      <ul>
        {acceptedCurrencies.map((code) => (
          <li key={code}>
            <CurrencyDisplay currencyCode={code} display="name" />
            {" ("}
            <CurrencyDisplay currencyCode={code} display="symbol" />
            {")"}
          </li>
        ))}
      </ul>
    </div>
  );
}

这将渲染本地化的货币名称及其符号，例如在英文中显示为 "US Dollar ($)"，在法文中显示为 "Dollar américain ($)"，并根据用户的语言环境自动适配。