Währungsnamen und -symbole anzeigen

Problem

Eine Anwendung muss auf eine Währung wie „USD“ verweisen. Das reine Anzeigen dieses Codes ist jedoch kryptisch. Die vollständige Bezeichnung wie „US-Dollar“ ist besser, aber auch dieser Name muss übersetzt werden („US-Dollar“, „Dollar américain“). Außerdem kann das korrekte Symbol ($, US$, CA$) ohne Kontext mehrdeutig sein.

Lösung

Verwenden Sie die FormattedNumber-Komponente aus react-intl mit der currencyDisplay-Option. Damit können Sie eine Währung als Symbol (Standard), als vollständigen lokalisierten Namen oder als ISO-Code anzeigen – jeweils korrekt für das aktuelle Locale formatiert.

Schritte

1. Erstellen Sie eine 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 currencyDisplay-Option 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 eine displayAs-Prop, die die currencyDisplay-Option direkt steuert.

2. Komponente auf einer Seite verwenden

Sie können diese Komponente nun auf einer Seite verwenden, um verschiedene Währungsformate anzuzeigen, indem Sie die displayAs-Prop ändern.

// 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>
  );
}

Wenn Sie /en aufrufen, sehen Sie „1.250,75 US-Dollar“ für die Option „name“. Beim Aufruf von /es wird dieselbe Zeile als „1.250,75 US-Dollar“ angezeigt, was zeigt, dass der Währungsname selbst korrekt übersetzt und formatiert wurde.