Wie man zwischen 1K und 1 Tausend im kompakten Format wählt

Einführung

Wenn Sie große Zahlen mit kompakter Notation formatieren, wird die Zahl 1500 standardmäßig zu 1,5K. Dieses abgekürzte Format funktioniert gut in platzbeschränkten Benutzeroberflächen wie Mobilgeräten und Dashboard-Karten. In manchen Kontexten ist es jedoch vorteilhaft, die Größenordnung auszuschreiben. Dieselbe Zahl kann als 1,5 Tausend anstelle von 1,5K angezeigt werden, was Klarheit auf Kosten der Kürze bietet.

JavaScripts Intl.NumberFormat bietet die Option compactDisplay, um diese Auswahl zu steuern. Sie können zwischen kurzer Anzeige, die Abkürzungen wie K, M und B verwendet, und langer Anzeige wählen, die die Größenordnung als Tausend, Million und Milliarde ausschreibt. Diese Option gibt Ihnen präzise Kontrolle darüber, wie kompakte Zahlen für Benutzer erscheinen.

Was die compactDisplay-Option steuert

Die Option compactDisplay funktioniert nur, wenn Sie notation auf "compact" setzen. Sie akzeptiert zwei Werte: "short" und "long". Der Wert short erzeugt abgekürzte Ausgaben wie 1,5K, während der Wert long ausgeschriebene Ausgaben wie 1,5 Tausend erzeugt.

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

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

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

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

Die Option compactDisplay ist standardmäßig auf "short" gesetzt, wenn Sie sie weglassen. Das bedeutet, dass die kompakte Notation Abkürzungen verwendet, es sei denn, Sie fordern explizit eine lange Anzeige an.

Zahlen mit kurzer kompakter Anzeige formatieren

Die kurze kompakte Anzeige verwendet Einzelbuchstaben-Abkürzungen, um die Größenordnung darzustellen. Dieses Format minimiert den horizontalen Platz bei gleichzeitiger Beibehaltung der Lesbarkeit.

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

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

console.log(formatter.format(2400000));
// Ausgabe: "2.4M"

console.log(formatter.format(7800000000));
// Ausgabe: "7.8B"

console.log(formatter.format(5600000000000));
// Ausgabe: "5.6T"

Der Formatierer wählt automatisch die passende Abkürzung basierend auf der Größenordnung der Zahl. Tausender verwenden K, Millionen verwenden M, Milliarden verwenden B und Billionen verwenden T.

Die kurze Anzeige eignet sich gut, wenn Sie Zahlen in begrenzten Räumen unterbringen müssen. Mobile Benutzeroberflächen, Datentabellen, Diagrammbeschriftungen und Dashboard-Karten profitieren von der kompakten Breite abgekürzter Zahlen.

Zahlen mit langer kompakter Anzeige formatieren

Die lange kompakte Anzeige schreibt das Größenwort aus, anstatt es abzukürzen. Dieses Format bietet mehr Klarheit auf Kosten von zusätzlichem horizontalen Platz.

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

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

console.log(formatter.format(2400000));
// Output: "2.4 million"

console.log(formatter.format(7800000000));
// Output: "7.8 billion"

console.log(formatter.format(5600000000000));
// Output: "5.6 trillion"

Der Formatierer verwendet das vollständige Größenwort, wodurch die Größenordnung der Zahl sofort ersichtlich wird, ohne dass Benutzer Abkürzungen interpretieren müssen. Benutzer, die mit der K, M, B-Notation nicht vertraut sind, finden tausend, Million, Milliarde verständlicher.

Die lange Anzeige eignet sich gut für Kontexte, in denen Klarheit wichtiger ist als Platz. Bildungsinhalte, Finanzberichte, barrierefreie Benutzeroberflächen und formelle Dokumentationen profitieren von ausgeschriebenen Größenordnungen.

Kurze und lange kompakte Anzeige vergleichen

Der Unterschied zwischen kurzer und langer Anzeige wird deutlich, wenn Sie dieselben Zahlen mit beiden Optionen formatieren.

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

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

const numbers = [1500, 45000, 2400000, 950000000];

numbers.forEach(num => {
  console.log(`${num}:`);
  console.log(`  Short: ${shortFormatter.format(num)}`);
  console.log(`  Long:  ${longFormatter.format(num)}`);
});

