Behersk JavaScript Temporal API til moderne dato- og tidshåndtering. Lær hvordan du erstatter ældre Date-objekter med en kraftfuld, intuitiv og timezone-bevidst API.
JavaScript Temporal API: Moderne Dato- og Tidsmanipulation
JavaScript Date-objektet har længe været en kilde til frustration for udviklere. Dets mutabilitet, mangel på indbygget tidszoneunderstøttelse og akavede API har ført til utallige biblioteker og løsninger. Heldigvis har Temporal API til formål at adressere disse mangler og levere en moderne, intuitiv og tidszone-bevidst løsning til dato- og tidsmanipulation i JavaScript.
Hvad er Temporal API?
Temporal API er et nyt globalt objekt, Temporal, der giver en moderne og standardiseret måde at arbejde med datoer og tidspunkter i JavaScript. Det er designet til at erstatte det ældre Date-objekt og tilbyder betydelige forbedringer med hensyn til API-design, immutabilitet, tidszoneunderstøttelse og generel brugervenlighed. Det er en del af ECMAScript-forslaget og implementeres i store JavaScript-engines.
Vigtigste fordele ved Temporal API:
- Immutabilitet: Temporal-objekter er immutable, hvilket betyder, at operationer på dem returnerer nye objekter i stedet for at ændre det originale. Dette hjælper med at forhindre uventede bivirkninger og gør koden lettere at forstå.
- Klar API: API'en er designet til at være mere intuitiv og konsistent end det ældre
Date-objekt. - Tidszoneunderstøttelse: Temporal giver robust understøttelse af tidszoner, så du kan arbejde med datoer og tidspunkter på forskellige steder rundt om i verden.
- Kalenderunderstøttelse: Ud over den gregorianske kalender giver API'en mulighed for at bruge andre kalendersystemer, hvilket letter globale applikationer.
- Håndtering af skudsekunder: Temporal API tager højde for skudsekunder, hvilket giver mere nøjagtige tidsberegninger.
Kom godt i gang med Temporal
Selvom Temporal API stadig er under udvikling og endnu ikke er fuldt understøttet i alle browsere og Node.js-miljøer, kan du bruge en polyfill til at begynde at eksperimentere med det i dag. Du kan installere polyfill via npm:
npm install @js-temporal/polyfill
Importer derefter polyfill i din JavaScript-kode:
import { Temporal } from '@js-temporal/polyfill';
Når polyfill er installeret, kan du begynde at bruge Temporal-objektet og dets forskellige klasser.
Centrale Temporal-klasser
Temporal API giver flere nøgleklasser til at arbejde med datoer og tidspunkter:
Temporal.PlainDate: Repræsenterer en kalenderdato (år, måned og dag) uden tidszone eller tidspunkt på dagen.Temporal.PlainTime: Repræsenterer et tidspunkt på dagen (time, minut, sekund og brøkdel af et sekund) uden dato- eller tidszoneoplysninger.Temporal.PlainDateTime: Repræsenterer en dato og et tidspunkt uden tidszoneoplysninger.Temporal.ZonedDateTime: Repræsenterer en dato og et tidspunkt med en specifik tidszone.Temporal.Instant: Repræsenterer et specifikt tidspunkt, målt i nanosekunder siden Unix-epoken (1. januar 1970, kl. 00:00:00 Coordinated Universal Time (UTC)).Temporal.TimeZone: Repræsenterer en tidszone.Temporal.Duration: Repræsenterer en tidslængde, såsom timer, minutter eller sekunder.Temporal.Now: Giver adgang til den aktuelle dato og tid.
Arbejde med PlainDate
Klassen Temporal.PlainDate repræsenterer en dato uden tidszone eller tidspunkt på dagen. Det er nyttigt til at repræsentere fødselsdage, jubilæer eller andre datobaserede begivenheder.
Oprettelse af en PlainDate:
const plainDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26 });
console.log(plainDate.toString()); // Output: 2024-10-26
Du kan også oprette en PlainDate fra en streng i ISO 8601-format:
const plainDateFromString = Temporal.PlainDate.from('2024-12-25');
console.log(plainDateFromString.toString()); // Output: 2024-12-25
Adgang til datokomponenter:
const year = plainDate.year; // 2024
const month = plainDate.month; // 10
const day = plainDate.day; // 26
const dayOfWeek = plainDate.dayOfWeek; // Ugens dag (1-7, mandag-søndag)
const dayOfYear = plainDate.dayOfYear; // Årets dag (1-366)
const daysInMonth = plainDate.daysInMonth; // Antal dage i måneden
const isLeapYear = plainDate.isLeapYear; // Boolsk værdi, der angiver, om året er et skudår
Tilføjelse og fratrækning af dage:
const nextDay = plainDate.add({ days: 1 });
console.log(nextDay.toString()); // Output: 2024-10-27
const previousWeek = plainDate.subtract({ weeks: 1 });
console.log(previousWeek.toString()); // Output: 2024-10-19
Sammenligning af datoer:
const anotherDate = Temporal.PlainDate.from({ year: 2024, month: 11, day: 15 });
if (plainDate.equals(anotherDate)) {
console.log('Datoer er ens');
} else if (plainDate.lessThan(anotherDate)) {
console.log('plainDate er tidligere end anotherDate');
} else {
console.log('plainDate er senere end anotherDate');
}
// Output: plainDate er tidligere end anotherDate
Arbejde med PlainTime
Klassen Temporal.PlainTime repræsenterer et tidspunkt på dagen uden dato- eller tidszoneoplysninger. Det er nyttigt til at repræsentere åbningstider, mødetider eller andre tidsbaserede begivenheder.
Oprettelse af en PlainTime:
const plainTime = Temporal.PlainTime.from({ hour: 14, minute: 30, second: 0 });
console.log(plainTime.toString()); // Output: 14:30:00
Du kan også oprette en PlainTime fra en streng i ISO 8601-format:
const plainTimeFromString = Temporal.PlainTime.from('09:00:00');
console.log(plainTimeFromString.toString()); // Output: 09:00:00
Adgang til tidskomponenter:
const hour = plainTime.hour; // 14
const minute = plainTime.minute; // 30
const second = plainTime.second; // 0
const millisecond = plainTime.millisecond; // 0
const microsecond = plainTime.microsecond; // 0
const nanosecond = plainTime.nanosecond; // 0
Tilføjelse og fratrækning af tid:
const laterTime = plainTime.add({ minutes: 15 });
console.log(laterTime.toString()); // Output: 14:45:00
const earlierTime = plainTime.subtract({ hours: 1 });
console.log(earlierTime.toString()); // Output: 13:30:00
Sammenligning af tidspunkter:
const anotherTime = Temporal.PlainTime.from({ hour: 15, minute: 0, second: 0 });
if (plainTime.equals(anotherTime)) {
console.log('Tidspunkter er ens');
} else if (plainTime.lessThan(anotherTime)) {
console.log('plainTime er tidligere end anotherTime');
} else {
console.log('plainTime er senere end anotherTime');
}
// Output: plainTime er tidligere end anotherTime
Arbejde med PlainDateTime
Klassen Temporal.PlainDateTime repræsenterer en dato og et tidspunkt uden tidszoneoplysninger. Det kombinerer funktionaliteten af PlainDate og PlainTime.
Oprettelse af en PlainDateTime:
const plainDateTime = Temporal.PlainDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0 });
console.log(plainDateTime.toString()); // Output: 2024-10-26T14:30:00
Du kan også oprette en PlainDateTime fra en streng i ISO 8601-format:
const plainDateTimeFromString = Temporal.PlainDateTime.from('2024-12-25T09:00:00');
console.log(plainDateTimeFromString.toString()); // Output: 2024-12-25T09:00:00
Adgang til dato- og tidskomponenter:
const year = plainDateTime.year; // 2024
const month = plainDateTime.month; // 10
const day = plainDateTime.day; // 26
const hour = plainDateTime.hour; // 14
const minute = plainDateTime.minute; // 30
const second = plainDateTime.second; // 0
Tilføjelse og fratrækning af datoer og tidspunkter:
const nextDayAndTime = plainDateTime.add({ days: 1, hours: 2 });
console.log(nextDayAndTime.toString()); // Output: 2024-10-27T16:30:00
const previousWeekAndTime = plainDateTime.subtract({ weeks: 1, minutes: 30 });
console.log(previousWeekAndTime.toString()); // Output: 2024-10-19T14:00:00
Konvertering til PlainDate og PlainTime:
const plainDateFromDateTime = plainDateTime.toPlainDate();
console.log(plainDateFromDateTime.toString()); // Output: 2024-10-26
const plainTimeFromDateTime = plainDateTime.toPlainTime();
console.log(plainTimeFromDateTime.toString()); // Output: 14:30:00
Arbejde med ZonedDateTime
Klassen Temporal.ZonedDateTime repræsenterer en dato og et tidspunkt med en specifik tidszone. Dette er afgørende for applikationer, der skal håndtere datoer og tidspunkter på forskellige steder rundt om i verden. I modsætning til det ældre Date-objekt giver Temporal indbygget tidszoneunderstøttelse.
Oprettelse af en ZonedDateTime:
const zonedDateTime = Temporal.ZonedDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0, timeZone: 'America/Los_Angeles' });
console.log(zonedDateTime.toString()); // Output: 2024-10-26T14:30:00-07:00[America/Los_Angeles]
Du kan også oprette en ZonedDateTime fra en Instant og en tidszone:
const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Eksempel på tidsstempel
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('Europe/London');
console.log(zonedDateTimeFromInstant.toString()); // Output vil variere baseret på det faktiske tidspunkt, men vil afspejle dato/tid i Europa/London
Adgang til dato- og tidskomponenter:
const year = zonedDateTime.year; // 2024
const month = zonedDateTime.month; // 10
const day = zonedDateTime.day; // 26
const hour = zonedDateTime.hour; // 14
const minute = zonedDateTime.minute; // 30
const second = zonedDateTime.second; // 0
const timeZone = zonedDateTime.timeZone; // Temporal.TimeZone objekt
Konvertering mellem tidszoner:
const newYorkDateTime = zonedDateTime.withTimeZone('America/New_York');
console.log(newYorkDateTime.toString()); // Output: 2024-10-26T17:30:00-04:00[America/New_York]
Håndtering af sommertid (DST):
Temporal håndterer automatisk DST-overgange. Når du tilføjer eller trækker tid fra, tager den DST i betragtning, hvilket sikrer nøjagtige resultater. Overvej for eksempel et møde planlagt på tværs af DST-overgangen i Tyskland:
const meetingStart = Temporal.ZonedDateTime.from({ year: 2024, month: 3, day: 31, hour: 2, minute: 30, timeZone: 'Europe/Berlin' });
const meetingEnd = meetingStart.add({ hours: 1 }); // Tilføjelse af 1 time
console.log(meetingEnd.toString()); // Output: 2024-03-31T03:30:00+02:00[Europe/Berlin]. Bemærk, at offset ændres på grund af DST
Arbejde med Instant
Klassen Temporal.Instant repræsenterer et specifikt tidspunkt, målt i nanosekunder siden Unix-epoken. Det er nyttigt til at gemme og sammenligne nøjagtige tidspunkter.
Oprettelse af en Instant:
const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Eksempel på Unix-tidsstempel i sekunder
console.log(instant.toString()); // Output vil være en ISO-strengrepræsentation af det pågældende tidspunkt
Konvertering til ZonedDateTime:
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('America/Los_Angeles');
console.log(zonedDateTimeFromInstant.toString()); // Output: Dato og klokkeslæt i America/Los_Angeles svarende til tidspunktet
Sammenligning af tidspunkter:
const anotherInstant = Temporal.Instant.fromEpochSeconds(1666790000);
if (instant.equals(anotherInstant)) {
console.log('Tidspunkter er ens');
} else if (instant.lessThan(anotherInstant)) {
console.log('instant er tidligere end anotherInstant');
} else {
console.log('instant er senere end anotherInstant');
}
// Output: instant er tidligere end anotherInstant
Arbejde med Duration
Klassen Temporal.Duration repræsenterer en tidslængde, såsom timer, minutter eller sekunder. Det er nyttigt til at beregne forskellen mellem to datoer eller tidspunkter.
Oprettelse af en Duration:
const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });
console.log(duration.toString()); // Output: PT2H30M
Beregning af forskellen mellem datoer/tidspunkter:
const startDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 1, hour: 0, minute: 0, second: 0 });
const endDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 3, hour: 12, minute: 30, second: 0 });
const difference = endDate.since(startDate);
console.log(difference.toString()); // Output: P2DT12H30M
// Adgang til komponenterne i varigheden
console.log(difference.days); // 2
console.log(difference.hours); // 12
console.log(difference.minutes); // 30
Tilføjelse af varighed til datoer/tidspunkter:
const newDate = startDate.add(duration);
console.log(newDate.toString()); // Output: 2024-01-03T02:30:00
Arbejde med kalendere
Temporal API understøtter forskellige kalendersystemer ud over den gregorianske kalender. Selvom det ikke er fuldt implementeret i alle polyfills og engines endnu, er hensigten at give applikationer mulighed for at håndtere datoer i kalendere, der er specifikke for forskellige kulturer. For eksempel for at bruge den japanske kalender (hypotetisk, da implementeringen stadig er under udvikling):
// Dette er et konceptuelt eksempel, da kalenderunderstøttelse stadig er under udvikling
// const japaneseDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26, calendar: 'japanese' });
// console.log(japaneseDate.toString()); // Forventet: Output formateret i henhold til den japanske kalender
Bemærk: Kalenderunderstøttelse er en funktion i Temporal API, der er under udvikling, og fuld funktionalitet er endnu ikke universelt tilgængelig.
Praktiske eksempler og anvendelsestilfælde
Temporal API tilbyder en bred vifte af muligheder for håndtering af datoer og tidspunkter i JavaScript. Her er nogle praktiske eksempler og anvendelsestilfælde:
- Planlægning af aftaler: Opret en planlægningsapplikation, der giver brugerne mulighed for at booke aftaler i deres lokale tidszone. Temporal.ZonedDateTime gør det nemt at konvertere mellem tidszoner og håndtere DST-overgange. For en klinik i Berlin, der planlægger aftaler globalt:
- Beregning af alder: Bestem alderen på en bruger baseret på deres fødselsdato. PlainDate giver dig mulighed for at repræsentere fødselsdatoen uden tidszoneoplysninger.
- Visning af datoer og tidspunkter i forskellige formater: Formater datoer og tidspunkter i henhold til brugerens lokalitet. Selvom internationalisering (Intl) -funktioner er separate, kan Temporal-objekter let formateres ved hjælp af
toLocaleString()eller lignende metoder, når de kombineres med Intl API-funktioner. - Sporing af begivenheders varighed: Beregn varigheden af en begivenhed, og vis den i et menneskeligt læsbart format. Varighed giver dig mulighed for at repræsentere tidsforskellen mellem to datoer eller tidspunkter.
const appointmentTimeBerlin = Temporal.ZonedDateTime.from({ year: 2024, month: 11, day: 5, hour: 10, minute: 0, timeZone: 'Europe/Berlin' });
const appointmentTimeLA = appointmentTimeBerlin.withTimeZone('America/Los_Angeles');
console.log(`Aftaletid i Berlin: ${appointmentTimeBerlin.toString()}`);
console.log(`Aftaletid i Los Angeles: ${appointmentTimeLA.toString()}`);
const birthDate = Temporal.PlainDate.from({ year: 1990, month: 5, day: 15 });
const today = Temporal.Now.plainDateISO();
const age = today.year - birthDate.year - (today.month < birthDate.month || (today.month === birthDate.month && today.day < birthDate.day) ? 1 : 0);
console.log(`Alder: ${age}`);
const zonedDateTimeNow = Temporal.Now.zonedDateTimeISO('en-GB');
console.log(zonedDateTimeNow.toLocaleString('en-GB'));
console.log(zonedDateTimeNow.toLocaleString('de-DE'));
const eventStart = Temporal.Instant.fromEpochSeconds(1700000000); // Eksempel på starttidsstempel
const eventEnd = Temporal.Instant.fromEpochSeconds(1700005000); // Eksempel på sluttidsstempel
const durationOfEvent = eventEnd.since(eventStart);
console.log(`Begivenheds varighed: ${durationOfEvent.minutes} minutter`);
Bedste fremgangsmåder til brug af Temporal API
Her er nogle bedste fremgangsmåder, du skal huske på, når du bruger Temporal API:
- Brug immutabilitet: Omfavn Temporal-objekters immutabilitet. Undgå at ændre objekter direkte. Opret i stedet nye objekter ved hjælp af metoder som
add,subtractogwith. - Håndter tidszoner omhyggeligt: Vær opmærksom på tidszoner, når du arbejder med datoer og tidspunkter. Brug
ZonedDateTime, når du har brug for at repræsentere datoer og tidspunkter i en specifik tidszone. - Brug klare variabelnavne: Brug beskrivende variabelnavne, der tydeligt angiver den type Temporal-objekt, der bruges (f.eks.
plainDate,zonedDateTime,duration). - Overvej Polyfills: Fordi Temporal stadig er relativt ny, skal du sikre tilstrækkelig understøttelse ved at bruge et polyfill-bibliotek, hvor det er nødvendigt.
- Valider input: Valider altid brugerinput for at sikre, at datoer og tidspunkter er i det korrekte format.
Migrering fra ældre dato
Migrering fra det ældre Date-objekt kan være en gradvis proces. Overvej disse strategier:
- Trinvis anvendelse: Begynd med at bruge Temporal i ny kode, mens du vedligeholder
Datei eksisterende dele af din applikation. - Wrapper-funktioner: Opret wrapper-funktioner, der konverterer mellem
Date- og Temporal-objekter for at lette interoperabiliteten under migreringen. - Grundig test: Test migreringen grundigt for at sikre, at alle dato- og tidsberegninger er nøjagtige.
Temporal API vs. Moment.js
Moment.js var et populært bibliotek til dato- og tidsmanipulation i JavaScript, men det betragtes nu som et ældre projekt og er i vedligeholdelsestilstand. Temporal API giver en mere moderne og standardiseret løsning, der adresserer mange af manglerne ved Moment.js. Moment.js er mutabel og mangler indbygget tidszoneunderstøttelse. Temporal API er immutabel og har indbygget tidszoneunderstøttelse.
Konklusion
JavaScript Temporal API repræsenterer en betydelig forbedring i forhold til det ældre Date-objekt. Dets immutabilitet, klare API, tidszoneunderstøttelse og kalenderunderstøttelse gør det til et kraftfuldt værktøj til håndtering af datoer og tidspunkter i moderne JavaScript-applikationer. Selvom brugen stadig er voksende, giver brugen af en polyfill dig mulighed for at begynde at udnytte dens fordele i dag. Efterhånden som API'en bliver mere bredt understøttet, forventes det at blive standardmåden at arbejde med datoer og tidspunkter i JavaScript.
Omfavn Temporal API, og lås op for en mere effektiv og pålidelig måde at administrere datoer og tidspunkter i dine projekter, hvilket sikrer, at din applikation håndterer globale tidszoner og beregninger nøjagtigt.