Intl.NumberFormat API - JavaScript i18n

Einführung

Stellen Sie sich vor, Sie möchten die Zahl 1234567.89 in Ihrer Anwendung anzeigen. Die Verwendung von toString() erzeugt "1234567.89", was schwer zu lesen ist und davon ausgeht, dass jeder Punkte für Dezimalstellen verwendet und Zahlen von links nach rechts liest. Amerikaner erwarten "1,234,567.89", Deutsche erwarten "1.234.567,89" und Benutzer in Indien erwarten "12,34,567.89" mit unterschiedlichen Gruppierungsregeln.

Die Intl.NumberFormat API löst dieses Problem, indem sie Zahlen gemäß den lokalen Konventionen formatiert. Sie behandelt Tausendertrennzeichen, Dezimalpunkte, Zifferngruppierung, Währungssymbole, Prozentzeichen, Maßeinheiten und Nummerierungssysteme. Dies macht manuelle String-Manipulation oder Drittanbieter-Bibliotheken überflüssig.

Dieser Leitfaden erklärt, wie Sie Intl.NumberFormat verwenden können, um Zahlen korrekt für Benutzer weltweit zu formatieren, beginnend mit der grundlegenden Verwendung und fortschreitend zu erweiterten Funktionen wie Währungsformatierung, kompakter Notation und benutzerdefinierten Rundungsmodi.

Formatieren einer Zahl mit Standardeinstellungen

Erstellen Sie einen Formatierer, indem Sie new Intl.NumberFormat() mit einem Gebietsschema-String aufrufen, und rufen Sie dann dessen format()-Methode mit einer Zahl auf.

const formatter = new Intl.NumberFormat('en-US');
formatter.format(1234567.89);
// "1,234,567.89"

Der Formatierer fügt Tausendertrennzeichen hinzu und formatiert den Dezimalpunkt entsprechend dem Gebietsschema. Ohne Angabe eines Gebietsschemas verwendet der Formatierer das Standardgebietsschema der Laufzeitumgebung, das typischerweise auf den Systemeinstellungen des Benutzers basiert.

const formatter = new Intl.NumberFormat('de-DE');
formatter.format(1234567.89);
// "1.234.567,89"

Deutsche Konventionen verwenden Punkte als Tausendertrennzeichen und Kommas für Dezimalstellen, also umgekehrt zu amerikanischen Konventionen. Der Formatierer behandelt diese Unterschiede automatisch.

Gebietsschema-Codes verstehen

Ein Gebietsschema-Code identifiziert eine Sprache und optional eine Region, geschrieben als Sprache-REGION. Die Sprache verwendet einen zweistelligen ISO 639-1-Code wie en oder es. Die Region verwendet einen zweistelligen ISO 3166-1-Code wie US oder MX.

new Intl.NumberFormat('en-US').format(1234.56);
// "1,234.56" (Amerikanisches Englisch)

new Intl.NumberFormat('en-GB').format(1234.56);
// "1,234.56" (Britisches Englisch)

new Intl.NumberFormat('es-ES').format(1234.56);
// "1234,56" (Europäisches Spanisch)

new Intl.NumberFormat('es-MX').format(1234.56);
// "1,234.56" (Mexikanisches Spanisch)

Beide englischen Varianten verwenden die gleiche Formatierung, aber die spanischen Varianten unterscheiden sich. Europäisches Spanisch lässt Tausendertrennzeichen für vierstellige Zahlen weg und verwendet Kommas für Dezimalstellen, während mexikanisches Spanisch den amerikanischen Konventionen folgt.

Wählen Sie Gebietsschemata basierend auf den Standorten oder Sprachpräferenzen Ihrer Benutzer. Anwendungen bestimmen das Gebietsschema typischerweise anhand von Benutzereinstellungen, Browser-Sprache oder IP-Geolokalisierung.

Wählen Sie einen Formatierungsstil

Die Option style bestimmt die Formatierungskategorie. Übergeben Sie ein Options-Objekt als zweites Argument an den Konstruktor.

