So zeigen Sie Währungsinformationen in TanStack Start v1 an

Problem

Anwendungen müssen häufig Währungsinformationen anzeigen, ohne einen formatierten Preis zu zeigen. Eine Währungsauswahl könnte verfügbare Währungen auflisten, ein Artikel über Wechselkurse könnte bestimmte Währungen anhand ihres Symbols referenzieren, oder ein Finanz-Dashboard könnte Währungscodes anzeigen. Jede Darstellung hat jedoch Einschränkungen. ISO-Codes wie "USD" sind präzise, aber für nicht-technische Benutzer kryptisch. Vollständige Namen wie "US-Dollar" sind klar, erfordern aber eine Übersetzung für internationale Zielgruppen. Symbole wie "$" sind vertraut, aber mehrdeutig – dasselbe Symbol steht für US-, kanadische und australische Dollar. Die Wahl des falschen Formats für den Kontext verringert die Klarheit und kann Benutzer verwirren.

Die Herausforderung wird durch Lokalisierung verstärkt. Ein Währungsname, der auf Englisch funktioniert, existiert möglicherweise nicht oder ist in einer anderen Sprache falsch. Symbole, die in einer Region Standard sind, können in einer anderen unbekannt sein. Ohne einen konsistenten, lokalisierungsbewussten Ansatz codieren Anwendungen entweder Währungsdarstellungen in einer einzigen Sprache fest oder pflegen große Übersetzungstabellen, die schnell veralten.

Lösung

Verwenden Sie die integrierten Internationalisierungs-APIs des Browsers, um Währungsinformationen in dem Format anzuzeigen, das sowohl dem Gebietsschema des Benutzers als auch dem Kontext entspricht. Die Intl.DisplayNames-API bietet lokalisierte vollständige Währungsnamen, während Intl.NumberFormat mit der currencyDisplay-Option Währungssymbole oder -codes extrahieren kann. Durch die Auswahl der geeigneten API und Formatoption basierend auf dem Kontext stellen Sie sicher, dass Währungsreferenzen sowohl klar als auch ordnungsgemäß lokalisiert sind, ohne Übersetzungsdaten pflegen zu müssen.

Erstellen Sie kleine, wiederverwendbare Komponenten oder Hilfsfunktionen, die einen Währungscode und ein Gebietsschema akzeptieren und dann die entsprechende Darstellung zurückgeben. Dieser Ansatz hält die Logik zur Währungsanzeige zentralisiert und erleichtert es, dieselbe Währung in verschiedenen Formaten in Ihrer Anwendung anzuzeigen.

Schritte

1. Erstellen Sie eine Hilfsfunktion zum Abrufen lokalisierter Währungsnamen

Die Intl.DisplayNames-API mit type: "currency" gibt lokalisierte vollständige Währungsnamen für jeden ISO-4217-Währungscode zurück.

export function getCurrencyName(currencyCode: string, locale: string): string {
  const displayNames = new Intl.DisplayNames([locale], { type: "currency" });
  return displayNames.of(currencyCode) || currencyCode;
}

Diese Hilfsfunktion akzeptiert einen dreistelligen ISO-Währungscode und gibt den vollständigen Namen in der Sprache des Benutzers zurück. Verwenden Sie dies für Währungsauswahlen oder erklärende Texte, bei denen Klarheit wichtiger ist als Kürze.

2. Erstellen Sie eine Hilfsfunktion zum Extrahieren von Währungssymbolen

Die Option currencyDisplay in Intl.NumberFormat steuert, wie die Währung angezeigt wird, mit den Werten "code", "symbol", "narrowSymbol" und "name".

export function getCurrencySymbol(
  currencyCode: string,
  locale: string,
  narrow: boolean = false,
): string {
  const formatter = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: narrow ? "narrowSymbol" : "symbol",
  });

  const parts = formatter.formatToParts(0);
  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart?.value || currencyCode;
}

Diese Hilfsfunktion formatiert einen Nullwert und extrahiert nur das Währungssymbol. Der Parameter narrow steuert, ob ein kompaktes Symbol wie "$" oder ein eindeutiges Symbol wie "US$" verwendet werden soll. Verwenden Sie Symbole in kompakten UI-Elementen wie Tabellen oder Diagrammen.

3. Erstellen Sie eine Komponente zur Anzeige von Währungsinformationen

Erstellen Sie eine flexible Komponente, die Währungsinformationen in jedem Format basierend auf einer display-Prop rendern kann.

interface CurrencyDisplayProps {
  code: string;
  locale: string;
  display: "name" | "symbol" | "narrowSymbol" | "code";
}

export function CurrencyDisplay({
  code,
  locale,
  display,
}: CurrencyDisplayProps) {
  let content: string;

  if (display === "name") {
    content = getCurrencyName(code, locale);
  } else if (display === "code") {
    content = code.toUpperCase();
  } else {
    content = getCurrencySymbol(code, locale, display === "narrowSymbol");
  }

  return <span>{content}</span>;
}

Diese Komponente zentralisiert die Logik zur Währungsanzeige und erleichtert den Wechsel zwischen Formaten. Verwenden Sie "name" für Dropdown-Menüs und erklärende Texte, "symbol" oder "narrowSymbol" für kompakte Anzeigen und "code", wenn Präzision erforderlich ist.

4. Verwenden Sie die Komponente in einer TanStack-Start-Route

Importieren und verwenden Sie die Komponente in jeder Routenkomponente und übergeben Sie das Gebietsschema des Benutzers aus Ihrem i18n-Kontext oder Route-Loader.

import { createFileRoute } from "@tanstack/react-router";
import { CurrencyDisplay } from "~/components/CurrencyDisplay";

export const Route = createFileRoute("/currencies")({
  component: CurrenciesPage,
});

function CurrenciesPage() {
  const locale = "en-US";

  return (
    <div>
      <h1>Currency Information</h1>
      <p>
        Full name: <CurrencyDisplay code="USD" locale={locale} display="name" />
      </p>
      <p>
        Symbol: <CurrencyDisplay code="USD" locale={locale} display="symbol" />
      </p>
      <p>
        Code: <CurrencyDisplay code="USD" locale={locale} display="code" />
      </p>
    </div>
  );
}

Die Komponente rendert dieselbe Währung in verschiedenen Formaten. Rufen Sie in einer realen Anwendung das Gebietsschema von Ihrem i18n-Provider oder Routenkontext ab, um sicherzustellen, dass alle Währungsanzeigen die Sprachpräferenz des Benutzers berücksichtigen.