Wie entfernt man nachfolgende Nullen nach dem Dezimaltrennzeichen?

Einführung

Wenn Sie Zahlen formatieren, haben einige Werte natürlicherweise nachfolgende Nullen nach dem Dezimaltrennzeichen. Die Zahl 1,5 könnte als 1,50 angezeigt werden oder 3 als 3,00. Diese nachfolgenden Nullen können bei Preisen sinnvoll sein, wenn Sie Cent konsistent anzeigen möchten, wirken jedoch unnötig bei der Anzeige von Statistiken oder Messwerten.

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

Was nachfolgende Nullen sind

Nachfolgende Nullen sind Nullen, die am Ende einer Zahl nach dem Dezimaltrennzeichen erscheinen. Sie ändern nicht den mathematischen Wert der Zahl, beeinflussen jedoch, wie die Zahl bei der Anzeige aussieht.

// These numbers have the same value but different trailing zeros
1.5   // No trailing zeros
1.50  // One trailing zero
1.500 // Two trailing zeros

Nachfolgende Nullen können erscheinen, wenn Sie angeben, wie viele Dezimalstellen angezeigt werden sollen. Wenn eine Zahl weniger signifikante Ziffern hat als die von Ihnen angegebene Anzahl an Dezimalstellen, fügt der Formatter 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 nachfolgende 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));
// Output: "1.5"

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

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

Der Formatter behandelt 1,5 und 1,50 als denselben Wert und zeigt sie identisch an. Zahlen mit mehr als 3 Dezimalstellen werden auf 3 Ziffern gerundet.

Minimale und maximale Nachkommastellen festlegen

Die Optionen minimumFractionDigits und maximumFractionDigits steuern, wie viele Ziffern nach dem Dezimaltrennzeichen erscheinen. 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 an Dezimalstellen angezeigt. Zahlen mit weniger Ziffern erhalten nachfolgende Nullen, und Zahlen mit mehr Ziffern werden gerundet.

Nachfolgende Nullen entfernen

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

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 Dezimaltrennzeichen an, Zahlen mit einer Dezimalstelle unverändert und entfernt alle nachfolgenden Nullen, die sonst erschienen wären. Zahlen werden weiterhin auf die maximale Anzahl an 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 dennoch 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 nachfolgende Nullen beibehalten werden sollten

Behalten Sie nachfolgende Nullen bei, wenn Sie eine konsistente Präzision über alle Zahlen hinweg anzeigen müssen. Dies ist üblich bei Preisen, Finanzbeträgen und Messungen, bei denen die Anzahl der Dezimalstellen eine Bedeutung vermittelt.

// Prices should show consistent decimal places
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 verstärkt, dass es sich um Geldbeträge handelt.

Wann nachfolgende Nullen entfernt werden sollten

Entfernen Sie nachfolgende Nullen bei der Anzeige von Statistiken, Prozentsätzen, Messungen oder beliebigen Werten, bei denen die nachfolgenden Nullen keine zusätzlichen Informationen liefern. Dies erzeugt eine übersichtlichere und besser lesbare Ausgabe.

// Statistics look cleaner without trailing zeros
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"

// Percentages often work better without trailing zeros
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 Dezimalstellen an, die sie benötigen. Ganze Zahlen erscheinen ohne Dezimalpunkt, und Zahlen mit aussagekräftigen Dezimalstellen zeigen diese ohne unnötige nachfolgende Nullen.

Wie das Gebietsschema die Dezimaldarstellung beeinflusst

Die Position des Dezimaltrennzeichens und der Zifferngruppierungszeichen variiert je nach Locale, aber die Regeln für nachfolgende Nullen funktionieren in allen Locales gleich. Die Optionen minimumFractionDigits und maximumFractionDigits haben unabhängig davon, welche Locale Sie verwenden, denselben Effekt.

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 nachfolgende Nullen und zeigen die Zahl mit einer Dezimalstelle an. Der Unterschied besteht darin, dass das US-amerikanische Englisch-Format einen Punkt als Dezimaltrennzeichen und Kommas als Tausendertrennzeichen verwendet, während das deutsche Format die umgekehrte Konvention nutzt.