So formatieren Sie Daten als kurz, mittel, lang oder vollständig
Verwenden Sie vordefinierte Datums- und Zeitstile, um Formatierungsdetails zu steuern, ohne einzelne Komponenten zu konfigurieren
Einführung
Die Formatierung von Daten erfordert die Auswahl, welche Komponenten angezeigt werden sollen und wie sie angezeigt werden sollen. Sie können den Wochentag, den Monatsnamen, die Tagesnummer, das Jahr, Stunden, Minuten und die Zeitzone anzeigen. Jede Komponente hat ihre eigenen Formatierungsoptionen. Die individuelle Konfiguration all dieser Optionen führt zu ausführlichem Code und erfordert das Verständnis, welche Kombinationen gut zusammenpassen.
JavaScripts Intl.DateTimeFormat bietet vordefinierte Stile, die gängige Formatierungsoptionen in einfache Optionen bündeln. Anstatt anzugeben, dass Sie einen numerischen Monat, einen numerischen Tag und ein numerisches Jahr möchten, können Sie dateStyle: "short" anfordern. Anstatt die Anzeige von Stunde, Minute und Sekunde zu konfigurieren, können Sie timeStyle: "medium" anfordern.
Diese Voreinstellungen funktionieren in allen Locales. Derselbe Stil erzeugt eine angemessene Ausgabe, unabhängig davon, ob für US-Englisch, Deutsch, Japanisch oder Arabisch formatiert wird. Diese Lektion erklärt, was jede Stilebene bietet und wann jede einzelne verwendet werden sollte.
Was dateStyle und timeStyle sind
Die Option dateStyle steuert, wie Daten angezeigt werden. Sie beeinflusst, welche Datumskomponenten angezeigt werden und wie detailliert sie sind. Die Option akzeptiert vier Werte: "short", "medium", "long" und "full".
Die Option timeStyle steuert, wie Zeiten angezeigt werden. Sie beeinflusst, welche Zeitkomponenten angezeigt werden und wie detailliert sie sind. Die Option akzeptiert dieselben vier Werte: "short", "medium", "long" und "full".
Beide Optionen bieten Abkürzungen zum gleichzeitigen Festlegen mehrerer Formatierungsoptionen. Wenn Sie einen Stil angeben, wählt der Formatierer automatisch geeignete Werte für Komponenten wie Wochentag, Monat, Tag, Jahr, Stunde, Minute, Sekunde und Zeitzonenname basierend auf dem Locale aus.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"
Diese einzelne Option ersetzt das, was sonst das Setzen mehrerer individueller Komponentenoptionen erfordern würde.
Die vier Stilebenen verstehen
Jede Stilebene repräsentiert eine andere Balance zwischen Kürze und Detailgrad. Kurze Stile minimieren den Platz, indem sie Komponenten weglassen und numerische Formate verwenden. Vollständige Stile maximieren die Klarheit, indem sie alle relevanten Komponenten einbeziehen und Wörter ausschreiben.
Der "short"-Stil erzeugt eine kompakte Ausgabe, die für enge Räume geeignet ist. Er verwendet typischerweise numerische Formate und lässt ergänzende Informationen wie Wochentagsnamen weg.
Der "medium"-Stil bietet einen moderaten Detailgrad. Er enthält oft abgekürzte Monatsnamen und eine ausgewogene Zeitpräzision.
Der "long"-Stil fügt mehr Kontext hinzu. Er schreibt Monatsnamen in der Regel vollständig aus und enthält zusätzliche Komponenten wie Zeitzoneninformationen.
Der "full"-Stil erzeugt die vollständigste Darstellung. Er enthält alle relevanten Komponenten wie Wochentagsnamen, vollständige Monatsnamen und vollständige Zeitzonennamen.
Die genauen Komponenten und die Formatierung für jeden Stil variieren je nach Gebietsschema. Amerikanisches Englisch zeigt Monate möglicherweise anders an als Deutsch oder Japanisch, aber der relative Detailgrad bleibt über alle Gebietsschemata hinweg konsistent.
Datumsangaben mit dateStyle formatieren
Die dateStyle-Option steuert die Datumsformatierung. Jede Stilebene erzeugt eine andere Ausgabe für dasselbe Datum.
const date = new Date("2025-03-15T14:30:00");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "3/15/25"
console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"
console.log(longFormatter.format(date));
// Output: "March 15, 2025"
console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"
Der kurze Stil verwendet ausschließlich numerische Werte und ist damit am kompaktesten. Der mittlere Stil kürzt den Monatsnamen ab. Der lange Stil schreibt den Monat vollständig aus. Der vollständige Stil fügt den Wochentagsnamen für vollständigen Kontext hinzu.
Uhrzeiten mit timeStyle formatieren
Die timeStyle-Option steuert die Zeitformatierung. Jede Stilebene zeigt unterschiedliche Zeitkomponenten.
const date = new Date("2025-03-15T14:30:45");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "2:30 PM"
console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"
console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"
console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"
Der short-Stil zeigt nur Stunden und Minuten an. Der medium-Stil fügt Sekunden hinzu. Der long-Stil enthält die abgekürzte Zeitzone. Der full-Stil schreibt den vollständigen Zeitzonennamen aus.
Kombination von dateStyle und timeStyle
Sie können beide Optionen zusammen verwenden, um vollständige Zeitstempel zu formatieren. Der Formatter wendet beide Stile unabhängig voneinander an.
const date = new Date("2025-03-15T14:30:45");
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "short"
});
console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"
Das Datum erscheint mit long-Formatierung, während die Uhrzeit die short-Formatierung verwendet. Diese Kombination bietet detaillierten Datumskontext bei gleichzeitig prägnanter Zeitangabe.
Sie können jeden Datumsstil mit jedem Zeitstil kombinieren, je nach Ihren Anforderungen.
const date = new Date("2025-03-15T14:30:45");
const combinations = [
{ dateStyle: "short", timeStyle: "short" },
{ dateStyle: "medium", timeStyle: "medium" },
{ dateStyle: "long", timeStyle: "long" },
{ dateStyle: "full", timeStyle: "full" }
];
combinations.forEach(options => {
const formatter = new Intl.DateTimeFormat("en-US", options);
console.log(formatter.format(date));
});
// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
Die Verwendung übereinstimmender Stil-Ebenen erzeugt konsistente Detailtiefe für Datum und Uhrzeit. Das Mischen von Stilen ermöglicht es Ihnen, einen Aspekt gegenüber dem anderen zu betonen.
Wie Datumsstile sich über Locales unterscheiden
Jedes Locale formatiert Datumsangaben nach seinen eigenen Konventionen. Derselbe Stil erzeugt unterschiedliche Ausgaben für verschiedene Locales, aber die relative Detailtiefe bleibt konsistent.
const date = new Date("2025-03-15T14:30:00");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "short"
});
const fullFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "full"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Full: ${fullFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 3/15/25
// Full: Saturday, March 15, 2025
// de-DE:
// Short: 15.03.25
// Full: Samstag, 15. März 2025
// fr-FR:
// Short: 15/03/2025
// Full: samedi 15 mars 2025
// ja-JP:
// Short: 2025/03/15
// Full: 2025年3月15日土曜日
Amerikanisches Englisch verwendet die Reihenfolge Monat/Tag/Jahr. Deutsch verwendet Tag.Monat.Jahr mit Punkten als Trennzeichen. Französisch verwendet Tag/Monat/Jahr. Japanisch verwendet Jahr/Monat/Tag mit Kanji-Zeichen. Der full-Stil fügt Wochentagsnamen in jeder Sprache mit entsprechender Formatierung hinzu.
Wie Zeitstile sich über Locales unterscheiden
Die Zeitformatierung passt sich ebenfalls an Locale-Konventionen an. Einige Locales verwenden 12-Stunden-Uhren mit AM/PM-Indikatoren, während andere 24-Stunden-Uhren verwenden.
const date = new Date("2025-03-15T14:30:45");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "short"
});
const longFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Long: ${longFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 2:30 PM
// Long: 2:30:45 PM PST
// de-DE:
// Short: 14:30
// Long: 14:30:45 PST
// fr-FR:
// Short: 14:30
// Long: 14:30:45 UTC−8
// ja-JP:
// Short: 14:30
// Long: 14:30:45 PST
Amerikanisches Englisch verwendet das 12-Stunden-Format mit AM/PM. Deutsch, Französisch und Japanisch verwenden das 24-Stunden-Format. Der long-Stil fügt Zeitzoneninformationen mit für jedes Locale angemessener Formatierung hinzu.
Wann der short-Stil zu verwenden ist
Der Kurzstil eignet sich am besten, wenn der Platz begrenzt ist oder wenn Datumsangaben in kompakte Layouts passen müssen. Mobile Benutzeroberflächen, Datentabellen und kompakte Anzeigen profitieren von minimaler Datumsformatierung.
Verwenden Sie den kurzen Datumsstil für die Anzeige von Datumsangaben in Tabellenspalten, Listenelementen oder überall dort, wo der horizontale Platz begrenzt ist. Das numerische Format benötigt weniger Zeichen als ausgeschriebene Monatsnamen oder Wochentagsbezeichnungen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "short"
});
const events = [
{ name: "Team meeting", date: new Date("2025-03-15") },
{ name: "Project deadline", date: new Date("2025-03-28") },
{ name: "Conference", date: new Date("2025-04-05") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.date)}`);
});
Verwenden Sie den kurzen Zeitstil für die Anzeige von Uhrzeiten in Zeitplänen, Kalendern oder überall dort, wo eine Genauigkeit auf die Sekunde nicht erforderlich ist. Die meisten Kontexte benötigen nur Stunden und Minuten.
Wann der mittlere Stil zu verwenden ist
Der mittlere Stil bietet ein ausgewogenes Verhältnis zwischen Detail und Platz. Er bietet mehr Kontext als der Kurzstil, ohne die Ausführlichkeit der langen oder vollständigen Stile. Dies macht ihn für die meisten allgemeinen Datums- und Zeitanzeigen geeignet.
Verwenden Sie den mittleren Datumsstil, wenn Sie mäßig Platz haben und möchten, dass Datumsangaben besser lesbar sind als reine numerische Formate. Abgekürzte Monatsnamen helfen Benutzern, Monate schneller zu identifizieren als Zahlen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium"
});
const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"
Verwenden Sie den mittleren Zeitstil, wenn Sie Sekundengenauigkeit benötigen, aber Zeitzonen implizit halten möchten. Dies funktioniert für die Anzeige präziser Zeitstempel in Anwendungsprotokollen oder Aktivitätsfeeds, bei denen Benutzer den Zeitzonenkontext verstehen.
Wann der lange Stil zu verwenden ist
Der lange Stil bietet zusätzliche Details, ohne so ausführlich wie der vollständige Stil zu werden. Er schreibt Informationen vollständig aus, während ergänzende Komponenten wie Wochentagsnamen weggelassen werden.
Verwenden Sie den langen Datumsstil für wichtige Datumsangaben, die Betonung verdienen, oder wenn Sie möchten, dass Datumsangaben natürlicher lesbar sind. Vollständig ausgeschriebene Monatsnamen sind leichter zu erfassen als Abkürzungen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long"
});
const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"
Verwenden Sie den langen Zeitstil, wenn Zeitzoneninformationen wichtig sind. Dies hilft Benutzern zu verstehen, wann Ereignisse relativ zu ihrer eigenen Zeitzone stattgefunden haben oder stattfinden werden.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"
Wann der vollständige Stil verwendet werden sollte
Der vollständige Stil erzeugt die umfassendste Darstellung von Datum und Uhrzeit. Er enthält alle relevanten Komponenten und eignet sich daher für Kontexte, in denen Klarheit und Vollständigkeit wichtiger sind als Platzeffizienz.
Verwenden Sie den vollständigen Datumsstil für die Anzeige von Daten, die maximalen Kontext benötigen. Das Hinzufügen des Wochentags hilft Benutzern, Daten im Wochenkalender einzuordnen, was für Terminplanung, Planung und das Verstehen zeitlicher Zusammenhänge nützlich ist.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full"
});
const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"
Verwenden Sie den vollständigen Zeitstil für die Anzeige von Uhrzeiten, die einen vollständigen Zeitzonenkontext benötigen. Das Ausschreiben des vollständigen Zeitzonennamens beseitigt Mehrdeutigkeiten für Benutzer in verschiedenen Regionen.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full",
timeStyle: "full"
});
const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
Der vollständige Stil eignet sich gut für die Anzeige einzelner wichtiger Ereignisse, Bestätigungsnachrichten oder überall dort, wo Benutzer von einem vollständigen zeitlichen Kontext profitieren.
Die Einschränkungen verstehen
Die Optionen dateStyle und timeStyle können nicht mit einzelnen Komponentenoptionen verwendet werden. Sie müssen zwischen der Verwendung von Stilvorlagen oder der individuellen Konfiguration von Komponenten wählen.
Dies funktioniert nicht:
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium",
weekday: "long" // Error: cannot combine
});
Die Option dateStyle bestimmt bereits die Formatierung des Wochentags. Das Hinzufügen einer expliziten Option weekday erzeugt einen Konflikt. Die gleiche Einschränkung gilt für timeStyle mit Komponentenoptionen wie hour, minute oder second.
Wenn Sie mehr Kontrolle über bestimmte Komponenten benötigen, lassen Sie die Stiloptionen weg und konfigurieren Sie die Komponenten einzeln.
const formatter = new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
console.log(formatter.format(new Date("2025-03-15")));
// Output: "Saturday, March 15, 2025"
Sie können dateStyle und timeStyle zusammen verwenden, da sie verschiedene Aspekte der Formatierung steuern. Sie können sie auch mit Optionen kombinieren, die nicht in Konflikt stehen, wie timeZone, calendar oder numberingSystem.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "long",
timeZone: "America/New_York"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "March 15, 2025 at 2:30:45 PM EST"
Datumsangaben für das Gebietsschema des Benutzers formatieren
Verwenden Sie die Spracheinstellungen des Browsers, um Datumsangaben entsprechend den Erwartungen jedes Benutzers zu formatieren. Die Eigenschaft navigator.language stellt das bevorzugte Gebietsschema des Benutzers bereit.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long",
timeStyle: "short"
});
const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For fr-FR: "15 mars 2025 à 14:30"
Sie können auch das gesamte Array navigator.languages übergeben, um ein Fallback-Verhalten zu aktivieren. Der Formatter verwendet das erste Gebietsschema aus dem Array, das er unterstützt.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
dateStyle: "medium"
});
Formatter für bessere Performance wiederverwenden
Das Erstellen von Intl.DateTimeFormat-Instanzen erfordert die Verarbeitung von Gebietsschemadaten und Optionen. Wenn Sie mehrere Datumsangaben mit denselben Einstellungen formatieren, erstellen Sie den Formatter einmal und verwenden Sie ihn wieder.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium",
timeStyle: "short"
});
const events = [
new Date("2025-03-15T14:30:00"),
new Date("2025-03-16T10:00:00"),
new Date("2025-03-17T16:45:00")
];
events.forEach(date => {
console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"
Dieses Muster verbessert die Performance beim Formatieren von Datumsarrays oder beim Anzeigen vieler Zeitstempel in einer Benutzeroberfläche.
Was Sie beachten sollten
Die Optionen dateStyle und timeStyle bieten voreingestellte Formatierungsebenen: "short", "medium", "long" und "full". Jede Ebene stellt ein unterschiedliches Gleichgewicht zwischen Kürze und Detailgrad dar, wobei short am kompaktesten und full am vollständigsten ist.
Verwenden Sie diese Voreinstellungen, anstatt einzelne Datums- und Zeitkomponenten manuell zu konfigurieren. Die Voreinstellungen erzeugen für jedes Gebietsschema eine angemessene Ausgabe, ohne dass Sie gebietsschemaspezifische Formatierungsregeln verstehen müssen.
Sie können dateStyle und timeStyle zusammen verwenden, können sie jedoch nicht mit einzelnen Komponentenoptionen wie weekday oder hour kombinieren. Wählen Sie zwischen voreingestellten Stilen für Einfachheit oder einzelnen Komponenten für eine detaillierte Kontrolle.
Formatieren Sie Datumsangaben unter Verwendung des Gebietsschemas des Benutzers aus navigator.language, um Datumsangaben entsprechend den Erwartungen jedes Benutzers anzuzeigen. Verwenden Sie Formatter-Instanzen beim Formatieren mehrerer Datumsangaben wieder, um eine bessere Performance zu erzielen.