Formatage des nombres

Problème

Un grand nombre comme 10000.5 s'écrit 10.000,5 en Allemagne et 10,000.5 aux États-Unis. Afficher le nombre en utilisant la convention d'une région crée de la confusion pour les utilisateurs d'autres régions, qui peuvent mal interpréter la valeur en raison de séparateurs décimaux et de groupement incorrects.

Solution

Utilisez un composant de formatage dédié de react-intl, tel que FormattedNumber. Ce composant lit automatiquement la langue actuelle depuis son fournisseur et formate une primitive number en une chaîne qui utilise les séparateurs décimaux et de groupement corrects, spécifiques à la locale.

Étapes

1. Créer un composant client pour les nombres

Comme les autres composants react-intl, FormattedNumber doit être utilisé dans un composant client.

Créez un nouveau composant, app/components/ProductInfo.tsx, qui affichera un nombre formaté.

// 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. Passer les options de formatage

Le composant FormattedNumber accepte des options pour contrôler la sortie :

• value est le number à formater.
• minimumFractionDigits et maximumFractionDigits sont utilisés ici pour forcer l'affichage d'une décimale (par exemple, 4,0).

3. Utiliser le composant sur une page

Maintenant, vous pouvez utiliser ce composant sur n'importe quelle page qui affiche des informations produit.

// 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>
  );
}

Un utilisateur visitant /en verra « Total reviews: 1,234,567 » et « Average rating: 4.0 ». Un utilisateur visitant /es verra « Total reviews: 1.234.567 » et « Average rating: 4,0 ».