Zahlen mit Tausendertrennzeichen formatieren

Einführung

Große Zahlen sind ohne visuelle Trennung schwer zu lesen. Die Zahl 1234567 erfordert sorgfältiges Zählen, um festzustellen, ob sie eine Million oder zehn Millionen darstellt. Das Hinzufügen von Trennzeichen erzeugt 1,234,567, was sofort als ungefähr eine Million erkennbar ist.

Verschiedene Länder verwenden unterschiedliche Symbole zur Trennung von Zifferngruppen. Amerikaner verwenden Kommas, Deutsche verwenden Punkte und französischsprachige Personen verwenden Leerzeichen. Wenn Sie Zahlen in einer Anwendung anzeigen, die von Menschen auf der ganzen Welt verwendet wird, müssen Sie diese Zahlen entsprechend den Erwartungen jedes Benutzers formatieren.

JavaScript stellt die Intl.NumberFormat-API bereit, um dies automatisch zu handhaben. Diese Lektion erklärt, wie Tausendertrennzeichen funktionieren, warum sie je nach Gebietsschema variieren und wie Sie Zahlen für jede Sprache oder Region korrekt formatieren.

Was Tausendertrennzeichen sind

Ein Tausendertrennzeichen ist ein Symbol, das zwischen Zifferngruppen eingefügt wird, um große Zahlen leichter lesbar zu machen. In den meisten Gebietsschemas werden Ziffern von rechts nach links in Dreiergruppen gruppiert. Die Zahl 1234567 wird mit Kommatrennzeichen zu 1,234,567.

Der Begriff "Tausendertrennzeichen" stammt vom häufigsten Anwendungsfall, bei dem Trennzeichen nach jeweils drei Ziffern erscheinen. Derselbe Mechanismus gilt jedoch für jede Zifferngruppierung, sei es für Hunderttausende, Millionen oder Milliarden.

Ohne Trennzeichen laufen die Ziffern zusammen und erfordern sorgfältiges Zählen. Mit Trennzeichen kann Ihr Auge schnell die Größenordnung der Zahl erkennen. Diese visuelle Gruppierung reduziert Lesefehler und verbessert das Verständnis.

Warum Tausendertrennzeichen je nach Gebietsschema variieren

Verschiedene Länder haben unterschiedliche Konventionen für das Schreiben von Zahlen etabliert. Diese Konventionen entwickelten sich unabhängig voneinander basierend auf lokalen Druckpraktiken, Bildungssystemen und kulturellen Präferenzen.

In englischsprachigen Ländern wie den Vereinigten Staaten, dem Vereinigten Königreich und Australien dienen Kommas als Tausendertrennzeichen. Die Zahl eine Million erscheint als 1,000,000.

In vielen europäischen Ländern, darunter Deutschland, Italien, Spanien und Portugal, dienen Punkte als Tausendertrennzeichen. Dieselbe Zahl erscheint als 1.000.000.

In Frankreich und vielen französischsprachigen Regionen dienen Leerzeichen als Tausendertrennzeichen. Die Zahl erscheint als 1 000 000.

In der Schweiz dienen Apostrophe als Tausendertrennzeichen. Die Zahl erscheint als 1'000'000.

Einige Länder wie Indien verwenden unterschiedliche Gruppierungsmuster. Die indische Zahlenschreibweise gruppiert die ersten drei Ziffern und gruppiert dann nachfolgende Ziffern paarweise. Eine Million erscheint als 10,00,000 im Lakh-System.

Wenn Sie ein bestimmtes Trennzeichen fest codieren, gehen Sie davon aus, dass alle Benutzer derselben Konvention folgen. Dies macht Ihre Anwendung für Personen aus verschiedenen Regionen schwieriger zu verwenden.

Verwendung von Intl.NumberFormat zum Hinzufügen von Tausendertrennzeichen

Der Intl.NumberFormat-Konstruktor erstellt einen Zahlenformatierer, der gebietsschemaspezifische Konventionen anwendet. Übergeben Sie eine Gebietsschema-Kennung als erstes Argument und rufen Sie dann die format()-Methode mit einer Zahl auf.

const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(1234567));
// Output: "1,234,567"

Dies erstellt einen Formatierer für US-Englisch, der Kommas als Tausendertrennzeichen verwendet. Die format()-Methode konvertiert die Zahl in eine Zeichenkette mit entsprechend eingefügten Trennzeichen.

Sie können dieselbe Zahl für verschiedene Gebietsschemata formatieren, indem Sie die Gebietsschema-Kennung ändern.

const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(1234567));
// Output: "1,234,567"

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(1234567));
// Output: "1.234.567"

const frFormatter = new Intl.NumberFormat('fr-FR');
console.log(frFormatter.format(1234567));
// Output: "1 234 567"

Jeder Formatter wendet die Konventionen für sein Gebietsschema an. Der deutsche Formatter verwendet Punkte, der französische Formatter verwendet Leerzeichen und der US-Formatter verwendet Kommas. Sie müssen nicht wissen, welches Symbol jedes Gebietsschema verwendet. Die API behandelt diese Details automatisch.

Zahlen für das Gebietsschema des Benutzers formatieren

Anstatt ein bestimmtes Gebietsschema fest zu codieren, können Sie die bevorzugte Sprache des Benutzers aus dem Browser verwenden. Die Eigenschaft navigator.language gibt die bevorzugte Sprache des Benutzers zurück.

