Preise formatieren

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 Tausendertrennzeichen ändern sich alle, und das Hardcodieren dieser Regeln für jede Sprache ist nicht handhabbar.

Lösung

Verwenden Sie die FormattedNumber-Komponente aus react-intl mit der style: 'currency'-Option. Diese Komponente liest die aktuelle Locale aus ihrem Provider und formatiert eine Zahl als Preis, wobei Symbolplatzierung, Dezimaltrennzeichen und Tausendertrennung für diese Locale und die angegebene Währung automatisch verarbeitet werden.

Schritte

1. Client-Komponente für Preise erstellen

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; // e.g., "USD", "EUR", "JPY"
};

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

2. Formatierungsoptionen übergeben

Die FormattedNumber-Komponente wird durch diese Props gesteuert:

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

3. Komponente auf einer Seite verwenden

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): 1.299,99 $" und „Price (EUR): 1.199,50 €".