Zahlen für verschiedene Locales in React Router v7 formatieren

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 regionalen Konventionen des Lesers gegensätzliche Bedeutungen vermitteln. Wenn Anwendungen rohe numerische Werte ohne locale-bewusste 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 Locale des Benutzers unter Verwendung regionaler Regeln für Dezimal- und Gruppierungstrennzeichen. Dies wandelt numerische Werte in Zeichenketten um, 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. Durch das Durchleiten numerischer Werte durch diese Formatierer erzeugt die Anwendung Ausgaben, die den Benutzererwartungen entsprechen, ohne manuelle Trennzeichen-Logik.

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 locale-formatierte 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 Locale an. Ein Benutzer mit Locale en-US sieht "1,234.56", während ein Benutzer mit Locale de-DE "1.234,56" sieht.

2. Währungswerte mit Stiloptionen formatieren

Die formatNumber-Methode akzeptiert Optionen gemäß Intl.NumberFormatOptions, 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 FormattedNumber-Komponente 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>
        Total users: <FormattedNumber value={totalUsers} />
      </p>
      <p>
        Growth rate: <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 Route-Komponenten über den useLoaderData-Hook auf Loader-Daten zu. Kombinieren Sie dies mit 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>
        Revenue:{" "}
        <FormattedNumber value={revenue} style="currency" currency="USD" />
      </p>
      <p>
        Units sold: <FormattedNumber value={units} />
      </p>
    </div>
  );
}

Der Loader stellt rohe numerische Daten bereit, und die Komponente formatiert diese entsprechend dem Gebietsschema des Benutzers. Diese Trennung hält das Abrufen von Daten unabhängig von Präsentationsbelangen.