JavaScript Temporal API: Moderne Datums- und Zeitbehandlung für ein globales Publikum

Das JavaScript `Date`-Objekt ist seit langem eine Quelle der Frustration für Entwickler. Seine Veränderlichkeit, die inkonsistente API und die schlechte Zeitzonenunterstützung haben zur Entwicklung zahlreicher Bibliotheken wie Moment.js und date-fns geführt, um diese Lücken zu füllen. Mit der Temporal API bietet JavaScript nun eine moderne, integrierte Lösung für die Handhabung von Datum und Uhrzeit mit verbesserter Klarheit und Präzision. Dieser Artikel bietet einen umfassenden Überblick über die Temporal API und konzentriert sich auf ihre Funktionen, Vorteile und die Anwendung in verschiedenen internationalen Kontexten.

Was ist die Temporal API?

Die Temporal API ist ein neues, globales Objekt in JavaScript, das entwickelt wurde, um die Mängel des `Date`-Objekts zu beheben. Sie bietet eine saubere, unveränderliche API für die Arbeit mit Daten, Zeiten, Zeitzonen und Kalendersystemen. Entscheidend ist, dass sie darauf abzielt, Datums- und Zeitkonzepte so darzustellen, dass sie besser mit der realen Nutzung und den Erwartungen übereinstimmen, was die Internationalisierung erheblich vereinfacht.

Wichtige Merkmale:

Unveränderlichkeit: Temporal-Objekte sind unveränderlich, was bedeutet, dass Operationen wie das Hinzufügen von Tagen oder Monaten neue Objekte zurückgeben, anstatt das Original zu modifizieren. Dies eliminiert eine häufige Fehlerquelle und macht den Code leichter nachvollziehbar.
Klare API: Temporal bietet eine konsistente und intuitive API für gängige Datums- und Zeitoperationen.
Zeitzonenunterstützung: Temporal enthält eine robuste Unterstützung für Zeitzonen, die es Ihnen ermöglicht, mit Daten und Zeiten an verschiedenen Orten zu arbeiten, ohne die Komplexität des alten `Date`-Objekts. Es verwendet die IANA-Zeitzonendatenbank, um genaue und aktuelle Informationen zu gewährleisten.
Kalendersysteme: Über den gregorianischen Kalender hinaus unterstützt Temporal alternative Kalendersysteme, um den Bedürfnissen verschiedener Kulturen und Regionen gerecht zu werden.
Verbesserte Präzision: Temporal bietet Nanosekunden-Präzision und behebt damit die Einschränkungen des auf Millisekunden basierenden `Date`-Objekts.

Grundlegende Temporal-Objekte

Die Temporal API führt mehrere neue Objekttypen ein. Hier sind einige der wichtigsten:

`Temporal.PlainDate`: Repräsentiert ein Datum (Jahr, Monat, Tag) ohne Zeitzone.
`Temporal.PlainTime`: Repräsentiert eine Zeit (Stunde, Minute, Sekunde, Millisekunde, Mikrosekunde, Nanosekunde) ohne Datum oder Zeitzone.
`Temporal.PlainDateTime`: Repräsentiert ein Datum und eine Uhrzeit ohne Zeitzone.
`Temporal.ZonedDateTime`: Repräsentiert ein Datum und eine Uhrzeit mit einer bestimmten Zeitzone.
`Temporal.Instant`: Repräsentiert einen bestimmten Zeitpunkt, gemessen in Nanosekunden seit der Unix-Epoche (1. Januar 1970 UTC).
`Temporal.TimeZone`: Repräsentiert eine Zeitzone.
`Temporal.Duration`: Repräsentiert eine Zeitspanne (z. B. 2 Stunden, 30 Minuten).
`Temporal.YearMonth`: Repräsentiert ein Jahr und einen Monat.
`Temporal.MonthDay`: Repräsentiert einen Monat und einen Tag.

Arbeiten mit Datumswerten

Erstellen eines `Temporal.PlainDate`

Um ein `Temporal.PlainDate` zu erstellen, können Sie den Konstruktor verwenden:

const plainDate = new Temporal.PlainDate(2024, 10, 27); // Year, Month (1-12), Day
console.log(plainDate.toString()); // Output: 2024-10-27

Sie können auch die `from`-Methode verwenden, die einen String im ISO-8601-Format akzeptiert:

const plainDateFromString = Temporal.PlainDate.from('2024-10-27');
console.log(plainDateFromString.toString()); // Output: 2024-10-27

Abrufen von Datumskomponenten

Sie können auf einzelne Datumskomponenten über Eigenschaften wie `year`, `month` und `day` zugreifen:

console.log(plainDate.year); // Output: 2024
console.log(plainDate.month); // Output: 10
console.log(plainDate.day); // Output: 27

