Formatierung von Daten und Zahlen mit der Intl API

Sie haben Intl.DateTimeFormat und Intl.NumberFormat bereits verwendet. Doch wenn Ihr mentales Modell einige Jahre alt ist, entgehen Ihnen wahrscheinlich wesentliche Funktionen – insbesondere die Rundungssteuerungen von Intl.NumberFormat und wie Temporal und Intl in Laufzeitumgebungen Ende 2025 zusammenarbeiten.

Dieser Artikel bietet einen aktualisierten technischen Überblick über die JavaScript-Internationalisierung mittels der Intl API, mit Fokus auf Änderungen und häufige Missverständnisse erfahrener Entwickler.

Was Intl tatsächlich leistet

Der Intl-Namespace übernimmt die locale-aware Formatierung von Werten. Er parst, berechnet oder manipuliert keine Daten – er transformiert Werte in menschenlesbare Strings gemäß kultureller Konventionen.

Zwei kritische Punkte:

1. Intl formatiert; es speichert oder berechnet nicht. Ihre Anwendungslogik bleibt von der Präsentation getrennt.
2. Die Ausgabe variiert je nach Laufzeitumgebung. Die zugrunde liegenden Locale-Daten stammen aus ICU-Bibliotheken, die mit Browsern und Node.js gebündelt sind. Die exakten Strings können zwischen Chrome und Safari oder zwischen Node-Versionen leicht variieren.

Codieren Sie niemals erwartete Ausgabestrings fest in Tests. Verwenden Sie stattdessen formatToParts() oder strukturelle Assertions.

Intl.DateTimeFormat: Über grundlegende Optionen hinaus

Formatierung von Date-Objekten

Intl.DateTimeFormat bleibt die Standardmethode zur Formatierung von JavaScript-Date-Objekten:

const formatter = new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'long',
  timeStyle: 'short',
  timeZone: 'Europe/Berlin'
});

formatter.format(new Date()); // "27. Juni 2025 um 14:30"

Die Optionen dateStyle und timeStyle bieten vordefinierte Konfigurationen. Wenn Sie granulare Kontrolle benötigen, verwenden Sie einzelne Optionen wie weekday, month, hour und timeZoneName.

Temporal-Typen und locale-aware Formatierung

Temporal wird aktiv in modernen JavaScript-Engines implementiert, ist aber noch nicht breit unterstützt in allen Browsern und Umgebungen. Wo verfügbar, formatieren sich Temporal.PlainDate, Temporal.ZonedDateTime und andere Temporal-Typen selbst über toLocaleString(), anstatt direkt an Intl.DateTimeFormat.prototype.format() übergeben zu werden.

const date = Temporal.PlainDate.from('2025-06-27');
date.toLocaleString('ja-JP', { dateStyle: 'full' });
// "2025年6月27日金曜日"

Intl.DateTimeFormat akzeptiert Date-Objekte. Temporal-Typen verarbeiten ihre eigene Formatierungslogik und können locale-sensitives Verhalten intern delegieren, werden aber nicht von Intl.DateTimeFormat selbst formatiert. Diese Unterscheidung ist wichtig beim Entwurf von APIs, die Datumseingaben akzeptieren.

Datumsbereiche mit formatRange

Zur Anzeige von Datumsbereichen verwenden Sie formatRange():

const start = new Date(2025, 5, 27);
const end = new Date(2025, 6, 3);

new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' })
  .formatRange(start, end);
// "Jun 27 – Jul 3, 2025"

Der Formatter reduziert redundante Teile intelligent basierend auf Locale-Konventionen.

Intl.NumberFormat Rundungs- und Anzeigesteuerungen

Moderne Rundungsoptionen

Das Rundungsverhalten von Intl.NumberFormat wurde in aktuellen Spezifikationen erheblich erweitert, wobei die Unterstützung je nach Laufzeitumgebung variiert. Über minimumFractionDigits und maximumFractionDigits hinaus haben Sie nun:

• roundingMode: Steuert, wie Werte gerundet werden (ceil, floor, halfExpand, halfEven, etc.)
• roundingIncrement: Rundet auf bestimmte Inkremente (5, 10, 50, etc.)
• trailingZeroDisplay: Steuert, ob nachfolgende Nullen angezeigt werden (auto oder stripIfInteger)

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

formatter.format(2.225); // "$2.22" (kaufmännische Rundung)
formatter.format(2.235); // "$2.24"

Locale-aware Zahlenformatierungsmuster

Für kompakte Notation und Einheitenformatierung:

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

// Einheitenformatierung
new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'short'
}).format(120); // "120 km/h"

Praktische Überlegungen

Formatter-Instanzen wiederverwenden

Das Erstellen von Formattern verursacht Overhead. Cachen Sie diese beim Formatieren mehrerer Werte:

// So machen Sie es richtig
const priceFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
prices.map(p => priceFormatter.format(p));

// Nicht so
prices.map(p => new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(p));

Feature Detection

Prüfen Sie neuere Optionen programmatisch:

try {
  new Intl.NumberFormat('en', { roundingMode: 'halfEven' });
  // Feature wird unterstützt
} catch (e) {
  // Fallback auf Standard-Rundung
}

Locale vs. Zeitzone

Dies sind unabhängige Konzepte. Eine Locale (en-GB) bestimmt Formatierungskonventionen. Eine Zeitzone (Europe/London) bestimmt die angezeigte Uhrzeit. Sie können ein Datum nach deutschen Konventionen formatieren und dabei die Tokioter Zeit anzeigen.

Fazit

Die Intl API für Datumsformatierung und locale-aware Zahlenformatierung ist erheblich gereift. Die Spezifikation umfasst nun Rundungsmodi, Anzeigesteuerungen und Bereichsformatierung, die die meisten Gründe für externe Bibliotheken eliminieren.

Temporal-Typen existieren neben Intl – sie verarbeiten ihre eigenen toLocaleString()-Aufrufe, während Intl.DateTimeFormat weiterhin Date-Objekte formatiert. Bauen Sie Ihr mentales Modell um diese Trennung herum auf, testen Sie ohne fest codierte String-Erwartungen und verwenden Sie Formatter-Instanzen für bessere Performance wieder.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.