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 nach der Konvention einer Region führt zu Verwirrung bei Benutzern in anderen Regionen, die den Wert aufgrund falscher Dezimal- und Gruppierungstrennzeichen falsch interpretieren könnten.

Lösung

Verwenden Sie eine spezielle Formatierungskomponente aus 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, regionsspezifischen Dezimal- und Gruppierungstrennzeichen verwendet.

Schritte

1. Erstellen einer 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 anzeigen wird.

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

Die FormattedNumber-Komponente akzeptiert Optionen zur Steuerung der Ausgabe:

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

3. Verwendung der 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 Benutzer, der /en besucht, sieht "Total reviews: 1,234,567" und "Average rating: 4.0". Ein Benutzer, der /es besucht, sieht "Total reviews: 1.234.567" und "Average rating: 4,0".