JavaScript Academy · Oppitunti

Aikavyöhykkeet ja UTC

Käsitelkää UTC-aikaa ja paikallista aikaa oikein.

Oppitunti 4/413 vaihetta

Aikavyöhykkeet ja UTC on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Paikallinen aika ja UTC

Päivämäärä tallentaa yhden absoluuttisen ajankohdan, mutta sen voi lukea paikallisena aikana tai UTC-aikana, joka on maailmanlaajuinen viiteaika. Getter-metodeista on saatavilla molemmat versiot.

const d = new Date(Date.UTC(2024, 0, 15, 12, 0, 0))
console.log(d.getUTCHours())

UTC-getterit

UTC-etuliitteellä alkavat metodit, kuten getUTCFullYear ja getUTCHours, lukevat päivämäärän osat UTC-aikavyöhykkeellä koneesta riippumatta.

const d = new Date(Date.UTC(2024, 5, 15, 8, 30, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCHours())
console.log(d.getUTCMinutes())

getTimezoneOffset

getTimezoneOffset palauttaa paikallisen ajan ja UTC-ajan välisen eron minuutteina. Positiivinen arvo tarkoittaa, että paikallinen aika on UTC-aikaa jäljessä.

const d = new Date()
const offset = d.getTimezoneOffset()
console.log(typeof offset)

Aikaeron etumerkki

Aikaeron etumerkki toimii päinvastoin kuin monet odottavat: UTC-aikaa edellä oleva aikavyöhyke antaa negatiivisen aikaeron. Muuntakaa minuutit tunneiksi jakamalla ne 60:llä.

const offsetMinutes = 120
const hours = offsetMinutes / 60
console.log(hours)

UTC-päivämäärien luominen

Date.UTC käyttää samoja komponenttiargumentteja kuin konstruktori, mutta tulkitsee ne UTC-aikana ja palauttaa aikaleiman, jonka voitte välittää new Date -kutsulle.

const ts = Date.UTC(2024, 0, 1, 0, 0, 0)
const d = new Date(ts)
console.log(d.getUTCHours())

UTC-setterit

setUTCHoursin kaltaiset setterit muokkaavat päivämäärää UTC-aikavyöhykkeellä. Ne vastaavat paikallisia settereitä, mutta perustuvat UTC-aikaan.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
d.setUTCHours(15)
console.log(d.getUTCHours())

Z ISO-merkkijonoissa

ISO-merkkijonon lopussa oleva Z tarkoittaa, että aika on UTC-aikaa, josta käytetään myös nimitystä Zulu-aika. Merkkijonot, joissa sitä ei ole, voidaan tulkita paikalliseksi ajaksi.

const d = new Date("2024-01-15T10:00:00Z")
console.log(d.getUTCHours())

Sama hetki, eri lukemat

Paikalliset getterit ja UTC-getterit kuvaavat samaa ajanhetkeä eri aikavyöhykkeillä, joten niiden tuntiarvot voivat poiketa toisistaan aikaeron verran.

const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

Tallentaminen UTC-aikana

Yleinen hyvä käytäntö on tallentaa kaikki päivämäärät UTC-aikana ja muuntaa ne paikalliseksi ajaksi vasta näyttämistä varten. Näin vältetään eri alueiden väliseen tulkintaan liittyvä epäselvyys.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
console.log(d.toISOString())

Aikavyöhykkeen määrittäminen

Muotoilumetodit hyväksyvät timeZone-option, jonka avulla voitte näyttää ajanhetken nimenomaisesti valitulla aikavyöhykkeellä, kuten UTC-aikavyöhykkeellä.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)

Ongelmien välttäminen

Paikallisten ja UTC-metodien sekoittaminen saman päivämäärän käsittelyssä aiheuttaa vaikeasti havaittavia virheitä. Valitkaa kuhunkin laskentaan yksi malli ja käyttäkää sitä johdonmukaisesti.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCMonth())

Pikatarkistus

Testatkaa aikavyöhykkeitä koskevat tietonne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Kertaus: Lukekaa ja kirjoittakaa päivämääriä johdonmukaisesti joko paikallisena aikana tai UTC-aikana.

UTC-getterit ja -setterit toimivat maailmanlaajuisella UTC-aikavyöhykkeellä
getTimezoneOffset palauttaa minuutit, ja etumerkki toimii päinvastoin
Z-pääte merkitsee ISO-merkkijonon UTC-ajaksi
Tallentakaa UTC-aikana ja näyttäkää paikallisena aikana

const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Aikavyöhykkeet ja UTC” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Aikavyöhykkeet ja UTC”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Aikavyöhykkeet ja UTC”?

Käsitelkää UTC-aikaa ja paikallista aikaa oikein. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Aikavyöhykkeet ja UTC”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy