Zahlen formatieren

Problem

Eine große Zahl wie 10000.5 wird in Deutschland als 10.000,5 und in den USA als 10,000.5 geschrieben. Die Anzeige der Zahl unter Verwendung der Konvention einer Region führt zu Verwirrung bei Nutzern in anderen Regionen, die den Wert aufgrund falscher Dezimal- und Tausendertrennzeichen möglicherweise falsch interpretieren.

Lösung

Verwenden Sie eine dedizierte Formatierungskomponente von react-intl, wie z. B. FormattedNumber. Diese Komponente liest automatisch die aktuelle Sprache aus ihrem Provider und formatiert einen number-Primitiv in einen String, der die korrekten, gebietsschemaspezifischen Dezimal- und Tausendertrennzeichen verwendet.

Schritte

1. Erstellen Sie eine Client-Komponente für Zahlen

Wie andere react-intl-Komponenten muss FormattedNumber innerhalb einer Client-Komponente verwendet werden.

Erstellen Sie eine neue Komponente, app/components/ProductInfo.tsx, die eine formatierte Zahl anzeigt.

// 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. Formatierungsoptionen übergeben

Die FormattedNumber-Komponente akzeptiert Optionen zur Steuerung der Ausgabe:

• value ist der zu formatierende number.
• minimumFractionDigits und maximumFractionDigits werden hier verwendet, um die Anzeige einer Dezimalstelle zu erzwingen (z. B. 4,0).

3. Verwenden Sie die Komponente auf einer Seite

Jetzt können Sie diese Komponente auf jeder Seite verwenden, die Produktinformationen anzeigt.

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

Ein Nutzer, der /en besucht, sieht „Total reviews: 1,234,567" und „Average rating: 4.0". Ein Nutzer, der /es besucht, sieht „Total reviews: 1.234.567" und „Average rating: 4,0".