new Intl.NumberFormat('en-US', {
  style: 'decimal'
}).format(1234.56);
// "1,234.56"

Der Stil decimal ist die Standardeinstellung. Die anderen Stile sind currency, percent und unit.

Währungen mit Symbolen und Codes formatieren

Der Stil currency erfordert eine currency-Option mit einem ISO 4217-Währungscode.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(1234.56);
// "$1,234.56"

Der Formatierer fügt standardmäßig das Dollarzeichen hinzu und formatiert auf zwei Dezimalstellen, was der Standard für die meisten Währungen ist. Verschiedene Locales positionieren das Symbol unterschiedlich.

new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
}).format(1234.56);
// "1.234,56 €"

Die deutsche Formatierung platziert das Euro-Symbol nach dem Betrag mit einem Leerzeichen. Die Option currency bestimmt, welche Währung angezeigt wird, nicht welchen Konventionen der Locale gefolgt werden soll. Die Locale bestimmt die Formatierungskonventionen, während die Währung das Symbol bestimmt.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR'
}).format(1234.56);
// "€1,234.56"

Amerikanische Formatierungskonventionen mit dem Euro-Symbol erzeugen ein Euro-Zeichen vor dem Betrag, gemäß amerikanischer statt europäischer Platzierungskonventionen.

Steuerung des Währungsanzeigeformats

Die Option currencyDisplay ändert, wie die Währung in der formatierten Zeichenfolge erscheint.

const amount = 1234.56;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(amount);
// "$1,234.56"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(amount);
// "USD 1,234.56"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(amount);
// "1,234.56 US dollars"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(amount);
// "$1,234.56"

Die Option symbol ist die Standardeinstellung und zeigt das Währungssymbol wie $ oder €. Die Option code zeigt den dreistelligen Währungscode. Die Option name schreibt den Währungsnamen aus. Die Option narrowSymbol verwendet ein schmales Währungssymbol einer Locale, das mehrdeutig sein kann, aber Platz spart.

Der Unterschied zwischen symbol und narrowSymbol wird bei Währungen deutlich, die Symbole teilen.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
}).format(100);
// "CA$100.00"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'narrowSymbol'
}).format(100);
// "$100.00"

Kanadische Dollar werden mit der Option symbol als CA$ angezeigt, um sie von US-Dollar zu unterscheiden, aber mit narrowSymbol nur als $.

Negative Währungsbeträge mit Buchhaltungsnotation formatieren

Die Option currencySign steuert, wie negative Beträge dargestellt werden.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'standard'
}).format(-1234.56);
// "-$1,234.56"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting'
}).format(-1234.56);
// "($1,234.56)"

Die Option standard ist die Standardeinstellung und verwendet ein Minuszeichen. Die Option accounting umschließt negative Beträge mit Klammern, gemäß den Buchhaltungskonventionen. Dies macht negative Zahlen in Finanzberichten visuell deutlicher unterscheidbar.

Prozentsätze formatieren

Der Stil percent multipliziert die Zahl mit 100 und fügt ein Prozentzeichen hinzu.

new Intl.NumberFormat('en-US', {
  style: 'percent'
}).format(0.1234);
// "12%"

new Intl.NumberFormat('en-US', {
  style: 'percent'
}).format(0.1256);
// "13%"

Der Formatierer rundet standardmäßig auf die nächste ganze Zahl. Steuern Sie die Dezimalstellen mit Ziffernoptionen.

new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2
}).format(0.1234);
// "12.34%"

Übergeben Sie die Dezimalform des Prozentsatzes, nicht die multiplizierte Form. Der Formatierer übernimmt die Multiplikation.

Messungen mit Einheiten formatieren

Der Stil unit erfordert eine Option unit mit einer Einheitskennung.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
}).format(100);
// "100 km/h"

new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'mile-per-hour'
}).format(100);
// "100 mph"

