Wie man Zahlen mit Tausendertrennzeichen formatiert

Einführung

Große Zahlen sind ohne visuelle Trennung schwer zu lesen. Bei der Zahl 1234567 muss man sorgfältig zählen, um festzustellen, ob sie eine Million oder zehn Millionen darstellt. Das Hinzufügen von Trennzeichen ergibt 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 genutzt wird, müssen Sie diese Zahlen entsprechend den Erwartungen jedes Benutzers formatieren.

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

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 in Dreiergruppen von rechts nach links gruppiert. Die Zahl 1234567 wird mit Kommatrennzeichen zu 1,234,567.

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

Ohne Trennzeichen laufen die Ziffern ineinander und erfordern sorgfältiges Zählen. Mit Trennzeichen kann das 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 Nummerierung gruppiert die ersten drei Ziffern und dann nachfolgende Ziffern in Paaren. Eine Million erscheint als 10,00,000 im Lakh-System.

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

Verwendung von Intl.NumberFormat zum Hinzufügen von Tausendertrennzeichen

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

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

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

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

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

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

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

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

Formatierung von Zahlen für das Gebietsschema des Benutzers

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));
// Ausgabe variiert je nach Gebietsschema des Benutzers
// Für en-US: "1,234,567"
// Für de-DE: "1.234.567"
// Für 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 Sprache des Benutzers nicht verfügbar ist.

Standardgruppierungsverhalten verstehen

Standardmäßig wendet Intl.NumberFormat Tausendertrennzeichen auf alle Zahlen an, die groß genug sind, um von der Gruppierung zu profitieren. Zahlen mit vier oder mehr Stellen erhalten typischerweise 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 erscheinen ohne sie. Zahlen ab 1234 erhalten Trennzeichen, da die Gruppierung die Lesbarkeit verbessert.

Die API bestimmt automatisch, wann Trennzeichen basierend auf lokalen Konventionen vorteilhaft sind. Sie müssen nicht manuell die Größenordnung jeder Zahl vor der Formatierung überprüfen.

Formatierung von Dezimalzahlen mit Tausendertrennzeichen

Die Intl.NumberFormat API behandelt sowohl den ganzzahligen als auch den Bruchteil von Zahlen. Tausendertrennzeichen erscheinen im ganzzahligen Teil, während der Dezimalpunkt und die 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 behandelt beide Aspekte basierend auf dem Gebietsschema korrekt.

Arbeiten mit sehr großen Zahlen

Tausendertrennzeichen werden zunehmend wichtiger, wenn Zahlen größer werden. Ohne Trennzeichen sind Zahlen mit sieben, acht oder neun Stellen 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 Formatierer fügt Trennzeichen in jedem Drei-Ziffern-Intervall ein, wodurch selbst Zahlen im Milliardenbereich lesbar werden. Diese automatische Gruppierung funktioniert für Zahlen jeder Größenordnung, ohne dass Sie die Trennzeichenpositionen manuell berechnen müssen.

Wiederverwendung von Formatierern für bessere Leistung

Das Erstellen einer neuen Intl.NumberFormat-Instanz beinhaltet das Laden von Gebietsschema-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Zahlen mit demselben Gebietsschema und denselben Einstellungen formatieren müssen, erstellen Sie den Formatierer 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 Formatierers für jede Zahl. Der Leistungsunterschied wird signifikant, wenn Arrays mit Hunderten oder Tausenden von Werten formatiert werden.

Formatierung 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.