M

MLOG

Svenska

En djupgående guide till JavaScript Temporal API, en modern lösning för att effektivt hantera datum och tider i olika internationella sammanhang.

JavaScript Temporal API: Modern datum- och tidshantering för en global publik

JavaScript-objektet `Date` har länge varit en källa till frustration för utvecklare. Dess mutabilitet, inkonsekventa API och dåliga stöd för tidszoner har lett till att många bibliotek som Moment.js och date-fns har skapats för att fylla luckorna. Nu, med Temporal API, erbjuder JavaScript en modern, inbyggd lösning för att hantera datum och tider med förbättrad tydlighet och precision. Denna artikel ger en omfattande översikt över Temporal API, med fokus på dess funktioner, fördelar och användning i olika internationella sammanhang.

Vad är Temporal API?

Temporal API är ett nytt, globalt objekt i JavaScript som är utformat för att åtgärda bristerna i `Date`-objektet. Det erbjuder ett rent, oföränderligt API för att arbeta med datum, tider, tidszoner och kalendersystem. Avgörande är att det syftar till att representera datum- och tidskoncept på ett sätt som ligger närmare verklig användning och förväntningar, vilket gör internationalisering mycket enklare.

Nyckelfunktioner:

Grundläggande Temporal-objekt

Temporal API introducerar flera nya objekttyper. Här är några av de mest centrala:

Arbeta med datum

Skapa ett `Temporal.PlainDate`

För att skapa ett `Temporal.PlainDate` kan du använda konstruktorn:

const plainDate = new Temporal.PlainDate(2024, 10, 27); // År, Månad (1-12), Dag
console.log(plainDate.toString()); // Utdatat: 2024-10-27

Du kan också använda `from`-metoden, som accepterar en sträng i ISO 8601-format:

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

Hämta datumkomponenter

Du kan komma åt enskilda datumkomponenter med hjälp av egenskaper som `year`, `month` och `day`:

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

Datum-aritmetik

För att lägga till eller dra ifrån dagar, veckor, månader eller år, använd metoderna `plus` och `minus`. Dessa metoder returnerar ett nytt `Temporal.PlainDate`-objekt:

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

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

Jämföra datum

Du kan jämföra datum med hjälp av `compare`-metoden:

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

console.log(Temporal.PlainDate.compare(date1, date2)); // Utdatat: -1 (date1 är tidigare än date2)

Arbeta med tider

Skapa en `Temporal.PlainTime`

För att skapa en `Temporal.PlainTime`, använd konstruktorn:

const plainTime = new Temporal.PlainTime(10, 30, 0); // Timme, Minut, Sekund
console.log(plainTime.toString()); // Utdatat: 10:30:00

Eller använd `from`-metoden med en ISO 8601-tidssträng:

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

Hämta tidskomponenter

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

Tids-aritmetik

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

Arbeta med datum och tid tillsammans

Skapa en `Temporal.PlainDateTime`

Du kan skapa en `Temporal.PlainDateTime` direkt eller genom att kombinera en `Temporal.PlainDate` och en `Temporal.PlainTime`:

const plainDateTime = new Temporal.PlainDateTime(2024, 10, 27, 10, 30, 0);
console.log(plainDateTime.toString()); // Utdatat: 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()); // Utdatat: 2024-10-27T10:30:00

Tidszoner

Att hantera tidszoner korrekt är avgörande för applikationer som hanterar användare på olika platser. Temporal API erbjuder robust stöd för tidszoner genom objekten `Temporal.ZonedDateTime` och `Temporal.TimeZone`.

Skapa en `Temporal.ZonedDateTime`

