Wie man Zahlen für verschiedene Spracheinstellungen in React Router v7 formatiert

Problem

Zahlen werden weltweit unterschiedlich geschrieben. Was in den Vereinigten Staaten als 10,000.5 erscheint, wird in Deutschland zu 10.000,5 - Kommas und Punkte tauschen ihre Rollen vollständig. Dies ist keine Frage der Präferenz oder des Stils, sondern der Lesbarkeit. Ein deutscher Benutzer, der 10,000.5 sieht, könnte es als zehn lesen und die Gruppierungstrennzeichen ignorieren. Ein amerikanischer Benutzer, der 10.000,5 sieht, könnte es als zehntausend lesen und das Dezimaltrennzeichen ignorieren.

Dieselben Ziffern können je nach den regionalen Konventionen des Lesers entgegengesetzte Bedeutungen vermitteln. Wenn Anwendungen rohe numerische Werte ohne lokalisierungsgerechte Formatierung anzeigen, riskieren sie, Benutzer zu verwirren und das Vertrauen in die präsentierten Daten zu untergraben.

Lösung

Formatieren Sie Zahlen basierend auf dem Gebietsschema des Benutzers und verwenden Sie regionale Regeln für Dezimal- und Gruppierungstrennzeichen. Dies verwandelt numerische Werte in Zeichenketten, die den Formatierungsregeln folgen, die Benutzern in ihrer Region vertraut sind.

React-intl bietet Formatierungsmethoden, die die integrierte Intl.NumberFormat-API des Browsers nutzen, welche die Komplexität regionaler Zahlenkonventionen handhabt. Indem numerische Werte durch diese Formatierer geleitet werden, erzeugt die Anwendung eine Ausgabe, die den Benutzererwartungen entspricht, ohne manuelle Trennzeichenlogik.

Schritte

1. Erstellen Sie eine Komponente, die Zahlen mit useIntl formatiert

Der useIntl-Hook bietet Zugriff auf Formatierungsmethoden, einschließlich formatNumber, die einen numerischen Wert akzeptiert und eine lokalisierte Zeichenkette zurückgibt.

import { useIntl } from "react-intl";

export default function ProductPrice() {
  const intl = useIntl();
  const price = 1234.56;

  return (
    <div>
      <p>Price: {intl.formatNumber(price)}</p>
    </div>
  );
}

Die formatNumber-Methode wendet automatisch die korrekten Trennzeichen für das aktuelle Gebietsschema an. Ein Benutzer mit dem Gebietsschema en-US sieht "1,234.56", während ein Benutzer mit dem Gebietsschema de-DE "1.234,56" sieht.

2. Währungswerte mit Stiloptionen formatieren

Die Methode formatNumber akzeptiert Optionen, die Intl.NumberFormatOptions entsprechen, einschließlich Währungsformatierung.

import { useIntl } from "react-intl";

export default function ProductPrice() {
  const intl = useIntl();
  const price = 1234.56;

  return (
    <div>
      <p>
        {intl.formatNumber(price, {
          style: "currency",
          currency: "USD",
        })}
      </p>
    </div>
  );
}

Dies erzeugt "$1,234.56" für en-US und "1.234,56 $" für de-DE, wobei sowohl Trennzeichen- als auch Währungssymbolkonventionen angewendet werden.

3. FormattedNumber für deklarative Formatierung verwenden

Die Komponente FormattedNumber bietet eine deklarative Alternative, die dieselben Optionen als Props akzeptiert.

import { FormattedNumber } from "react-intl";

export default function Statistics() {
  const totalUsers = 1500000;
  const growthRate = 0.23;

  return (
    <div>
      <p>
        Gesamtnutzer: <FormattedNumber value={totalUsers} />
      </p>
      <p>
        Wachstumsrate: <FormattedNumber value={growthRate} style="percent" />
      </p>
    </div>
  );
}

Die Komponente rendert die formatierte Zahl direkt in das DOM. Für en-US wird "1,500,000" und "23%" angezeigt. Für de-DE wird "1.500.000" und "23 %" angezeigt.

4. Zahlen aus Loader-Daten formatieren

In React Router 7 greifen Routenkomponenten über den Hook useLoaderData auf Loader-Daten zu. Kombinieren Sie dies mit der Zahlenformatierung, um vom Server bereitgestellte Werte anzuzeigen.

import { useLoaderData } from "react-router";
import { FormattedNumber } from "react-intl";

export async function loader() {
  return {
    revenue: 45678.9,
    units: 12500,
  };
}

export default function Dashboard() {
  const { revenue, units } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>Dashboard</h1>
      <p>
        Umsatz:{" "}
        <FormattedNumber value={revenue} style="currency" currency="USD" />
      </p>
      <p>
        Verkaufte Einheiten: <FormattedNumber value={units} />
      </p>
    </div>
  );
}

Der Loader stellt Rohdaten in numerischer Form bereit, und die Komponente formatiert sie entsprechend der Sprache des Benutzers. Diese Trennung hält das Datenabrufen unabhängig von Darstellungsbelangen.