数字格式化

处理小数点和分组分隔符

问题

像 10000.5 这样的大数字，在德国写作 10.000,5，而在美国则写作 10,000.5。如果用某一地区的数字格式显示，其他地区的用户可能会因小数点和分组分隔符不同而误解数值。

解决方案

使用 react-intl 提供的专用格式化组件，例如 FormattedNumber。该组件会自动从其 provider 读取当前语言，并将 number 基本类型格式化为使用正确本地小数点和分组分隔符的字符串。

步骤

1. 创建数字的客户端组件

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

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

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

import { FormattedNumber } of 'react-intl';

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

export default function ProductInfo({ reviewCount, averageRating }: Props) {
  return (
    <div>
      <h3>Product details</h3>
      <p>
        Total reviews:
        {/* Basic number formatting */}
        <FormattedNumber value={reviewCount} />
      </p>
      <p>
        Average rating:
        {/* Formatting with options */}
        <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>Welcome</h1>
      <ProductInfo
        reviewCount={product.reviews}
        averageRating={product.rating}
      />
    </div>
  );
}

访问 /en 的用户会看到“Total reviews: 1,234,567”和“Average rating: 4.0”；访问 /es 的用户会看到“Total reviews: 1.234.567”和“Average rating: 4,0”。