So zeigen Sie Währungen als Symbol, Code oder Name an

Verwenden Sie die Option currencyDisplay, um zu steuern, ob Währungen als $, USD oder US-Dollar angezeigt werden

Einführung

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

Das Symbolformat eignet sich gut für alltägliche Shopping-Oberflächen, bei denen Benutzer wissen, welche Währung zu erwarten ist. Das Codeformat beseitigt Mehrdeutigkeiten in internationalen Geschäftsdokumenten, in denen mehrere Währungen vorkommen. Das Namensformat bietet maximale Klarheit für Barrierefreiheits-Tools und Bildungsinhalte.

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

Die Option currencyDisplay verstehen

Die Option currencyDisplay steuert, wie die Währungseinheit bei der Formatierung von Geldbeträgen angezeigt wird. 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.

Symbolformat für alltägliche Anzeigen verwenden

Das symbol-Format ist der Standard-currencyDisplay-Wert. Es zeigt ein lokalisiertes Währungssymbol, das Benutzer in einem bestimmten Gebietsschema erwarten.

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

console.log(formatter.format(25));
// Output: "$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 das Gebietsschema als auch an die Währung an. Wenn Sie US-Dollar für ein deutsches Gebietsschema formatieren, verwendet der Formatter 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));
// Output: "$25.00"

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

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

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

Wenn Sie Euro für verschiedene Gebietsschemata 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));
// Output: "€25.00"

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

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

Das Symbolformat funktioniert gut, wenn Benutzer innerhalb eines einzelnen Währungskontexts 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.

Das Symbolformat kann jedoch Mehrdeutigkeiten erzeugen, 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 Gebietsschemata ein Länderpräfix zur Unterscheidung hinzu.

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

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

Der Formatter fügt CA$ hinzu, um kanadische Dollar von US-Dollar zu unterscheiden, wenn für ein US-Gebietsschema formatiert wird.

NarrowSymbol-Format für kompakte Anzeigen verwenden

Das narrowSymbol-Format zeigt das Währungssymbol ohne Länderpräfixe an. Dies erzeugt eine kompaktere Darstellung, die gut in platzbeschränkten Benutzeroberflächen funktioniert.

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 einem US-Gebietsschema erzeugen beide Formate dieselbe 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 schmale Symbolformat entfernt das CA-Präfix und zeigt nur das Dollarzeichen. Dies spart Platz, verliert jedoch 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 bestimmen können, welche Währung sie betrachten, z. B. durch einen Währungswähler oder eine Kopfzeilenbeschriftung.

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

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

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

Jedes Gebietsschema definiert sein eigenes schmales Symbolformat basierend auf lokalen Konventionen.

Verwendung des Code-Formats für eindeutige Anzeigen

Das code-Format 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 klar, welche Währung der Betrag darstellt. Dieses Format funktioniert über alle Gebietsschemata hinweg 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 Gebietsschemakonventionen folgen. Diese Kombination aus universellen Währungscodes mit gebietsschemaspezifischer Zahlenformatierung macht das Code-Format wertvoll für internationale Kontexte.

Das Code-Format beseitigt Verwechslungen zwischen Währungen, die sich Symbole teilen.

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 eindeutigen 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 Währungsklarheit entscheidend ist. Das Format funktioniert auch gut in APIs und Datenexporten, bei denen Symbole Codierungsprobleme verursachen könnten.

Der Nachteil ist die geringere Vertrautheit. Die meisten Verbraucher erkennen $, wissen aber möglicherweise nicht sofort, was CAD bedeutet. Verwenden Sie Codes, wenn Ihr Publikum sie versteht oder wenn Präzision wichtiger ist als Vertrautheit.

Verwendung des Namensformats für maximale Klarheit

Das name-Format 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 wird ausgeschrieben angezeigt, sodass keine Unklarheit darüber besteht, was der Betrag darstellt. Dieses Format ist besonders wertvoll für die Barrierefreiheit. Screenreader können Währungsnamen klar 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 verarbeitet diese sprachlichen Variationen automatisch, einschließlich Pluralformen, wo angemessen.

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

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 zeigt. Diese Lokalisierung hilft Benutzern, unbekannte Währungen in ihrer eigenen Sprache zu verstehen.

Verwenden Sie das Namensformat, wenn Klarheit wichtiger ist als Platz. Bildungsinhalte, barrierefreiheitsorientierte Benutzeroberflächen und Kontexte, in denen Benutzer auf unbekannte Währungen stoßen können, profitieren von ausgeschriebenen Namen. Das Format funktioniert auch gut für Sprachschnittstellen, bei denen Währungsnamen einfacher zu verarbeiten sind als Symbole.

Der Nachteil ist der Platzbedarf. Währungsnamen sind deutlich länger als Symbole oder Codes. Eine kompakte mobile Oberfläche könnte Schwierigkeiten haben, 25,00 US-Dollar unterzubringen, während 25,00 $ problemlos funktionieren würde.

Auswahl des richtigen Anzeigeformats

Wählen Sie Ihren currencyDisplay-Wert basierend auf Platzbeschränkungen, Vertrautheit der Zielgruppe und Bedenken hinsichtlich Mehrdeutigkeit.

Verwenden Sie symbol für alltägliche Oberflächen, bei denen Benutzer mit einer einzigen Währung arbeiten. E-Commerce-Websites, Preisseiten und Verbraucheranwendungen funktionieren gut mit Symbolen. Benutzer erkennen Symbole schnell und Symbole 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 Oberfläche identifiziert wird.

Verwenden Sie code, wenn Sie zwischen mehreren Währungen ohne Mehrdeutigkeit unterscheiden müssen. Finanzanwendungen, Währungsrechner, internationale Business-Tools 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. Barrierefreie Oberflächen, 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 einer Option, für detaillierte Analysen zu Codes zu wechseln. Ein Währungsrechner könnte Codes in der Oberfläche verwenden, aber Namen in Tooltips anzeigen.

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

Kombination von currencyDisplay mit anderen Optionen

Die Option currencyDisplay funktioniert mit allen anderen Zahlenformatierungsoptionen. Sie können Dezimalstellen, Rundung und Vorzeichenanzeige steuern und gleichzeitig 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 wird mit den angegebenen Dezimalstelleneinstellungen angezeigt. 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 Klammern des Buchhaltungsformats werden mit dem ausgeschriebenen Währungsnamen kombiniert.

Was Sie beachten sollten

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

Wählen Sie das Format basierend auf Ihrem verfügbaren Platz, der Expertise der Benutzer und darauf, 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.