So zeigen Sie AM/PM oder gebietsschemaspezifische Tagesperioden an
Verwenden Sie JavaScript, um Tageszeiten anzuzeigen, die der jeweiligen kulturellen Art der Tageseinteilung entsprechen
Einführung
Wenn Sie eine Uhrzeit wie 4:00 anzeigen, benötigen Benutzer Kontext, um zu wissen, ob diese am Morgen oder am Nachmittag liegt. Im Englischen fügen Sie AM oder PM hinzu, um dies zu verdeutlichen. 4:00 AM liegt vor Sonnenaufgang, während 4:00 PM am Nachmittag liegt.
Andere Sprachen übersetzen AM und PM nicht einfach. Viele Kulturen unterteilen den Tag in mehr als zwei Perioden mit spezifischen Begriffen für frühen Morgen, späten Morgen, Nachmittag, Abend und Nacht. Spanisch hat "madrugada" für die Stunden nach Mitternacht, aber vor der Morgendämmerung. Deutsch unterteilt den Tag in sechs verschiedene Perioden statt in zwei. Einige Sprachen bezeichnen 1:00 AM als "1 in der Nacht" statt "1 am Morgen".
JavaScripts Intl.DateTimeFormat bietet die Option dayPeriod, um diese kulturspezifischen Tageseinteilungen automatisch anzuzeigen. Diese Lektion erklärt, wie Tagesperioden kulturübergreifend funktionieren, warum sie für internationale Anwendungen wichtig sind und wie Sie Uhrzeiten mit entsprechenden Tagesperiodenbezeichnungen formatieren.
Warum Tagesperioden je nach Kultur variieren
Verschiedene Kulturen haben unterschiedliche Methoden entwickelt, um den 24-Stunden-Tag in benannte Perioden zu unterteilen. Diese Unterteilungen spiegeln wider, wie Menschen in jeder Kultur über Zeit denken und sprechen.
Englischsprachige unterteilen den Tag in vier Perioden. Der Morgen läuft von Mitternacht bis Mittag, der Nachmittag von Mittag bis zum Abend, der Abend vom späten Nachmittag bis zur Dunkelheit und die Nacht von der Dunkelheit bis Mitternacht. Die Begriffe AM und PM bieten ein einfacheres Zwei-Perioden-System für die 12-Stunden-Uhr.
Spanischsprachige erkennen "madrugada" als eine eigenständige Periode, die die Stunden nach Mitternacht, aber vor dem typischen Aufwachen umfasst. Dies schafft ein Fünf-Perioden-System, das zwischen späten Nachtstunden und frühen Morgenstunden unterscheidet.
Russischsprachige verwenden "ночь" (Nacht), um jede Stunde zu bezeichnen, in der Menschen normalerweise schlafen. 1:00 Uhr ist "1 Uhr nachts" und nicht "1 Uhr morgens", weil Menschen zu dieser Stunde normalerweise schlafen.
Deutsch unterteilt den Tag in sechs Perioden. "Morgen", "Vormittag", "Mittag", "Nachmittag", "Abend" und "Nacht" decken jeweils spezifische Zeitspannen ab.
Indonesisch verwendet "pagi" (Morgendämmerung bis 10 Uhr), "siang" (10 bis 14 Uhr), "sore" (14 Uhr bis Sonnenuntergang) und "malam" (Nacht), um den Tag in vier Perioden basierend auf der Position der Sonne zu unterteilen.
Bengalisch unterteilt den Tag in sechs Perioden. "ভোর" (Morgendämmerung), "সকাল" (Morgen), "দুপুর" (früher Nachmittag), "বিকাল" (später Nachmittag), "সন্ধ্যা" (Abend) und "রাত" (Nacht) haben jeweils spezifische Zeitspannen.
Wenn Sie Uhrzeiten in einer internationalen Anwendung anzeigen, müssen Sie Begriffe verwenden, die der natürlichen Sprechweise der Benutzer in jeder Kultur entsprechen. Allen Benutzern "4 AM" anzuzeigen, ignoriert, wie andere Sprachen diese Stunde beschreiben.
Die dayPeriod-Option verstehen
Die dayPeriod-Option in Intl.DateTimeFormat weist den Formatter an, die gebietsschemaspezifische Tagesperiode bei der Formatierung einer Uhrzeit einzubeziehen. Anstatt nur Stunde und Minute anzuzeigen, fügt der Formatter den entsprechenden Begriff für diese Tageszeit in der Zielsprache hinzu.
Diese Option funktioniert nur mit 12-Stunden-Zeitformaten. Bei 24-Stunden-Formaten liefert die Stundenzahl selbst ausreichend Kontext. 04:00 Uhr ist eindeutig morgens und 16:00 Uhr ist eindeutig nachmittags, ohne zusätzliche Bezeichnungen. Tagesperioden existieren, um die sich wiederholenden Stunden im 12-Stunden-Format zu disambiguieren.
Die Option dayPeriod akzeptiert drei Werte. narrow erzeugt die kürzestmögliche Form, oft einen einzelnen Buchstaben oder eine Abkürzung. short erzeugt eine abgekürzte Form. long erzeugt das vollständige Wort oder die vollständige Phrase.
Für viele Locales erzeugen diese drei Werte identische Ausgaben. Die Unicode-Locale-Daten definieren nicht für jede Kombination aus Locale und Formatlänge unterschiedliche Formen. Wenn keine unterschiedlichen Formen existieren, verwendet der Formatter dieselbe Ausgabe, unabhängig davon, welchen Wert Sie angeben.
Formatierung von Uhrzeiten mit Tagesperioden
Um eine Tagesperiode anzuzeigen, erstellen Sie eine Instanz von Intl.DateTimeFormat mit der Option dayPeriod, die auf narrow, short oder long gesetzt ist. Sie müssen außerdem eine Zeitkomponenten-Option wie hour einschließen und ein 12-Stunden-Format mit hourCycle angeben.
const date = new Date('2025-01-15T04:30:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(formatter.format(date));
// Output: "4:30 in the morning"
Dies erstellt einen Formatter, der Stunde, Minute und Tagesperiode anzeigt. Die Option hourCycle: 'h12' gibt das 12-Stunden-Format an, das erforderlich ist, damit Tagesperioden erscheinen. Die Option dayPeriod: 'long' fordert die vollständige Tagesperioden-Phrase an.
Ohne die Option dayPeriod würde der Formatter "4:30 AM" anstelle dessen anzeigen. Die Tagesperioden-Option ersetzt den einfachen AM/PM-Indikator durch eine aussagekräftigere Phrase.
Anzeige von Tagesperioden über verschiedene Uhrzeiten hinweg
Tagesperioden ändern sich basierend auf der zu formatierenden Uhrzeit. Der Formatter wählt automatisch die entsprechende Periode für jede Uhrzeit gemäß den Konventionen der Locale aus.
const options = {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
};
const formatter = new Intl.DateTimeFormat('en-US', options);
const morning = new Date('2025-01-15T04:30:00');
console.log(formatter.format(morning));
// Output: "4:30 in the morning"
const afternoon = new Date('2025-01-15T14:30:00');
console.log(formatter.format(afternoon));
// Output: "2:30 in the afternoon"
const evening = new Date('2025-01-15T20:30:00');
console.log(formatter.format(evening));
// Output: "8:30 in the evening"
const night = new Date('2025-01-15T23:30:00');
console.log(formatter.format(night));
// Output: "11:30 at night"
Englisch unterscheidet zwischen Morgen, Nachmittag, Abend und Nacht. Jede Uhrzeit erhält die entsprechende Phrase basierend auf der Stunde. Sie müssen nicht bestimmen, welche Periode zutrifft. Der Formatter handhabt dies automatisch basierend auf Unicode-Locale-Daten.
Vergleich der Formate narrow, short und long
Die drei Formatlängen erzeugen in einigen Gebietsschemata unterschiedliche Ausgaben. Die Unterschiede variieren je nach Sprache und können subtil oder nicht vorhanden sein.
const date = new Date('2025-01-15T04:30:00');
const narrow = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'narrow'
});
console.log(narrow.format(date));
// Output: "4 in the morning"
const short = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'short'
});
console.log(short.format(date));
// Output: "4 in the morning"
const long = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(long.format(date));
// Output: "4 in the morning"
Für US-Englisch erzeugen alle drei Längen identische Ausgaben. Die Gebietsschemadaten definieren keine unterschiedlichen Formen für diese Kombination aus Sprache und Zeit.
Einige Gebietsschemata unterscheiden zwischen den Längen. Französisch erzeugt unterschiedliche Ausgaben für die Formate narrow und long.
const date = new Date('2025-01-15T04:30:00');
const frNarrow = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'narrow'
});
console.log(frNarrow.format(date));
// Output: "4 mat."
const frLong = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(frLong.format(date));
// Output: "4 du matin"
Französisch verwendet "mat." als abgekürzte Form und "du matin" als lange Form. Beide bedeuten Morgen, aber die lange Form ist expliziter.
Sofern Sie keine spezifischen Platzbeschränkungen haben, die die kürzestmögliche Ausgabe erfordern, verwenden Sie long für mehr Klarheit. Die längeren Formen sind für Benutzer leichter zu verstehen, und viele Gebietsschemata bieten ohnehin keine kürzeren Alternativen.
Wie Tagesabschnitte in verschiedenen Gebietsschemata funktionieren
Verschiedene Gebietsschemata verwenden unterschiedliche Begriffe für Tagesabschnitte und unterteilen den Tag an unterschiedlichen Grenzen. Der Formatierer wendet automatisch die Konventionen für jedes Gebietsschema an.
const date = new Date('2025-01-15T04:30:00');
const options = {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
};
const enUS = new Intl.DateTimeFormat('en-US', options);
console.log(enUS.format(date));
// Output: "4 in the morning"
const enGB = new Intl.DateTimeFormat('en-GB', options);
console.log(enGB.format(date));
// Output: "4 at night"
const deDK = new Intl.DateTimeFormat('de-DE', options);
console.log(deDK.format(date));
// Output: "4 morgens"
const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date));
// Output: "4 du matin"
Britisches Englisch betrachtet 4:30 Uhr morgens als "at night" statt "in the morning", was unterschiedliche kulturelle Grenzen für Tagesabschnitte widerspiegelt. Deutsch verwendet "morgens" für die Morgenstunden. Französisch verwendet "du matin" für denselben Zeitraum.
Diese Unterschiede sind keine Fehler oder Inkonsistenzen. Sie spiegeln echte kulturelle Unterschiede wider, wie Menschen Zeit konzeptualisieren und darüber sprechen. Der Formatierer respektiert diese Unterschiede automatisch basierend auf dem Gebietsschema.
Tagesabschnitte erfordern das 12-Stunden-Format
Die Option dayPeriod funktioniert nur, wenn Sie ein 12-Stunden-Format mit hourCycle: 'h12' oder hourCycle: 'h11' angeben. Ohne 12-Stunden-Format erscheinen keine Tagesabschnitte.
const date = new Date('2025-01-15T04:30:00');
const with12Hour = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(with12Hour.format(date));
// Output: "4 in the morning"
const with24Hour = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h23',
dayPeriod: 'long'
});
console.log(with24Hour.format(date));
// Output: "04"
Im 24-Stunden-Format wird die Tageszeit nicht angezeigt, selbst wenn die Option angegeben ist. Im 24-Stunden-Format liefert die Stundenzahl bereits ausreichend Kontext, sodass zusätzliche Bezeichnungen nicht erforderlich sind.
Der Unterschied zwischen h12 und h11 betrifft die Nummerierung von Mitternacht und Mittag. Verwenden Sie h12 für die Standard-12-Stunden-Uhr, bei der die Stunden von 1 bis 12 gezählt werden. Verwenden Sie h11 für ein System mit Stunden von 0 bis 11. Beide Varianten funktionieren mit Tageszeiten.
Tageszeiten mit Minuten und Sekunden kombinieren
Sie können Minuten und Sekunden zusammen mit Tageszeiten angeben. Der Formatter positioniert die Tageszeit gemäß den Konventionen der jeweiligen Sprache.
const date = new Date('2025-01-15T04:30:45');
const withMinutes = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(withMinutes.format(date));
// Output: "4:30 in the morning"
const withSeconds = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(withSeconds.format(date));
// Output: "4:30:45 in the morning"
Die Tageszeit erscheint nach den Zeitkomponenten. Sie müssen die Tageszeit nicht manuell positionieren oder formatieren. Der Formatter übernimmt das Layout entsprechend den lokalen Konventionen.
Zeiten mit Tageszeiten für die Nutzersprache formatieren
Statt eine bestimmte Sprache fest zu codieren, verwenden Sie die bevorzugte Sprache des Nutzers aus dem Browser. Die Eigenschaft navigator.language gibt die höchste Sprachpräferenz des Nutzers zurück.
const date = new Date('2025-01-15T04:30:00');
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "4:30 in the morning"
// For en-GB: "4:30 at night"
// For de-DE: "4:30 morgens"
// For fr-FR: "4:30 du matin"
Mit diesem Ansatz werden Zeiten mit Tageszeiten angezeigt, die der natürlichen Sprechweise der jeweiligen Nutzer entsprechen. Der Browser liefert die Sprachpräferenz, und die Intl-API wendet die passenden Begriffe und Grenzen für Tageszeiten an.
Wann Tageszeiten verwenden?
Tageszeiten sind sinnvoll, wenn Sie mehr Kontext als einfache AM/PM-Indikatoren bieten möchten. Sie machen Zeitangaben gesprächiger und auf einen Blick leichter verständlich.
Verwenden Sie Tageszeiten in Benutzeroberflächen, in denen Zeiten zusammen mit beschreibendem Text erscheinen. Ein Kalender, der „4:30 am Morgen“ anzeigt, ist verständlicher als „4:30 AM“, da die Formulierung im Fließtext natürlicher klingt.
Verwenden Sie Tagesperioden in Benachrichtigungen und Nachrichten, wo umgangssprachliche Formulierungen die Lesbarkeit verbessern. „Ihr Meeting beginnt um 8:30 Uhr abends" liest sich besser als „Ihr Meeting beginnt um 8:30 PM".
Vermeiden Sie Tagesperioden in kompakten Anzeigen, wo der Platz begrenzt ist. Tabellen, Diagramme und dichte Layouts funktionieren besser mit standardmäßigen AM/PM-Indikatoren oder dem 24-Stunden-Format.
Vermeiden Sie Tagesperioden bei der Anzeige von Uhrzeiten im 24-Stunden-Format. Die Tagesperiode fügt keine nützlichen Informationen hinzu, wenn die Stundenzahl bereits die Tageszeit angibt.
Zusammenfassung
Die Option dayPeriod in Intl.DateTimeFormat zeigt kulturspezifische Begriffe für Tageszeiten an. Verschiedene Kulturen unterteilen den Tag unterschiedlich und verwenden Begriffe wie „madrugada" im Spanischen oder sechs verschiedene Perioden im Deutschen anstelle von nur AM und PM.
Die Option akzeptiert drei Werte. narrow erzeugt die kürzeste Form, short erzeugt eine abgekürzte Form und long erzeugt die vollständige Phrase. Viele Gebietsschemata erzeugen für alle drei Werte identische Ausgaben.
Tagesperioden erscheinen nur bei Verwendung des 12-Stunden-Formats, das mit hourCycle: 'h12' oder hourCycle: 'h11' angegeben wird. Sie erscheinen nicht im 24-Stunden-Format, da die Stundenzahl ausreichend Kontext liefert.
Verschiedene Gebietsschemata verwenden unterschiedliche Tagesperiodenbegriffe und ziehen Grenzen zu unterschiedlichen Stunden. Der Formatierer wendet diese Konventionen automatisch basierend auf der Gebietsschema-Kennung an. Britisches Englisch behandelt 4:30 AM als „at night