So wählen Sie zwischen 1K und 1 Tausend im kompakten Format

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 Oberflächen wie mobilen Bildschirmen und Dashboard-Karten. Einige Kontexte profitieren jedoch davon, die Größenordnung auszuschreiben. Dieselbe Zahl kann als 1,5 Tausend anstelle von 1,5K angezeigt werden, wobei Kürze gegen Klarheit eingetauscht wird.

JavaScripts Intl.NumberFormat bietet die Option compactDisplay, um diese Wahl zu steuern. Sie können zwischen kurzer Anzeige, die Abkürzungen wie K, M und B verwendet, oder 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 den Benutzern angezeigt werden.

Was die Option compactDisplay 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));
// Output: "1.5K"

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

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

Die Option compactDisplay verwendet standardmäßig "short", 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 einbuchstabige Abkürzungen zur Darstellung der Größenordnung. 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));
// Output: "1.5K"

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

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

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

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

Die kurze Anzeige funktioniert gut, wenn Sie Zahlen in engen Bereichen 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 erkennbar wird, ohne dass Benutzer Abkürzungen interpretieren müssen. Benutzer, die mit der K-, M-, B-Notation nicht vertraut sind, werden Tausend, Million, Milliarde zugänglicher finden.

Die lange Anzeige funktioniert gut in Kontexten, 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 durchweg weniger Zeichen. Die Abkürzung K benötigt ein Zeichen, während Tausend acht Zeichen einschließlich des Leerzeichens benötigt. Dieser Unterschied multipliziert 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, was M darstellt. Diese Explizitheit hilft Benutzern, die mit abgekürzten Zahlenformaten weniger vertraut sind.

Wie sich die kompakte Anzeige zwischen Sprachen unterscheidet

Sowohl die kurze als auch die lange kompakte Anzeige passen sich an das von Ihnen angegebene Gebietsschema an. Verschiedene Sprachen verwenden unterschiedliche Abkürzungen und Größenwörter.

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

Französisch fügt ein s hinzu, um Millionen im Plural zu bilden. Deutsch verwendet Mio. als Kurzform und Millionen als Langform. Spanisch verwendet millones für den Plural. Jede Sprache wendet ihre eigenen grammatikalischen Regeln sowohl auf kurze als auch auf lange Formate an.

Der Formatter verarbeitet diese Variationen automatisch basierend auf der Locale. Sie müssen keine separate Formatierungslogik für jede Sprache pflegen.

Asiatische Sprachen verwenden oft völlig unterschiedliche Zahlengruppierungssysteme.

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, sodass 15.000.000 zu 1500万 statt 15M wird. Die Intl-API verarbeitet diese grundlegenden Unterschiede in Zahlensystemen automatisch.

Wann kurze kompakte Anzeige verwendet werden sollte

Die kurze kompakte Anzeige funktioniert am besten in platzbeschränkten Kontexten, in denen jedes Zeichen zählt. Mobile Oberflächen haben begrenzten horizontalen Platz, wodurch abgekürzte Zahlen unerlässlich 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 konsistente 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, Aufrufzahlen und Engagement-Metriken über mehrere Plattformen hinweg anzeigt, benötigt kompakte Formatierung, um alle Metriken gleichzeitig auf dem Bildschirm unterzubringen.

Diagrammachsen und Beschriftungen erfordern minimalen Text, um Überlappungen oder Gedränge zu vermeiden. Die Verwendung von 1,5M statt 1,5 Millionen hält Achsenbeschriftungen lesbar, ohne sie drehen oder abschneiden zu müssen.

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

Wann 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 beibringen, profitieren davon, Größenordnungen auszuschreiben. Schüler, die über Bevölkerungsstatistiken oder Wirtschaftszahlen lernen, benötigen explizite Größenordnungswörter, um die Größenordnung zu verstehen.

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

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

Drucklayouts haben mehr horizontalen Platz als digitale Benutzeroberflächen, wodurch die lange Darstellung praktikabel wird. 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 Darstellung. Internationale Zielgruppen, nicht-technische Benutzer oder Benutzer mit geringerer digitaler Kompetenz finden Tausend, Million und Milliarde erkennbarer als Tsd., Mio. und Mrd.

Kompakte Darstellung 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 Darstellung wählen.

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

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

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

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

Sie können die kompakte Darstellung mit 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));
// Output: "$2.4 million"

console.log(formatter.format(750000));
// Output: "$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.

Die kompakte Darstellung funktioniert auch mit der Vorzeichenanzeige, um Änderungen oder Deltas anzuzeigen.

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

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

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

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

Was Sie sich merken sollten

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,5 Tsd. oder auf "long" für ausgeschriebene Ausgaben wie 1,5 Tausend. Die Option ist standardmäßig auf "short" gesetzt, wenn sie nicht angegeben wird.

Verwenden Sie die kurze Darstellung, wenn der Platz begrenzt ist oder wenn viele Zahlen angezeigt werden, die eine einheitliche Breite benötigen. Verwenden Sie die lange Darstellung, wenn Klarheit und Barrierefreiheit wichtiger sind als Platzeffizienz. Der Formatter verarbeitet gebietsspezifische Variationen automatisch sowohl für kurze als auch für lange Formate.

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