Anzeige von Währungsnamen und -symbolen

Problem

Eine Anwendung muss auf eine Währung verweisen, wie z.B. 'USD'. Die bloße Anzeige dieses Codes ist kryptisch. Die Anzeige des vollständigen Namens 'US Dollar' ist besser, aber dieser Name selbst muss übersetzt werden ('dólar estadounidense', 'Dollar américain'). Darüber hinaus kann das korrekte Symbol ($, US$, CA$) ohne Kontext mehrdeutig sein.

Lösung

Verwenden Sie die FormattedNumber-Komponente aus react-intl mit der Option currencyDisplay. Dies ermöglicht die Anzeige einer Währung als Symbol (Standard), als vollständigen lokalisierten Namen oder als ISO-Code, wobei alles korrekt für das aktuelle Gebietsschema formatiert wird.

Schritte

1. Erstellen einer Client-Komponente für die Währungsanzeige

Die FormattedNumber-Komponente muss innerhalb einer Client-Komponente verwendet werden. Erstellen Sie eine Datei app/components/LocalizedCurrency.tsx, die die Option currencyDisplay als Prop übernimmt, um sie wiederverwendbar zu machen.

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

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

Diese Komponente akzeptiert jetzt einen displayAs-Prop, der direkt die Option currencyDisplay steuert.

2. Verwenden der Komponente auf einer Seite

Sie können diese Komponente nun auf einer Seite verwenden, um die verschiedenen Währungsformate durch Ändern des displayAs-Props anzuzeigen.

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

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>Currency Display Options</h1>
      <p>
        Default (symbol):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Full name (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO code (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

Beim Besuch von /en sehen Sie "1,250.75 US dollars" für die Option 'name'. Beim Besuch von /es wird dieselbe Zeile als "1.250,75 dólares estadounidenses" gerendert, was zeigt, dass der Währungsname selbst korrekt übersetzt und formatiert wurde.