Verfügbare Einheiten umfassen Längenmessungen (meter, kilometer, mile), Zeitdauern (second, minute, hour), digitalen Speicher (byte, kilobyte, megabyte), Temperaturen (celsius, fahrenheit) und viele andere. Zusammengesetzte Einheiten wie kilometer-per-hour kombinieren einfache Einheiten mit Bindestrichen.

Die Option unitDisplay steuert das Einheitenformat.

const distance = 1234.5;

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
}).format(distance);
// "1,234.5 kilometers"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'short'
}).format(distance);
// "1,234.5 km"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'narrow'
}).format(distance);
// "1,234.5km"

Die Option long schreibt den Einheitennamen aus. Die Option short verwendet Abkürzungen. Die Option narrow verwendet die kompakteste Form, die mehrdeutig sein kann.

Große Zahlen mit kompakter Notation anzeigen

Die Option notation ändert die Darstellung von Zahlen. Der Wert compact verwendet lokalisierte Kurzformen für große Zahlen.

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

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(987654321);
// "988M"

Die kompakte Notation rundet standardmäßig auf eine Dezimalstelle und fügt Suffixe wie K für Tausend, M für Millionen und B für Milliarden hinzu. Dieses Format wird bei Follower-Zahlen in sozialen Medien, Videoaufrufzahlen und Analytics-Dashboards verwendet.

Die Option compactDisplay steuert die Länge des Suffixes.

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  compactDisplay: 'short'
}).format(1234567);
// "1.2M"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  compactDisplay: 'long'
}).format(1234567);
// "1.2 million"

Die Option short ist die Standardeinstellung und verwendet Symbole. Die Option long schreibt das Größenwort aus. Verschiedene Sprachen verwenden unterschiedliche Suffixe.

new Intl.NumberFormat('zh-CN', {
  notation: 'compact'
}).format(123456789);
// "1.2亿"

Chinesisch verwendet 亿 für hundert Millionen, was das numerische Gruppierungssystem der Sprache widerspiegelt.

Sehr große oder kleine Zahlen in wissenschaftlicher Notation ausdrücken

Die Notation scientific stellt Zahlen als Koeffizient multipliziert mit einer Zehnerpotenz dar.

new Intl.NumberFormat('en-US', {
  notation: 'scientific'
}).format(123456789);
// "1.235E8"

new Intl.NumberFormat('en-US', {
  notation: 'scientific'
}).format(0.00000123);
// "1.23E-6"

Dieses Format eignet sich gut für sehr große Zahlen (astronomische Entfernungen, molekulare Mengen) und sehr kleine Zahlen (Teilchenmassen, Messungen im Nanobereich). Der Exponent erscheint immer als Vielfaches von eins.

Technische Notation für technische Anwendungen verwenden

Die Notation engineering ähnelt der wissenschaftlichen Notation, beschränkt jedoch Exponenten auf Vielfache von drei.

new Intl.NumberFormat('en-US', {
  notation: 'engineering'
}).format(123456789);
// "123.457E6"

new Intl.NumberFormat('en-US', {
  notation: 'engineering'
}).format(1234);
// "1.234E3"

Die technische Notation stimmt mit SI-Einheitenpräfixen (Kilo, Mega, Giga) überein, was sie zum Standard in technischen und physikalischen Kontexten macht. Der Koeffizient liegt zwischen 1 und 999.

Dezimalstellen mit Nachkommastellen steuern

Die Optionen minimumFractionDigits und maximumFractionDigits steuern, wie viele Stellen nach dem Dezimalpunkt erscheinen.

new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
}).format(1234.5);
// "1,234.50"

new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
}).format(1234.567);
// "1,234.57"

Das Minimum stellt sicher, dass bei Bedarf nachfolgende Nullen angezeigt werden. Das Maximum rundet längere Dezimalzahlen. Währungsformatierer verwenden standardmäßig zwei Dezimalstellen. Dezimalformatierer verwenden standardmäßig ein Minimum von null und ein Maximum von drei.

new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 0,
  maximumFractionDigits: 0
}).format(1234.567);
// "1,235"

