Wie man Zahlen in JavaScript auf 2 Dezimalstellen formatiert

Einführung

Viele Anwendungen müssen Zahlen mit einer festen Anzahl von Dezimalstellen anzeigen. Preise zeigen typischerweise zwei Dezimalstellen wie $19.99. Prozentsätze werden oft als 45.50% dargestellt. Messungen verwenden konsistente Dezimalstellen für bessere Lesbarkeit, wie 3.14 Meter.

Die Kontrolle der Dezimalstellen gewährleistet visuelle Konsistenz in Ihrer Anwendung. Ohne explizite Formatierung zeigt JavaScript Zahlen mit unterschiedlichen Dezimalstellen basierend auf ihrem tatsächlichen Wert an. Die Zahl 5 wird als "5" angezeigt, während 5.5 als "5.5" angezeigt wird, was zu inkonsistenter Ausrichtung und Erscheinung führt.

Diese Lektion zeigt, wie man Zahlen auf genau 2 Dezimalstellen oder bis zu 2 Dezimalstellen formatiert, und zwar so, dass verschiedene Locale-Konventionen berücksichtigt werden.

Verwendung von toFixed() für grundlegende Formatierung

Die Methode toFixed() konvertiert eine Zahl in einen String mit einer bestimmten Anzahl von Dezimalstellen. Übergeben Sie die Anzahl der Dezimalstellen als Argument.

const price = 19.9;
const formatted = price.toFixed(2);
console.log(formatted);
// Ausgabe: "19.90"

Die Methode zeigt immer genau 2 Dezimalstellen an. Wenn die Zahl weniger Dezimalstellen hat, füllt toFixed() mit Nullen auf. Wenn sie mehr Dezimalstellen hat, rundet die Methode auf 2 Stellen.

const examples = [5, 5.5, 5.555, 5.999];

examples.forEach(num => {
  console.log(num.toFixed(2));
});
// Ausgabe:
// "5.00"
// "5.50"
// "5.56"
// "6.00"

Die Methode toFixed() gibt einen String zurück, keine Zahl. Dies ist beabsichtigt, da die nachfolgenden Nullen für die Anzeige bedeutsam sind, aber verloren gehen würden, wenn sie als Zahl zurückgegeben würden.

Das Locale-Problem mit toFixed()

Die Methode toFixed() verwendet immer einen Punkt als Dezimaltrennzeichen, unabhängig vom Locale des Benutzers. Viele Länder verwenden ein Komma als Dezimaltrennzeichen anstelle eines Punktes.

const price = 19.99;
console.log(price.toFixed(2));
// Ausgabe: "19.99" (verwendet immer einen Punkt)

Für Benutzer in Deutschland, Frankreich, Spanien und vielen anderen Ländern sieht dies falsch aus. Sie erwarten "19,99" anstelle von "19.99". Die Methode toFixed() kann keine locale-gerechte Ausgabe erzeugen.

Um Zahlen korrekt für verschiedene Locales zu formatieren, verwenden Sie die Intl.NumberFormat API.

Verwendung von Intl.NumberFormat für lokalisierungsgerechte Formatierung

Die Intl.NumberFormat-API formatiert Zahlen gemäß den lokalen Konventionen. Erstellen Sie einen Formatierer mit einer Locale und Optionen, und rufen Sie dann dessen format()-Methode mit einer Zahl auf.

const formatter = new Intl.NumberFormat("de-DE", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

const price = 19.99;
console.log(formatter.format(price));
// Ausgabe: "19,99" (verwendet Komma für deutsche Locale)

Derselbe Formatierer erzeugt unterschiedliche Ausgaben für verschiedene Locales.

const price = 19.99;

const usFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

const deFormatter = new Intl.NumberFormat("de-DE", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(usFormatter.format(price));
// Ausgabe: "19.99"

console.log(deFormatter.format(price));
// Ausgabe: "19,99"

Das Dezimaltrennzeichen ändert sich automatisch basierend auf der Locale.

Formatierung mit genau 2 Dezimalstellen

Um genau 2 Dezimalstellen anzuzeigen, setzen Sie sowohl minimumFractionDigits als auch maximumFractionDigits auf 2. Dies stellt sicher, dass die Ausgabe immer 2 Dezimalstellen hat, bei Bedarf mit Nullen aufgefüllt und gerundet wird, wenn die Zahl mehr Präzision hat.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(5));
// Ausgabe: "5.00"

console.log(formatter.format(5.5));
// Ausgabe: "5.50"

console.log(formatter.format(5.555));
// Ausgabe: "5.56"

Die Option minimumFractionDigits steuert nachgestellte Nullen. Ohne sie würden Zahlen mit weniger Dezimalstellen die Nullen nicht anzeigen.

const withoutMinimum = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2
});

