Zahlen als 1K, 1M, 1B formatieren

Einführung

Große Zahlen nehmen erheblichen Platz ein und sind schwer schnell zu erfassen. Eine Zahl wie 1.500.000 erfordert sieben Ziffern plus Formatierung, während 1,5M dieselbe Größenordnung in drei Zeichen vermittelt. Diese kompakte Darstellung ist üblich bei Follower-Zahlen in sozialen Medien, Video-Aufrufzahlen, Dashboard-Metriken und Dateigrößen.

JavaScript bietet integrierte Unterstützung für die kompakte Zahlenformatierung über die Intl.NumberFormat-API. Diese API übernimmt die Konvertierung automatisch und passt die Formatierung an verschiedene Sprachen und Regionen an, sodass Ihre Zahlen für alle Benutzer korrekt angezeigt werden.

Warum große Zahlen eine kompakte Formatierung benötigen

Wenn Sie große Zahlen in Benutzeroberflächen anzeigen, treten zwei Probleme auf. Erstens verbrauchen die Zahlen horizontalen Platz. Ein Zähler, der 1.234.567 Aufrufe anzeigt, benötigt mehr Raum als einer, der 1,2M Aufrufe anzeigt. Zweitens verarbeiten Benutzer kompakte Zahlen schneller. Das menschliche Gehirn erkennt 1,5M als eineinhalb Millionen schneller, als 1.500.000 zu analysieren.

Die Kompaktnotation löst beide Probleme, indem sie nachfolgende Nullen durch Größenindikatoren ersetzt. Anstatt alle Ziffern anzuzeigen, zeigt sie nur die signifikanten Stellen gefolgt von einem Buchstaben, der die Größenordnung darstellt. Dieser Ansatz balanciert Präzision mit Lesbarkeit.

Unterschiedliche Kontexte erfordern unterschiedliche Präzisionsgrade. Eine Follower-Zahl in sozialen Medien benötigt selten exakte Zahlen. Die Anzeige von 1,2M Followern anstelle von 1.234.567 liefert ausreichende Informationen. Ein Finanz-Dashboard benötigt möglicherweise mehr Präzision und zeigt 1,23M anstelle von 1,2M an. Die Intl-API ermöglicht es Ihnen, diese Präzision zu steuern und gleichzeitig die kompakte Formatierung beizubehalten.

Verwendung der Kompaktnotation in JavaScript

Die Option notation in Intl.NumberFormat steuert, wie Zahlen dargestellt werden. Wenn sie auf "compact" gesetzt wird, wird die kompakte Formatierung aktiviert.

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

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

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

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

Der Formatter wählt automatisch den passenden Größenindikator basierend auf der Größe der Zahl. Tausende werden zu K, Millionen zu M und Milliarden zu B. Der Formatter reduziert die Zahl auch auf eine lesbare Darstellung und zeigt 1,5K anstelle von 1,5 Tausend.

Sie müssen keine Logik schreiben, um zu bestimmen, wann K, M oder B verwendet werden soll. Die Intl-API trifft diese Entscheidung basierend auf der Größenordnung der Zahl.

Wie die kompakte Notation verschiedene Größenordnungen formatiert

Die kompakte Notation wendet unterschiedliche Formatierungen bei verschiedenen Größenordnungen an. Das Verständnis dieser Schwellenwerte hilft Ihnen vorherzusagen, wie Ihre Zahlen angezeigt werden.

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

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

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

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

console.log(formatter.format(999000));
// Output: "999K"

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

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

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

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

Zahlen unter eintausend werden ohne Kompaktierung angezeigt. Sobald eine Zahl eintausend erreicht, wechselt sie zur K-Notation. Das gleiche Muster setzt sich für Millionen, Milliarden und Billionen fort.

Der Formatter rundet Zahlen, um sie in die kompakte Darstellung einzupassen. Eine Zahl wie 1.234.567 wird standardmäßig zu 1,2M. Die nächste Lektion behandelt, wie Sie die Anzahl der in der kompakten Notation angezeigten Dezimalstellen steuern können.

Wahl zwischen kurzer und langer Anzeige

Die kompakte Notation bietet zwei Anzeigestile. Der kurze Stil verwendet Buchstaben wie K, M und B. Der lange Stil schreibt die Größenordnung als Wort aus.

const shortFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "short"
});

console.log(shortFormatter.format(1500));
// Output: "1.5K"

console.log(shortFormatter.format(1500000));
// Output: "1.5M"

const longFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(longFormatter.format(1500));
// Output: "1.5 thousand"

console.log(longFormatter.format(1500000));
// Output: "1.5 million"

Die Option compactDisplay steuert dieses Verhalten. Sie akzeptiert zwei Werte: "short" und "long". Wenn Sie diese Option weglassen, wird standardmäßig "short" verwendet.

Die kurze Anzeige funktioniert gut, wenn der Platz begrenzt ist. Dashboard-Karten, mobile Oberflächen und Datentabellen profitieren von der Kürze von K, M und B. Die lange Anzeige funktioniert besser, wenn Klarheit wichtiger ist als Platz. Bildungsinhalte, Finanzberichte und barrierefreie Oberflächen profitieren davon, die Größenordnung auszuschreiben.

Wie die kompakte Notation in verschiedenen Sprachen funktioniert

