格式化数字 - Next.js i18n

问题

像 10000.5 这样的数字在德国写作 10.000,5，而在美国写作 10,000.5。使用某个地区的数字格式可能会让其他地区的用户感到困惑，因为他们可能会由于小数点和分组符号的不同而误解数值。

解决方案

使用 react-intl 提供的专用格式化组件，例如 FormattedNumber。该组件会自动从其提供者读取当前语言，并将 number 原始值格式化为使用正确的、特定于区域的十进制和分组分隔符的字符串。

步骤

1. 创建一个用于数字的客户端组件

与其他 react-intl 组件一样，FormattedNumber 必须在客户端组件中使用。

创建一个新组件 app/components/ProductInfo.tsx，用于显示格式化的数字。

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

import { FormattedNumber } from 'react-intl';

type Props = {
  reviewCount: number;
  averageRating: number;
};

export default function ProductInfo({ reviewCount, averageRating }: Props) {
  return (
    <div>
      <h3>产品详情</h3>
      <p>
        总评论数：
        {/* 基本数字格式化 */}
        <FormattedNumber value={reviewCount} />
      </p>
      <p>
        平均评分：
        {/* 带选项的格式化 */}
        <FormattedNumber
          value={averageRating}
          minimumFractionDigits={1}
          maximumFractionDigits={1}
        />
      </p>
    </div>
  );
}

2. 传递格式化选项

FormattedNumber 组件接受用于控制输出的选项：

value 是要格式化的 number。
minimumFractionDigits 和 maximumFractionDigits 用于强制显示一位小数（例如 4.0）。

3. 在页面中使用该组件

现在，您可以在任何显示产品信息的页面中使用此组件。

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

export default function Home() {
  const product = {
    reviews: 1234567,
    rating: 4.0,
  };

  return (
    <div>
      <h1>欢迎</h1>
      <ProductInfo
        reviewCount={product.reviews}
        averageRating={product.rating}
      />
    </div>
  );
}

访问 /en 的用户将看到 "总评论数: 1,234,567" 和 "平均评分: 4.0"。访问 /es 的用户将看到 "总评论数: 1.234.567" 和 "平均评分: 4,0"。