console.log(withoutMinimum.format(5));
// Ausgabe: "5"

const withMinimum = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(withMinimum.format(5));
// Ausgabe: "5.00"

Wenn beide Optionen auf denselben Wert gesetzt werden, garantiert dies konsistente Dezimalstellen für alle Zahlen.

Formatierung mit bis zu 2 Dezimalstellen

Manchmal möchten Sie Dezimalstellen nur bei Bedarf anzeigen, bis zu einem Maximum von 2. Setzen Sie maximumFractionDigits auf 2 und minimumFractionDigits auf 0 oder lassen Sie es ganz weg.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(formatter.format(5));
// Ausgabe: "5"

console.log(formatter.format(5.5));
// Ausgabe: "5.5"

console.log(formatter.format(5.555));
// Ausgabe: "5.56"

Dieser Ansatz entfernt nachgestellte Nullen, begrenzt aber dennoch die Präzision auf 2 Dezimalstellen. Er eignet sich gut für die Anzeige von Messungen oder Statistiken, bei denen nachgestellte Nullen keine Informationen hinzufügen.

Der Standardwert für minimumFractionDigits ist 0 für einfache Zahlenformatierung, daher können Sie ihn weglassen.

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2
});

console.log(formatter.format(5));
// Ausgabe: "5"

console.log(formatter.format(5.5));
// Ausgabe: "5.5"

Wiederverwendung von Formatierern für bessere Leistung

Das Erstellen einer neuen Intl.NumberFormat-Instanz ist relativ aufwendig. Wenn Sie viele Zahlen mit denselben Optionen formatieren, erstellen Sie den Formatierer einmal und verwenden Sie ihn wieder.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

const prices = [19.99, 29.5, 99, 149.999];

prices.forEach(price => {
  console.log(formatter.format(price));
});
// Output:
// "19.99"
// "29.50"
// "99.00"
// "150.00"

Dieses Muster ist effizienter als das Erstellen eines neuen Formatierers für jede Zahl.

Wann welcher Ansatz zu verwenden ist

Verwenden Sie genau 2 Dezimalstellen bei der Anzeige von Preisen, Währungsbeträgen oder Werten, bei denen die Dezimalstellen eine semantische Bedeutung haben. Die Anzeige von "5,00 €" statt "5 €" zeigt Präzision und entspricht den Erwartungen der Nutzer bei Preisen.

Verwenden Sie bis zu 2 Dezimalstellen bei der Anzeige von Statistiken, Messungen oder berechneten Werten, bei denen nachfolgende Nullen keine Informationen hinzufügen. Die Anzeige von "5 Meter" statt "5,00 Meter" ist übersichtlicher und besser lesbar.

Verwenden Sie toFixed() nur, wenn Sie sicher sind, dass alle Ihre Nutzer dieselbe Dezimaltrennzeichenkonvention verwenden oder wenn die Ausgabe nicht für Endnutzer bestimmt ist. Für internationalisierte Anwendungen ist Intl.NumberFormat vorzuziehen.

Verwendung der bevorzugten Sprache des Nutzers

Anstatt eine Sprache fest zu codieren, verwenden Sie die Spracheinstellungen des Browsers des Nutzers. Die Eigenschaft navigator.language gibt die bevorzugte Sprache des Nutzers an.

const formatter = new Intl.NumberFormat(navigator.language, {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

const price = 19.99;
console.log(formatter.format(price));
// Ausgabe variiert je nach Sprache des Nutzers
// Für en-US: "19.99"
// Für de-DE: "19,99"
// Für fr-FR: "19,99"

Sie können auch das gesamte navigator.languages-Array übergeben, damit die Intl-API die erste unterstützte Sprache aus den Präferenzen des Nutzers auswählt.

const formatter = new Intl.NumberFormat(navigator.languages, {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

Dieser Ansatz bietet automatischen Fallback, wenn die erste Präferenz des Nutzers nicht unterstützt wird.