Wie man Währungen als Symbol, Code oder Name anzeigt

Verwenden Sie die Option currencyDisplay, um zu steuern, ob Währungen als €, EUR oder Euro erscheinen

Einführung

Wenn Sie einen Preis oder Geldbetrag anzeigen, müssen Sie entscheiden, wie Sie die Währung darstellen möchten. Ein Produktpreis könnte als $25, USD 25 oder 25 US-Dollar angezeigt werden. Jedes Format dient einem anderen Zweck und funktioniert in verschiedenen Kontexten besser.

Das Symbolformat eignet sich gut für alltägliche Einkaufsoberflächen, bei denen Benutzer wissen, welche Währung sie erwarten können. Das Codeformat beseitigt Mehrdeutigkeiten in internationalen Geschäftsdokumenten, in denen mehrere Währungen vorkommen. Das Namensformat bietet maximale Klarheit für Barrierefreiheitstools und Bildungsinhalte.

JavaScript bietet die Option currencyDisplay in Intl.NumberFormat, um zu steuern, wie Währungen erscheinen. Diese Lektion erklärt die vier verfügbaren Formate, wie sie sich zwischen verschiedenen Locales unterscheiden und welches Format für Ihren spezifischen Anwendungsfall zu wählen ist.

Die currencyDisplay-Option verstehen

Die Option currencyDisplay steuert, wie die Währungseinheit bei der Formatierung von Geldbeträgen erscheint. Sie ändert nicht den numerischen Wert, sondern nur die Darstellung der Währung.

Vier Werte sind verfügbar:

  • symbol zeigt ein lokalisiertes Währungssymbol wie $ oder € an
  • narrowSymbol zeigt ein kompaktes Symbol wie $ anstelle von US$ an
  • code zeigt den ISO-Währungscode wie USD oder EUR an
  • name zeigt den vollständigen Währungsnamen wie US-Dollar oder Euro an

Jedes Format erzeugt eine andere visuelle Darstellung desselben Betrags. Die Wahl hängt von Ihren Anforderungen an die Benutzeroberfläche, dem verfügbaren Platz und den Erwartungen der Zielgruppe ab.

Verwendung des Symbolformats für alltägliche Anzeigen

Das Format symbol ist der Standardwert für currencyDisplay. Es zeigt ein lokalisiertes Währungssymbol an, das Benutzer in einer bestimmten Locale erwarten.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(formatter.format(25));
// Ausgabe: "$25.00"

Dieses Format erzeugt die vertrauteste Darstellung für Benutzer. Amerikaner erwarten Dollarzeichen, Europäer erwarten Eurosymbole und britische Benutzer erwarten Pfundsymbole.

Das Symbol passt sich sowohl an die Locale als auch an die Währung an. Wenn Sie US-Dollar für eine deutsche Locale formatieren, verwendet der Formatierer ein lokalisiertes Symbol, das die Länderbezeichnung enthält.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Ausgabe: "$25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Ausgabe: "25,00 $"

Beachten Sie, wie der deutsche Formatierer das Dollarzeichen nach dem Betrag platziert und ein Komma als Dezimaltrennzeichen verwendet. Diese lokalespezifischen Konventionen werden automatisch angewendet.

Wenn Sie Euro für verschiedene Locales formatieren, erscheint das Eurosymbol, aber die Formatierungskonventionen ändern sich.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Ausgabe: "€25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Ausgabe: "25,00 €"

Das Symbolformat funktioniert gut, wenn Benutzer in einem einzigen Währungskontext arbeiten. Eine US-E-Commerce-Website, die Preise in USD anzeigt, kann sicher Dollarzeichen verwenden. Eine europäische Website, die Preise in EUR anzeigt, kann Eurosymbole verwenden.

Allerdings kann das Symbolformat zu Mehrdeutigkeiten führen, wenn mehrere Währungen ähnliche Symbole verwenden. Kanadische Dollar, australische Dollar und US-Dollar verwenden alle das Dollarzeichen. In diesen Fällen fügen einige Locales ein Länderpräfix hinzu, um Eindeutigkeit zu schaffen.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Ausgabe: "CA$25.00"

Der Formatierer fügt CA$ hinzu, um kanadische Dollar von US-Dollar zu unterscheiden, wenn für eine US-Locale formatiert wird.

Verwendung des narrowSymbol-Formats für kompakte Anzeigen

Das Format narrowSymbol zeigt das Währungssymbol ohne Länderpräfixe an. Dies erzeugt eine kompaktere Darstellung, die gut für platzbeschränkte Benutzeroberflächen geeignet ist.

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// Output: "$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "$25.00"

