Wie man Zahlen als 1K, 1M, 1B formatiert

Einführung

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

JavaScript bietet integrierte Unterstützung für kompakte Zahlenformatierung durch die Intl.NumberFormat API. Diese API übernimmt die Konvertierung automatisch und passt die Formatierung an verschiedene Sprachen und Regionen an, um sicherzustellen, dass 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, entstehen zwei Probleme. Erstens verbrauchen die Zahlen horizontalen Platz. Ein Zähler, der 1.234.567 Aufrufe anzeigt, benötigt mehr Platz als einer, der 1,2M Aufrufe anzeigt. Zweitens verarbeitet das menschliche Gehirn kompakte Zahlen schneller. Das Gehirn erkennt 1,5M als eineinhalb Millionen schneller als beim Analysieren von 1.500.000.

Die kompakte Notation löst beide Probleme, indem nachfolgende Nullen durch Größenindikatoren ersetzt werden. Anstatt alle Ziffern anzuzeigen, werden nur die signifikanten Stellen gefolgt von einem Buchstaben, der die Größenordnung repräsentiert, angezeigt. Dieser Ansatz balanciert Präzision mit Lesbarkeit.

Verschiedene Kontexte erfordern unterschiedliche Präzisionsstufen. Bei der Anzahl der Follower in sozialen Medien sind exakte Zahlen selten notwendig. Die Anzeige von 1,2M Followern anstelle von 1.234.567 bietet ausreichende Informationen. Ein Finanz-Dashboard könnte mehr Präzision benötigen und 1,23M anstelle von 1,2M anzeigen. Die Intl-API ermöglicht es Ihnen, diese Präzision zu steuern und gleichzeitig die kompakte Formatierung beizubehalten.

Verwendung der kompakten Notation 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));
// Ausgabe: "1.5K"

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

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

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

Sie müssen keine Logik schreiben, um zu bestimmen, wann K, M oder B verwendet werden soll. Die Intl-API übernimmt 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 Komprimierung angezeigt. Sobald eine Zahl eintausend erreicht, wechselt sie zur K-Notation. Das gleiche Muster setzt sich für Millionen, Milliarden und Billionen fort.

Der Formatierer 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 man die Anzahl der angezeigten Dezimalstellen in der kompakten Notation steuert.

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 Benutzeroberflä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 Benutzeroberflächen profitieren davon, die Größenordnung auszuschreiben.

Wie die kompakte Notation in verschiedenen Sprachen funktioniert

Die kompakte Notation passt sich an die im Gebietsschema 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 万 für zehntausend.

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

Auch die lange Anzeige passt sich jeder 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 verarbeitet diese sprachlichen Variationen für Sie.

Wenn kleine Zahlen nicht komprimiert werden

Zahlen unter dem Kompaktheitsschwellenwert werden normal angezeigt. Dieser Schwellenwert variiert je nach Gebietsschema, beginnt aber in den meisten westlichen Sprachen typischerweise bei eintausend.

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 ungeschickte Formatierung für kleine Zahlen. Die Anzeige von 500 als 500 ist klarer als die Anzeige als 0,5K. Der Formatierer wendet die kompakte Notation nur an, wenn sie die Lesbarkeit verbessert.

Der Schwellenwert ist nicht immer eintausend. Einige Sprachen, wie Japanisch, verwenden andere Zahlgruppierungssysteme. Japanisch gruppiert nach zehntausend, daher könnte die kompakte Notation bei einem anderen Schwellenwert beginnen.

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 verarbeitet diese gebietsschemaspezifischen Schwellenwerte automatisch.

Kombination von kompakter Notation mit anderen Formatierungsoptionen

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 sie auf 0 setzen, werden alle Dezimalstellen entfernt, wodurch die Zahl noch kompakter wird.

Sie können die kompakte Notation auch mit Optionen für Mindestziffern kombinieren, um eine konsistente Formatierung über eine Reihe von Zahlen hinweg zu gewährleisten.

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 dazu beiträgt, die visuelle Konsistenz in Tabellen und Diagrammen zu erhalten.

Wann kompakte Notation verwendet werden sollte

Kompakte Notation funktioniert am besten, wenn der Platz begrenzt ist oder wenn exakte Präzision nicht entscheidend 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 rechtliche Dokumente erfordern volle Präzision. Ein Bankkonto sollte 1.234,56 € anzeigen, nicht 1,2 T€. Eine Rechnung sollte 1.500,00 € anzeigen, nicht 1,5 T€.

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

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