För att skapa en `Temporal.ZonedDateTime` behöver du en `Temporal.PlainDateTime` och en tidszonsidentifierare. Tidszonsidentifierare baseras på IANA:s tidszonsdatabas (t.ex. `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()); // Utdatat: 2024-10-27T10:30:00-07:00[America/Los_Angeles] (Offseten beror på reglerna för sommartid)

Alternativt kan du skapa en `Temporal.ZonedDateTime` från en `Instant`.

const instant = Temporal.Instant.fromEpochSeconds(1666866600); // Exempel på tidsstämpel
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO(timeZone); // Tidszon som 'America/Los_Angeles'
console.log(zonedDateTimeFromInstant.toString());

Konvertera mellan tidszoner

Du kan konvertera en `Temporal.ZonedDateTime` till en annan tidszon med `withTimeZone`-metoden:

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

Arbeta med tidszons-offset

`getOffsetStringFor`-metoden på `Temporal.TimeZone`-objektet ger offset-strängen för en given `Temporal.Instant`:

const timeZoneObject = new Temporal.TimeZone(timeZone);
const offsetString = timeZoneObject.getOffsetStringFor(zonedDateTime.toInstant());
console.log(offsetString); // Utdatat: -07:00 (Beroende på reglerna för sommartid)

Det är viktigt att använda korrekta IANA-tidszonsidentifierare för exakta beräkningar. Dessa identifierare underhålls och uppdateras regelbundet för att återspegla ändringar i sommartid och tidszonsgränser.

Tidsperioder

Objektet `Temporal.Duration` representerar ett tidsspann. Det kan användas för att addera eller subtrahera från datum och tider.

Skapa en `Temporal.Duration`

Du kan skapa en `Temporal.Duration` med hjälp av konstruktorn och specificera år, månader, dagar, timmar, minuter, sekunder, millisekunder, mikrosekunder och nanosekunder:

const duration = new Temporal.Duration(1, 2, 3, 4, 5, 6, 7, 8, 9); // År, Månader, Dagar, Timmar, Minuter, Sekunder, Millisekunder, Mikrosekunder, Nanosekunder
console.log(duration.toString()); // Utdatat: P1Y2M3DT4H5M6.007008009S

Eller genom att använda en ISO 8601-varaktighetssträng:

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

Addera tidsperioder till datum och tider

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

Notera att när man adderar tidsperioder som involverar månader eller år till datum krävs noggrant övervägande, eftersom antalet dagar i en månad eller ett år kan variera.

Kalendersystem

Temporal API stöder olika kalendersystem utöver den gregorianska kalendern. Detta är avgörande för applikationer som behöver hantera datum i olika kulturella sammanhang. Även om stödet fortfarande utvecklas, ger det en grund för framtida expansion.

Använda alternativa kalendrar

För att använda en specifik kalender kan du ange den när du skapar Temporal-objekt:

const hebrewDate = new Temporal.PlainDate(5785, 1, 1, { calendar: 'hebrew' });
console.log(hebrewDate.toString()); // Den specifika utdatan kan variera beroende på implementering och formatering. Kräver en polyfill i många miljöer i skrivande stund.

Viktigt: Stöd för icke-gregorianska kalendrar kan kräva polyfills eller specifikt stöd i webbläsare/miljö. Kontrollera den senaste informationen i Temporal API-dokumentationen och webbläsarnas kompatibilitetstabeller.

Formatera datum och tider

Medan Temporal API fokuserar på manipulering av datum och tid, hanteras formatering vanligtvis av `Intl.DateTimeFormat`-objektet, som är en del av Internationalization API. Temporal-objekt fungerar sömlöst med `Intl.DateTimeFormat`.

Använda `Intl.DateTimeFormat`

Så här formaterar du ett `Temporal.PlainDate` med `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)); // Utdatat: October 27, 2024

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

Du kan anpassa formateringsalternativen för att passa dina behov. Det första argumentet till `Intl.DateTimeFormat` är språkinställningen (locale), som bestämmer språket och de regionala konventioner som används för formatering. Genom att använda olika språkinställningar (t.ex. 'en-US', 'de-DE', 'fr-FR', 'ja-JP') produceras olika utdataformat.

Formatera `Temporal.ZonedDateTime`

Formatering av `Temporal.ZonedDateTime` är liknande, men du kan också inkludera tidszonsinformation i utdatan:

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)); // Utdatat: October 27, 2024, 10:30 AM PDT (Tidszonsförkortningen beror på reglerna för sommartid)

Bästa praxis för internationalisering

När du arbetar med datum och tider i ett globalt sammanhang, tänk på följande bästa praxis:

Jämförelse mellan Temporal API och det äldre Date-objektet

Här är en tabell som belyser de viktigaste skillnaderna och fördelarna med Temporal API jämfört med det äldre `Date`-objektet:

Funktion Äldre `Date`-objekt Temporal API
Mutabilitet Mutabel (ändrar det ursprungliga objektet) Oföränderlig (returnerar nya objekt)
Stöd för tidszoner Begränsat och ofta problematiskt Robust och korrekt, baserat på IANA:s tidszonsdatabas
API Inkonsekvent och svåranvänt Tydligt, konsekvent och intuitivt
Precision Millisekund Nanosekund
Kalendersystem Begränsat till gregoriansk Stöder alternativa kalendersystem (med stöd under utveckling)
Internationalisering Kräver externa bibliotek för robust internationalisering Inbyggt stöd och sömlös integration med `Intl.DateTimeFormat`

Webbläsarstöd och polyfills

Eftersom Temporal API är relativt nytt, är webbläsarstödet fortfarande under utveckling. Kontrollera de senaste kompatibilitetstabellerna (t.ex. på MDN Web Docs) för att se vilka webbläsare och miljöer som stöder det inbyggt. För äldre webbläsare eller miljöer utan inbyggt stöd kan du använda polyfills för att tillhandahålla Temporal API-funktionaliteten. Sök efter "Temporal API polyfill" på webben för att hitta lämpliga alternativ.

Slutsats

JavaScript Temporal API representerar ett betydande steg framåt i hanteringen av datum och tider i JavaScript. Dess oföränderlighet, tydliga API, robusta stöd för tidszoner och kalendersystem gör det till ett kraftfullt verktyg för utvecklare som bygger applikationer som behöver arbeta med datum och tider korrekt och tillförlitligt i olika internationella sammanhang. Även om webbläsarstödet fortfarande utvecklas, gör fördelarna med Temporal API det värt att lära sig och anamma för nya projekt. Genom att omfamna Temporal API och följa bästa praxis för internationalisering kan du skapa applikationer som ger en sömlös och korrekt datum- och tidsupplevelse för användare över hela världen.

Vidare läsning