Für US-Dollar in einer US-Locale erzeugen beide Formate die gleiche Ausgabe, da kein Länderpräfix erforderlich ist. Der Unterschied wird deutlich, wenn Währungen formatiert werden, die andernfalls eine Länderbezeichnung enthalten könnten.

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// Output: "CA$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "$25.00"

Das narrow-Symbol-Format entfernt das CA-Präfix und zeigt nur das Dollarzeichen an. Dies spart Platz, verliert aber die Unterscheidung zwischen kanadischen und US-Dollar.

Verwenden Sie narrowSymbol, wenn der Platz begrenzt ist und der Währungskontext aus anderen Teilen der Benutzeroberfläche klar hervorgeht. Mobile Apps, kompakte Dashboards und Datentabellen profitieren vom kürzeren Format. Stellen Sie jedoch sicher, dass Benutzer durch andere Mittel, wie einen Währungswähler oder eine Kopfzeilenbeschriftung, bestimmen können, welche Währung sie betrachten.

Das schmale Format wirkt sich auch auf andere Währungen in verschiedenen Locales aus.

const narrowFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "25,00 €"

Jede Locale definiert ihr eigenes narrow-Symbol-Format basierend auf lokalen Konventionen.

Verwendung des code-Formats für eindeutige Darstellungen

Das Format code zeigt den ISO 4217-Währungscode anstelle eines Symbols an. Dieser dreistellige Code identifiziert jede Währung eindeutig ohne Mehrdeutigkeit.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});

console.log(formatter.format(25));
// Output: "USD 25.00"

Der Code erscheint anstelle des Symbols und macht sofort deutlich, welche Währung der Betrag darstellt. Dieses Format funktioniert in allen Locales mit konsistenten Abkürzungen.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(usFormatter.format(25));
// Output: "EUR 25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(deFormatter.format(25));
// Output: "25,00 EUR"

Der EUR-Code erscheint in beiden Formaten, obwohl die Position und Zahlenformatierung den Locale-Konventionen folgen. Diese Kombination aus universellen Währungscodes mit lokalspezifischer Zahlenformatierung macht das Code-Format wertvoll für internationale Kontexte.

Das Code-Format beseitigt Verwechslungen zwischen Währungen, die Symbole gemeinsam haben.

const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});

console.log(usdFormatter.format(25));
// Output: "USD 25.00"

const cadFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'code'
});

console.log(cadFormatter.format(25));
// Output: "CAD 25.00"

const audFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'AUD',
  currencyDisplay: 'code'
});

console.log(audFormatter.format(25));
// Output: "AUD 25.00"

Jede Dollar-Variante erhält einen eigenen Code. Benutzer können sofort zwischen US-Dollar, kanadischen Dollar und australischen Dollar unterscheiden.

Verwenden Sie das Code-Format in Finanzberichten, internationalen Rechnungen, Buchhaltungssystemen und in jedem Kontext, in dem die Klarheit der Währung entscheidend ist. Das Format eignet sich auch gut für APIs und Datenexporte, bei denen Symbole Kodierungsprobleme verursachen könnten.

Der Kompromiss ist eine geringere Vertrautheit. Die meisten Verbraucher erkennen $ sofort, wissen aber möglicherweise nicht sofort, wofür CAD steht. Verwenden Sie Codes, wenn Ihre Zielgruppe sie versteht oder wenn Präzision wichtiger ist als Vertrautheit.

Verwendung des Namensformats für maximale Klarheit

Das Format name zeigt den vollständigen Währungsnamen in der Sprache des Gebietsschemas an. Dies bietet vollständige Klarheit darüber, welche Währung der Betrag darstellt.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});

console.log(formatter.format(25));
// Output: "25.00 US dollars"

Der Währungsname erscheint ausgeschrieben und lässt keine Zweifel daran, was der Betrag darstellt. Dieses Format ist besonders wertvoll für die Barrierefreiheit. Screenreader können Währungsnamen deutlich aussprechen, während Symbole möglicherweise inkonsistent angekündigt werden.

Der Name passt sich dem Gebietsschema an und wird in der entsprechenden Sprache angezeigt.

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(25));
// Output: "25.00 euros"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(25));
// Output: "25,00 Euro"

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(frFormatter.format(25));
// Output: "25,00 euros"

Englisch verwendet euros, Deutsch verwendet Euro und Französisch verwendet euros. Die API behandelt diese sprachlichen Variationen automatisch, einschließlich Pluralformen, wo angemessen.

Verschiedene Währungen zeigen ihre Namen in der entsprechenden Sprache für jedes Gebietsschema.

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(1000));
// Output: "1,000 Japanese yen"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(1000));
// Output: "1.000 Japanische Yen"

Englisch zeigt Japanese yen, während Deutsch Japanische Yen anzeigt. Diese Lokalisierung hilft Benutzern, unbekannte Währungen in ihrer eigenen Sprache zu verstehen.

