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

Проблема

Большое число, например, 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, увидит "Total reviews: 1,234,567" и "Average rating: 4.0". Пользователь, посещающий /ru, увидит "Всего отзывов: 1 234 567" и "Средний рейтинг: 4,0".