Intl.NumberFormat API - JavaScript i18n

Einführung

Betrachten Sie die Anzeige der Zahl 1234567.89 in Ihrer Anwendung. Die Verwendung von toString() erzeugt "1234567.89", was schwer lesbar ist und davon ausgeht, dass alle Punkte für Dezimalstellen verwenden und Zahlen von links nach rechts lesen. 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 dies, indem sie Zahlen gemäß gebietsschemaspezifischen Konventionen formatiert. Sie verarbeitet Tausendertrennzeichen, Dezimalpunkte, Zifferngruppierung, Währungssymbole, Prozentzeichen, Maßeinheiten und Zahlensysteme. Dies macht manuelle String-Manipulation oder Drittanbieter-Bibliotheken überflüssig.

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

Eine Zahl mit Standardeinstellungen formatieren

Erstellen Sie einen Formatter, 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 Formatter fügt Tausendertrennzeichen hinzu und formatiert den Dezimalpunkt gemäß dem Gebietsschema. Ohne Angabe eines Gebietsschemas verwendet der Formatter das Standard-Gebietsschema 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 für Tausendertrennzeichen und Kommas für Dezimalpunkte, das Gegenteil amerikanischer Konventionen. Der Formatter verarbeitet diese Unterschiede automatisch.

Gebietsschemacodes verstehen

Ein Gebietsschemacode identifiziert eine Sprache und optional eine Region, geschrieben als language-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" (American English)

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

new Intl.NumberFormat('es-ES').format(1234.56);
// "1234,56" (European Spanish)

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

Beide englischen Varianten verwenden dieselbe Formatierung, spanische Varianten unterscheiden sich jedoch. Europäisches Spanisch lässt Tausendertrennzeichen bei vierstelligen Zahlen weg und verwendet Kommas für Dezimalstellen, während mexikanisches Spanisch den amerikanischen Konventionen folgt.

Wählen Sie Locales basierend auf den Standorten oder Sprachpräferenzen Ihrer Benutzer. Anwendungen bestimmen das Locale typischerweise aus Benutzereinstellungen, der Browsersprache 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 der Standard. Die anderen Stile sind currency, percent und unit.

Formatieren Sie Währungen mit Symbolen und Codes

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

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

Der Formatter fügt das Dollarzeichen hinzu und formatiert standardmäßig auf zwei Dezimalstellen, dem Standard für die meisten Währungen. 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 des Locales gefolgt wird. Das 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 und folgen amerikanischen statt europäischen Platzierungskonventionen.

Steuern Sie das Währungsanzeigeformat

Die Option currencyDisplay ändert, wie die Währung in der formatierten Zeichenkette 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 der Standard 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 das schmale Währungssymbol eines Locales, das möglicherweise mehrdeutig ist, aber Platz spart.

Der Unterschied zwischen symbol und narrowSymbol wird bei Währungen deutlich, die dasselbe Symbol verwenden.

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 werden sie nur als $ dargestellt.

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äß Buchhaltungskonventionen. Dadurch werden negative Zahlen in Finanzberichten visuell deutlicher hervorgehoben.

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 Formatter 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 Formatter übernimmt die Multiplikation.

Messungen mit Einheiten formatieren

Der Stil unit erfordert eine Option unit mit einem Einheitenbezeichner.

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), digitale Speichergrößen (byte, kilobyte, megabyte), Temperaturen (celsius, fahrenheit) und viele weitere. 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 gebietsschemaspezifische 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 Tausende, M für Millionen und B für Milliarden hinzu. Dieses Format erscheint in Social-Media-Follower-Zählern, Video-Aufrufzahlen und Analyse-Dashboards.

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 Gebietsschemata 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 drückt Zahlen als Koeffizienten multipliziert mit einer Zehnerpotenz aus.

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, Molekülzahlen) 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 richtet sich nach SI-Einheitenpräfixen (Kilo, Mega, Giga) und ist daher Standard in technischen und physikalischen Kontexten. Der Koeffizient liegt im Bereich von 1 bis 999.

Dezimalstellen mit Nachkommastellen steuern