Verwenden Sie das Namensformat, wenn Klarheit wichtiger ist als Platz. Bildungsinhalte, barrierefreie Schnittstellen und Kontexte, in denen Benutzer auf unbekannte Währungen stoßen könnten, profitieren von ausgeschriebenen Namen. Das Format eignet sich auch gut für Sprachschnittstellen, bei denen Währungsnamen leichter zu verarbeiten sind als Symbole.

Der Kompromiss ist der Platzbedarf. Währungsnamen sind deutlich länger als Symbole oder Codes. Eine kompakte mobile Benutzeroberfläche könnte Schwierigkeiten haben, 25.00 US dollars anzuzeigen, wo $25.00 gut funktionieren würde.

Auswahl des richtigen Anzeigeformats

Wählen Sie Ihren currencyDisplay-Wert basierend auf Platzeinschränkungen, Vertrautheit der Zielgruppe und Eindeutigkeitsanforderungen.

Verwenden Sie symbol für alltägliche Benutzeroberflächen, in denen Benutzer mit einer einzigen Währung arbeiten. E-Commerce-Seiten, Preisseiten und Verbraucheranwendungen funktionieren gut mit Symbolen. Benutzer erkennen Symbole schnell und sie benötigen minimalen Platz.

Verwenden Sie narrowSymbol, wenn der Platz extrem begrenzt ist und der Währungskontext klar ist. Mobile Apps, kompakte Tabellen und Dashboard-Widgets profitieren vom kürzeren Format. Stellen Sie sicher, dass die Währung an anderer Stelle in der Benutzeroberfläche identifiziert wird.

Verwenden Sie code, wenn Sie zwischen mehreren Währungen ohne Mehrdeutigkeit unterscheiden müssen. Finanzanwendungen, Währungsumrechner, internationale Geschäftstools und Buchhaltungssysteme benötigen die Präzision, die Codes bieten. Das Format funktioniert auch gut in technischen Kontexten, in denen Symbole Probleme verursachen könnten.

Verwenden Sie name, wenn maximale Klarheit erforderlich ist. Auf Barrierefreiheit ausgerichtete Schnittstellen, Bildungsinhalte, Sprachschnittstellen und Kontexte mit unbekannten Währungen profitieren von ausgeschriebenen Namen. Das Format hilft auch Benutzern, die internationale Währungen kennenlernen.

Sie können mehrere Ansichten derselben Daten bereitstellen, indem Sie Benutzern ermöglichen, zwischen Formaten zu wechseln. Ein Finanz-Dashboard könnte standardmäßig Symbole anzeigen, mit der Option, für detaillierte Analysen zu Codes zu wechseln. Ein Währungsumrechner könnte Codes in der Benutzeroberfläche verwenden, aber Namen in Tooltips anzeigen.

Berücksichtigen Sie das Fachwissen Ihrer Benutzer. Finanzexperten verstehen Währungscodes. Allgemeine Verbraucher erwarten Symbole. Internationale Benutzer benötigen möglicherweise Codes, um Währungen zu unterscheiden. Benutzer mit Barrierefreiheitsanforderungen profitieren von Namen.

Kombination von currencyDisplay mit anderen Optionen

Die Option currencyDisplay funktioniert mit allen anderen Zahlenformatierungsoptionen. Sie können Dezimalstellen, Rundung und Zeichenanzeige steuern, während Sie Ihr Währungsformat wählen.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(25.5));
// Output: "USD 25.50"

Das Code-Format erscheint mit den angegebenen Dezimalstelleneinstellungen. Sie können currencyDisplay mit jeder anderen Option wie signDisplay, notation oder benutzerdefinierten Rundungsregeln kombinieren.

Verschiedene Anzeigeformate funktionieren mit der Buchhaltungsnotation.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name',
  currencySign: 'accounting'
});

console.log(formatter.format(-25));
// Output: "(25.00 US dollars)"

Die Buchhaltungsformat-Klammern kombinieren sich mit dem ausgeschriebenen Währungsnamen.

Was zu beachten ist

Die Option currencyDisplay steuert, wie Währungseinheiten in formatierten Beträgen erscheinen. Verwenden Sie symbol für vertraute alltägliche Anzeigen, narrowSymbol für kompakte platzbeschränkte Oberflächen, code für eindeutige internationale Kontexte und name für maximale Klarheit und Zugänglichkeit.

Wählen Sie das Format basierend auf Ihrem verfügbaren Platz, der Expertise der Benutzer und ob Mehrdeutigkeit zwischen Währungen ein Problem darstellt. Kombinieren Sie currencyDisplay mit anderen Formatierungsoptionen, um die exakte Darstellung zu erstellen, die Ihre Anwendung benötigt.