Die kompakte Notation passt sich an die im Locale angegebene Sprache und Region an. Verschiedene Sprachen verwenden unterschiedliche Buchstaben, Wörter und Formatierungskonventionen für Größenindikatoren.

const enFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact"
});

console.log(enFormatter.format(1500000));
// Output: "1.5M"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 M"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(15000000));
// Output: "1500万"

Französisch verwendet M mit einem Leerzeichen davor. Deutsch verwendet Mio. als Abkürzung für Million. Japanisch verwendet ein völlig anderes Zahlensystem mit 万, das zehntausend darstellt.

Diese Unterschiede erfolgen automatisch basierend auf dem Locale. Sie müssen keinen locale-spezifischen Code schreiben, um verschiedene Größenindikatoren zu handhaben. Übergeben Sie die Sprachpräferenz des Benutzers an den Formatter, und er erzeugt die korrekte Ausgabe für diese Sprache.

Die lange Anzeige passt sich ebenfalls an jede Sprache an.

const enFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(enFormatter.format(1500000));
// Output: "1.5 million"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 million"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"

Deutsch verwendet Millionen für die Pluralform von Million. Französisch verwendet million ohne s. Die Intl-API behandelt diese sprachlichen Variationen für Sie.

Wenn kleine Zahlen nicht kompaktiert werden

Zahlen unterhalb des Kompaktierungsschwellenwerts werden normal angezeigt. Dieser Schwellenwert variiert je nach Locale, beginnt aber typischerweise bei eintausend in den meisten westlichen Sprachen.

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

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

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

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

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

Dieses Verhalten verhindert eine ungeschickte Formatierung bei kleinen Zahlen. Die Anzeige von 500 als 500 ist klarer als die Anzeige als 0,5K. Der Formatter wendet die kompakte Notation nur an, wenn sie die Lesbarkeit verbessert.

Der Schwellenwert liegt nicht immer bei eintausend. Einige Sprachen, wie Japanisch, verwenden unterschiedliche Zahlengruppierungssysteme. Japanisch gruppiert nach zehntausend, sodass die kompakte Notation möglicherweise bei einem anderen Schwellenwert beginnt.

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(9999));
// Output: "9999"

console.log(jaFormatter.format(10000));
// Output: "1万"

Die Intl-API behandelt diese locale-spezifischen Schwellenwerte automatisch.

Kombination der kompakten Notation mit anderen Formatierungsoptionen

Die kompakte Notation funktioniert mit anderen Zahlenformatierungsoptionen. Sie können Dezimalstellen, Gruppierungstrennzeichen und Rundung steuern, während Sie die kompakte Notation verwenden.

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

console.log(formatter.format(1234567));
// Output: "1.2M"

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

console.log(preciseFormatter.format(1234567));
// Output: "1.23M"

const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 0
});

console.log(noDecimalsFormatter.format(1234567));
// Output: "1M"

Die Option maximumFractionDigits steuert, wie viele Dezimalstellen nach der ganzen Zahl erscheinen. Wenn sie auf 0 gesetzt wird, werden alle Dezimalstellen entfernt, wodurch die Zahl noch kompakter wird.

Sie können auch die kompakte Notation mit Mindeststellenoptionen kombinieren, um eine konsistente Formatierung über einen Zahlenbereich hinweg sicherzustellen.

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

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

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

console.log(formatter.format(2000));
// Output: "2.0K"

Dieser Ansatz stellt sicher, dass alle Zahlen eine Dezimalstelle anzeigen, was hilft, visuelle Konsistenz in Tabellen und Diagrammen aufrechtzuerhalten.

Wann kompakte Notation verwendet werden sollte

Kompakte Notation funktioniert am besten, wenn der Platz begrenzt ist oder wenn exakte Präzision nicht kritisch ist. Social-Media-Zähler, Dashboard-Metriken und zusammenfassende Statistiken sind ideale Anwendungsfälle. Benutzer müssen nicht wissen, dass ein Video genau 1.234.567 Aufrufe hat. Zu wissen, dass es 1,2 Mio. Aufrufe hat, liefert ausreichende Informationen.

Verwenden Sie keine kompakte Notation, wenn exakte Zahlen wichtig sind. Finanztransaktionen, wissenschaftliche Messungen und juristische Dokumente erfordern volle Präzision. Ein Kontostand sollte 1.234,56 $ anzeigen, nicht 1,2 Tsd. $. Eine Rechnung sollte 1.500,00 $ anzeigen, nicht 1,5 Tsd. $.

Berücksichtigen Sie Ihre Zielgruppe und den Kontext. Datenanalysten bevorzugen möglicherweise vollständige Zahlen, um exakte Werte zu verstehen. Allgemeine Verbraucher bevorzugen oft kompakte Zahlen, weil sie diese schneller verarbeiten. Einige Benutzeroberflächen bieten beide Optionen an, zeigen standardmäßig kompakte Zahlen an und bieten eine Möglichkeit, exakte Zahlen auf Anfrage anzuzeigen.

Kompakte Notation funktioniert auch gut für Dateigrößen, obwohl die Implementierung sich leicht unterscheidet. Dateigrößen verwenden typischerweise Potenzen von 1024 statt 1000, was zu Kibibytes und Mebibytes statt Kilobytes und Megabytes führt. Die Intl-API verarbeitet keine binären Einheiten, daher erfordert die Formatierung von Dateigrößen benutzerdefinierte Logik oder eine dedizierte Bibliothek.