Die Optionen minimumFractionDigits und maximumFractionDigits steuern, wie viele Ziffern nach dem Dezimaltrennzeichen 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 nachfolgende Nullen bei Bedarf erscheinen. Das Maximum rundet längere Dezimalzahlen. Währungsformatierer verwenden standardmäßig zwei Dezimalstellen. Dezimalformatierer verwenden standardmäßig null als Minimum und drei als Maximum.

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 Ziffern steuern

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

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 Ziffern zählen alle Ziffern außer führenden Nullen. Das erste Beispiel rundet auf drei Ziffern und erzeugt 1230. Das zweite Beispiel behält drei Ziffern nach den führenden Nullen bei und erzeugt 0.00123.

Optionen für signifikante Ziffern ü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 die Standardeinstellung 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 umfassen:

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 halfEven-Modus, auch Banker-Rundung genannt, reduziert 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 Rückerstattungen. 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 Steuerung.

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.

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

Vorzeichen explizit mit Vorzeichenanzeigeoptionen anzeigen

Die Option signDisplay steuert, wann positive und negative Vorzeichen angezeigt werden.

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. 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 auch bei always-Verhalten weg. 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 jede Komponente der formatierten Zeichenkette repräsentieren.

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 Zeichenkette enthält. Der type kann currency, integer, group, decimal, fraction, literal, minusSign, plusSign, percentSign oder andere sein.

Dies ermöglicht das individuelle Styling 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 gestylten Komponenten. Derselbe Ansatz funktioniert für die Anwendung unterschiedlicher 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 Formatter verwendet ein gebietsschemaspezifisches Bereichstrennzeichen (einen Halbgeviertstrich im Deutschen) und enthält beide Währungssymbole. Wenn die Werte zur gleichen Zeichenkette formatiert werden, gibt der Formatter 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 Notation als 1K formatiert, daher zeigt der Formatter 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 source-Eigenschaft identifiziert, ob der Teil vom Startwert, Endwert oder Bereichstrennzeichen stammt.

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

Aufgelöste Optionen inspizieren

Die resolvedOptions()-Methode gibt ein Objekt zurück, das die tatsächlich vom Formatter 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. Die numberingSystem zeigt, welche Ziffernzeichen der Formatter verwendet.

Diese Methode hilft beim Debuggen unerwarteter Formatierungen, indem sie alle aktiven Einstellungen offenlegt.

Formatter wiederverwenden für bessere Performance

Das Erstellen einer NumberFormat-Instanz beinhaltet das Laden von Locale-Daten und die Verarbeitung von Optionen. Verwenden Sie Instanzen wieder, wenn Sie mehrere Werte mit denselben Einstellungen formatieren.

// Inefficient: creates new formatter for each value
prices.map(price =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(price)
);

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

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

Der zweite Ansatz ist deutlich schneller beim Formatieren vieler Werte. Erstellen Sie Formatter außerhalb von Schleifen und Komponenten-Render-Funktionen.

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 Features wie formatRange(), formatRangeToParts() und erweiterte roundingMode-Optionen erhielten erst kürzlich Unterstützung, sind aber jetzt in aktuellen Browser-Versionen verfügbar.

Prüfen Sie die Unterstützung mit:

if (typeof Intl !== 'undefined' && Intl.NumberFormat) {
  // NumberFormat is supported
  const formatter = new Intl.NumberFormat('en-US');
}

Prüfen Sie auf spezifische Features:

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

if (typeof formatter.formatRange === 'function') {
  // formatRange is supported
}

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 verwendet werden sollte

Intl.NumberFormat verwenden für:

Anzeige von Zahlen für Benutzer in jedem UI-Kontext
Formatierung von Währungsbeträgen in E-Commerce-Anwendungen
Anzeige von Prozentsätzen in Analytics-Dashboards
Anzeige von Follower-Zahlen, Aufrufzahlen und anderen Social-Media-Metriken
Formatierung von Messungen und wissenschaftlichen Werten
Entwicklung internationalisierter Anwendungen, die mehrere Locales unterstützen

Intl.NumberFormat nicht verwenden für:

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

NumberFormat ist ein Präsentationsschicht-Tool. Rohe numerische Werte sollten in Berechnungen und Speicherung beibehalten werden, wobei die Formatierung nur bei der Anzeige von Werten für Benutzer angewendet wird.