Wenn beide auf null gesetzt werden, wird auf die nächste ganze Zahl gerundet.

Gesamtpräzision mit signifikanten Stellen steuern

Die Optionen minimumSignificantDigits und maximumSignificantDigits steuern die Gesamtpräzision unabhängig von der Position des Dezimalpunkts.

new Intl.NumberFormat('en-US', {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3
}).format(1234.567);
// "1,230"

new Intl.NumberFormat('en-US', {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3
}).format(0.001234);
// "0.00123"

Signifikante Stellen zählen alle Ziffern außer führenden Nullen. Das erste Beispiel rundet auf drei Stellen und ergibt 1230. Das zweite Beispiel behält drei Stellen nach den führenden Nullen bei und ergibt 0.00123.

Optionen für signifikante Stellen überschreiben Optionen für Nachkommastellen, wenn beide angegeben sind.

Rundungsstrategie mit Rundungsmodi wählen

Die Option roundingMode bestimmt, wie Zahlen gerundet werden, wenn eine Kürzung erforderlich ist.

const value = 1.5;

new Intl.NumberFormat('en-US', {
  maximumFractionDigits: 0,
  roundingMode: 'halfExpand'
}).format(value);
// "2"

new Intl.NumberFormat('en-US', {
  maximumFractionDigits: 0,
  roundingMode: 'halfTrunc'
}).format(value);
// "1"

Der Modus halfExpand ist der Standard und rundet 0,5 von Null weg, eine gängige Rundungsstrategie, die in Schulen gelehrt wird. Der Modus halfTrunc rundet 0,5 in Richtung Null.

Weitere Modi sind:

ceil: Immer in Richtung positiver Unendlichkeit runden
floor: Immer in Richtung negativer Unendlichkeit runden
expand: Immer von Null weg runden
trunc: Immer in Richtung Null runden
halfCeil: 0,5 in Richtung positiver Unendlichkeit runden
halfFloor: 0,5 in Richtung negativer Unendlichkeit runden
halfEven: 0,5 zur nächsten geraden Zahl runden

const prices = [1.5, 2.5, 3.5];

prices.map(price =>
  new Intl.NumberFormat('en-US', {
    maximumFractionDigits: 0,
    roundingMode: 'halfEven'
  }).format(price)
);
// ["2", "2", "4"]

Der Modus halfEven, auch kaufmännisches Runden genannt, reduziert den Rundungsfehler bei wiederholten Berechnungen. Beim Runden von 0,5 wird die nächste gerade Zahl gewählt. Dies ergibt 2 sowohl für 1,5 als auch für 2,5, aber 4 für 3,5.

Finanzanwendungen verwenden ceil zum Aufrunden von Gebühren und floor zum Abrunden von Erstattungen. Statistische Anwendungen verwenden halfEven, um kumulative Rundungsfehler zu minimieren.

Tausendertrennzeichen mit Gruppierungsoptionen steuern

Die Option useGrouping steuert, ob Tausendertrennzeichen angezeigt werden.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(123456);
// "123,456"

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

Der Wert true ist die Standardeinstellung. Der Wert false entfernt alle Trennzeichen. String-Werte bieten eine feinere Kontrolle.

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

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

Der Wert always verwendet in allen Fällen Trennzeichen. Der Wert min2 lässt Trennzeichen bei vierstelligen Zahlen weg. Der Wert auto folgt den Locale-Präferenzen, die typischerweise dem Verhalten von min2 entsprechen.

Kompakte Notation verwendet standardmäßig min2, da kompakte Zahlen selten interne Trennzeichen benötigen.

Vorzeichen explizit mit Anzeigeoptionen für Vorzeichen anzeigen

Die Option signDisplay steuert, wann positive und negative Vorzeichen erscheinen.

new Intl.NumberFormat('en-US', {
  signDisplay: 'auto'
}).format(100);
// "100"

new Intl.NumberFormat('en-US', {
  signDisplay: 'always'
}).format(100);
// "+100"

