Wie steuern Sie die Anzeige von Tausendertrennzeichen?

Einführung

Wenn Sie die Zahl 123456 formatieren, sehen Sie möglicherweise "123,456" mit einem Komma, das die Tausender trennt, oder "123456" ohne Trennzeichen. Das Zeichen, das Zifferngruppen trennt, wird als Gruppierungstrennzeichen bezeichnet, im deutschsprachigen Raum üblicherweise als Tausendertrennzeichen bekannt.

Unterschiedliche Kontexte erfordern unterschiedliche Formatierungen. Finanzberichte zeigen typischerweise Gruppierungstrennzeichen, um große Zahlen leichter lesbar zu machen. Technische Anzeigen wie Seriennummern, Produktcodes und ID-Nummern lassen sie typischerweise weg, um Verwirrung zu vermeiden. Die Option useGrouping in Intl.NumberFormat steuert, ob diese Trennzeichen in der formatierten Ausgabe erscheinen.

Dieser Leitfaden erklärt, wie Sie Gruppierungstrennzeichen aktivieren und deaktivieren, wie sie sich zwischen Gebietsschemata unterscheiden und wann Sie welche Einstellung in Ihren Anwendungen verwenden sollten.

Gruppierungstrennzeichen mit useGrouping false deaktivieren

Setzen Sie useGrouping auf false, um alle Gruppierungstrennzeichen aus formatierten Zahlen zu entfernen.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

Die formatierte Ausgabe enthält keine Kommas oder andere Gruppierungszeichen, unabhängig davon, wie groß die Zahl ist. Das Dezimaltrennzeichen bleibt erhalten, da useGrouping nur die Zifferngruppierung beeinflusst, nicht die Dezimalformatierung.

Dies gilt für alle Zahlenstile, einschließlich Währungen und Einheiten.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

Das Währungssymbol und die Einheitenbezeichnung erscheinen normal, aber die Ziffern haben keine internen Trennzeichen.

Gruppierungstrennzeichen mit useGrouping true aktivieren

Setzen Sie useGrouping auf true, um Gruppierungstrennzeichen einzuschließen. Dies ist das Standardverhalten, daher müssen Sie es nur explizit angeben, wenn Sie Ihre Absicht verdeutlichen oder eine Konfiguration überschreiben möchten.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

Der Formatter fügt alle drei Ziffern Kommas ein und folgt dabei englischen Konventionen. Dies erleichtert das visuelle Erfassen großer Zahlen.

Da true die Standardeinstellung ist, sind diese beiden Formatter gleichwertig.

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

Beide Formatter enthalten Tausendertrennzeichen in ihrer Ausgabe.

Verstehen Sie, wie die Gruppierung je nach Locale variiert

Verschiedene Locales verwenden unterschiedliche Zeichen für die Gruppierung und folgen unterschiedlichen Gruppierungsmustern. Die Option useGrouping steuert, ob eine Gruppierung erfolgt, während die Locale bestimmt, welches Zeichen erscheint und wo.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

Englisch verwendet Kommas, Deutsch verwendet Punkte und Französisch verwendet Leerzeichen. Alle drei sind Tausendertrennzeichen, sehen aber unterschiedlich aus, weil sie den Konventionen ihrer jeweiligen Locale folgen.

Einige Locales verwenden unterschiedliche Gruppierungsmuster. Die indische Zahlenschreibweise gruppiert die ersten drei Ziffern und danach jeweils zwei Ziffern.

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

Das Tausendertrennzeichen erscheint nach drei Ziffern von rechts, dann nach jeweils zwei Ziffern, wodurch 12,34,567 anstelle von 1,234,567 entsteht.

Wenn Sie die Gruppierung mit useGrouping: false deaktivieren, verschwinden diese locale-spezifischen Unterschiede, da überhaupt keine Trennzeichen erscheinen.

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

Verwenden Sie String-Werte für erweiterte Gruppierungssteuerung

Die Option useGrouping akzeptiert String-Werte, die eine feinere Kontrolle darüber bieten, wann Tausendertrennzeichen erscheinen. Diese Werte sind Teil der Intl.NumberFormat V3-Spezifikation und werden in modernen Browsern unterstützt.

Der Wert "always" ist gleichwertig mit true und zeigt immer Tausendertrennzeichen an.

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

Der Wert "auto" folgt den Präferenzen der Locale für die Gruppierung. Die meisten Locales bevorzugen die Anzeige von Tausendertrennzeichen, wodurch "auto" in der Praxis "always" ähnelt. Dies ist der Standardwert, wenn notation nicht "compact" ist.

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

Der Wert "min2" zeigt Tausendertrennzeichen nur an, wenn mindestens zwei Ziffern in der ersten Gruppe vorhanden sind. Bei vierstelligen Zahlen bedeutet dies, dass kein Trennzeichen erscheint.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

Die Zahl 1234 hat nur eine Ziffer in der ersten Gruppe (die 1), daher erscheint kein Trennzeichen. Die Zahl 12345 hat zwei Ziffern in der ersten Gruppe (die 12), daher erscheint das Trennzeichen.