Datumsarithmetik

Um Tage, Wochen, Monate oder Jahre zu addieren oder zu subtrahieren, verwenden Sie die Methoden `plus` und `minus`. Diese Methoden geben ein neues `Temporal.PlainDate`-Objekt zurück:

const nextWeek = plainDate.plus({ days: 7 });
console.log(nextWeek.toString()); // Output: 2024-11-03

const lastMonth = plainDate.minus({ months: 1 });
console.log(lastMonth.toString()); // Output: 2024-09-27

Vergleichen von Daten

Sie können Daten mit der `compare`-Methode vergleichen:

const date1 = new Temporal.PlainDate(2024, 10, 27);
const date2 = new Temporal.PlainDate(2024, 11, 15);

console.log(Temporal.PlainDate.compare(date1, date2)); // Output: -1 (date1 is earlier than date2)

Arbeiten mit Uhrzeiten

Erstellen einer `Temporal.PlainTime`

Um eine `Temporal.PlainTime` zu erstellen, verwenden Sie den Konstruktor:

const plainTime = new Temporal.PlainTime(10, 30, 0); // Hour, Minute, Second
console.log(plainTime.toString()); // Output: 10:30:00

Oder verwenden Sie die `from`-Methode mit einem ISO-8601-Zeitstring:

const plainTimeFromString = Temporal.PlainTime.from('10:30:00');
console.log(plainTimeFromString.toString()); // Output: 10:30:00

Abrufen von Zeitkomponenten

console.log(plainTime.hour); // Output: 10
console.log(plainTime.minute); // Output: 30
console.log(plainTime.second); // Output: 0

Zeitarithmetik

const later = plainTime.plus({ minutes: 15 });
console.log(later.toString()); // Output: 10:45:00

Arbeiten mit Datum und Uhrzeit zusammen

Erstellen eines `Temporal.PlainDateTime`

Sie können ein `Temporal.PlainDateTime` direkt oder durch die Kombination eines `Temporal.PlainDate` und einer `Temporal.PlainTime` erstellen:

const plainDateTime = new Temporal.PlainDateTime(2024, 10, 27, 10, 30, 0);
console.log(plainDateTime.toString()); // Output: 2024-10-27T10:30:00

const date = new Temporal.PlainDate(2024, 10, 27);
const time = new Temporal.PlainTime(10, 30, 0);
const combinedDateTime = date.toPlainDateTime(time);
console.log(combinedDateTime.toString()); // Output: 2024-10-27T10:30:00

Zeitzonen

Die korrekte Handhabung von Zeitzonen ist für Anwendungen, die mit Benutzern an verschiedenen Standorten arbeiten, von entscheidender Bedeutung. Die Temporal API bietet eine robuste Zeitzonenunterstützung durch die Objekte `Temporal.ZonedDateTime` und `Temporal.TimeZone`.

Erstellen eines `Temporal.ZonedDateTime`

Um ein `Temporal.ZonedDateTime` zu erstellen, benötigen Sie ein `Temporal.PlainDateTime` und eine Zeitzonenkennung. Zeitzonenkennungen basieren auf der IANA-Zeitzonendatenbank (z. B. `America/Los_Angeles`, `Europe/London`, `Asia/Tokyo`).

const plainDateTime = new Temporal.PlainDateTime(2024, 10, 27, 10, 30, 0);
const timeZone = 'America/Los_Angeles';
const zonedDateTime = plainDateTime.toZonedDateTime(timeZone);
console.log(zonedDateTime.toString()); // Output: 2024-10-27T10:30:00-07:00[America/Los_Angeles] (The offset will depend on DST rules)

Alternativ können Sie ein `Temporal.ZonedDateTime` aus einem `Instant` erstellen.

const instant = Temporal.Instant.fromEpochSeconds(1666866600); // Example timestamp
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO(timeZone); // Timezone like 'America/Los_Angeles'
console.log(zonedDateTimeFromInstant.toString());

Konvertieren zwischen Zeitzonen

Sie können ein `Temporal.ZonedDateTime` mit der Methode `withTimeZone` in eine andere Zeitzone konvertieren:

const newTimeZone = 'Europe/London';
const zonedDateTimeInLondon = zonedDateTime.withTimeZone(newTimeZone);
console.log(zonedDateTimeInLondon.toString()); // Output: 2024-10-27T18:30:00+01:00[Europe/London]

Arbeiten mit Zeitzonen-Offsets

Die Methode `getOffsetStringFor` des `Temporal.TimeZone`-Objekts liefert den Offset-String für ein gegebenes `Temporal.Instant`:

const timeZoneObject = new Temporal.TimeZone(timeZone);
const offsetString = timeZoneObject.getOffsetStringFor(zonedDateTime.toInstant());
console.log(offsetString); // Output: -07:00 (Depending on DST rules)

Es ist unerlässlich, die korrekten IANA-Zeitzonenkennungen für genaue Berechnungen zu verwenden. Diese Kennungen werden regelmäßig gepflegt und aktualisiert, um Änderungen bei der Sommerzeit und den Zeitzonengrenzen widerzuspiegeln.

Zeitdauern

Das `Temporal.Duration`-Objekt repräsentiert eine Zeitspanne. Es kann verwendet werden, um zu Daten und Zeiten zu addieren oder von ihnen zu subtrahieren.

Erstellen einer `Temporal.Duration`

Sie können eine `Temporal.Duration` mit dem Konstruktor erstellen, indem Sie Jahre, Monate, Tage, Stunden, Minuten, Sekunden, Millisekunden, Mikrosekunden und Nanosekunden angeben:

const duration = new Temporal.Duration(1, 2, 3, 4, 5, 6, 7, 8, 9); // Years, Months, Days, Hours, Minutes, Seconds, Milliseconds, Microseconds, Nanoseconds
console.log(duration.toString()); // Output: P1Y2M3DT4H5M6.007008009S

Oder indem Sie einen ISO-8601-Dauerstring verwenden:

const durationFromString = Temporal.Duration.from('P1Y2M3DT4H5M6S');
console.log(durationFromString.toString()); // Output: P1Y2M3DT4H5M6S

Hinzufügen von Zeitdauern zu Daten und Zeiten

const plainDate = new Temporal.PlainDate(2024, 10, 27);
const duration = new Temporal.Duration(0, 0, 7); // 7 days
const newDate = plainDate.plus(duration);
console.log(newDate.toString()); // Output: 2024-11-03

Beachten Sie, dass das Hinzufügen von Zeitdauern, die Monate oder Jahre beinhalten, zu Daten sorgfältige Überlegungen erfordert, da die Anzahl der Tage in einem Monat oder Jahr variieren kann.

Kalendersysteme

Die Temporal API unterstützt verschiedene Kalendersysteme über den gregorianischen Kalender hinaus. Dies ist entscheidend für Anwendungen, die Daten in verschiedenen kulturellen Kontexten verarbeiten müssen. Obwohl die Unterstützung noch in der Entwicklung ist, bietet sie eine Grundlage für zukünftige Erweiterungen.

Verwendung alternativer Kalender

Um einen bestimmten Kalender zu verwenden, können Sie ihn bei der Erstellung von Temporal-Objekten angeben:

const hebrewDate = new Temporal.PlainDate(5785, 1, 1, { calendar: 'hebrew' });
console.log(hebrewDate.toString()); // The specific output may vary depending on the implementation and formatting. Requires polyfill in many environments as of writing this.

Wichtig: Die Unterstützung für nicht-gregorianische Kalender kann Polyfills oder eine spezifische Browser-/Umgebungsunterstützung erfordern. Überprüfen Sie die Dokumentation der Temporal API und die Browser-Kompatibilitätstabellen für die neuesten Informationen.

Formatierung von Datum und Uhrzeit

Während sich die Temporal API auf die Manipulation von Datum und Uhrzeit konzentriert, wird die Formatierung typischerweise vom `Intl.DateTimeFormat`-Objekt übernommen, das Teil der Internationalization API ist. Temporal-Objekte arbeiten nahtlos mit `Intl.DateTimeFormat` zusammen.

Verwendung von `Intl.DateTimeFormat`

So formatieren Sie ein `Temporal.PlainDate` mit `Intl.DateTimeFormat`:

const plainDate = new Temporal.PlainDate(2024, 10, 27);
const formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatter.format(plainDate)); // Output: October 27, 2024

