Fast jede Art von in JavaScript geschriebener Anwendung arbeitet in gewisser Weise mit Uhrzeiten oder Datumsangaben. Zu Beginn war dies auf die integrierte Date-API beschränkt. Diese API umfasst grundlegende Funktionen, ist jedoch in ihren Möglichkeiten recht begrenzt. Bibliotheken von Drittanbietern wie Moment.js und später integrierte APIs wie die Intl APIs und die neue Temporal API sorgen für eine viel größere Flexibilität bei der Arbeit mit Zeiten und Daten. Der Aufstieg und Fall von moment.js Moment.js ist eine JavaScript-Bibliothek mit leistungsstarken Dienstprogrammen zum Arbeiten mit Zeiten und Daten. Es enthält fehlende Funktionen der grundlegenden Datums-API, wie z. B. die Zeitzonenmanipulation, und vereinfacht viele gängige Vorgänge. Moment enthält auch Funktionen zum Formatieren von Datum und Uhrzeit. Es wurde zu einer weit verbreiteten Bibliothek in vielen verschiedenen Anwendungen. Moment hatte jedoch auch einige Probleme. Es handelt sich um eine große Bibliothek, die die Bundle-Größe einer Anwendung erheblich vergrößern kann. Da die Bibliothek kein Tree Shaking unterstützt (eine Funktion moderner Bundler, mit der ungenutzte Teile von Bibliotheken entfernt werden können), ist die gesamte Moment-Bibliothek enthalten, auch wenn Sie nur eine oder zwei ihrer Funktionen nutzen. Ein weiteres Problem bei Moment ist die Tatsache, dass die von ihm erstellten Objekte veränderbar sind. Das Aufrufen bestimmter Funktionen für ein Moment-Objekt hat Nebenwirkungen und verändert den Wert dieses Objekts. Dies kann zu unerwartetem Verhalten oder Fehlern führen. Im Jahr 2020 beschlossen die Betreuer von Moment, die Bibliothek in den Wartungsmodus zu versetzen. Es werden keine neuen Funktionen entwickelt und die Betreuer raten davon ab, sie für neue Projekte zu verwenden. Es gibt andere JavaScript-Datumsbibliotheken, wie zum Beispiel date-fns, aber es gibt einen neuen Player in der Stadt, eine direkt in JavaScript integrierte API: Temporal. Es handelt sich um einen neuen Standard, der die Lücken der ursprünglichen Date-API füllt und einige der Einschränkungen löst, die in Moment und anderen Bibliotheken zu finden sind. Was ist zeitlich? Temporal ist eine neue Zeit- und Datums-API, die dem ECMAScript-Standard hinzugefügt wird, der modernes JavaScript definiert. Seit März 20266 hat es Stufe 4 des TC39-Prozesses erreicht (das Komitee, das Vorschläge und Ergänzungen zur JavaScript-Sprache überwacht) und wird in die nächste Version der ECMAScript-Spezifikation aufgenommen. Es wurde bereits in mehreren Browsern implementiert: Chrome 144+ und Firefox 139+, Safari soll bald folgen. Für nicht unterstützte Browser und Node.js ist auch ein Polyfill verfügbar. Die Temporal-API erstellt Objekte, die im Allgemeinen Momente in der Zeit darstellen. Dabei kann es sich um Vollzeit- und Datumsstempel in einer bestimmten Zeitzone oder um eine generische Instanz der „Wanduhr“-Zeit ohne Zeitzonen- oder Datumsinformationen handeln. Zu den Hauptfunktionen von Temporal gehören:
Zeiten mit oder ohne Datum. Ein Temporalobjekt kann eine bestimmte Zeit an einem bestimmten Datum oder eine Zeit ohne Datumsinformationen darstellen. Es kann auch ein bestimmtes Datum ohne Uhrzeit dargestellt werden. Zeitzonenunterstützung. Temporale Objekte berücksichtigen vollständig die Zeitzone und können in verschiedene Zeitzonen konvertiert werden. Moment unterstützt auch Zeitzonen, erfordert jedoch die zusätzliche Moment-Timezone-Bibliothek. Unveränderlichkeit. Sobald ein temporäres Objekt erstellt wurde, kann es nicht mehr geändert werden. Zeitarithmetik oder Zeitzonenkonvertierungen verändern das zugrunde liegende Objekt nicht. Stattdessen generieren sie ein neues Temporal-Objekt. 1-basierte Indizierung. Eine häufige Fehlerquelle bei der Date-API (sowie bei Moment) ist, dass Monate nullindiziert sind. Das bedeutet, dass der Januar Monat 0 ist und nicht Monat 1, wie wir alle im wirklichen Leben verstehen. Temporal behebt dieses Problem durch die Verwendung einer 1-basierten Indizierung – Januar ist Monat 1. Es ist in den Browser integriert. Da Temporal eine API im Browser selbst ist, erhöht es die Bundle-Größe Ihrer Anwendung nicht.
Es ist auch wichtig zu beachten, dass die Date-API nicht verschwinden wird. Obwohl Temporal diese API ersetzt, wird sie weder entfernt noch veraltet. Viele Anwendungen würden kaputt gehen, wenn Browser plötzlich die Date-API entfernen würden. Bedenken Sie jedoch auch, dass Moment jetzt als Legacy-Projekt im Wartungsmodus gilt. Im Rest des Artikels werden wir uns einige „Rezepte“ für die Migration von Moment-basiertem Code zur neuen Temporal-API ansehen. Beginnen wir mit dem Refactoring! Erstellen von Datums- und Zeitobjekten Bevor wir Datums- und Uhrzeitangaben manipulieren können, müssen wir Objekte erstellen, die sie darstellen. Um ein Moment-Objekt zu erstellen, das das aktuelle Datum und die aktuelle Uhrzeit darstellt, verwenden Sie die Moment-Funktion. const now = moment(); console.log(now); // Moment<2026-02-18T21:26:29-05:00>
Dieses Objekt kann nun nach Bedarf formatiert oder manipuliert werden.
// in UTC konvertieren //Warnung: Dadurch wird das Moment-Objekt mutiert und in den UTC-Modus versetzt! console.log(now.utc()); // Moment<2026-02-19T02:26:29Z>
// Einen formatierten String ausgeben – beachten Sie, dass jetzt die UTC-Zeit verwendet wird console.log(now.format('MM/TT/JJJJ hh:mm:ss a')); // 19.02.2026 02:27:07 Uhr
Das Wichtigste, was Sie bei Moment beachten sollten, ist, dass ein Moment-Objekt immer Informationen über die Uhrzeit und das Datum enthält. Wenn Sie nur mit Zeitinformationen arbeiten müssen, ist dies normalerweise in Ordnung, kann jedoch in Situationen wie der Sommerzeit oder in Schaltjahren, in denen das Datum Auswirkungen auf Zeitberechnungen haben kann, zu unerwartetem Verhalten führen. Zeitlich ist flexibler. Sie können ein Objekt erstellen, das das aktuelle Datum und die aktuelle Uhrzeit darstellt, indem Sie ein Temporal.Instant-Objekt erstellen. Dies stellt einen Zeitpunkt dar, der durch die Zeit seit „der Epoche“ (Mitternacht UTC am 1. Januar 1970) definiert wird. Temporal kann diesen Zeitpunkt mit einer Genauigkeit im Nanosekundenbereich referenzieren. const now = Temporal.Now.instant();
// siehe rohe Nanosekunden seit der Epoche console.log(now.epochNanoseconds); // 1771466342612000000n
// Format für UTC console.log(now.toString()); // 2026-02-19T01:55:27.844Z
// Format für eine bestimmte Zeitzone console.log(now.toString({ timeZone: 'America/New_York' })); // 2026-02-18T20:56:57.905-05:00
Temporal.Instant-Objekte können mithilfe der statischen Methode from auch für eine bestimmte Uhrzeit und ein bestimmtes Datum erstellt werden.
const myInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');
// Den Zeitpunkt in der lokalen Zeitzone formatieren. Beachten Sie, dass dies nur steuert // die Formatierung – sie verändert das Objekt nicht wie moment.utc. console.log(myInstant.toString({ timeZone: 'America/New_York' })); // 2026-02-18T21:10:00-05:00
Sie können auch andere Arten von temporären Objekten erstellen, darunter:
Temporal.PlainDate: Ein Datum ohne Zeitinformationen. Temporal.PlainTime: Eine Uhrzeit ohne Datumsinformationen. Temporal.ZonedDateTime: Ein Datum und eine Uhrzeit in einer bestimmten Zeitzone.
Jede davon verfügt über eine from-Methode, die mit einem Objekt aufgerufen werden kann, das das Datum und/oder die Uhrzeit oder eine zu analysierende Datumszeichenfolge angibt. // Nur ein Date const today = Temporal.PlainDate.from({ Jahr: 2026, Monat: 2, // Beachten Sie, dass wir 2 für Februar verwenden Tag: 18 }); console.log(today.toString()); // 18.02.2026
// Nur eine Zeit const LunchTime = Temporal.PlainTime.from({ Stunde: 12 }); console.log(lunchTime.toString()); // 12:00:00
// Ein Datum und eine Uhrzeit in der östlichen Zeitzone der USA const dueAt = Temporal.ZonedDateTime.from({ Zeitzone: 'Amerika/New_York', Jahr: 2026, Monat: 3, Tag: 1, Stunde: 12, Minute: 0, Sekunde: 0 }); console.log(dueAt.toString()); // 2026-03-01T12:00:00-05:00[Amerika/New_York]
Parsen Wir haben die programmatische Erstellung von Datums- und Uhrzeitinformationen behandelt. Schauen wir uns nun das Parsen an. Das Parsen ist ein Bereich, in dem Moment flexibler ist als die integrierte Temporal-API. Sie können eine Datumszeichenfolge analysieren, indem Sie sie an die Moment-Funktion übergeben. Mit einem einzelnen Argument erwartet Moment eine ISO-Datumszeichenfolge, Sie können jedoch alternative Formate verwenden, wenn Sie ein zweites Argument angeben, das das verwendete Datumsformat angibt.
const isoDate = moment('2026-02-21T09:00:00'); const formattedDate = moment('21.2.26 9:00:00', 'M/T/JJ h:mm:ss');
console.log(isoDate); // Moment<2026-02-21T09:00:00-05:00>
console.log(formattedDate); // Moment<2026-02-21T09:00:00-05:00>
In älteren Versionen würde Moment eine beliebige, willkürlich formatierte Datumszeichenfolge anhand der besten Schätzung analysieren. Dies könnte zu unvorhersehbaren Ergebnissen führen. Ist der 02.03.2026 beispielsweise der 2. Februar oder der 3. März? Aus diesem Grund zeigen neuere Versionen von Moment eine auffällige Verfallswarnung an, wenn es ohne eine ISO-formatierte Datumszeichenfolge aufgerufen wird (es sei denn, das zweite Argument mit dem gewünschten Format ist ebenfalls angegeben). Temporal analysiert nur eine speziell formatierte Datumszeichenfolge. Die Zeichenfolge muss mit dem ISO 8601-Format oder seiner Erweiterung RFC 9557 kompatibel sein. Wenn eine nicht konforme Datumszeichenfolge an eine from-Methode übergeben wird, löst Temporal einen RangeError aus.
// Verwendung einer RFC 9557-Datumszeichenfolge const myDate = Temporal.Instant.from('2026-02-21T09:00:00-05:00[America/New_York]'); console.log(myDate.toString({ timeZone: 'America/New_York' })); // 21.02.2026T09:00:00-05:00
// Verwenden einer unbekannten Datumszeichenfolge const otherDate = Temporal.Instant.from('21.2.26 9:00:00'); // RangeError: Zeitlicher Fehler: Ungültiges Zeichen beim Parsen des Jahreswerts.
Die genauen Anforderungen an die Datumszeichenfolge hängen davon ab, welche Art von temporärem Objekt Sie erstellen. Im obigen Beispiel erfordert Temporal.Instant eine vollständige ISO8601- oder RFC 9557-Datumszeichenfolge, die das Datum und die Uhrzeit mit einem Zeitzonenversatz angibt. Sie können jedoch auch PlainDate- oder PlainTime-Objekte erstellen, indem Sie nur eine Teilmenge des Datumsformats verwenden. const myDate = Temporal.PlainDate.from('21.02.2026'); console.log(myDate.toString()); // 21.02.2026
const myTime = Temporal.PlainTime.from('09:00:00'); console.log(myTime.toString()); // 09:00:00
Beachten Sie, dass diese Zeichenfolgen weiterhin dem erwarteten Format entsprechen müssen, da sonst ein Fehler ausgegeben wird.
// Verwendung einer nicht konformen Zeitzeichenfolge. Diese lösen alle einen RangeError aus. Temporal.PlainTime.from('9:00'); Temporal.PlainTime.from('9:00:00 AM');
Profi-Tipp: Umgang mit Nicht-ISO-Strings Da Temporal Zuverlässigkeit priorisiert, wird nicht versucht, das Format eines Strings wie 01.02.2026 zu erraten. Wenn Ihre Datenquelle solche Zeichenfolgen verwendet, müssen Sie einige Zeichenfolgenmanipulationen durchführen, um die Werte in eine ISO-Zeichenfolge wie 2026-02-01 umzuordnen, bevor Sie versuchen, sie mit Temporal zu verwenden.
Formatierung Sobald Sie ein Moment- oder Temporal-Objekt haben, möchten Sie es wahrscheinlich irgendwann in eine formatierte Zeichenfolge konvertieren. Dies ist ein Fall, in dem Moment etwas prägnanter ist. Sie rufen die Formatmethode des Objekts mit einer Zeichenfolge von Token auf, die das gewünschte Datumsformat beschreiben. const date = moment();
console.log(date.format('MM/TT/JJJJ')); // 22.02.2026
console.log(date.format('MMMM Do YYYY, h:mm:ss a')); // 22. Februar 2026, 20:18:30 Uhr
Andererseits erfordert Temporal, dass Sie etwas ausführlicher sind. Temporale Objekte wie Instant verfügen über eine toLocaleString-Methode, die verschiedene Formatierungsoptionen akzeptiert, die als Eigenschaften eines Objekts angegeben werden.
const date = Temporal.Now.instant();
// Ohne Argumente erhalten wir das Standardformat für das aktuelle Gebietsschema console.log(date.toLocaleString()); // 22.02.2026, 20:23:36 Uhr (unter der Annahme eines Gebietsschemas von „en-US“)
// Formatierungsoptionen übergeben, um eine benutzerdefinierte Formatzeichenfolge zu generieren console.log(date.toLocaleString('en-US', { Monat: 'lang', Tag: 'numerisch', Jahr: 'numerisch', Stunde: '2-stellig', Minute: '2-stellig' })); // 22. Februar 2026 um 20:23 Uhr
// nur die gewünschten Felder im Formatstring übergeben console.log(date.toLocaleString('en-US', { Monat: 'kurz', Tag: 'numerisch' })); // 22. Februar
Die zeitliche Datumsformatierung nutzt tatsächlich die API Intl.DateTimeFormat (die bereits in modernen Browsern verfügbar ist). Das bedeutet, dass Sie ein wiederverwendbares DateTimeFormat-Objekt mit Ihren benutzerdefinierten Formatierungsoptionen erstellen und dann Temporal-Objekte an seine Formatmethode übergeben können. Aus diesem Grund werden keine benutzerdefinierten Datumsformate wie Moment unterstützt. Wenn Sie etwas wie „Q1 2026“ oder eine andere spezielle Formatierung benötigen, benötigen Sie möglicherweise einen benutzerdefinierten Datumsformatierungscode oder greifen auf eine Bibliothek eines Drittanbieters zurück. const formatter = new Intl.DateTimeFormat('en-US', { Monat: '2-stellig', Tag: '2-stellig', Jahr: 'numerisch' });
const date = Temporal.Now.instant(); console.log(formatter.format(date)); // 22.02.2026
Die Formatierungstokens von Moment sind einfacher zu schreiben, aber sie sind nicht gebietsschemafreundlich. Die Formatzeichenfolgen „hart codieren“ Dinge wie die Reihenfolge Monat/Tag. Der Vorteil der Verwendung eines Konfigurationsobjekts, wie es Temporal tut, besteht darin, dass es sich automatisch an jedes gegebene Gebietsschema anpasst und das richtige Format verwendet. const date = Temporal.Now.instant();
const formatOptions = { Monat: 'numerisch', Tag: 'numerisch', Jahr: 'numerisch' };
console.log(date.toLocaleString('en-US', formatOptions)); // 22.02.2026
console.log(date.toLocaleString('en-GB', formatOptions)); // 22.02.2026
Datumsberechnungen In vielen Anwendungen müssen Sie am Ende einige Berechnungen an einem Datum durchführen. Möglicherweise möchten Sie Zeiteinheiten (Tage, Stunden, Sekunden usw.) addieren oder subtrahieren. Wenn Sie beispielsweise über das aktuelle Datum verfügen, möchten Sie dem Benutzer möglicherweise das Datum in einer Woche anzeigen. Moment-Objekte verfügen über Methoden wie Addieren und Subtrahieren, die diese Operationen ausführen. Diese Funktionen benötigen einen Wert und eine Einheit, zum Beispiel: add(7, 'Tage'). Ein sehr wichtiger Unterschied zwischen Moment und Temporal besteht jedoch darin, dass bei der Durchführung dieser Datumsberechnungen das zugrunde liegende Objekt geändert wird und sein ursprünglicher Wert verloren geht. const now = moment();
console.log(now); // Moment<2026-02-24T20:08:36-05:00>
const nextWeek = now.add(7, 'days'); console.log(nextWeek); // Moment<2026-03-03T20:08:36-05:00>
// Verstanden – das ursprüngliche Objekt wurde mutiert console.log(now); // Moment<2026-03-03T20:08:36-05:00>
Um den Verlust des Originaldatums zu vermeiden, können Sie clone für das Moment-Objekt aufrufen, um eine Kopie zu erstellen. const jetzt= moment(); const nextWeek = now.clone().add(7, 'days');
console.log(now); // Moment<2026-02-24T20:12:55-05:00>
console.log(nextWeek); // Moment<2026-03-03T20:12:55-05:00>
Andererseits sind zeitliche Objekte unveränderlich. Sobald Sie ein Objekt wie „Instant“, „PlainDate“ usw. erstellt haben, ändert sich der Wert dieses Objekts nie. Temporale Objekte verfügen außerdem über Additions- und Subtraktionsmethoden. Temporal ist etwas wählerisch, welche Zeiteinheiten zu welchen Objekttypen hinzugefügt werden können. Beispielsweise können Sie einem Instant keine Tage hinzufügen:
const now = Temporal.Now.instant(); const nextWeek = now.add({ Tage: 7 }); // RangeError: Zeitlicher Fehler: Die größte Einheit kann keine Datumseinheit sein
Dies liegt daran, dass Instant-Objekte einen bestimmten Zeitpunkt in UTC darstellen und kalenderunabhängig sind. Da sich die Länge eines Tages aufgrund von Zeitzonenregeln wie der Sommerzeit ändern kann, ist diese Berechnung für Instant nicht verfügbar. Sie können diesen Vorgang jedoch auch für andere Objekttypen ausführen, beispielsweise für ein PlainDateTime: const now = Temporal.Now.plainDateTimeISO(); console.log(now.toLocaleString()); // 24.02.2026, 20:23:59 Uhr
const nextWeek = now.add({ Tage: 7 });
// Beachten Sie, dass die ursprüngliche PlainDateTime unverändert bleibt console.log(now.toLocaleString()); // 24.02.2026, 20:23:59 Uhr
console.log(nextWeek.toLocaleString()); // 03.03.2026, 20:23:59 Uhr
Sie können auch berechnen, wie viel Zeit zwischen zwei Moment- oder Zeitobjekten liegt. Bei der Diff-Funktion von Moment müssen Sie eine Einheit für die Granularität angeben, andernfalls wird die Differenz in Millisekunden zurückgegeben. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(date2.diff(date1)); // 91800000
console.log(date2.diff(date1, 'days')); // 1
Um dies mit einem Temporal-Objekt zu tun, können Sie ein anderes Temporal-Objekt an dessen Methoden „bis“ oder „Danach“ übergeben. Dies gibt ein Temporal.Duration-Objekt zurück, das Informationen über den Zeitunterschied enthält. Das Duration-Objekt verfügt über Eigenschaften für jede Komponente der Differenz und kann außerdem eine ISO-8601-Dauerzeichenfolge generieren, die die Zeitdifferenz darstellt.
const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00'); const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');
// mostUnit gibt die größte darzustellende Zeiteinheit an // in der Dauerberechnung const diff = date2.since(date1, { mostUnit: 'day' });
console.log(diff.days); // 1
console.log(diff.hours); // 1
console.log(diff.minutes); // 30
console.log(diff.toString()); // P1DT1H30M // (ISO 8601-Dauerzeichenfolge: 1 Tag, 1 Stunde, 30 Minuten)
Vergleichen von Daten und Zeiten Mit „Moment“ und „Temporal“ können Sie Datums- und Uhrzeitangaben vergleichen, um festzustellen, welches Datum vor dem anderen liegt. Die API verfolgt jedoch unterschiedliche Ansätze. Moment bietet Methoden wie isBefore, isAfter und isSame zum Vergleichen zweier Moment-Objekte. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(date1.isBefore(date2)); // wahr
Temporal verwendet eine statische Vergleichsmethode, um einen Vergleich zwischen zwei Objekten desselben Typs durchzuführen. Es gibt -1 zurück, wenn das erste Datum vor dem zweiten liegt, 0, wenn sie gleich sind, oder 1, wenn das erste Datum nach dem zweiten liegt. Das folgende Beispiel zeigt, wie zwei PlainDate-Objekte verglichen werden. Beide Argumente für Temporal.PlainDate.compare müssen PlainDate-Objekte sein.
const date1 = Temporal.PlainDate.from({ Jahr: 2026, Monat: 2, Tag: 24 }); const date2 = Temporal.PlainDate.from({ Jahr: 2026, Monat: 3, Tag: 24 });
// Datum1 kommt vor Datum2, also -1 console.log(Temporal.PlainDate.compare(date1, date2));
// Fehler, wenn wir versuchen, zwei Objekte unterschiedlichen Typs zu vergleichen console.log(Temporal.PlainDate.compare(date1, Temporal.Now.instant())); // TypeError: Zeitlicher Fehler: Ungültige PlainDate-Felder bereitgestellt.
Dies erleichtert insbesondere die chronologische Sortierung eines Arrays temporaler Objekte. // Ein Array von Temporal.PlainDate-Objekten const date = [ ... ];
// Temporal.PlainDate.compare als Komparatorfunktion verwenden date.sort(Temporal.PlainDate.compare);
Zeitzonenkonvertierungen Die Moment-Kernbibliothek unterstützt keine Zeitzonenkonvertierungen. Wenn Sie diese Funktionalität benötigen, müssen Sie auch das Moment-Timezone-Paket installieren. Dieses Paket kann nicht umgekrempelt werden und kann daher die Größe Ihres Pakets erheblich vergrößern. Sobald Sie moment-timezone installiert haben, können Sie Moment-Objekte mit der tz-Methode in verschiedene Zeitzonen konvertieren. Wie bei anderen Moment-Operationen verändert dies den zugrunde liegenden WertObjekt. // Unter Annahme der US-Ostküstenzeit const now = moment(); console.log(now); // Moment<2026-02-28T20:08:20-05:00>
// In pazifische Zeit umrechnen. // Die ursprüngliche östliche Zeit ist verloren. now.tz('Amerika/Los_Angeles'); console.log(now); // Moment<2026-02-28T17:08:20-08:00>
Bei Verwendung eines Temporal.ZonedDateTime-Objekts ist die Zeitzonenfunktionalität in die Temporal-API integriert. Diese Objekte umfassen eine withTimeZone-Methode, die eine neue ZonedDateTime zurückgibt, die denselben Zeitpunkt darstellt, jedoch in der angegebenen Zeitzone. // Auch hier unter der Annahme, dass es US-Ostküstenzeit ist const now = Temporal.Now.zonedDateTimeISO(); console.log(now.toLocaleString()); // 28.02.2026, 20:12:02 Uhr EST
// In pazifische Zeit umrechnen const nowPacific = now.withTimeZone('America/Los_Angeles'); console.log(nowPacific.toLocaleString()); // 28.02.2026, 17:12:02 Uhr PST
// Originalobjekt bleibt unverändert console.log(now.toLocaleString()); // 28.02.2026, 20:12:02 Uhr EST
Hinweis: Die von toLocaleString zurückgegebenen formatierten Werte sind, wie der Name schon sagt, vom Gebietsschema abhängig. Der Beispielcode wurde im Gebietsschema „en-US“ entwickelt, daher sieht das Format wie folgt aus: 28.02.2026, 17:12:02 Uhr PST. In einem anderen Gebietsschema kann dies anders sein. Im Gebietsschema „en-GB“ erhalten Sie beispielsweise etwa den 28.02.2026, 17:12:02 GMT-8. Ein reales Refactoring Angenommen, wir entwickeln eine App zum Planen von Ereignissen über Zeitzonen hinweg. Teil dieser App ist eine Funktion, getEventTimes, die eine ISO 8601-Zeichenfolge benötigt, die die Uhrzeit und das Datum des Ereignisses darstellt, eine lokale Zeitzone und eine Zielzeitzone. Die Funktion erstellt formatierte Zeit- und Datumszeichenfolgen für das Ereignis in beiden Zeitzonen. Wenn der Funktion eine Eingabezeichenfolge übergeben wird, die keine gültige Zeit-/Datumszeichenfolge ist, wird ein Fehler ausgegeben. Hier ist die ursprüngliche Implementierung mit Moment (erfordert auch die Verwendung des Moment-Timezone-Pakets).
Moment aus „Moment-Zeitzone“ importieren;
Funktion getEventTimes(inputString, userTimeZone, targetTimeZone) { const timeFormat = 'MMM D, YYYY, h:mm:ss a z';
// 1. Erstellen Sie den ersten Moment in der Zeitzone des Benutzers const eventTime = moment.tz( Eingabezeichenfolge, moment.ISO_8601, // Erwarte eine ISO 8601-Zeichenfolge true, // Striktes Parsen userTimeZone );
// Einen Fehler auslösen, wenn der Eingabestring kein gültiges Datum darstellt if (!eventTime.isValid()) { throw new Error('Ungültige Datums-/Uhrzeiteingabe'); }
// 2. Berechnen Sie die Zielzeit // KRITISCH: Wir müssen klonen, sonst ändert sich „eventTime“ für immer! const targetTime = eventTime.clone().tz(targetTimeZone);
zurück { lokal: eventTime.format(timeFormat), Ziel: targetTime.format(timeFormat), }; }
const Schedule = getEventTimes( '2026-03-05T15:00-05:00', „Amerika/New_York“, „Europa/London“, );
console.log(schedule.local); // 5. März 2026, 15:00:00 Uhr EST
console.log(schedule.target); // 5. März 2026, 20:00:00 Uhr GMT
In diesem Beispiel verwenden wir das erwartete Datumsformat ISO 8601, das hilfreich in Moment integriert ist. Wir verwenden außerdem eine strikte Analyse, was bedeutet, dass Moment nicht versucht, mit einer Datumszeichenfolge zu raten, die nicht dem Format entspricht. Wenn eine Nicht-ISO-Datumszeichenfolge übergeben wird, führt dies zu einem ungültigen Datumsobjekt und wir geben einen Fehler aus. Die Temporal-Implementierung sieht ähnlich aus, weist jedoch einige wesentliche Unterschiede auf.
Funktion getEventTimes(inputString, userTimeZone, targetTimeZone) { // 1. Analysieren Sie die Eingabe direkt in einen Instant und erstellen Sie ihn dann // eine ZonedDateTime in der Zone des Benutzers. const instant = Temporal.Instant.from(inputString); const eventTime = instant.toZonedDateTimeISO(userTimeZone);
// 2. In die Zielzone konvertieren // Dies gibt automatisch ein NEUES Objekt zurück; 'eventTime' ist sicher. const targetTime = eventTime.withTimeZone(targetTimeZone);
// 3. Formatieren mit Intl (integriert) const-Optionen = { Jahr: 'numerisch', Monat: 'kurz', Tag: 'numerisch', Stunde: 'numerisch', Minute: '2-stellig', zweitens: '2-stellig', timeZoneName: 'kurz' };
zurück { local: eventTime.toLocaleString(navigator.sprache, Optionen), Ziel: targetTime.toLocaleString(navigator.sprache, Optionen) }; }
const Schedule = getEventTimes( '2026-03-05T15:00-05:00', „Amerika/New_York“, „Europa/London“, );
console.log(schedule.local); // 5. März 2026, 15:00:00 Uhr EST
console.log(schedule.target); // 5. März 2026, 20:00:00 Uhr GMT
Bei Moment müssen wir explizit eine Formatzeichenfolge für die resultierenden Datumszeichenfolgen angeben. Unabhängig vom Standort oder Gebietsschema des Benutzers werden die Ereigniszeiten immer als 5. März 2026, 3:00:00 formatiertUhr EST. Außerdem müssen wir nicht explizit eine Ausnahme auslösen. Wenn eine ungültige Zeichenfolge an Temporal.Instant.from übergeben wird, löst Temporal die Ausnahme für uns aus. Zu beachten ist, dass die Moment-Version selbst bei striktem Parsen immer noch nachsichtiger ist. Temporal erfordert den Zeitzonenversatz am Ende der Zeichenfolge. Sie sollten außerdem beachten, dass dieser Code nur in einer Browserumgebung ausgeführt werden kann, da wir navigator.sprache verwenden, da navigator nicht in einer Node.js-Umgebung definiert ist. Die Temporal-Implementierung verwendet das aktuelle Gebietsschema des Browsers (navigator.sprache), sodass der Benutzer automatisch Ereigniszeiten im lokalen Zeitformat formatiert erhält. Im en-US-Gebietsschema ist dies der 5. März 2026, 15:00:00 Uhr EST. Wenn sich der Benutzer jedoch beispielsweise in London befindet, werden die Ereigniszeiten als 5. März 2026, 15:00:00 GMT-5 formatiert. Zusammenfassung
Aktion Moment.js Zeitlich Aktuelle Uhrzeit Moment() Temporal.Now.zonedDateTimeISO() ISO analysieren Moment(str) Temporal.Instant.from(str) Fügen Sie Zeit hinzu .add(7, 'days') (mutiert) .add({ Tage: 7 }) (neues Objekt) Unterschied .diff(other, 'hours') .since(other).hours Zeitzone .tz('Zone/Name') .withTimeZone('Zone/Name')
Auf den ersten Blick mag der Unterschied in der Syntax leicht unterschiedlich (und im Fall von Temporal manchmal ausführlicher und strenger) sein, aber die Verwendung von Temporal gegenüber Moment.js bietet mehrere entscheidende Vorteile:
Expliziter zu sein bedeutet weniger Überraschungen und unbeabsichtigte Fehler. Der Zeitpunkt mag nachsichtiger erscheinen, aber es handelt sich dabei um „Vermutungen“, die manchmal zu falschen Daten führen können. Wenn Sie Temporal etwas Ungültiges geben, wird ein Fehler ausgegeben. Wenn der Code ausgeführt wird, wissen Sie, dass Sie ein gültiges Datum haben. Moment kann das Anwendungspaket erheblich vergrößern, insbesondere wenn Sie das Moment-Timezone-Paket verwenden. Temporal fügt nichts hinzu (sobald es in Ihren Zielbrowsern ausgeliefert wurde). Die Unveränderlichkeit gibt Ihnen die Gewissheit, dass Sie bei der Durchführung von Datumskonvertierungen und -vorgängen niemals Daten verlieren oder überschreiben. Verschiedene Zeitdarstellungen (Instant, PlainDateTime, ZonedDateTime) je nach Ihren Anforderungen, wobei Moment immer ein Wrapper um einen UTC-Zeitstempel ist. Temporal verwendet die Intl APIs für die Datumsformatierung, was bedeutet, dass Sie eine länderspezifische Formatierung verwenden können, ohne explizit Tokens angeben zu müssen.
Hinweise zur Polyfüllung Wie bereits erwähnt, ist ein Temporal-Polyfill verfügbar, das als npm-Paket mit dem Namen @js-temporal/polyfill verteilt wird. Wenn Sie Temporal heute verwenden möchten, benötigen Sie dieses Polyfill, um Browser wie Safari zu unterstützen, die die API noch nicht ausgeliefert haben. Die schlechte Nachricht dabei ist, dass sich dadurch die Paketgröße erhöht. Die gute Nachricht ist, dass es immer noch deutlich weniger hinzufügt als Moment oder Moment-Timezone. Hier ist ein Vergleich der Bundle-Größen, wie von Bundlephobia.com gemeldet, einer Website, die Informationen zu npm-Paketgrößen bereitstellt (klicken Sie auf jeden Paketnamen, um die Bundlephobia-Analyse anzuzeigen):
Paket Minimiert Minimiert und komprimiert @js-temporal/polyfill 154,1 kB 44,1 kB Moment 294,4 kB 75,4 kB Moment-Zeitzone 1 MB 114,2 kB
Das Polyfill hatte in der Vergangenheit auch einige Leistungsprobleme im Zusammenhang mit der Speichernutzung und wurde zum Zeitpunkt des Verfassens dieses Artikels als in einem Alpha-Stadium befindlich betrachtet. Aus diesem Grund möchten Sie es möglicherweise nicht in der Produktion verwenden, bis es einen ausgereifteren Zustand erreicht hat. Die andere gute Nachricht ist, dass das Polyfill hoffentlich nicht mehr lange benötigt wird (es sei denn, Sie müssen natürlich ältere Browser unterstützen). Zum Zeitpunkt des Schreibens wurde Temporal in Chrome, Edge und Firefox ausgeliefert. In Safari ist es noch nicht ganz fertig, obwohl es in der neuesten Technologievorschau offenbar mit einem Laufzeitflag verfügbar ist.