Dieses Verhalten entspricht der natürlichen Zahlenformatierung einiger Gebietsschemata. Im Spanischen werden beispielsweise Tausendertrennzeichen bei vierstelligen Zahlen typischerweise weggelassen.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

Der Wert "auto" respektiert diese Gebietsschemapräferenzen, während "always" sie überschreibt.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

Wählen Sie, wann Tausendertrennzeichen deaktiviert werden sollen

Deaktivieren Sie Tausendertrennzeichen in Kontexten, in denen die Zahl einen Code, eine Kennung oder einen technischen Wert darstellt und nicht eine Menge.

Seriennummern und Produktcodes sollten keine Tausendertrennzeichen enthalten.

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

Dies verhindert Verwirrung darüber, ob das Trennzeichen Teil des tatsächlichen Werts ist. Ein Benutzer, der 1,234,567,890 sieht, könnte sich fragen, ob die Kommas bedeutsam sind oder ob sie diese eingeben sollten, wenn sie die Zahl anderswo eingeben.

Postleitzahlen, Telefonnummern (wenn als reine Zahlen formatiert) und andere Kennungen mit festem Format profitieren von deaktivierten Tausendertrennzeichen.

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

Technische Anzeigen, die Rohwerte für Debugging oder Logging anzeigen, sollten typischerweise Tausendertrennzeichen deaktivieren, um die exakte numerische Darstellung zu zeigen.

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

Formulareingaben für numerische Werte deaktivieren während der Bearbeitung oft Tausendertrennzeichen, um Verwirrung darüber zu vermeiden, ob der Benutzer die Trennzeichen eingeben sollte. Die formatierte Anzeige kann Tausendertrennzeichen anzeigen, nachdem der Benutzer die Eingabe des Werts abgeschlossen hat.

Wählen Sie, wann Tausendertrennzeichen aktiviert werden sollen

Aktivieren Sie Tausendertrennzeichen für Zahlen, die Mengen, Messungen oder Beträge darstellen, die Benutzer schnell lesen und verstehen müssen.

Finanzbeträge lassen sich mit Tausendertrennzeichen leichter erfassen.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

Die Trennzeichen helfen Benutzern, auf einen Blick schnell zwischen $1,234,567 und $123,456 zu unterscheiden.

Statistische Daten, Analytics-Dashboards und Berichte mit Zählwerten profitieren von der Gruppierung.

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

Große Messwerte werden durch Gruppierung besser lesbar.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

Diese Entfernung (die ungefähre Entfernung zum Mond) ist als 384,400 leichter zu lesen als 384400.

Jeder Kontext, in dem der Benutzer die Größenordnung einer Zahl erfassen muss, profitiert von Tausendertrennzeichen. Die Trennzeichen schaffen visuelle Orientierungspunkte, die dem Gehirn helfen, die Ziffern in Blöcken zu verarbeiten.

Verwenden Sie min2 für eine übersichtlichere Darstellung vierstelliger Zahlen

Der Wert "min2" bietet ein übersichtlicheres Erscheinungsbild für Zahlen, die vier oder fünf Ziffern haben können. Jahreszahlen beispielsweise sehen in der Regel ohne Trennzeichen besser aus.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

Die meisten Leser empfinden 2025 als natürlicher als 2,025, wenn es um eine Jahreszahl geht. Die Einstellung "min2" bietet dieses Verhalten automatisch.

Preise in bestimmten Bereichen profitieren ebenfalls von diesem Ansatz.

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

Einige Einzelhändler bevorzugen es, Preise wie $1299 ohne Komma anzuzeigen, damit sie psychologisch günstiger wirken. Sobald Preise vier Ziffern überschreiten, erscheint das Trennzeichen.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

Dies gibt Ihnen ein konsistentes Verhalten über Ihren gesamten Preisbereich hinweg, ohne die Größenordnung der Zahl manuell prüfen zu müssen.

Verstehen, wie die Kompaktnotation die Gruppierung beeinflusst

Bei Verwendung der Kompaktnotation ändert sich das standardmäßige useGrouping-Verhalten zu "min2" anstelle von "auto". Dies verhindert unnötige Trennzeichen in kompakten Formaten.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

Die Kompaktnotation kürzt die Zahl bereits ab, sodass interne Gruppentrennzeichen redundant wären. Der Formatter behandelt dies automatisch, Sie können es jedoch bei Bedarf überschreiben.

Prüfen, welche Gruppierungseinstellung aktiv ist

Die Methode resolvedOptions() zeigt, welchen useGrouping-Wert der Formatter tatsächlich verwendet.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

formatter.resolvedOptions().useGrouping;
// "auto"

Obwohl der Formatter erstellt wurde, ohne useGrouping explizit festzulegen, zeigen die aufgelösten Optionen den Standardwert "auto".

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

compactFormatter.resolvedOptions().useGrouping;
// "min2"

Der Formatter für Kompaktnotation verwendet standardmäßig "min2" anstelle von "auto", wie in den aufgelösten Optionen gezeigt.

Diese Methode hilft beim Debuggen unerwarteten Gruppierungsverhaltens, indem sie die tatsächliche Einstellung offenlegt, die der Formatter verwendet.