Der Wert auto ist die Standardeinstellung und zeigt Minuszeichen für negative Zahlen, aber keine Pluszeichen für positive Zahlen an. Der Wert always zeigt beide an.

new Intl.NumberFormat('en-US', {
  signDisplay: 'exceptZero'
}).format(0);
// "0"

new Intl.NumberFormat('en-US', {
  signDisplay: 'always'
}).format(0);
// "+0"

Der Wert exceptZero lässt Vorzeichen für Nullwerte weg, auch bei always-Verhalten. Dies verhindert verwirrende Anzeigen von +0 und -0.

new Intl.NumberFormat('en-US', {
  signDisplay: 'never'
}).format(-100);
// "100"

Der Wert never entfernt Vorzeichen vollständig und zeigt nur den Absolutwert an.

Finanzanwendungen verwenden always, um Gewinne mit Pluszeichen hervorzuheben. Temperaturanzeigen verwenden exceptZero, um die Anzeige von +0° oder -0° zu vermeiden.

Formatierte Ausgabe in Teile aufteilen

Die Methode formatToParts() gibt ein Array von Objekten zurück, die jeweils eine Komponente der formatierten Zeichenfolge darstellen.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).formatToParts(1234.56);

Dies gibt zurück:

[
  { type: 'currency', value: '$' },
  { type: 'integer', value: '1' },
  { type: 'group', value: ',' },
  { type: 'integer', value: '234' },
  { type: 'decimal', value: '.' },
  { type: 'fraction', value: '56' }
]

Jedes Objekt hat einen type, der die Komponente identifiziert, und einen value, der die Zeichenfolge enthält. Der type kann currency, integer, group, decimal, fraction, literal, minusSign, plusSign, percentSign oder andere sein.

Dies ermöglicht individuelle Formatierung einzelner Komponenten.

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

const formatted = parts.map(part => {
  if (part.type === 'currency') {
    return `<span class="currency">${part.value}</span>`;
  }
  if (part.type === 'integer') {
    return `<span class="integer">${part.value}</span>`;
  }
  return part.value;
}).join('');

// <span class="currency">$</span><span class="integer">1</span>,<span class="integer">234</span>.56

Dies erzeugt HTML mit formatierten Komponenten. Der gleiche Ansatz funktioniert für die Anwendung verschiedener Farben auf negative Beträge, die Vergrößerung von Währungssymbolen oder die Animation einzelner Ziffern.

Zahlenbereiche formatieren

Die Methode formatRange() formatiert zwei Zahlen als Bereich.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).formatRange(100, 200);
// "$100.00 – $200.00"

Der Formatierer verwendet ein lokalisiertes Bereichstrennzeichen (einen Halbgeviertstrich im Englischen) und schließt beide Währungssymbole ein. Wenn die Werte zur gleichen Zeichenfolge formatiert werden, gibt der Formatierer einen einzelnen Wert mit einer Tilde zurück.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).formatRange(1200, 1800);
// "~1K"

Sowohl 1200 als auch 1800 werden in kompakter Schreibweise als 1K formatiert, daher zeigt der Formatierer ungefähr 1K an.

Die Methode formatRangeToParts() gibt Teile für den Bereich zurück.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).formatRangeToParts(100, 200);

Dies gibt zurück:

[
  { type: 'currency', value: '$', source: 'startRange' },
  { type: 'integer', value: '100', source: 'startRange' },
  { type: 'decimal', value: '.', source: 'startRange' },
  { type: 'fraction', value: '00', source: 'startRange' },
  { type: 'literal', value: ' – ', source: 'shared' },
  { type: 'currency', value: '$', source: 'endRange' },
  { type: 'integer', value: '200', source: 'endRange' },
  { type: 'decimal', value: '.', source: 'endRange' },
  { type: 'fraction', value: '00', source: 'endRange' }
]

Die Eigenschaft source gibt an, ob der Teil vom Startwert, Endwert oder Bereichstrennzeichen stammt.

