Preisformatierung

Problem

Die Anzeige eines Preises umfasst sowohl eine Zahl als auch eine Währung. Ein US-Preis ist $1,200.50, während derselbe Wert in Euro in Deutschland 1 200,50 € sein könnte. Die Position des Währungssymbols, das Dezimaltrennzeichen und das Gruppierungstrennzeichen ändern sich alle, und die Hartcodierung dieser Regeln für jede Sprache ist nicht handhabbar.

Lösung

Verwenden Sie die FormattedNumber-Komponente aus react-intl mit der Option style: 'currency'. Diese Komponente liest das aktuelle Gebietsschema aus ihrem Provider und formatiert eine Zahl als Preis, wobei sie automatisch die Symbolplatzierung, Dezimaltrennzeichen und Gruppierung für dieses Gebietsschema und die angegebene Währung handhabt.

Schritte

1. Erstellen einer Client-Komponente für Preise

Formatierungskomponenten aus react-intl müssen innerhalb von Client-Komponenten verwendet werden.

Erstellen Sie eine neue Komponente, app/components/ProductPrice.tsx.

// app/components/ProductPrice.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  price: number;
  currencyCode: string; // z.B. "USD", "EUR", "JPY"
};

export default function ProductPrice({ price, currencyCode }: Props) {
  return (
    <FormattedNumber
      value={price}
      style="currency"
      currency={currencyCode}
    />
  );
}

2. Übergeben von Formatierungsoptionen

Die FormattedNumber-Komponente wird durch diese Props gesteuert:

• value: Der numerische Wert des Preises.
• style: 'currency': Dies teilt der Komponente mit, die Zahl als Währung zu formatieren, nicht als Standarddezimalzahl.
• currency: Der dreistellige ISO-Währungscode (z.B. 'USD', 'EUR'). Dies ist erforderlich, wenn style: 'currency' verwendet wird.

3. Verwenden der Komponente auf einer Seite

Sie können diese Komponente jetzt in Ihren Server- oder Client-Komponenten verwenden, um Preise anzuzeigen.

// app/[lang]/page.tsx
import ProductPrice from '@/app/components/ProductPrice';

export default function Home() {
  const product = {
    price: 1299.99,
    currency: 'USD',
  };

  const productInEuros = {
    price: 1199.5,
    currency: 'EUR',
  };

  return (
    <div>
      <h1>Product</h1>
      <p>
        Price (USD): <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        Price (EUR): <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

Ein Benutzer, der /en besucht, sieht "Price (USD): $1,299.99" und "Price (EUR): €1,199.50". Ein Benutzer, der /es besucht, sieht "Price (USD): 1299,99 US$" und "Price (EUR): 1199,50 €".