Zahlen in Währungen in JavaScript formatieren: 3 beste Methoden

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Geld liebt Ordnung: Wie verwandelt man eine Zahl in einen schönen Preis in JavaScript?

Stellen Sie sich vor: Sie schreiben einen Online-Shop. Der Server gibt den Preis eines Artikels aus – einfach die Zahl 1999.5. Dem Benutzer eine "rohe" Zahl zu zeigen, ist ein Fauxpas. Der Kunde möchte "$1,999.50" sehen oder, wenn Sie in Deutschland sind, "1.999,50 €".

Diese Frage quält Tausende von Entwicklern auf Stack Overflow. Heute werden wir ein für alle Mal klären, wie man Zahlen in JavaScript korrekt in Währungsstrings formatiert. Sie lernen die eingebauten Methoden, ihre Besonderheiten und wann welche Methode am besten geeignet ist.

Warum ist einfaches `.toFixed(2)` eine schlechte Idee?

Viele Anfänger machen es so:

const price = 1999.5;console.log('$' + price.toFixed(2)); // "$1999.50"

Es scheint zu funktionieren. Aber das ist eine Zeitbombe. Warum?

Keine Tausendertrennzeichen. $1999.50 liest sich schlechter als $1,999.50.
Keine Lokalisierung. In Europa ist das Komma das Dezimaltrennzeichen, der Punkt das Tausendertrennzeichen. Ihr Code würde brechen.
Das Währungssymbol ist fest codiert. $ in € zu ändern bedeutet, in den Code eingreifen zu müssen.

Glücklicherweise bietet uns modernes JavaScript elegante Werkzeuge. Lassen Sie uns diese untersuchen.

Methode Nr. 1: `Intl.NumberFormat` – der König der Formatierung (empfohlen)

Dieses Objekt ist Teil der Internationalization API. Es wurde speziell für die Arbeit mit Locale, Währungen und Zahlen entwickelt. Dies ist die korrekteste und flexibelste Methode.

Basisbeispiel

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

console.log(formatter.format(1999.5)); // "1.999,50 €"

Fertig! JavaScript hat selbstständig Punkte, Kommas gesetzt und das Euro-Symbol hinzugefügt. Magie, oder?

Wie funktioniert das?

Der Konstruktor akzeptiert zwei Argumente:

locales – ein String mit dem Locale-Code (z.B. 'en-US', 'de-DE', 'ru-RU').
options – ein Konfigurationsobjekt. Wesentlich: style: 'currency' und currency: 'USD'.

Anpassung an jede Währung

Möchten Sie Dollar für die USA?

const usFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD'});console.log(usFormatter.format(2500)); // "$2,500.00"

Euro für Deutschland?

const deFormatter = new Intl.NumberFormat('de-DE', {    style: 'currency',    currency: 'EUR'});console.log(deFormatter.format(2500)); // "2.500,00 €"

Beachten Sie: In Deutschland ist der Punkt das Tausendertrennzeichen und das Komma das Dezimalzeichen. Intl erledigt alles für Sie.

Zusätzliche Optionen

Möchten Sie den Nachkommateil entfernen (keine Cent)?

const formatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 0,    maximumFractionDigits: 0});console.log(formatter.format(1999.5)); // "$2,000" (gerundet)

Müssen immer 4 Nachkommastellen angezeigt werden? Bitte sehr:

const preciseFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 4});console.log(preciseFormatter.format(1.2)); // "$1.2000"

Vorteile: nativ, schnell, unterstützt alle Währungen der Welt, einfach die Locale zu wechseln.

Nachteile: funktioniert nicht in sehr alten Browsern (IE 10 und älter – aber das ist bereits Geschichte).