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:

• Oföränderlighet: Temporal-objekt är oföränderliga, vilket innebär att operationer som att lägga till dagar eller månader returnerar nya objekt istället för att ändra det ursprungliga. Detta eliminerar en vanlig källa till buggar och gör koden lättare att förstå.
• Tydligt API: Temporal erbjuder ett konsekvent och intuitivt API för vanliga datum- och tidsoperationer.
• Stöd för tidszoner: Temporal inkluderar robust stöd för tidszoner, vilket gör att du kan arbeta med datum och tider på olika platser utan komplexiteten hos det gamla `Date`-objektet. Det använder IANA:s tidszonsdatabas, vilket säkerställer korrekt och uppdaterad information.
• Kalendersystem: Utöver den gregorianska kalendern stöder Temporal alternativa kalendersystem, vilket tillgodoser behoven hos olika kulturer och regioner.
• Förbättrad precision: Temporal erbjuder nanosekundprecision, vilket åtgärdar begränsningarna hos det millisekundbaserade `Date`-objektet.

Grundläggande Temporal-objekt

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

• `Temporal.PlainDate`: Representerar ett datum (år, månad, dag) utan en tidszon.
• `Temporal.PlainTime`: Representerar en tid (timme, minut, sekund, millisekund, mikrosekund, nanosekund) utan ett datum eller en tidszon.
• `Temporal.PlainDateTime`: Representerar ett datum och en tid utan en tidszon.
• `Temporal.ZonedDateTime`: Representerar ett datum och en tid med en specifik tidszon.
• `Temporal.Instant`: Representerar ett specifikt ögonblick i tiden, mätt i nanosekunder sedan Unix-epoken (1 januari 1970 UTC).
• `Temporal.TimeZone`: Representerar en tidszon.
• `Temporal.Duration`: Representerar ett tidsspann (t.ex. 2 timmar, 30 minuter).
• `Temporal.YearMonth`: Representerar ett år och en månad.
• `Temporal.MonthDay`: Representerar en månad och en dag.

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
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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)
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

Hämta tidskomponenter

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

              
                Copy
              
            
          

Tids-aritmetik

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

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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)

            

              
                Copy
              
            
          

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());
            

              
                Copy
              
            
          

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]
            

              
                Copy
              
            
          

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)
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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

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

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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.
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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)
            

              
                Copy
              
            
          

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:

• Använd IANA-tidszonsidentifierare: Använd alltid IANA-tidszonsidentifierare (t.ex. `America/Los_Angeles`, `Europe/London`) för korrekt tidszonshantering.
• Var medveten om sommartid: Sommartid (Daylight Saving Time, DST) kan påverka tidszons-offset. Temporal API hanterar automatiskt övergångar till och från sommartid.
• Använd `Intl.DateTimeFormat` för formatering: Använd `Intl.DateTimeFormat`-objektet för att formatera datum och tider enligt användarens språkinställning.
• Överväg kalendersystem: Om din applikation behöver stödja användare i olika kulturella sammanhang, överväg att använda alternativa kalendersystem.
• Lagra datum och tider i UTC: När du lagrar datum och tider i en databas är det bästa praxis att lagra dem i UTC (Coordinated Universal Time) för att undvika tidszonsproblem. Konvertera sedan till lokal tid för visningsändamål. Temporal erbjuder metoder för att konvertera till och från UTC.
• Testa noggrant: Testa din applikation med olika tidszoner, språkinställningar och kalendersystem för att säkerställa att den fungerar korrekt för alla användare.

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:

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

• Temporal API Officiell Dokumentation
• MDN Web Docs om Temporal