// Output:
// 1500:
//   Short: 1.5K
//   Long:  1.5 thousand
// 45000:
//   Short: 45K
//   Long:  45 thousand
// 2400000:
//   Short: 2.4M
//   Long:  2.4 million
// 950000000:
//   Short: 950M
//   Long:  950 million

Die kurze Anzeige verwendet durchgängig weniger Zeichen. Die Abkürzung K benötigt ein Zeichen, während tausend acht Zeichen einschließlich des Leerzeichens benötigt. Dieser Unterschied vervielfacht sich bei der Anzeige vieler Zahlen in Tabellen oder Listen.

Die lange Anzeige bietet mehr Kontext für jede Zahl. Benutzer können 2,4 Millionen lesen, ohne entschlüsseln zu müssen, wofür M steht. Diese Explizitheit hilft Benutzern, die mit abgekürzten Zahlenformaten weniger vertraut sind.

Wie die kompakte Anzeige in verschiedenen Sprachen variiert

Sowohl die kurze als auch die lange kompakte Anzeige passen sich dem von Ihnen angegebenen Gebietsschema an. Verschiedene Sprachen verwenden unterschiedliche Abkürzungen und Größenbezeichnungen.

const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    notation: "compact",
    compactDisplay: "short"
  });

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

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(2400000)}`);
  console.log(`  Long:  ${longFormatter.format(2400000)}`);
});

// Output:
// en-US:
//   Short: 2.4M
//   Long:  2.4 million
// fr-FR:
//   Short: 2,4 M
//   Long:  2,4 millions
// de-DE:
//   Short: 2,4 Mio.
//   Long:  2,4 Millionen
// es-ES:
//   Short: 2,4 M
//   Long:  2,4 millones

Im Französischen wird ein s hinzugefügt, um millions in die Mehrzahl zu setzen. Im Deutschen wird Mio. als Kurzform und Millionen als Langform verwendet. Im Spanischen wird millones für den Plural verwendet. Jede Sprache wendet ihre eigenen grammatikalischen Regeln sowohl auf kurze als auch auf lange Formate an.

Der Formatierer behandelt diese Variationen automatisch basierend auf dem Gebietsschema. Sie müssen keine separate Formatierungslogik für jede Sprache pflegen.

Asiatische Sprachen verwenden oft völlig andere Zahlgruppierungssysteme.

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

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

const zhFormatter = new Intl.NumberFormat("zh-CN", {
  notation: "compact",
  compactDisplay: "short"
});

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

Japanisch und Chinesisch gruppieren nach Zehntausend statt nach Tausend. Das Zeichen 万 steht für zehntausend, daher wird 15.000.000 zu 1500万 anstatt zu 15M. Die Intl-API behandelt diese grundlegenden Unterschiede in Zahlensystemen automatisch.

Wann die kurze kompakte Anzeige verwendet werden sollte

Die kurze kompakte Anzeige funktioniert am besten in platzbeschränkten Kontexten, wo jedes Zeichen zählt. Mobile Benutzeroberflächen haben begrenzten horizontalen Platz, wodurch abgekürzte Zahlen wesentlich sind, um Inhalte auf dem Bildschirm unterzubringen.

Datentabellen, die mehrere Zahlen anzeigen, profitieren von einheitlicher Breite. Die Verwendung von 1,5K, 2,4M und 7,8B hält Spalten ausgerichtet und verhindert Umbrüche. Das einheitliche Abkürzungsformat hilft Benutzern, Zahlenspalten schnell zu scannen.

Dashboard-Karten und Metrik-Panels verwenden die kurze Anzeige, um die Informationsdichte zu maximieren. Ein Dashboard, das Follower-Zahlen, Aufrufe und Engagement-Metriken über mehrere Plattformen hinweg anzeigt, benötigt eine kompakte Formatierung, um alle Metriken gleichzeitig auf dem Bildschirm anzuzeigen.

Diagrammachsen und -beschriftungen erfordern minimalen Text, um Überlappungen oder Überfüllungen zu vermeiden. Die Verwendung von 1,5M anstelle von 1,5 Millionen hält Achsenbeschriftungen lesbar, ohne sie zu drehen oder zu kürzen.

Interaktive Karten und Datenvisualisierungen profitieren von der kurzen Anzeige, wenn Zahlen als Overlays oder Tooltips angezeigt werden. Das abgekürzte Format verhindert, dass Text den darunterliegenden Inhalt verdeckt.

Wann die lange kompakte Anzeige verwendet werden sollte

Die lange kompakte Anzeige funktioniert am besten, wenn Klarheit und Zugänglichkeit wichtiger sind als Platzeffizienz. Bildungsinhalte, die Benutzern große Zahlen vermitteln, profitieren vom Ausschreiben der Größenordnungen. Schüler, die über Bevölkerungsstatistiken oder wirtschaftliche Zahlen lernen, benötigen explizite Größenwörter, um die Größenordnung zu verstehen.

Finanzberichte und formelle Dokumente verwenden die lange Anzeige, um Mehrdeutigkeiten zu vermeiden. Ein Geschäftsbericht, der 2,4 Millionen Umsatz angibt, ist klarer als 2,4M, besonders für Leser, die möglicherweise nicht mit Abkürzungskonventionen vertraut sind.

Barrierefreie Benutzeroberflächen profitieren von der langen Anzeige, da Screenreader ausgeschriebene Wörter natürlicher aussprechen. Ein Screenreader, der 1,5 tausend ankündigt, klingt natürlicher als 1,5K, was möglicherweise als eins Komma fünf K gelesen wird.

Drucklayouts haben mehr horizontalen Platz als digitale Schnittstellen, was die lange Anzeige praktikabel macht. Gedruckte Berichte, Infografiken und Präsentationen können die zusätzlichen Zeichen aufnehmen, ohne Layoutprobleme zu verursachen.

Kontexte, in denen Benutzer möglicherweise nicht mit Abkürzungen vertraut sind, benötigen die lange Anzeige. Internationales Publikum, nicht-technische Benutzer oder Benutzer mit geringerer digitaler Kompetenz finden tausend, Million und Milliarde erkennbarer als K, M und B.

Kompakte Anzeige mit anderen Formatierungsoptionen kombinieren

Die Option compactDisplay funktioniert mit allen anderen Zahlenformatierungsoptionen. Sie können Dezimalstellen, Gruppierung und andere Formatierungen steuern, während Sie zwischen kurzer und langer Anzeige wählen.

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

console.log(formatter.format(1234567));
// Ausgabe: "1.23 million"

console.log(formatter.format(9876543));
// Ausgabe: "9.88 million"

Die Option maximumFractionDigits steuert die Dezimalpräzision, während compactDisplay das Format der Größenordnung steuert. Diese Optionen arbeiten zusammen, um das exakte Format zu erzeugen, das Sie benötigen.

Sie können die kompakte Anzeige mit der Währungsformatierung kombinieren, um Geldbeträge mit ausgeschriebenen Größenordnungen anzuzeigen.

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

console.log(formatter.format(2400000));
// Ausgabe: "$2.4 million"

console.log(formatter.format(750000));
// Ausgabe: "$750 thousand"

Dieses Format eignet sich gut für die Anzeige großer Geldbeträge in Finanzberichten oder Budgetzusammenfassungen, bei denen sowohl das Währungssymbol als auch die ausgeschriebene Größenordnung für Klarheit sorgen.

Kompakte Anzeige funktioniert auch mit Vorzeichenanzeige, um Änderungen oder Differenzen anzuzeigen.

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

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

console.log(formatter.format(-850000));
// Ausgabe: "-850 thousand"

Die Kombination aus expliziten Vorzeichen und ausgeschriebenen Größenordnungen macht Änderungen für Benutzer sofort erkennbar.

Was zu beachten ist

Die Option compactDisplay steuert, ob die kompakte Notation Abkürzungen oder ausgeschriebene Wörter verwendet. Setzen Sie sie auf "short" für abgekürzte Ausgaben wie 1,5K oder auf "long" für ausgeschriebene Ausgaben wie 1,5 Tausend. Die Option ist standardmäßig auf "short" gesetzt, wenn sie weggelassen wird.

Verwenden Sie die kurze Anzeige, wenn der Platz begrenzt ist oder wenn viele Zahlen mit einheitlicher Breite angezeigt werden müssen. Verwenden Sie die lange Anzeige, wenn Klarheit und Barrierefreiheit wichtiger sind als Platzeffizienz. Der Formatierer behandelt sprachspezifische Variationen für kurze und lange Formate automatisch.

Kombinieren Sie compactDisplay mit anderen Formatierungsoptionen wie Dezimalstellen, Währung und Vorzeichenanzeige, um das exakte Zahlenformat zu erstellen, das Ihre Anwendung benötigt.