Zahlen in JavaScript auf 2 Dezimalstellen formatieren

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 % angezeigt. Messungen verwenden konsistente Dezimalstellen für bessere Lesbarkeit wie 3,14 Meter.

Die Kontrolle der Dezimalstellen gewährleistet visuelle Konsistenz in der gesamten Anwendung. Ohne explizite Formatierung zeigt JavaScript Zahlen mit variierenden 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 Darstellung führt.

Diese Lektion zeigt, wie Zahlen auf exakt 2 Dezimalstellen oder bis zu 2 Dezimalstellen formatiert werden, und zwar auf eine Weise, die unterschiedliche Locale-Konventionen respektiert.

Verwendung von toFixed() für grundlegende Formatierung

Die toFixed()-Methode konvertiert eine Zahl in einen String mit einer festgelegten Anzahl von Dezimalstellen. Die Anzahl der Dezimalstellen wird als Argument übergeben.

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

Die Methode zeigt immer exakt 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));
});
// Output:
// "5.00"
// "5.50"
// "5.56"
// "6.00"

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

Das Locale-Problem mit toFixed()

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

const price = 19.99;
console.log(price.toFixed(2));
// Output: "19.99" (always uses period)

Für Nutzer in Deutschland, Frankreich, Spanien und vielen anderen Ländern sieht das falsch aus. Sie erwarten "19,99" statt "19.99". Die toFixed()-Methode 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 locale-bewusste Formatierung

Die Intl.NumberFormat-API formatiert Zahlen gemäß den Locale-Konventionen. Erstellen Sie einen Formatter mit einem 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));
// Output: "19,99" (uses comma for German locale)

Derselbe Formatter 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));
// Output: "19.99"

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

Das Dezimaltrennzeichen ändert sich automatisch basierend auf dem Locale.

Formatierung mit exakt 2 Dezimalstellen

Um exakt 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 wird und bei höherer Präzision gerundet wird.

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

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

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

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

Die minimumFractionDigits-Option steuert nachfolgende 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));
// Output: "5"

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

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

Das Setzen beider Optionen auf denselben Wert garantiert konsistente Dezimalstellen über alle Zahlen hinweg.

Formatierung mit bis zu 2 Dezimalstellen

Manchmal möchten Sie Dezimalstellen nur bei Bedarf anzeigen, bis zu maximal 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));
// Output: "5"

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

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

Dieser Ansatz entfernt nachfolgende Nullen, begrenzt aber dennoch die Präzision auf 2 Dezimalstellen. Er eignet sich gut für die Anzeige von Messungen oder Statistiken, bei denen nachfolgende Nullen keine zusätzliche Information liefern.

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

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

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

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

Wiederverwendung von Formatierern für bessere Performance

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 €" anstelle von "5 €" zeigt Präzision und entspricht den Erwartungen der Benutzer bei Preisen.

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

Verwenden Sie toFixed() nur dann, wenn Sie sicher sind, dass alle Ihre Benutzer dieselbe Dezimaltrennzeichen-Konvention verwenden, oder wenn die Ausgabe nicht benutzerseitig ist. Bevorzugen Sie für internationalisierte Anwendungen Intl.NumberFormat.

Verwendung der bevorzugten Locale des Benutzers

Anstatt eine Locale fest zu codieren, verwenden Sie die Spracheinstellungen des Browsers des Benutzers. Die navigator.language-Eigenschaft liefert die bevorzugte Locale des Benutzers.

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

const price = 19.99;
console.log(formatter.format(price));
// Output varies by user's locale
// For en-US: "19.99"
// For de-DE: "19,99"
// For fr-FR: "19,99"

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

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

Dieser Ansatz bietet automatisches Fallback, falls die erste Präferenz des Benutzers nicht unterstützt wird.