Währungen mit gebietsspezifischen Symbolen formatieren

Einführung

Währungssymbole kennzeichnen, welche Währung ein Preis darstellt. 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 fest codieren wie "$" + amount, gehen Sie davon aus, dass alle Benutzer denselben Konventionen folgen.

JavaScript stellt die Intl.NumberFormat-API bereit, um Währungsbeträge mit gebietsspezifischen 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.

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 Formatierungslogik, die sowohl die angezeigte Währung als auch das Gebietsschema des Benutzers versteht, der sie betrachtet.

Währung mit Intl.NumberFormat formatieren

Der Intl.NumberFormat-Konstruktor erstellt einen Währungsformatierer, wenn Sie style: 'currency' in den Optionen übergeben. Sie müssen außerdem 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));
// Output: "$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 Zeichenkette mit Dollarzeichen, 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));
// Output: "$100.00"

console.log(eurFormatter.format(100));
// Output: "€100.00"

console.log(gbpFormatter.format(100));
// Output: "£100.00"

Jeder Formatierer fügt automatisch das entsprechende Währungssymbol ein. Sie müssen nicht wissen, welches Symbol zu welchem Währungscode gehört.

Gebietsschema bestimmt 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 Gebietsschema 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));
// Output: "€1,234.56"

console.log(deFormatter.format(1234.56));
// Output: "1.234,56 €"

console.log(frFormatter.format(1234.56));
// Output: "1 234,56 €"

Alle drei Formatierer zeigen Euro an, verwenden jedoch jeweils 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 als Tausendertrennzeichen und ein Komma als Dezimaltrennzeichen. Der französische Formatierer verwendet Leerzeichen als Tausendertrennzeichen.

Die Intl-API verarbeitet diese Unterschiede automatisch basierend auf dem von Ihnen angegebenen Gebietsschema. Sie müssen die Formatierungsregeln für jedes Gebietsschema nicht kennen.

Währungsformatierung umfasst Dezimalstellen

Währungsformatierer bestimmen automatisch die entsprechende Anzahl von Dezimalstellen basierend auf der Währung. Die meisten Währungen verwenden zwei Dezimalstellen für Cent oder entsprechende 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 für US-Dollar immer zwei Dezimalstellen an, füllt bei Bedarf mit Nullen auf und rundet, wenn die Eingabe eine höhere Genauigkeit aufweist.

Einige Währungen haben null Dezimalstellen. Der japanische Yen hat keine Brucheinheit, 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 Dezimalgenauigkeit für jede Währung und wendet sie automatisch an.

Währung für das Gebietsschema des Benutzers formatieren

Anstatt ein bestimmtes Gebietsschema fest zu codieren, können Sie die Spracheinstellungen des Browsers des Benutzers verwenden. Die Eigenschaft navigator.language gibt das bevorzugte Gebietsschema 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 varies by user's locale
// For en-US: "$1,234.56"
// For de-DE: "1.234,56 $"
// For 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 Array navigator.languages übergeben, um Fallback-Verhalten zu aktivieren, wenn die oberste Präferenz 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 das erste Gebietsschema aus dem Array, das sie unterstützt, und bietet automatische Fallback-Behandlung.

Wiederverwendung von Währungsformatierern

Das Erstellen einer neuen Instanz von Intl.NumberFormat umfasst das Laden von Gebietsschemadaten 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 die Erstellung eines neuen Formatters für jeden Preis. Der Leistungsunterschied wird signifikant, wenn Arrays oder Listen mit vielen Werten formatiert werden.

Preise in Anwendungen anzeigen

Sie können Währungsformatter überall dort verwenden, wo Sie Preise für Benutzer anzeigen. Dies umfasst 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.

Mehrere Währungen verarbeiten

Anwendungen, die mehrere Währungen unterstützen, müssen separate Formatter 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 Formatter zeigt das entsprechende Symbol an und folgt den Konventionen des Gebietsschemas des Benutzers für diese Währung. Dies stellt sicher, dass Preise sowohl korrekt als auch lesbar sind, unabhängig davon, welche Währungs- oder Gebietsschemakombination verwendet wird.