Preisbereiche, Datumsbereiche und Messbereiche verwenden diese Methode für eine korrekte, lokalisierte Formatierung.

Optionen überprüfen

Die Methode resolvedOptions() gibt ein Objekt zurück, das die tatsächlich vom Formatierer verwendeten Optionen anzeigt.

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

formatter.resolvedOptions();

Dies gibt zurück:

{
  locale: 'en-US',
  numberingSystem: 'latn',
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol',
  currencySign: 'standard',
  minimumIntegerDigits: 1,
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  useGrouping: 'auto',
  notation: 'standard',
  signDisplay: 'auto',
  roundingMode: 'halfExpand'
}

Das Objekt enthält explizit gesetzte Optionen und Standardwerte. Die locale kann von der angeforderten Locale abweichen, wenn das System zu einer anderen, aber kompatiblen Locale aufgelöst hat. Das numberingSystem zeigt, welche Ziffernzeichen der Formatierer verwendet.

Diese Methode hilft bei der Fehlersuche bei unerwarteter Formatierung, indem sie alle aktiven Einstellungen offenlegt.

Formatierer wiederverwenden für bessere Performance

Das Erstellen einer NumberFormat-Instanz beinhaltet das Laden von Locale-Daten und die Verarbeitung von Optionen. Instanzen sollten wiederverwendet werden, wenn mehrere Werte mit den gleichen Einstellungen formatiert werden.

// Ineffizient: erstellt für jeden Wert einen neuen Formatierer
prices.map(price =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(price)
);

// Effizient: erstellt den Formatierer nur einmal
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

prices.map(price => formatter.format(price));

Der zweite Ansatz ist deutlich schneller, wenn viele Werte formatiert werden. Formatierer sollten außerhalb von Schleifen und Komponenten-Render-Funktionen erstellt werden.

Moderne JavaScript-Engines cachen NumberFormat-Instanzen intern, aber explizite Wiederverwendung bietet bessere Performance und klareren Code.

Browser-Unterstützung prüfen

Die Intl.NumberFormat-API wird in allen modernen Browsern unterstützt. Chrome, Firefox, Safari und Edge unterstützen die grundlegende API seit 2016. Erweiterte Funktionen wie formatRange(), formatRangeToParts() und erweiterte roundingMode-Optionen haben erst kürzlich Unterstützung erhalten, sind aber jetzt in aktuellen Browser-Versionen verfügbar.

Überprüfen Sie die Unterstützung mit:

if (typeof Intl !== 'undefined' && Intl.NumberFormat) {
  // NumberFormat wird unterstützt
  const formatter = new Intl.NumberFormat('en-US');
}

Überprüfen Sie spezifische Funktionen:

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

if (typeof formatter.formatRange === 'function') {
  // formatRange wird unterstützt
}

Anwendungen, die Unterstützung für ältere Browser benötigen, können Polyfills wie @formatjs/intl-numberformat verwenden, aber die meisten modernen Anwendungen können die native API ohne Fallbacks nutzen.

Wann NumberFormat verwenden

Verwenden Sie Intl.NumberFormat für:

Anzeigen von Zahlen für Benutzer in jedem UI-Kontext
Formatieren von Währungsbeträgen in E-Commerce-Anwendungen
Anzeigen von Prozentsätzen in Analytics-Dashboards
Anzeigen von Follower-Anzahlen, Aufrufen und anderen sozialen Metriken
Formatieren von Messungen und wissenschaftlichen Werten
Entwicklung internationalisierter Anwendungen, die mehrere Sprachen unterstützen

Verwenden Sie Intl.NumberFormat nicht für:

Interne Berechnungen oder Datenverarbeitung
Speichern von Werten in Datenbanken
Serialisieren von Daten für APIs
Parsen von Benutzereingaben zurück zu Zahlen

NumberFormat ist ein Tool für die Präsentationsschicht. Behalten Sie rohe numerische Werte für Berechnungen und Speicherung bei und wenden Sie die Formatierung nur an, wenn Werte für Benutzer angezeigt werden.