Wie man Währungen mit regionsspezifischen Symbolen formatiert
Preise mit dem korrekten Währungssymbol, Position und Formatierung für jede Region anzeigen
Einführung
Währungssymbole identifizieren, welche Währung ein Preis repräsentiert. Das Dollarzeichen steht für US-Dollar, das Euro-Symbol für Euro und das Pfund-Zeichen für britische Pfund. Diese Symbole sind für internationale Anwendungen unerlässlich, da Benutzer wissen müssen, welche Währung sie betrachten oder ausgeben.
Verschiedene Länder formatieren Währungsbeträge unterschiedlich. Amerikaner schreiben $1,234.56 mit dem Symbol vor dem Betrag. Deutsche schreiben 1.234,56 € mit dem Symbol nach dem Betrag und anderen Trennzeichen. Die französische Formatierung verwendet 1 234,56 € mit Leerzeichen zwischen Zifferngruppen. Wenn Sie die Währungsformatierung wie "$" + amount fest codieren, gehen Sie davon aus, dass alle Benutzer den gleichen Konventionen folgen.
JavaScript bietet die Intl.NumberFormat-API, um Währungsbeträge mit lokalen Symbolen und Konventionen zu formatieren. Diese Lektion erklärt, wie die Währungsformatierung je nach Gebietsschema variiert und wie Preise für jede Sprache oder Region korrekt formatiert werden können.
Währungssymbole variieren je nach Gebietsschema
Verschiedene Währungen verwenden unterschiedliche Symbole. Der US-Dollar verwendet $, der Euro verwendet €, das britische Pfund verwendet £, der japanische Yen verwendet ¥ und der Schweizer Franken verwendet Fr. oder CHF, je nach Kontext. Jedes Symbol hilft Benutzern, schnell zu erkennen, welche Währung sie betrachten.
Einige Symbole repräsentieren mehrere Währungen. Das Dollarzeichen $ wird für US-Dollar, kanadische Dollar, australische Dollar, mexikanische Pesos und mehrere andere Währungen verwendet. Ohne zusätzlichen Kontext können Benutzer nicht erkennen, welche Dollar-Währung ein Preis darstellt.
Die Position des Währungssymbols variiert je nach Gebietsschema. Englischsprachige Länder platzieren das Symbol typischerweise vor dem Betrag wie $100. Viele europäische Länder platzieren das Symbol nach dem Betrag wie 100 €. Einige Länder fügen ein Leerzeichen zwischen Betrag und Symbol ein, während andere dies nicht tun.
Diese Unterschiede bedeuten, dass Sie nicht einfach ein Symbol und eine Zahl verketten können. Sie benötigen eine Formatierungslogik, die sowohl die angezeigte Währung als auch das Gebietsschema des Benutzers versteht.
Währung mit Intl.NumberFormat formatieren
Der Konstruktor Intl.NumberFormat erstellt einen Währungsformatierer, wenn Sie style: 'currency' in den Optionen übergeben. Sie müssen auch angeben, welche Währung formatiert werden soll, indem Sie die Option currency mit einem ISO 4217-Währungscode verwenden.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
console.log(formatter.format(1234.56));
// Ausgabe: "$1,234.56"
Dies erstellt einen Formatierer für US-Englisch, der Beträge in US-Dollar anzeigt. Die Methode format() konvertiert die Zahl in eine Zeichenfolge mit dem Dollarsymbol, Tausendertrennzeichen und zwei Dezimalstellen.
Die Option currency erfordert einen dreistelligen ISO 4217-Code. Gängige Codes sind USD für US-Dollar, EUR für Euro, GBP für britische Pfund, JPY für japanische Yen und CAD für kanadische Dollar.
const usdFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
const eurFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR'
});
const gbpFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'GBP'
});
console.log(usdFormatter.format(100));
// Ausgabe: "$100.00"
console.log(eurFormatter.format(100));
// Ausgabe: "€100.00"
console.log(gbpFormatter.format(100));
// Ausgabe: "£100.00"
Jeder Formatierer fügt automatisch das entsprechende Währungssymbol ein. Sie müssen nicht wissen, welches Symbol welchem Währungscode entspricht.
Locale bestimmt die Symbolposition und Formatierung
Der Locale-Parameter steuert, wie Währungsbeträge formatiert werden, einschließlich Symbolposition, Zifferngruppierung und Dezimaltrennzeichen. Derselbe Währungscode erzeugt je nach Locale unterschiedliche Ausgaben.
const usFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR'
});
const deFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
});
const frFormatter = new Intl.NumberFormat('fr-FR', {
style: 'currency',
currency: 'EUR'
});
console.log(usFormatter.format(1234.56));
// Ausgabe: "€1,234.56"
console.log(deFormatter.format(1234.56));
// Ausgabe: "1.234,56 €"
console.log(frFormatter.format(1234.56));
// Ausgabe: "1 234,56 €"
Alle drei Formatierer zeigen Euro an, verwenden jedoch unterschiedliche Konventionen. Der US-englische Formatierer platziert das Symbol vor dem Betrag mit einem Punkt als Dezimaltrennzeichen. Der deutsche Formatierer platziert das Symbol nach dem Betrag mit einem Leerzeichen, verwendet Punkte für Tausendertrennzeichen und ein Komma als Dezimaltrennzeichen. Der französische Formatierer verwendet Leerzeichen für Tausendertrennzeichen.
Die Intl-API behandelt diese Unterschiede automatisch basierend auf der von Ihnen angegebenen Locale. Sie müssen die Formatierungsregeln für jede Locale nicht kennen.
Währungsformatierung beinhaltet Dezimalstellen
Währungsformatierer bestimmen automatisch die angemessene Anzahl von Dezimalstellen basierend auf der Währung. Die meisten Währungen verwenden zwei Dezimalstellen für Cent oder äquivalente Bruchteile.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
console.log(formatter.format(100));
// Output: "$100.00"
console.log(formatter.format(100.5));
// Output: "$100.50"
console.log(formatter.format(100.567));
// Output: "$100.57"
Der Formatierer zeigt immer zwei Dezimalstellen für US-Dollar an, füllt bei Bedarf mit Nullen auf und rundet, wenn die Eingabe mehr Präzision hat.
Einige Währungen haben keine Dezimalstellen. Der japanische Yen hat keine Untereinheit, daher werden Beträge ohne Dezimalstellen angezeigt.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'JPY'
});
console.log(formatter.format(1234.56));
// Output: "¥1,235"
Der Formatierer rundet auf die nächste ganze Zahl, da Yen-Beträge keine Brucheinheiten enthalten. Die Intl-API kennt die Dezimalpräzision für jede Währung und wendet sie automatisch an.
Währung für die Locale des Benutzers formatieren
Anstatt eine bestimmte Locale fest zu codieren, können Sie die Spracheinstellungen des Browsers des Benutzers verwenden. Die Eigenschaft navigator.language gibt die bevorzugte Locale des Benutzers zurück.
const userLocale = navigator.language;
const formatter = new Intl.NumberFormat(userLocale, {
style: 'currency',
currency: 'USD'
});
console.log(formatter.format(1234.56));
// Output variiert je nach Locale des Benutzers
// Für en-US: "$1,234.56"
// Für de-DE: "1.234,56 $"
// Für fr-FR: "1 234,56 $US"
Dieser Ansatz zeigt Währungsbeträge entsprechend den Formatierungserwartungen jedes Benutzers an. Ein deutscher Benutzer sieht das Symbol nach dem Betrag mit deutschen Trennzeichen, während ein amerikanischer Benutzer das Symbol vor dem Betrag mit amerikanischen Trennzeichen sieht.
Sie können auch das gesamte navigator.languages-Array übergeben, um ein Fallback-Verhalten zu ermöglichen, wenn die bevorzugte Sprache des Benutzers nicht verfügbar ist.
const formatter = new Intl.NumberFormat(navigator.languages, {
style: 'currency',
currency: 'USD'
});
console.log(formatter.format(1234.56));
Die API verwendet die erste Locale aus dem Array, die sie unterstützt, und bietet so eine automatische Fallback-Behandlung.
Wiederverwendung von Währungsformatierern
Das Erstellen einer neuen Intl.NumberFormat-Instanz beinhaltet das Laden von Gebietsschema-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Preise mit demselben Gebietsschema und derselben Währung formatieren, erstellen Sie den Formatierer einmal und verwenden Sie ihn wieder.
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
const prices = [19.99, 29.99, 49.99, 99.99];
prices.forEach(price => {
console.log(formatter.format(price));
});
// Output:
// "$19.99"
// "$29.99"
// "$49.99"
// "$99.99"
Dieses Muster ist effizienter als das Erstellen eines neuen Formatierers für jeden Preis. Der Leistungsunterschied wird signifikant, wenn Arrays oder Listen mit vielen Werten formatiert werden.
Anzeigen von Preisen in Anwendungen
Sie können Währungsformatierer überall dort verwenden, wo Sie Preise für Benutzer anzeigen. Dazu gehören Produktlisten, Warenkörbe, Checkout-Seiten, Rechnungen und Finanz-Dashboards.
const formatter = new Intl.NumberFormat(navigator.language, {
style: 'currency',
currency: 'USD'
});
const productPrice = 29.99;
const taxAmount = 2.40;
const totalPrice = productPrice + taxAmount;
document.getElementById('product-price').textContent = formatter.format(productPrice);
document.getElementById('tax-amount').textContent = formatter.format(taxAmount);
document.getElementById('total-price').textContent = formatter.format(totalPrice);
Die formatierten Zeichenketten funktionieren wie jeder andere Zeichenkettenwert. Sie können sie in Textinhalte, Attribute oder jeden Kontext einfügen, in dem Sie Informationen für Benutzer anzeigen.
Umgang mit mehreren Währungen
Anwendungen, die mehrere Währungen unterstützen, müssen separate Formatierer für jede Währung erstellen. Der Währungscode bestimmt, welches Symbol angezeigt wird, während das Gebietsschema bestimmt, wie der Betrag formatiert wird.
const locale = navigator.language;
const usdFormatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: 'USD'
});
const eurFormatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: 'EUR'
});
const gbpFormatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: 'GBP'
});
console.log(usdFormatter.format(100));
console.log(eurFormatter.format(100));
console.log(gbpFormatter.format(100));
Jeder Formatierer zeigt das entsprechende Symbol an und folgt den Konventionen des Gebietsschemas des Benutzers für diese Währung. Dies stellt sicher, dass Preise sowohl genau als auch lesbar sind, unabhängig davon, welche Kombination aus Währung und Gebietsschema verwendet wird.