So formatieren Sie Datumsangaben im Gebietsschema des Benutzers
Verwenden Sie JavaScript, um Datumsangaben entsprechend den regionalen Konventionen jedes Benutzers anzuzeigen
Einführung
Datumsangaben werden weltweit unterschiedlich dargestellt. Amerikaner schreiben den 15. März 2025 als 3/15/2025, während Europäer dasselbe Datum als 15/03/2025 schreiben und japanische Benutzer 2025/3/15 erwarten. Wenn Sie ein Datumsformat fest codieren, gehen Sie davon aus, dass alle Benutzer derselben Konvention folgen.
Die Anzeige von Datumsangaben in einem ungewohnten Format führt zu Verwirrung. Ein Benutzer, der 3/15/2025 sieht, wenn er 15/03/2025 erwartet, muss innehalten, um zu entschlüsseln, ob das Datum den 15. März oder das unmögliche Datum des 15. Monats darstellt. Diese kognitive Belastung potenziert sich über jedes Datum in Ihrer Anwendung hinweg.
JavaScript stellt die Intl.DateTimeFormat-API bereit, um die Datumsformatierung automatisch zu handhaben. Diese Lektion erklärt, warum Datumsformate kulturübergreifend variieren, wie die API funktioniert und wie Sie Datumsangaben für jedes Gebietsschema korrekt formatieren.
Warum Datumsformate je nach Gebietsschema variieren
Verschiedene Regionen haben unterschiedliche Konventionen für das Schreiben von Datumsangaben entwickelt. Diese Konventionen spiegeln historische Praktiken, Bildungssysteme und kulturelle Präferenzen wider. Es gibt kein universelles Format.
In den Vereinigten Staaten folgen Datumsangaben dem Muster Monat-Tag-Jahr. Der 15. März 2025 erscheint als 3/15/2025.
In den meisten europäischen Ländern, einschließlich Großbritannien, Deutschland, Frankreich und Spanien, folgen Datumsangaben dem Muster Tag-Monat-Jahr. Dasselbe Datum erscheint als 15/03/2025.
In Japan, China und Korea folgen Datumsangaben dem Muster Jahr-Monat-Tag. Das Datum erscheint als 2025/3/15.
Verschiedene Gebietsschemata verwenden auch unterschiedliche Trennzeichen. Amerikaner verwenden Schrägstriche, Deutsche verwenden Punkte, und einige Gebietsschemata verwenden Bindestriche oder Leerzeichen.
Monatsnamen variieren ebenfalls je nach Sprache. März erscheint als "March" im Englischen, "März" im Deutschen, "mars" im Französischen, "marzo" im Spanischen und "3月" im Japanischen.
Wenn Sie Datumsangaben anzeigen, müssen Sie die Erwartungen der Benutzer sowohl hinsichtlich der Reihenfolge der Komponenten als auch der spezifischen Formatierungskonventionen erfüllen.
Verwendung von Intl.DateTimeFormat zur Formatierung von Datumsangaben
Der Intl.DateTimeFormat-Konstruktor erstellt einen Datumsformatierer, der gebietsschemaspezifische Konventionen anwendet. Übergeben Sie eine Gebietsschema-Kennung als erstes Argument und rufen Sie dann die format()-Methode mit einem Date-Objekt auf.
const formatter = new Intl.DateTimeFormat('en-US');
const date = new Date('2025-03-15');
console.log(formatter.format(date));
// Output: "3/15/2025"
Dies erstellt einen Formatierer für US-Englisch, der das Monat-Tag-Jahr-Muster mit Schrägstrichen verwendet. Die format()-Methode konvertiert das Date-Objekt in einen String mit entsprechender Formatierung.
Der Date-Konstruktor akzeptiert einen ISO 8601-Datumsstring wie 2025-03-15. Dies erstellt ein Date-Objekt, das den 15. März 2025 um Mitternacht UTC repräsentiert. Der Formatierer konvertiert dies dann in einen gebietsschemaspezifischen String.
Formatierung desselben Datums für verschiedene Gebietsschemata
Sie können dasselbe Datum für verschiedene Gebietsschemata formatieren, indem Sie die an den Konstruktor übergebene Gebietsschema-Kennung ändern.
const date = new Date('2025-03-15');
const usFormatter = new Intl.DateTimeFormat('en-US');
console.log(usFormatter.format(date));
// Output: "3/15/2025"
const gbFormatter = new Intl.DateTimeFormat('en-GB');
console.log(gbFormatter.format(date));
// Output: "15/03/2025"
const deFormatter = new Intl.DateTimeFormat('de-DE');
console.log(deFormatter.format(date));
// Output: "15.3.2025"
const jpFormatter = new Intl.DateTimeFormat('ja-JP');
console.log(jpFormatter.format(date));
// Output: "2025/3/15"
Jeder Formatierer wendet unterschiedliche Konventionen an. Der US-Formatierer verwendet Monat-Tag-Jahr mit Schrägstrichen. Der UK-Formatierer verwendet Tag-Monat-Jahr mit Schrägstrichen. Der deutsche Formatierer verwendet Tag-Monat-Jahr mit Punkten. Der japanische Formatierer verwendet Jahr-Monat-Tag mit Schrägstrichen.
Sie müssen nicht wissen, welches Muster oder welche Trennzeichen jedes Gebietsschema verwendet. Die API behandelt diese Details automatisch basierend auf der Gebietsschema-Kennung.
Formatierung von Datumsangaben 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 navigator.language-Eigenschaft gibt die bevorzugte Sprache des Benutzers zurück.
const userLocale = navigator.language;
const formatter = new Intl.DateTimeFormat(userLocale);
const date = new Date('2025-03-15');
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "3/15/2025"
// For en-GB: "15/03/2025"
// For de-DE: "15.3.2025"
// For ja-JP: "2025/3/15"
Dieser Ansatz zeigt Daten 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 bevorzugter Sprachen übergeben, um ein Fallback-Verhalten zu ermöglichen.
const formatter = new Intl.DateTimeFormat(navigator.languages);
const date = new Date('2025-03-15');
console.log(formatter.format(date));
Die API verwendet das erste Gebietsschema aus dem Array, das sie unterstützt. Dies bietet eine bessere Fallback-Behandlung, wenn die oberste Präferenz des Benutzers nicht verfügbar ist.
Verstehen, was die API formatiert
Die Intl.DateTimeFormat-API formatiert JavaScript-Date-Objekte. Ein Date-Objekt repräsentiert einen bestimmten Zeitpunkt, einschließlich Datum, Uhrzeit und Zeitzoneninformationen.
Wenn Sie ein Date-Objekt formatieren, konvertiert die API es gemäß den Konventionen des Gebietsschemas in eine Zeichenkette. Standardmäßig formatiert die API nur den Datumsanteil und lässt die Uhrzeit weg.
const formatter = new Intl.DateTimeFormat('en-US');
const dateWithTime = new Date('2025-03-15T14:30:00');
console.log(formatter.format(dateWithTime));
// Output: "3/15/2025"
Das Date-Objekt enthält Uhrzeitinformationen, aber der Standard-Formatter ignoriert diese. Spätere Lektionen behandeln, wie Datum und Uhrzeit zusammen oder nur die Uhrzeit formatiert werden.
Erstellen von Daten zum Formatieren
Sie können Date-Objekte auf verschiedene Arten erstellen. Der zuverlässigste Ansatz ist die Verwendung von ISO-8601-Datumszeichenketten.
const date1 = new Date('2025-03-15');
const date2 = new Date('2025-12-31');
const date3 = new Date('2025-01-01');
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date1));
// Output: "3/15/2025"
console.log(formatter.format(date2));
// Output: "12/31/2025"
console.log(formatter.format(date3));
// Output: "1/1/2025"
ISO-8601-Zeichenketten verwenden das Format YYYY-MM-DD. Dieses Format ist eindeutig und funktioniert konsistent über alle Gebietsschemata und Zeitzonen hinweg.
Formatieren von Daten aus Zeitstempeln
Sie können auch Date-Objekte aus Unix-Zeitstempeln erstellen. Ein Unix-Zeitstempel repräsentiert die Anzahl der Millisekunden seit dem 1. Januar 1970 UTC.
const timestamp = 1710489600000; // March 15, 2025
const date = new Date(timestamp);
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date));
// Output: "3/15/2025"
Dieser Ansatz funktioniert, wenn Sie Zeitstempel von APIs, Datenbanken oder anderen Systemen erhalten, die Daten als Zahlen darstellen.
Sie können den Zeitstempel auch direkt an die format()-Methode übergeben, ohne vorher ein Date-Objekt zu erstellen.
const formatter = new Intl.DateTimeFormat('en-US');
const timestamp = 1710489600000;
console.log(formatter.format(timestamp));
// Output: "3/15/2025"
Die API akzeptiert sowohl Date-Objekte als auch Zeitstempel. Verwenden Sie den Ansatz, der besser zu Ihrem Code passt.
Formatierung des aktuellen Datums
Um das aktuelle Datum zu formatieren, erstellen Sie ein Date-Objekt ohne Argumente. Dies erstellt ein Date-Objekt, das den aktuellen Zeitpunkt repräsentiert.
const formatter = new Intl.DateTimeFormat('en-US');
const now = new Date();
console.log(formatter.format(now));
// Output: "10/15/2025" (or current date when run)
Sie können auch Date.now() direkt übergeben, was den aktuellen Zeitstempel als Zahl zurückgibt.
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(Date.now()));
// Output: "10/15/2025" (or current date when run)
Beide Ansätze liefern identische Ergebnisse.
Wiederverwendung von Formatierern für bessere Performance
Das Erstellen einer neuen Intl.DateTimeFormat-Instanz erfordert das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Daten mit derselben Locale und denselben Einstellungen formatieren müssen, erstellen Sie den Formatierer einmal und verwenden Sie ihn wieder.
const formatter = new Intl.DateTimeFormat('en-US');
const dates = [
new Date('2025-01-01'),
new Date('2025-06-15'),
new Date('2025-12-31')
];
dates.forEach(date => {
console.log(formatter.format(date));
});
// Output:
// "1/1/2025"
// "6/15/2025"
// "12/31/2025"
Dieser Ansatz ist effizienter als das Erstellen eines neuen Formatierers für jedes Datum. Der Performance-Unterschied wird signifikant, wenn Arrays mit Hunderten oder Tausenden von Daten formatiert werden.
Formatierung von Daten in Templates
Sie können Intl.DateTimeFormat überall dort verwenden, wo Sie Daten für Benutzer anzeigen. Dies umfasst das Einfügen formatierter Daten in HTML-Templates, die Anzeige von Daten in Tabellen oder die Darstellung von Zeitstempeln in Benutzeroberflächen.
const formatter = new Intl.DateTimeFormat(navigator.language);
const publishedDate = new Date('2025-03-15');
const updatedDate = new Date('2025-04-20');
document.getElementById('published').textContent = formatter.format(publishedDate);
document.getElementById('updated').textContent = formatter.format(updatedDate);
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.