const userLocale = navigator.language;
const formatter = new Intl.NumberFormat(userLocale);

console.log(formatter.format(1234567));
// Output varies by user's locale
// For en-US: "1,234,567"
// For de-DE: "1.234.567"
// For fr-FR: "1 234 567"

Dieser Ansatz zeigt Zahlen entsprechend den Erwartungen jedes Benutzers an, ohne dass diese manuell ein Gebietsschema auswählen müssen. Der Browser stellt die Sprachpräferenz bereit und die Intl-API wendet die entsprechenden Formatierungskonventionen an.

Sie können auch das gesamte Array der bevorzugten Sprachen übergeben, um ein Fallback-Verhalten zu ermöglichen.

const formatter = new Intl.NumberFormat(navigator.languages);
console.log(formatter.format(1234567));

Die API verwendet das erste Gebietsschema aus dem Array, das sie unterstützt. Dies bietet eine bessere Fallback-Behandlung, wenn die bevorzugte Wahl des Benutzers nicht verfügbar ist.

Standardverhalten der Gruppierung verstehen

Standardmäßig wendet Intl.NumberFormat Tausendertrennzeichen auf alle Zahlen an, die groß genug sind, um von einer Gruppierung zu profitieren. Zahlen mit vier oder mehr Ziffern erhalten in der Regel Trennzeichen, obwohl dies je nach Gebietsschema variiert.

const formatter = new Intl.NumberFormat('en-US');

console.log(formatter.format(123));
// Output: "123"

console.log(formatter.format(1234));
// Output: "1,234"

console.log(formatter.format(12345));
// Output: "12,345"

console.log(formatter.format(123456));
// Output: "123,456"

Kleine Zahlen wie 123 benötigen keine Trennzeichen und werden ohne diese angezeigt. Zahlen ab 1234 erhalten Trennzeichen, da die Gruppierung die Lesbarkeit verbessert.

Die API bestimmt automatisch, wann Trennzeichen basierend auf den Konventionen des Gebietsschemas vorteilhaft sind. Sie müssen nicht manuell die Größenordnung jeder Zahl überprüfen, bevor Sie sie formatieren.

Dezimalzahlen mit Tausendertrennzeichen formatieren

Die Intl.NumberFormat-API verarbeitet sowohl den ganzzahligen als auch den Bruchteil von Zahlen. Tausendertrennzeichen erscheinen im ganzzahligen Teil, während Dezimaltrennzeichen und Nachkommastellen den lokalen Konventionen folgen.

const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(1234567.89));
// Output: "1,234,567.89"

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(1234567.89));
// Output: "1.234.567,89"

Beachten Sie, dass die deutsche Formatierung beide Konventionen umkehrt. Punkte dienen als Tausendertrennzeichen im ganzzahligen Teil, während ein Komma als Dezimaltrennzeichen für den Bruchteil dient. Die Intl-API verarbeitet beide Aspekte korrekt basierend auf der Locale.

Arbeiten mit sehr großen Zahlen

Tausendertrennzeichen werden zunehmend wichtiger, je größer die Zahlen werden. Ohne Trennzeichen sind Zahlen mit sieben, acht oder neun Ziffern auf einen Blick nahezu unmöglich genau zu lesen.

const formatter = new Intl.NumberFormat('en-US');

console.log(formatter.format(1234567890));
// Output: "1,234,567,890"

console.log(formatter.format(9876543210));
// Output: "9,876,543,210"

Der Formatter fügt Trennzeichen in jedem Drei-Ziffern-Intervall ein und macht selbst Zahlen im Milliardenbereich lesbar. Diese automatische Gruppierung funktioniert für Zahlen beliebiger Größenordnung, ohne dass Sie die Trennzeichenpositionen manuell berechnen müssen.

Wiederverwendung von Formattern für bessere Performance

Das Erstellen einer neuen Intl.NumberFormat-Instanz erfordert das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Zahlen mit derselben Locale und denselben Einstellungen formatieren müssen, erstellen Sie den Formatter einmal und verwenden Sie ihn wieder.

const formatter = new Intl.NumberFormat('en-US');

const numbers = [1234, 5678, 91011, 121314];

numbers.forEach(number => {
  console.log(formatter.format(number));
});
// Output:
// "1,234"
// "5,678"
// "91,011"
// "121,314"

Dieser Ansatz ist effizienter als das Erstellen eines neuen Formatters für jede Zahl. Der Performance-Unterschied wird signifikant, wenn Sie Arrays mit Hunderten oder Tausenden von Werten formatieren.

Formatieren von Zahlen in Templates

Sie können Intl.NumberFormat überall dort verwenden, wo Sie Zahlen für Benutzer anzeigen. Dies umfasst das Einfügen formatierter Zahlen in HTML-Templates, die Anzeige von Werten in Tabellen oder die Darstellung von Statistiken in Dashboards.

const formatter = new Intl.NumberFormat(navigator.language);

const totalUsers = 1234567;
const activeUsers = 891234;

document.getElementById('total-users').textContent = formatter.format(totalUsers);
document.getElementById('active-users').textContent = formatter.format(activeUsers);

Die formatierten Strings funktionieren wie jeder andere String-Wert. Sie können sie in Textinhalte, Attribute oder jeden anderen Kontext einfügen, in dem Sie Informationen für Benutzer anzeigen.