Форматирование чисел

Проблема

Большое число, например 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 } 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, увидит «Всего отзывов: 1,234,567» и «Средняя оценка: 4.0». А пользователь на /es увидит «Всего отзывов: 1.234.567» и «Средняя оценка: 4,0».