Melkein mikä tahansa JavaScriptillä kirjoitettu sovellus toimii jossain määrin kellonaikojen tai päivämäärien kanssa. Aluksi tämä rajoittui sisäänrakennettuun Date API:hen. Tämä API sisältää perustoiminnot, mutta sen ominaisuudet ovat melko rajalliset. Kolmannen osapuolen kirjastot, kuten Moment.js, ja myöhemmät sisäänrakennetut sovellusliittymät, kuten Intl-sovellusliittymät ja uusi Temporal API, lisäävät paljon enemmän joustavuutta kellonaikojen ja päivämäärien käsittelyyn. The Rise and Fall Of Moment.js Moment.js on JavaScript-kirjasto, jossa on tehokkaita apuohjelmia kellonaikojen ja päivämäärien käsittelyyn. Se sisältää Date API -perussovellusliittymästä puuttuvia ominaisuuksia, kuten aikavyöhykkeen manipuloinnin, ja yksinkertaistaa monia yleisiä toimintoja. Moment sisältää myös toimintoja päivämäärän ja kellonajan muotoiluun. Siitä tuli laajalti käytetty kirjasto monissa eri sovelluksissa. Momentilla oli kuitenkin myös omat ongelmansa. Se on suuri kirjasto, ja se voi lisätä merkittävästi sovelluksen nippukokoa. Koska kirjasto ei tue puun tärinää (nykyaikaisten niputtajien ominaisuus, joka voi poistaa käyttämättömiä kirjastojen osia), koko Moment-kirjasto on mukana, vaikka käyttäisit vain yhtä tai kahta sen toiminnoista. Toinen Momentin ongelma on se, että sen luomat objektit ovat muuttuvia. Tiettyjen Moment-objektin funktioiden kutsumisella on sivuvaikutuksia ja se muuttaa objektin arvoa. Tämä voi johtaa odottamattomaan toimintaan tai virheisiin. Vuonna 2020 Momentin ylläpitäjät päättivät laittaa kirjaston ylläpitoon. Uusia ominaisuuksia ei kehitetä, ja ylläpitäjät suosittelevat olemaan käyttämättä sitä uusiin projekteihin. On olemassa muita JavaScript-päivämääräkirjastoja, kuten date-fns, mutta kaupungissa on uusi pelaaja, suoraan JavaScriptiin rakennettu API: Temporal. Se on uusi standardi, joka täyttää alkuperäisen Date APIn aukot sekä ratkaisee joitain Momentin ja muiden kirjastojen rajoituksia. Mikä on ajallinen? Temporal on uusi aika ja päivämäärä API, joka lisätään ECMAScript-standardiin, joka määrittelee nykyaikaisen JavaScriptin. Maaliskuussa 20266 se on saavuttanut TC39-prosessin vaiheen 4 (komitea, joka valvoo ehdotuksia ja lisäyksiä JavaScript-kieleen), ja se sisällytetään ECMAScript-määrityksen seuraavaan versioon. Se on jo otettu käyttöön useissa selaimissa: Chrome 144+ ja Firefox 139+, ja Safarin odotetaan seuraavan pian. Monitäyttö on saatavilla myös ei-tuetuille selaimille ja Node.js:lle. Temporal API luo objekteja, jotka yleensä edustavat ajan hetkiä. Nämä voivat olla kokoaika- ja päivämääräleimoja tietyllä aikavyöhykkeellä tai ne voivat olla yleinen "seinäkellon" ajan esiintymä ilman aikavyöhyke- tai päivämäärätietoja. Jotkut Temporalin pääominaisuuksista ovat:
Ajat päivämäärillä tai ilman. Ajallinen objekti voi edustaa tiettyä kellonaikaa tiettynä päivänä tai aikaa ilman päivämäärätietoja. Myös tietty päivämäärä ilman aikaa voidaan esittää. Aikavyöhykkeen tuki. Ajalliset objektit ovat täysin aikavyöhyketietoisia ja ne voidaan muuntaa eri aikavyöhykkeille. Moment tukee myös aikavyöhykkeitä, mutta se vaatii ylimääräisen hetken aikavyöhykekirjaston. Muuttumattomuus. Kun Temporaalinen objekti on luotu, sitä ei voi muuttaa. Aikaaritmeettiset tai aikavyöhykemuunnokset eivät muuta taustalla olevaa objektia. Sen sijaan ne luovat uuden Temporaalisen objektin. 1-pohjainen indeksointi.Yleinen Date API:n (ja Momentin) virheiden lähde on se, että kuukaudet ovat nolla-indeksoituja. Tämä tarkoittaa, että tammikuu on kuukausi 0, eikä kuukausi 1, kuten me kaikki ymmärrämme tosielämässä. Temporal korjaa tämän käyttämällä 1-pohjaista indeksointia – tammikuu on kuukausi 1. Se on sisäänrakennettu selaimeen. Koska Temporal on itse selaimen API, se ei lisää mitään sovelluksesi nippukokoon.
On myös tärkeää huomata, että Date API ei ole poistumassa. Vaikka Temporal korvaa tämän API:n, sitä ei poisteta tai vanhentua. Monet sovellukset rikkoutuisivat, jos selaimet yhtäkkiä poistaisivat Date API:n. Muista kuitenkin myös, että Momentia pidetään nyt ylläpitotilassa olevana vanhana projektina. Artikkelin loppuosassa tarkastellaan joitain "reseptejä" Moment-pohjaisen koodin siirtämiseksi uuteen Temporal API:hen. Aloitetaan refaktorointi! Päivämäärä- ja aikaobjektien luominen Ennen kuin voimme käsitellä päivämääriä ja aikoja, meidän on luotava niitä edustavia objekteja. Käytä hetken toimintoa luodaksesi hetken objektin, joka edustaa nykyistä päivämäärää ja aikaa. const nyt = hetki(); console.log(nyt); // Hetki<2026-02-18T21:26:29-05:00>
Tätä objektia voidaan nyt muotoilla tai muokata tarpeen mukaan.
// muuntaa UTC:ksi //varoitus: Tämä muuttaa Moment-objektin ja asettaa sen UTC-tilaan! console.log(now.utc()); // Hetki<2026-02-19T02:26:29Z>
// tulostaa muotoiltu merkkijono - huomaa, että se käyttää nyt UTC-aikaa console.log(now.format('KK/PP/VVVV hh:mm:ss a')); // 02/19/2026 02:27:07 am
Tärkeintä Momentissa on muistaa, että Moment-objekti sisältää aina tietoa kellonajasta ja päivämäärästä. Jos haluat työskennellä vain aikatietojen kanssa, tämä on yleensä hyvä, mutta se voi aiheuttaa odottamatonta käyttäytymistä tilanteissa, kuten kesäaika tai karkausvuodet, joissa päivämäärä voi vaikuttaa ajan laskemiseen. Ajallinen on joustavampi. Voit luoda nykyistä päivämäärää ja aikaa edustavan objektin luomalla Temporal.Instant-objektin. Tämä edustaa ajankohtaa, joka on määritelty aikakaudesta lähtien (keskiyön UTC 1. tammikuuta 1970). Temporal voi viitata tähän hetkeen ajassa nanosekunnin tason tarkkuudella. const now = Temporal.Now.instant();
// katso raakananosekuntia aikakaudesta console.log(now.epochNanosecunds); // 1771466342612000000n
// UTC-muoto console.log(nyt.toString()); // 2026-02-19T01:55:27.844Z
// muotoa tietylle aikavyöhykkeelle console.log(now.toString({ aikavyöhyke: 'America/New_York' })); // 2026-02-18T20:56:57.905-05:00
Temporal.Instant-objekteja voidaan luoda myös tietylle ajalle ja päivämäärälle käyttämällä fromstaattista menetelmää.
const myInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');
// Muotoile instant paikallisen aikavyöhykkeen mukaan. Huomaa, että tämä vain ohjaa // muotoilu - se ei muunna objektia kuten moment.utc tekee. console.log(myInstant.toString({ aikavyöhyke: 'America/New_York' })); // 2026-02-18T21:10:00-05:00
Voit myös luoda muun tyyppisiä Temporaalisia objekteja, mukaan lukien:
Temporal.PlainDate: Päivämäärä, jossa ei ole aikatietoja. Temporal.PlainTime: Aika, jossa ei ole päivämäärätietoja. Temporal.ZonedDateTime: päivämäärä ja aika tietyllä aikavyöhykkeellä.
Jokaisella näistä on from-metodi, jota voidaan kutsua päivämäärän ja/tai kellonajan määrittävällä objektilla tai jäsennettävällä päivämäärämerkkijonolla. // Vain treffit const today = Temporal.PlainDate.from({ vuosi: 2026, kuukausi: 2, // Huomaa, että käytämme 2:ta helmikuussa päivä: 18 }); console.log(today.toString()); // 2026-02-18
// Vain hetki const lunchTime = Temporal.PlainTime.from({ tunti: 12 }); console.log(lunchTime.toString()); // 12:00:00
// Päivämäärä ja aika USA:n itäisellä aikavyöhykkeellä const dueAt = Temporal.ZonedDateTime.from({ aikavyöhyke: 'America/New_York', vuosi: 2026, kuukausi: 3, päivä: 1, tunti: 12, minuutti: 0, toinen: 0 }); console.log(dueAt.toString()); // 2026-03-01T12:00:00-05:00[Amerikka/New_York]
Jäsentäminen Olemme käsitelleet päivämäärä- ja aikatietojen ohjelmallisen luomisen. Katsotaan nyt jäsentämistä. Jäsentäminen on alue, jolla Moment on joustavampi kuin sisäänrakennettu Temporal API. Voit jäsentää päivämäärämerkkijonon välittämällä sen hetkifunktiolle. Yhdellä argumentilla Moment odottaa ISO-päivämäärämerkkijonoa, mutta voit käyttää vaihtoehtoisia muotoja, jos annat toisen argumentin, joka määrittää käytettävän päivämäärämuodon.
const isoDate = moment('2026-02-21T09:00:00'); const formattedDate = hetki('21/26 9:00:00', 'K/P/VV h:mm:ss');
console.log(isoDate); // Hetki<2026-02-21T09:00:00-05:00>
console.log(formattedDate); // Hetki<2026-02-21T09:00:00-05:00>
Vanhemmissa versioissa Moment teki parhaan arvauksen jäsentääkseen minkä tahansa mielivaltaisesti muotoillun päivämäärämerkkijonon. Tämä voi johtaa arvaamattomiin tuloksiin. Onko esimerkiksi 02-03-2026 2. helmikuuta vai 3. maaliskuuta? Tästä syystä Momentin uudemmat versiot näyttävät näkyvän vanhentumisvaroituksen, jos sitä kutsutaan ilman ISO-muotoista päivämäärämerkkijonoa (ellei myös toista argumenttia anneta halutussa muodossa). Temporal jäsentää vain erityisesti muotoillun päivämäärämerkkijonon. Merkkijonon on oltava yhteensopiva ISO 8601 -muodon tai sen laajennuksen, RFC 9557, kanssa. Jos ei-yhteensopiva päivämäärämerkkijono välitetään from-metodille, Temporal antaa RangeError-ilmoituksen.
// Käyttämällä RFC 9557 -päivämäärämerkkijonoa const myDate = Temporal.Instant.from('2026-02-21T09:00:00-05:00[Amerikka/New_York]'); console.log(myDate.toString({ aikavyöhyke: 'America/New_York' })); // 2026-02-21T09:00:00-05:00
// Käyttää tuntematonta päivämäärämerkkijonoa const otherDate = Temporal.Instant.from('21/26 9:00:00'); // RangeError: Aikavirhe: Virheellinen merkki jäsennettäessä vuosiarvoa.
Päivämäärämerkkijonon tarkat vaatimukset riippuvat siitä, millaista Temporaalista objektia olet luomassa. Yllä olevassa esimerkissä Temporal.Instant vaatii täyden ISO:n8601- tai RFC 9557 -päivämäärämerkkijono, joka määrittää päivämäärän ja kellonajan aikavyöhykesiirrolla, mutta voit myös luoda PlainDate- tai PlainTime-objekteja käyttämällä vain päivämäärämuodon osajoukkoa. const myDate = Temporal.PlainDate.from('2026-02-21'); console.log(myDate.toString()); // 21-02-2026
const myTime = Temporal.PlainTime.from('09:00:00'); console.log(myTime.toString()); // 09:00:00
Huomaa, että näiden merkkijonojen on silti oltava odotetun muodon mukaisia, tai muuten tapahtuu virhe.
// Yhteensopimattomien aikamerkkijonojen käyttäminen. Nämä kaikki aiheuttavat RangeErrorin. Temporal.PlainTime.from('9:00'); Temporal.PlainTime.from('9:00:00 AM');
Ammattilaisen vinkki: Muiden kuin ISO-merkkijonojen käsittelyKoska Temporal asettaa luotettavuuden etusijalle, se ei yritä arvata merkkijonon muotoa, kuten 02-01-2026. Jos tietolähteesi käyttää tällaisia merkkijonoja, sinun on suoritettava jonkin verran merkkijonojen käsittelyä arvojen järjestämiseksi uudelleen ISO-merkkijonoksi, kuten 2026-02-01, ennen kuin yrität käyttää sitä Temporalin kanssa.
Muotoilu Kun sinulla on hetkellinen tai ajallinen objekti, haluat todennäköisesti muuntaa sen muotoilluksi merkkijonoksi jossain vaiheessa. Tämä on esimerkki, jossa Moment on hieman suppeampi. Kutsut objektin muotomenetelmää merkkijonolla, joka kuvaa haluttua päivämäärämuotoa. const date = hetki();
console.log(date.format('KK/PP/VVVV')); // 22.2.2026
console.log(date.format('MMMM Do VVVV, h:mm:ss a')); // 22. helmikuuta 2026, 20.18.30
Toisaalta Temporal edellyttää, että olet hieman monisanaisempi. Temporaalisilla objekteilla, kuten Instantilla, on toLocaleString-menetelmä, joka hyväksyy objektin ominaisuuksiksi määritettyjä erilaisia muotoiluvaihtoehtoja.
const date = Temporal.Now.instant();
// ilman argumentteja, saamme oletusmuodon nykyiselle maa-asetukselle console.log(date.toLocaleString()); // 22.2.2026, 20:23:36 (olettaen, että kieli on en-US)
// välitä muotoiluasetukset mukautetun muotomerkkijonon luomiseksi console.log(date.toLocaleString('en-US', { kuukausi: 'pitkä', päivä: 'numeerinen', vuosi: 'numeerinen', tunti: '2-numeroinen', minuutti: '2-numeroinen' })); // 22. helmikuuta 2026, klo 20.23
// välittää vain haluamasi kentät muotomerkkijonossa console.log(date.toLocaleString('en-US', { kuukausi: 'lyhyt', päivä: 'numeerinen' })); // 22. helmikuuta
Temporaalinen päivämäärän muotoilu itse asiassa käyttää Intl.DateTimeFormat API:ta (joka on jo helposti saatavilla nykyaikaisissa selaimissa) konepellin alla. Tämä tarkoittaa, että voit luoda uudelleen käytettävän DateTimeFormat-objektin mukautetuilla muotoiluvaihtoehdoilla ja siirtää sitten Temporal-objektit sen muotoilumenetelmään. Tästä syystä se ei tue mukautettuja päivämäärämuotoja, kuten Moment. Jos tarvitset esimerkiksi Q1 2026 -muotoilua tai muuta erikoismuotoilua, saatat tarvita mukautetun päivämäärän muotoilukoodin tai kolmannen osapuolen kirjaston. const formatter = new Intl.DateTimeFormat('en-US', { kuukausi: '2-numeroinen', päivä: '2-numeroinen', vuosi: 'numeerinen' });
const date = Temporal.Now.instant(); console.log(formatter.format(date)); // 22.2.2026
Momentin muotoilutunnisteet on yksinkertaisempi kirjoittaa, mutta ne eivät ole kieli-ystävällisiä. Muotomerkkijono "kova koodi" asioita, kuten kuukausi/päivä järjestys. Konfigurointiobjektin käytön etuna, kuten Temporal tekee, on, että se mukautuu automaattisesti mihin tahansa tiettyyn alueeseen ja käyttää oikeaa muotoa. const date = Temporal.Now.instant();
const formatOptions = { kuukausi: 'numeerinen', päivä: 'numeerinen', vuosi: 'numeerinen' };
console.log(date.toLocaleString('en-US', formatOptions)); // 22.2.2026
console.log(date.toLocaleString('en-GB', formatOptions)); // 22/02/2026
Päivämäärälaskelmat Monissa sovelluksissa sinun on lopulta suoritettava laskelmia päivämääränä. Voit halutessasi lisätä tai vähentää aikayksiköitä (päiviä, tunteja, sekunteja jne.). Jos sinulla on esimerkiksi nykyinen päivämäärä, saatat haluta näyttää käyttäjälle päivämäärän viikon kuluttua. Hetkiobjekteilla on menetelmiä, kuten yhteen- ja vähennyslasku, jotka suorittavat nämä toiminnot. Nämä funktiot ottavat arvon ja yksikön, esimerkiksi: add(7, 'days'). Yksi erittäin tärkeä ero Momentin ja Temporaalin välillä on kuitenkin se, että näitä päivämäärälaskuja suoritettaessa taustalla olevaa objektia muutetaan ja sen alkuperäinen arvo menetetään. const nyt = hetki();
console.log(nyt); // Hetki<2026-02-24T20:08:36-05:00>
const nextWeek = now.add(7, 'days'); console.log(nextWeek); // Hetki<2026-03-03T20:08:36-05:00>
// Gotcha - alkuperäinen objekti oli mutatoitu console.log(nyt); // Hetki<2026-03-03T20:08:36-05:00>
Voit välttää alkuperäisen päivämäärän menettämisen luomalla kopion kutsumalla Moment-objektin kloonin. jatkuu nyt= hetki(); const nextWeek = now.clone().add(7, 'days');
console.log(nyt); // Hetki<2026-02-24T20:12:55-05:00>
console.log(nextWeek); // Hetki<2026-03-03T20:12:55-05:00>
Toisaalta ajalliset objektit ovat muuttumattomia. Kun olet luonut objektin, kuten Instant-, PlainDate- ja niin edelleen, objektin arvo ei koskaan muutu. Temporaalisilla objekteilla on myös yhteen- ja vähennysmenetelmiä. Temporal on hieman nirso sen suhteen, mitä aikayksiköitä voidaan lisätä mihinkin objektityyppiin. Et esimerkiksi voi lisätä päiviä Instantiin:
const now = Temporal.Now.instant(); const nextWeek = now.add({ päivää: 7 }); // RangeError: Aikavirhe: Suurin yksikkö ei voi olla päivämääräyksikkö
Tämä johtuu siitä, että Instant-objektit edustavat tiettyä ajankohtaa UTC:ssä ja ovat kalenteriagnostisia. Koska päivän pituus voi muuttua aikavyöhykesääntöjen, kuten kesäajan, mukaan, tämä laskelma ei ole käytettävissä Instantissa. Voit kuitenkin suorittaa tämän toiminnon muun tyyppisille objekteille, kuten PlainDateTime: const now = Temporal.Now.plainDateTimeISO(); console.log(now.toLocaleString()); // 24.2.2026, 20:23:59
const nextWeek = now.add({ päivää: 7 });
// Huomaa, että alkuperäinen PlainDateTime pysyy muuttumattomana console.log(now.toLocaleString()); // 24.2.2026, 20:23:59
console.log(nextWeek.toLocaleString()); // 3/3/2026, 20:23:59
Voit myös laskea, kuinka paljon aikaa on kahden hetkellisen tai ajallisen objektin välillä. Momentin erotusfunktiolla sinun on annettava tarkkuuden yksikkö, muuten se palauttaa eron millisekunteina. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(date2.diff(päiväys1)); // 91800000
console.log(date2.diff(päiväys1, 'päivää')); // 1
Voit tehdä tämän Temporaalisen objektin kanssa siirtämällä toisen Temporaalisen objektin sen asti tai koska -metodeille. Tämä palauttaa Temporal.Duration-objektin, joka sisältää tietoja aikaerosta. Kesto-objektilla on ominaisuuksia jokaiselle eron komponentille, ja se voi myös luoda aikaeroa edustavan ISO 8601 -kestomerkkijonon.
const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00'); const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');
// Suurin Yksikkö määrittää suurimman esitettävän aikayksikön // keston laskennassa const diff = päivämäärä2.alkaen(päivämäärä1, { suurin Yksikkö: 'päivä' });
console.log(diff.days); // 1
console.log(diff.hours); // 1
console.log(diff.minutes); // 30
console.log(diff.toString()); // P1DT1H30M // (ISO 8601:n kestomerkkijono: 1 päivä, 1 tunti, 30 minuuttia)
Päivämäärien ja aikojen vertailu Momentin ja Temporalin avulla voit vertailla päivämääriä ja aikoja määrittääksesi, kumpi on ennen toista, mutta käyttää erilaisia lähestymistapoja API:n kanssa. Moment tarjoaa menetelmiä, kuten isBefore, isAfter ja isSame kahden Moment-objektin vertailuun. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(date1.isBefore(date2)); // totta
Temporal käyttää staattista vertailumenetelmää kahden samantyyppisen objektin vertailuun. Se palauttaa -1, jos ensimmäinen päivämäärä tulee ennen toista, 0, jos ne ovat yhtä suuret, tai 1, jos ensimmäinen päivämäärä tulee toisen jälkeen. Seuraava esimerkki näyttää kuinka vertailla kahta PlainDate-objektia. Molempien parametrien Temporal.PlainDate.compare on oltava PlainDate-objekteja.
const date1 = Temporal.PlainDate.from({ vuosi: 2026, kuukausi: 2, päivä: 24 }); const date2 = Temporal.PlainDate.from({ vuosi: 2026, kuukausi: 3, päivä: 24 });
// päivämäärä1 tulee ennen päivämäärä2, joten -1 console.log(Temporal.PlainDate.compare(päiväys1, päivämäärä2));
// Virhe, jos yritämme verrata kahta erityyppistä objektia console.log(Temporal.PlainDate.compare(date1, Temporal.Now.instant())); // TypeError: Temporal error: Virheelliset PlainDate-kentät.
Tämä helpottaa erityisesti ajallisten objektien joukon lajittelua kronologisesti. // Joukko Temporal.PlainDate-objekteja const päivämäärät = [ ... ];
// käytä Temporal.PlainDate.compare-funktiota vertailufunktiona päivämäärät.lajittelu(Temporal.PlainDate.compare);
Aikavyöhykemuunnokset Momentin ydinkirjasto ei tue aikavyöhykemuunnoksia. Jos tarvitset tätä toimintoa, sinun on asennettava myös moment-timezone-paketti. Tämä paketti ei ole puiden ravistettavissa, ja siksi se voi lisätä merkittävästi nippusi kokoa. Kun olet asentanut hetken aikavyöhykkeen, voit muuntaa Moment-objektit eri aikavyöhykkeiksi tz-menetelmällä. Kuten muissakin Moment-operaatioissa, tämä muuttaa taustaaesine. // Olettaen Yhdysvaltain itäisen ajan const nyt = hetki(); console.log(nyt); // Hetki<2026-02-28T20:08:20-05:00>
// Muunna Tyynenmeren aikaan. // Alkuperäinen itäinen aika on kadonnut. now.tz('Amerikka/Los_Angeles'); console.log(nyt); // Hetki<2026-02-28T17:08:20-08:00>
Aikavyöhyketoiminto on sisäänrakennettu Temporal API:hen käytettäessä Temporal.ZonedDateTime-objektia. Nämä objektit sisältävät withTimeZone-menetelmän, joka palauttaa uuden ZonedDateTime-arvon, joka edustaa samaa ajanhetkeä, mutta määritetyllä aikavyöhykkeellä. // Jälleen, olettaen Yhdysvaltain itäisen ajan const now = Temporal.Now.zonedDateTimeISO(); console.log(now.toLocaleString()); // 28.2.2026, 20:12:02 EST
// Muunna Tyynenmeren aikaan const nowPacific = now.withTimeZone('Amerikka/Los_Angeles'); console.log(nowPacific.toLocaleString()); // 28.2.2026, 17:12:02 PST
// Alkuperäinen objekti pysyy ennallaan console.log(now.toLocaleString()); // 28.2.2026, 20:12:02 EST
Huomautus: toLocaleStringin palauttamat muotoillut arvot ovat, kuten nimestä voi päätellä, aluekohtaisia. Esimerkkikoodi on kehitetty en-US-kielellä, joten muoto on seuraava: 28.2.2026, 17:12:02 PST. Toisella alueella tämä voi olla erilainen. Esimerkiksi en-GB-kielellä saat jotain esimerkiksi 28/2/2026, 17:12:02 GMT-8. Tosimaailman refaktorointi Oletetaan, että rakennamme sovellusta tapahtumien ajoittamiseen aikavyöhykkeille. Osa tätä sovellusta on funktio, getEventTimes, joka ottaa ISO 8601 -merkkijonon, joka edustaa tapahtuman aikaa ja päivämäärää, paikallista aikavyöhykettä ja tavoiteaikavyöhykettä. Toiminto luo muotoiltuja aika- ja päivämäärämerkkijonoja tapahtumalle molemmille aikavyöhykkeille. Jos funktiolle annetaan syötemerkkijono, joka ei ole kelvollinen aika/päivämäärämerkkijono, se antaa virheilmoituksen. Tässä on alkuperäinen toteutus, jossa käytetään Momentia (edellyttää myös hetken aikavyöhykepaketin käyttöä).
tuo hetki 'hetken aikavyöhykkeestä';
function getEventTimes(inputString, userTimeZone, targetTimeZone) { const timeFormat = 'KKM D, VVVV, h:mm:ss a z';
// 1. Luo alkuhetki käyttäjän aikavyöhykkeelle const eventTime = moment.tz( inputString, moment.ISO_8601, // Odota ISO 8601 -merkkijonoa tosi, // Tiukka jäsennys userTimeZone );
// Anna virheilmoituksen, jos inputString ei edusta kelvollista päivämäärää if (!eventTime.isValid()) { throw new Error('Virheellinen päivämäärä/aikasyöttö'); }
// 2. Laske tavoiteaika // KRIITTINEN: Meidän on kloonattava, tai "tapahtumaaika" muuttuu ikuisesti! const kohdeaika = eventTime.clone().tz(targetTimeZone);
return { paikallinen: eventTime.format(timeFormat), kohde: targetTime.format(timeFormat), }; }
const aikataulu = getEventTimes( "2026-03-05T15:00-05:00", "America/New_York", "Eurooppa/Lontoo", );
console.log(schedule.local); // 5. maaliskuuta 2026, 15:00:00 EST
console.log(schedule.target); // 5. maaliskuuta 2026, 20:00:00 GMT
Tässä esimerkissä käytämme odotettua päivämäärämuotoa ISO 8601, joka on hyödyllinen Momentin sisäänrakennettu. Käytämme myös tiukkaa jäsentämistä, mikä tarkoittaa, että Moment ei yritä arvata päivämäärämerkkijonoa, joka ei vastaa muotoa. Jos välitetään ei-ISO-päivämäärämerkkijono, se johtaa virheelliseen päivämääräobjektiin ja annamme virheilmoituksen. Temporaalinen toteutus näyttää samanlaiselta, mutta siinä on muutamia keskeisiä eroja.
function getEventTimes(inputString, userTimeZone, targetTimeZone) { // 1. Jäsennä syöte suoraan Instantiin ja luo sitten // ZonedDateTime käyttäjän vyöhykkeellä. const instant = Temporal.Instant.from(syötemerkkijono); const tapahtumaAika = instant.toZonedDateTimeISO(userTimeZone);
// 2. Muunna kohdealueeksi // Tämä palauttaa automaattisesti UUDEN objektin; "EventTime" on turvallinen. const kohdeaika = tapahtumaaika.aikavyöhykkeen kanssa(tavoiteaikavyöhyke);
// 3. Muotoile Intl:llä (sisäänrakennettu) const option = { vuosi: 'numeerinen', kuukausi: 'lyhyt', päivä: 'numeerinen', tunti: 'numeerinen', minuutti: '2-numeroinen', toinen: '2-numeroinen', timeZoneName: 'lyhyt' };
return { paikallinen: eventTime.toLocaleString(navigator.language, options), kohde: targetTime.toLocaleString(navigator.language, options) }; }
const aikataulu = getEventTimes( "2026-03-05T15:00-05:00", "America/New_York", "Eurooppa/Lontoo", );
console.log(schedule.local); // 5. maaliskuuta 2026, 15:00:00 EST
console.log(schedule.target); // 5. maaliskuuta 2026, 20:00:00 GMT
Momentin kanssa meidän on erikseen määritettävä muotomerkkijono tuloksena oleville päivämäärämerkkijonoille. Riippumatta käyttäjän sijainnista tai alueesta, tapahtuma-ajat muotoillaan aina 5. maaliskuuta 2026 klo 3.00.00pm EST. Meidän ei myöskään tarvitse nimenomaisesti tehdä poikkeusta. Jos Temporal.Instant.from-tiedostoon välitetään virheellinen merkkijono, Temporal tekee poikkeuksen meille. Yksi huomioitava asia on, että vaikka tiukka jäsennys olisikin, Moment-versio on silti lempeämpi. Temporal vaatii aikavyöhykkeen siirtymän merkkijonon lopussa. Huomaa myös, että koska käytämme navigator.languagea, tämä koodi toimii vain selainympäristössä, koska navigaattoria ei ole määritetty Node.js-ympäristössä. Temporal-toteutus käyttää selaimen nykyistä aluetta (navigator.language), joten käyttäjä saa automaattisesti tapahtumaajat muotoiltuina paikalliseen aikamuotoon. En-USA:ssa tämä on 5. maaliskuuta 2026, 15:00:00 EST. Kuitenkin, jos käyttäjä on esimerkiksi Lontoossa, tapahtuma-ajat muotoillaan 5. maaliskuuta 2026, 15:00:00 GMT-5. Yhteenveto
Toiminta Moment.js Ajallinen Nykyinen aika hetki () Temporal.Now.zonedDateTimeISO() Jäsentää ISO hetki (str) Temporal.Instant.from(str) Lisää aikaa .add(7, 'days') (muuttaa) .add({ päivää: 7 }) (uusi objekti) Ero .diff(muu, 'tunnit') .alkaen(other).tuntia Aikavyöhyke .tz('Vyöhyke/nimi') .withTimeZone('Vyöhyke/Nimi')
Ensi silmäyksellä ero voi olla hieman erilainen (ja Temporal-syntaksin tapauksessa toisinaan monisanaisempi ja tiukempi), mutta Temporalin käytöllä on useita keskeisiä etuja Moment.js:ään verrattuna:
Selkeämpi tarkoittaa vähemmän yllätyksiä ja tahattomia virheitä. Hetki saattaa vaikuttaa lempeämmältä, mutta siihen liittyy "arvailua", joka voi joskus johtaa vääriin päivämääriin. Jos annat Temporalille jotain virheellistä, se antaa virheen. Jos koodi suoritetaan, tiedät, että sinulla on kelvollinen päivämäärä. Moment voi lisätä merkittävästi sovelluksen nippua, varsinkin jos käytät hetken aikavyöhykepakettia. Temporal ei lisää mitään (kun se on toimitettu kohdeselaimissasi). Muuttumattomuus antaa sinulle varmuuden siitä, että et koskaan menetä tai korvaa tietoja suorittaessasi päivämäärän muunnoksia ja toimintoja. Erilaisia ajan esityksiä (Instant, PlainDateTime, ZonedDateTime) tarpeidesi mukaan, missä Moment on aina UTC-aikaleiman kääre. Temporal käyttää Intl-sovellusliittymiä päivämäärän muotoiluun, mikä tarkoittaa, että voit käyttää kielikohtaista muotoilua ilman, että sinun tarvitsee erikseen määrittää tunnuksia.
Huomautuksia Polyfillistä Kuten aiemmin mainittiin, käytettävissä on Temporal polyfill, joka jaetaan npm-paketina nimeltä @js-temporal/polyfill. Jos haluat käyttää Temporalia tänään, tarvitset tämän polyfillin tukemaan selaimia, kuten Safaria, jotka eivät ole vielä toimittaneet APIa. Huono uutinen tässä on, että se lisää nippusi kokoa. Hyvä uutinen on, että se lisää silti huomattavasti vähemmän kuin hetken tai hetken aikavyöhyke. Tässä on vertailu nippukokoista, kuten Bundlephobia.com raportoi, verkkosivusto, joka tarjoaa tietoja npm-pakkauskooista (napsauta kunkin paketin nimeä nähdäksesi Bundlephobia-analyysin):
Paketti Pienennetty Pienennetty ja gzipped @js-temporal/polyfill 154,1 kt 44,1 kt hetki 294,4 kt 75,4 kt hetki-aikavyöhyke 1 Mt 114,2 kt
Polytäytteellä on myös historiallisesti ollut joitain suorituskykyongelmia muistin käytössä, ja kirjoitushetkellä sen katsotaan olevan alfa-tilassa. Tämän vuoksi et ehkä halua käyttää sitä tuotannossa ennen kuin se saavuttaa kypsemmät tilat. Toinen hyvä uutinen on, että toivottavasti polyfillia ei tarvita enää kauaa (ellei tietysti tarvitse tukea vanhempia selaimia). Kirjoitushetkellä Temporal toimitettiin Chromessa, Edgessä ja Firefoxissa. Se ei ole vielä aivan valmis Safarissa, vaikka se näyttää olevan saatavana suorituksenaikaisella lipulla uusimmassa Technology Previewissa.
