Wie steuern Sie die Anzeige von Tausendertrennzeichen?

Einführung

Wenn Sie die Zahl 123456 formatieren, könnte das Ergebnis "123.456" mit einem Punkt als Tausendertrennzeichen sein, oder "123456" ohne Trennzeichen. Das Zeichen, das Zifferngruppen trennt, wird als Gruppierungstrennzeichen bezeichnet, im deutschsprachigen Raum auch als Tausendertrennzeichen bekannt.

Verschiedene Kontexte erfordern unterschiedliche Formatierungen. Finanzberichte zeigen typischerweise Gruppierungstrennzeichen, um große Zahlen leichter lesbar zu machen. Technische Darstellungen wie Seriennummern, Produktcodes und ID-Nummern verzichten in der Regel darauf, um Verwechslungen zu vermeiden. Die Option useGrouping in Intl.NumberFormat steuert, ob diese Trennzeichen in der formatierten Ausgabe erscheinen.

Dieser Leitfaden erklärt, wie man Gruppierungstrennzeichen aktiviert und deaktiviert, wie sie sich je nach Gebietsschema unterscheiden und wann man welche Einstellung in Anwendungen verwenden sollte.

Gruppierungstrennzeichen mit useGrouping false deaktivieren

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

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

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

formatter.format(1234567.89);
// "1234567,89"

Die formatierte Ausgabe enthält keine Punkte 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('de-DE', {
  style: 'currency',
  currency: 'EUR',
  useGrouping: false
}).format(1234567.89);
// "1234567,89 €"

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

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

Gruppierungstrennzeichen mit useGrouping true aktivieren

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

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

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

formatter.format(1234567.89);
// "1.234.567,89"

Der Formatierer fügt alle drei Stellen Punkte ein, gemäß den deutschen Konventionen. Dies macht große Zahlen visuell leichter erfassbar.

Da true der Standardwert ist, sind diese beiden Formatierer äquivalent.

new Intl.NumberFormat('de-DE', { useGrouping: true });
new Intl.NumberFormat('de-DE');

Beide Formatierer fügen Gruppierungstrennzeichen in ihre Ausgabe ein.

Verstehen, wie Gruppierung in verschiedenen Locales 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 Gruppierungstrennzeichen, sehen aber unterschiedlich aus, weil sie den Konventionen ihrer Locale folgen.

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

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

Das Gruppierungstrennzeichen erscheint nach drei Ziffern von rechts, dann nach jeweils zwei Ziffern, was 12,34,567 anstelle von 1,234,567 ergibt.

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

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

Verwenden von String-Werten für erweiterte Gruppierungssteuerung

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

Der Wert "always" entspricht true und zeigt immer Gruppierungstrennzeichen 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 Gruppierungstrennzeichen, was "auto" in der Praxis ähnlich wie "always" macht. Dies ist der Standardwert, wenn notation nicht "compact" ist.

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

Der Wert "min2" zeigt Gruppierungstrennzeichen 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 Art und Weise, wie einige Locales Zahlen natürlich formatieren. Spanisch beispielsweise lässt typischerweise Gruppierungstrennzeichen für vierstellige Zahlen weg.

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 Locale-Präferenzen, während "always" sie überschreibt.

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

Wählen Sie, wann Gruppierungstrennzeichen deaktiviert werden sollen

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

Seriennummern und Produktcodes sollten keine Gruppierungstrennzeichen haben.

const serialNumber = 1234567890;

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

Dies verhindert Verwirrung darüber, ob das Trennzeichen Teil des eigentlichen Wertes ist. Ein Benutzer, der 1,234,567,890 sieht, könnte sich fragen, ob die Kommas bedeutsam sind oder ob er sie eingeben sollte, wenn er die Nummer anderswo eingibt.

Postleitzahlen, Telefonnummern (wenn sie als einfache Zahlen formatiert sind) und andere Kennungen mit festem Format profitieren von deaktivierter Gruppierung.

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 in der Regel die Gruppierung deaktivieren, um die exakte numerische Darstellung anzuzeigen.

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

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

Wählen Sie, wann Gruppierungstrennzeichen aktiviert werden sollen

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

Finanzbeträge sind mit Gruppierungstrennzeichen leichter zu erfassen.

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

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

Statistische Daten, Analyse-Dashboards und Berichte, die Zählungen anzeigen, profitieren von der Gruppierung.

const pageViews = 5432198;

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

Große Messungen werden mit 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 leichter als 384.400 zu lesen als als 384400.

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

Verwenden Sie min2 für übersichtlichere vierstellige Anzeigen

Der Wert "min2" bietet ein übersichtlicheres Erscheinungsbild für Zahlen, die vier oder fünf Stellen haben könnten. 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 natürlicher als 2,025, wenn es sich um ein Jahr handelt. 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 Händler bevorzugen die Anzeige von Preisen wie $1299 ohne Komma, um sie psychologisch weniger teuer erscheinen zu lassen. Sobald Preise vier Stellen überschreiten, erscheint das Trennzeichen.

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

Dies bietet ein konsistentes Verhalten über Ihre gesamte Preisspanne hinweg, ohne manuell die Größenordnung der Zahl überprüfen zu müssen.

Verstehen Sie, wie die kompakte Notation die Gruppierung beeinflusst

Bei Verwendung der kompakten Notation ändert sich das Standardverhalten von useGrouping 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 kompakte Notation kürzt die Zahl bereits ab, daher wären interne Gruppierungstrennzeichen redundant. Der Formatierer behandelt dies automatisch, aber Sie können es bei Bedarf überschreiben.

Überprüfen Sie, welche Gruppierungseinstellung aktiv ist

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

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

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

Obwohl der Formatierer ohne explizite Einstellung von useGrouping erstellt wurde, zeigen die aufgelösten Optionen den Standardwert "auto".

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

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

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

Diese Methode hilft bei der Fehlersuche bei unerwartetem Gruppierungsverhalten, indem sie die tatsächliche Einstellung anzeigt, die der Formatierer verwendet.