const formatterGerman = new Intl.DateTimeFormat('de-DE', { year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatterGerman.format(plainDate)); // Output: 27. Oktober 2024

Sie können die Formatoptionen an Ihre Bedürfnisse anpassen. Das erste Argument für `Intl.DateTimeFormat` ist das Gebietsschema (Locale), das die Sprache und die regionalen Konventionen für die Formatierung bestimmt. Die Verwendung unterschiedlicher Gebietsschemata (z. B. 'en-US', 'de-DE', 'fr-FR', 'ja-JP') erzeugt unterschiedliche Ausgabeformate.

Formatierung von `Temporal.ZonedDateTime`

Die Formatierung von `Temporal.ZonedDateTime` ist ähnlich, aber Sie können auch Zeitzoneninformationen in die Ausgabe aufnehmen:

const plainDateTime = new Temporal.PlainDateTime(2024, 10, 27, 10, 30, 0);
const timeZone = 'America/Los_Angeles';
const zonedDateTime = plainDateTime.toZonedDateTime(timeZone);

const formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' });
console.log(formatter.format(zonedDateTime)); // Output: October 27, 2024, 10:30 AM PDT (The time zone abbreviation depends on DST rules)

Best Practices für die Internationalisierung

Wenn Sie mit Datum und Uhrzeit in einem globalen Kontext arbeiten, sollten Sie die folgenden Best Practices beachten:

Verwenden Sie IANA-Zeitzonenkennungen: Verwenden Sie immer IANA-Zeitzonenkennungen (z. B. `America/Los_Angeles`, `Europe/London`) für eine genaue Zeitzonenbehandlung.
Achten Sie auf die Sommerzeit: Die Sommerzeit (Daylight Saving Time, DST) kann die Zeitzonen-Offsets beeinflussen. Die Temporal API behandelt DST-Übergänge automatisch.
Verwenden Sie `Intl.DateTimeFormat` zur Formatierung: Verwenden Sie das `Intl.DateTimeFormat`-Objekt zur Formatierung von Datum und Uhrzeit entsprechend dem Gebietsschema des Benutzers.
Berücksichtigen Sie Kalendersysteme: Wenn Ihre Anwendung Benutzer in verschiedenen kulturellen Kontexten unterstützen muss, ziehen Sie die Verwendung alternativer Kalendersysteme in Betracht.
Speichern Sie Datum und Uhrzeit in UTC: Beim Speichern von Datum und Uhrzeit in einer Datenbank ist es eine bewährte Methode, sie in UTC (Koordinierte Weltzeit) zu speichern, um Zeitzonenprobleme zu vermeiden. Konvertieren Sie sie dann zur Anzeige in die lokale Zeit. Temporal bietet Methoden zur Konvertierung von und nach UTC.
Testen Sie gründlich: Testen Sie Ihre Anwendung mit verschiedenen Zeitzonen, Gebietsschemata und Kalendersystemen, um sicherzustellen, dass sie für alle Benutzer korrekt funktioniert.

Vergleich der Temporal API mit dem alten Date-Objekt

Hier ist eine Tabelle, die die wichtigsten Unterschiede und Vorteile der Temporal API im Vergleich zum alten `Date`-Objekt hervorhebt:

Merkmal	Altes `Date`-Objekt	Temporal API
Veränderlichkeit	Veränderlich (modifiziert das Originalobjekt)	Unveränderlich (gibt neue Objekte zurück)
Zeitzonenunterstützung	Begrenzt und oft problematisch	Robust und genau, basierend auf der IANA-Zeitzonendatenbank
API	Inkonsistent und schwer zu bedienen	Klar, konsistent und intuitiv
Präzision	Millisekunde	Nanosekunde
Kalendersysteme	Auf Gregorianisch beschränkt	Unterstützt alternative Kalendersysteme (mit sich entwickelnder Unterstützung)
Internationalisierung	Erfordert externe Bibliotheken für eine robuste Internationalisierung	Integrierte Unterstützung und nahtlose Integration mit `Intl.DateTimeFormat`

Browser-Unterstützung und Polyfills

Als relativ neue API entwickelt sich die Browser-Unterstützung für die Temporal API noch. Überprüfen Sie die neuesten Browser-Kompatibilitätstabellen (z. B. in den MDN Web Docs), um zu sehen, welche Browser und Umgebungen sie nativ unterstützen. Für ältere Browser oder Umgebungen ohne native Unterstützung können Sie Polyfills verwenden, um die Funktionalität der Temporal API bereitzustellen. Suchen Sie im Web nach „Temporal API polyfill“, um geeignete Optionen zu finden.

Fazit

Die JavaScript Temporal API stellt einen bedeutenden Fortschritt in der Handhabung von Datum und Uhrzeit in JavaScript dar. Ihre Unveränderlichkeit, die klare API, die robuste Zeitzonenunterstützung und die Fähigkeiten im Bereich der Kalendersysteme machen sie zu einem leistungsstarken Werkzeug für Entwickler, die Anwendungen erstellen, die mit Datum und Uhrzeit genau und zuverlässig in verschiedenen internationalen Kontexten arbeiten müssen. Obwohl die Browser-Unterstützung noch in der Entwicklung ist, lohnen sich die Vorteile der Temporal API, sie für neue Projekte zu erlernen und zu übernehmen. Indem Sie die Temporal API nutzen und die Best Practices der Internationalisierung befolgen, können Sie Anwendungen erstellen, die Benutzern auf der ganzen Welt eine nahtlose und genaue Datums- und Zeiterfahrung bieten.

MLOG