Intl-API – Internationalisierung leicht gemacht
In einer zunehmend globalisierten Welt ist es für Webanwendungen unerlässlich, Inhalte und Daten für unterschiedliche Sprachen, Regionen und kulturelle Konventionen ausgeben zu können. Genau hierfür wurde die Intl-API (Internationalization API) in JavaScript entwickelt. Dank dieser Schnittstelle lassen sich Zahlen, Währungen, Datums- und Zeitangaben sowie Texte einfach und zuverlässig an regionale Gepflogenheiten anpassen, ohne dass man selbst komplizierte Formatierungsregeln implementieren muss.
Warum Intl-API nutzen?
Ohne die Intl-API (Internationalisierungs-API) mussten Entwickler oft auf externe Bibliotheken oder komplexe, manuelle Formatierungen zurückgreifen. Dies konnte nicht nur fehleranfällig sein, sondern bedeutete auch zusätzlichen Wartungsaufwand. Die Intl-API bietet dagegen eine standardisierte, in den meisten modernen Browsern integrierte Lösung. So kannst du dich auf die Kernlogik deiner Anwendung konzentrieren, während die Internationalisierung bereits auf niedriger Ebene sauber gelöst wird.
Datums- und Zeitformatierung mit Intl.DateTimeFormat
Mit Intl.DateTimeFormat kannst du Datums- und Zeitangaben mühelos an die Landesgewohnheiten anpassen. Dabei bestimmst du selbst, welche Sprache und welches Format du verwenden möchtest:
// Beispiel: Deutsches Datumsformat
const datumFormatter = new Intl.DateTimeFormat('de-DE', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
console.log(datumFormatter.format(new Date()));
// Ausgabe (Beispiel): "Dienstag, 10. Dezember 2024"
Wechselst du lediglich den Locale-String ('de-DE', 'en-US', 'fr-FR' etc.), ändert sich die gesamte Formatierung, ohne dass du den Code für die Formatierung selbst anfassen musst.
Zahlen und Währungen mit Intl.NumberFormat
Auch für Zahlen- und Währungsdarstellung bietet die Intl-API eine elegante Lösung. Ob Tausendertrennzeichen, Dezimalstellen oder spezielle Währungszeichen – alles wird automatisch korrekt formatiert.
// Beispiel: Zahl im deutschen Format
const zahlenFormatter = new Intl.NumberFormat('de-DE', {
style: 'decimal',
minimumFractionDigits: 2
});
console.log(zahlenFormatter.format(1234.5));
// Ausgabe: "1.234,50"
const waehrungsFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
console.log(waehrungsFormatter.format(1234.5));
// Ausgabe: "$1,234.50"
So kannst du mit wenigen Zeilen Code sicherstellen, dass Benutzer in den USA Preise in Dollar und mit Punkt als Dezimaltrennzeichen sehen, während deutsche Nutzer denselben Wert mit Komma und Eurozeichen dargestellt bekommen.
Relative Zeitangaben mit Intl.RelativeTimeFormat
Für natürliche Zeitangaben wie “vor 2 Tagen” oder “in 3 Stunden” sorgt Intl.RelativeTimeFormat. Hiermit kannst du Ereignisse relativ zur aktuellen Zeit ausdrücken, angepasst an unterschiedliche Sprachen:
const relativeFormatter = new Intl.RelativeTimeFormat('de', { numeric: 'auto' });
console.log(relativeFormatter.format(-2, 'day'));
// Ausgabe: "vorgestern"
console.log(relativeFormatter.format(3, 'hour'));
// Ausgabe: "in 3 Stunden"
Diese Funktion ist besonders praktisch für Benachrichtigungen, Aktualisierungen oder Verlaufsdaten in Anwendungen.
Textvergleiche mit Intl.Collator
Mit Intl.Collator lassen sich Strings sprachspezifisch vergleichen und sortieren. Dies ist nützlich bei der alphabetischen Sortierung von Listen oder der Umsetzung einer Suchfunktion, die sprachliche Feinheiten berücksichtigt:
const collator = new Intl.Collator('de-DE', { sensitivity: 'accent' });
console.log(['Ziege', 'Ähre', 'Apfel'].sort(collator.compare));
// Ausgabe: ["Apfel", "Ähre", "Ziege"]
Hier werden Umlaute und Akzente korrekt berücksichtigt, was ohne die Intl-API schnell zum Problem werden kann.
Best Practices und Tipps
Zum Abschluss noch ein paar praktische Beispiele zur Nutzung der Intl-API.
1. Feste Locale vermeiden
Anstatt fest eine bestimmte Locale wie en-US zu verwenden, kannst du die bevorzugte Sprache des Nutzers ermitteln. Ein gängiger Ansatz ist, die Browser-Einstellungen (navigator.language) heranzuziehen oder dem Nutzer eine Sprachauswahl anzubieten:
// Beispielsweise liest du die bevorzugte Sprache aus den Browsereinstellungen aus:
const userLang = navigator.language || 'en-US';
// Dann verwendest du diese Locale für deine Formatierungen:
const dateFormatter = new Intl.DateTimeFormat(userLang, {
year: 'numeric', month: 'long', day: 'numeric'
});
console.log(dateFormatter.format(new Date()));
// Gibt je nach Browsersprache das Datum im bevorzugten Format des Nutzers aus.
In diesem Codebeispiel wird die bevorzugte Sprache des Benutzers aus den Browsereinstellungen ausgelesen und in der Variablen userLang gespeichert. Die navigator.language-Eigenschaft gibt die bevorzugte Sprache des Benutzers zurück, die im Browser eingestellt ist. Falls diese Information nicht verfügbar ist, wird standardmäßig ‘en-US’ (Englisch - Vereinigte Staaten) verwendet.
Anschließend wird ein Intl.DateTimeFormat-Objekt erstellt, das die userLang-Locale verwendet, um Datumswerte zu formatieren. Das Intl.DateTimeFormat-Objekt wird mit einem Konfigurationsobjekt initialisiert, das angibt, dass das Jahr numerisch, der Monat als langer Name und der Tag numerisch formatiert werden sollen.
Dieses Beispiel zeigt, wie man die Intl-API in JavaScript verwenden kann, um Datumswerte basierend auf den Spracheinstellungen des Benutzers zu formatieren. Dies verbessert die Benutzererfahrung, indem Inhalte in der bevorzugten Sprache und dem bevorzugten Format des Benutzers angezeigt werden.
2. Fallback-Strategie
Falls eine bestimmte Sprache nicht unterstützt wird, kannst du einen Fallback definieren. Hier wird zunächst versucht, fr-FR zu verwenden, und falls nicht verfügbar, wird auf en-US zurückgegriffen:
const locales = ['fr-FR', 'en-US']; // Priorität: erst Französisch, dann Englisch
const numberFormatter = new Intl.NumberFormat(locales, {
style: 'currency',
currency: 'EUR'
});
console.log(numberFormatter.format(1234.56));
// Wenn das System 'fr-FR' nicht unterstützt, wird 'en-US' verwendet.
In diesem Codebeispiel wird ein Array locales definiert, das die Sprach- und Regionaleinstellungen ‘fr-FR’ (Französisch - Frankreich) und ‘en-US’ (Englisch - Vereinigte Staaten) enthält. Die Priorität der Lokalisierungen ist so festgelegt, dass zuerst Französisch und dann Englisch verwendet wird.
Ein Intl.NumberFormat-Objekt wird erstellt, das die locales-Einstellungen verwendet, um Zahlen zu formatieren. Das Konfigurationsobjekt gibt an, dass die Zahl im Währungsstil (style: ‘currency’) formatiert werden soll und die Währung auf Euro (currency: ‘EUR’) festgelegt ist.
Dieses Beispiel zeigt, wie man die Internationalisierungs-API (Intl) in JavaScript verwenden kann, um Zahlen basierend auf mehreren möglichen Lokalisierungen zu formatieren. Dies stellt sicher, dass die Zahl im bestmöglichen Format angezeigt wird, abhängig von den unterstützten Lokalisierungen des Systems.
3. Kombination mehrerer Intl-Objekte
Verwende verschiedene Formatter, um das gesamte Erscheinungsbild konsistent zu halten. Zum Beispiel ein DateTimeFormat für Datumsangaben, ein NumberFormat für Währungen und ein RelativeTimeFormat für relative Zeitangaben:
const userLocale = navigator.language || 'en-US';
// Datum formatter
const dateFormatter = new Intl.DateTimeFormat(userLocale, {
year: 'numeric', month: 'short', day: 'numeric'
});
// Währung formatter
const currencyFormatter = new Intl.NumberFormat(userLocale, {
style: 'currency',
currency: 'USD'
});
// Relative Zeit formatter
const relativeTimeFormatter = new Intl.RelativeTimeFormat(userLocale, { numeric: 'auto' });
// Beispielwerte
const purchaseDate = new Date(2021, 5, 15);
const amount = 123.45;
const daysAgo = -3;
// Ausgabe
console.log(`Dein Kaufdatum: ${dateFormatter.format(purchaseDate)}`);
// "Dein Kaufdatum: 15. Jun. 2021" (oder entsprechend Locale-Format)
console.log(`Betrag: ${currencyFormatter.format(amount)}`);
// "Betrag: $123.45" in einer US-locale, oder angepasst an die Nutzersprache
console.log(`Dieser Vorgang war vor ${relativeTimeFormatter.format(daysAgo, 'day')}`);
// "Dieser Vorgang war vor 3 Tagen"
Workspace In diesem Codebeispiel wird die bevorzugte Sprache des Benutzers aus den Browsereinstellungen ausgelesen und in der Variablen userLocale gespeichert. Falls diese Information nicht verfügbar ist, wird standardmäßig ‘en-US’ (Englisch - Vereinigte Staaten) verwendet.
Drei verschiedene Formatter werden mit der Internationalisierungs-API (Intl) erstellt, um Datum, Währung und relative Zeit basierend auf der Benutzer-Locale zu formatieren:
Datum Formatter: Ein Intl.DateTimeFormat-Objekt wird erstellt, das das Datum im Format Jahr-Monat-Tag ausgibt, wobei der Monat als kurzer Name dargestellt wird.
Währung Formatter: Ein Intl.NumberFormat-Objekt wird erstellt, das Zahlen im Währungsstil formatiert, wobei die Währung auf US-Dollar (USD) festgelegt ist.
Relative Zeit Formatter: Ein Intl.RelativeTimeFormat-Objekt wird erstellt, das relative Zeitangaben formatiert, wobei die Option numeric: ‘auto’ verwendet wird, um die Ausgabe zu steuern.
Browserunterstützung
Die Intl-API ist in den meisten modernen Browsern standardmäßig verfügbar. In sehr alten Umgebungen kann man auf Polyfills zurückgreifen, um ähnliche Funktionalität nachzurüsten.
Fazit
Die Intl-API macht es einfacher denn je, Anwendungen an globale Märkte anzupassen. Ob Datum, Zeit, Zahlen, Währungen oder Texte – mit wenigen Zeilen Code kannst du ein Benutzererlebnis schaffen, das kulturell sensibel, professionell und leicht erweiterbar ist. So stellst du sicher, dass dein Angebot international überzeugt, ohne dich in der Komplexität von Internationalisierungsregeln zu verlieren.
Experimentiere mit Intl-API in deinem nächsten Projekt und entdecke, wie es dir hilft, dein Projekt global zu machen!