Wie entfernt man nachfolgende Nullen nach dem Dezimalpunkt?

Einführung

Bei der Formatierung von Zahlen haben einige Werte naturgemäß nachgestellte Nullen nach dem Dezimalpunkt. Die Zahl 1.5 könnte als 1,50 angezeigt werden, oder 3 als 3,00. Diese nachgestellten Nullen können bei Preisen sinnvoll sein, wo Sie Cent konsistent anzeigen möchten, aber sie wirken unnötig bei der Anzeige von Statistiken oder Messungen.

JavaScripts Intl.NumberFormat gibt Ihnen die Kontrolle darüber, ob nachgestellte Nullen angezeigt werden. Sie können den Formatierer so konfigurieren, dass er sie entfernt, beibehält oder je nach Ihren Anforderungen unterschiedliche Regeln anwendet.

Was nachgestellte Nullen sind

Nachgestellte Nullen sind Nullen, die am Ende einer Zahl nach dem Dezimalpunkt erscheinen. Sie ändern den mathematischen Wert der Zahl nicht, beeinflussen aber das Erscheinungsbild der Zahl bei der Anzeige.

// Diese Zahlen haben den gleichen Wert, aber unterschiedliche nachgestellte Nullen
1.5   // Keine nachgestellten Nullen
1.50  // Eine nachgestellte Null
1.500 // Zwei nachgestellte Nullen

Nachgestellte Nullen können auftreten, wenn Sie angeben, wie viele Dezimalstellen angezeigt werden sollen. Wenn eine Zahl weniger signifikante Stellen hat als die Anzahl der von Ihnen angegebenen Dezimalstellen, fügt der Formatierer Nullen hinzu, um die verbleibenden Positionen zu füllen.

Wie Intl.NumberFormat Nachkommastellen standardmäßig anzeigt

Standardmäßig zeigt Intl.NumberFormat bis zu 3 Nachkommastellen an und entfernt nachgestellte Nullen. Das bedeutet, dass die meisten Zahlen ohne unnötige Nullen erscheinen.

const formatter = new Intl.NumberFormat("en-US");

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

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

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

Der Formatierer behandelt 1.5 und 1.50 als denselben Wert und zeigt sie identisch an. Zahlen mit mehr als 3 Dezimalstellen werden auf 3 Stellen gerundet.

Minimale und maximale Nachkommastellen festlegen

Die Optionen minimumFractionDigits und maximumFractionDigits steuern, wie viele Stellen nach dem Dezimalpunkt angezeigt werden. Diese beiden Optionen arbeiten zusammen, um zu bestimmen, ob nachfolgende Nullen angezeigt werden.

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

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

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

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

Wenn minimumFractionDigits und maximumFractionDigits auf denselben Wert gesetzt sind, wird jede Zahl mit genau dieser Anzahl von Dezimalstellen angezeigt. Zahlen mit weniger Stellen erhalten nachfolgende Nullen, und Zahlen mit mehr Stellen werden gerundet.

Nachfolgende Nullen entfernen

Um nachfolgende Nullen zu entfernen, setzen Sie minimumFractionDigits auf 0 und maximumFractionDigits auf die maximale Anzahl von Dezimalstellen, die Sie zulassen möchten. Diese Konfiguration weist den Formatierer an, zwischen 0 und N Dezimalstellen anzuzeigen und nur so viele zu verwenden, wie benötigt werden.

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

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

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

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

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

Der Formatierer zeigt ganze Zahlen ohne Dezimalpunkt an, Zahlen mit einer Dezimalstelle unverändert und entfernt alle nachfolgenden Nullen, die sonst erscheinen würden. Zahlen werden weiterhin auf die maximale Anzahl von Dezimalstellen gerundet, wenn sie diese überschreiten.

Ein Minimum größer als Null festlegen

Sie können minimumFractionDigits auf einen Wert größer als Null setzen und trotzdem zulassen, dass nachfolgende Nullen entfernt werden. Dies stellt sicher, dass immer mindestens einige Dezimalstellen angezeigt werden, während Nullen über dieses Minimum hinaus entfernt werden.

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

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

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

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

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

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

Die Zahl 1 wird als 1.0 angezeigt, da das Minimum 1 Dezimalstelle beträgt. Die Zahl 1.5 wird unverändert angezeigt. Bei der Zahl 1.50 wird die nachfolgende Null entfernt. Zahlen mit mehr als 3 Dezimalstellen werden auf 3 gerundet.

Wann Nullen am Ende beibehalten werden sollten

Behalten Sie Nullen am Ende bei, wenn Sie eine konsistente Präzision über alle Zahlen hinweg zeigen müssen. Dies ist üblich für Preise, Finanzbeträge und Messungen, bei denen die Anzahl der Dezimalstellen eine Bedeutung vermittelt.

// Preise sollten konsistente Dezimalstellen anzeigen
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

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

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

Währungsformatierer verwenden diesen Ansatz standardmäßig. Beide Beträge werden mit genau 2 Dezimalstellen angezeigt, was sie leicht vergleichbar macht und verdeutlicht, dass es sich um Geldwerte handelt.

Wann Nullen am Ende entfernt werden sollten

Entfernen Sie Nullen am Ende bei der Anzeige von Statistiken, Prozentsätzen, Messungen oder anderen Werten, bei denen die nachgestellten Nullen keine Informationen hinzufügen. Dies erzeugt eine sauberere, besser lesbare Ausgabe.

// Statistiken sehen ohne nachgestellte Nullen übersichtlicher aus
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(`Average: ${statsFormatter.format(3.5)} items`);
// Output: "Average: 3.5 items"

console.log(`Total: ${statsFormatter.format(100)} items`);
// Output: "Total: 100 items"

// Prozentsätze funktionieren oft besser ohne nachgestellte Nullen
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

console.log(percentFormatter.format(0.75));
// Output: "75%"

console.log(percentFormatter.format(0.755));
// Output: "75.5%"

Die Statistiken und Prozentsätze zeigen nur die benötigten Dezimalstellen an. Ganze Zahlen erscheinen ohne Dezimalpunkte, und Zahlen mit aussagekräftigen Dezimalstellen werden ohne unnötige nachgestellte Nullen angezeigt.

Wie das Gebietsschema die Dezimalanzeige beeinflusst

Die Position des Dezimalpunkts und der Zifferngruppierungszeichen variiert je nach Gebietsschema, aber die Regeln für nachgestellte Nullen funktionieren in allen Gebietsschemata gleich. Die Optionen minimumFractionDigits und maximumFractionDigits haben unabhängig vom verwendeten Gebietsschema die gleiche Wirkung.

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

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

console.log(formatterEN.format(1234.5));
// Output: "1,234.5"

console.log(formatterDE.format(1234.5));
// Output: "1.234,5"

Beide Formatierer entfernen nachgestellte Nullen und zeigen die Zahl mit einer Dezimalstelle an. Der Unterschied besteht darin, dass das US-englische Format einen Punkt für den Dezimalpunkt und Kommas für Tausendertrennzeichen verwendet, während das deutsche Format die entgegengesetzte Konvention verwendet.