Päivämäärien muotoilu
Näyttäkää päivämäärät toLocaleDateString-asetuksilla.
Päivämäärien muotoilu on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Päivämäärien muotoilu
JavaScript tarjoaa useita sisäänrakennettuja menetelmiä päivämäärän muuntamiseen luettavaksi tekstiksi. Vaihtoehtoina ovat esimerkiksi kielialueen huomioiva tuloste ja standardoidut ISO-merkkijonot.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())toISOString
toISOString palauttaa standardoidun UTC-aikaisen merkkijonon. Se sopii tallennukseen ja tietojen vaihtoon, koska tulkinnanvaraa ei ole.
const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())ISO-merkkijonon osan irrottaminen
ISO-merkkijonossa päivämäärä on alussa, joten voitte irrottaa kymmenen ensimmäistä merkkiä saadaksenne pelkän kalenteripäivän.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))toLocaleDateString
toLocaleDateString muotoilee päivämääräosuuden kielialueen mukaisesti ja tuottaa alueelle sopivan tulosteen.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)Kielialueargumentti
Ensimmäinen argumentti on kielialuetunniste, kuten en-US tai de-DE, joka muuttaa muotoillun päivämäärän järjestystä ja erottimia.
const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)Muotoiluasetukset
Asetusolio antaa teidän valita, miten kukin osa näytetään, esimerkiksi pitkänä kuukauden nimenä tai numeerisena vuosilukuna.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)toLocaleTimeString
toLocaleTimeString muotoilee vain aikaosuuden ja huomioi jälleen kielialueen sekä antamanne asetukset.
const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)toLocaleString
toLocaleString yhdistää päivämäärän ja ajan yhdeksi lokalisoiduksi merkkijonoksi.
const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)toDateString
toDateString palauttaa kiinteän, ihmiselle luettavan englanninkielisen päivämäärän ilman kielialueasetuksia. Se sopii nopeaan lokitukseen.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())Intl.DateTimeFormat
Toistuvaa muotoilua varten Intl.DateTimeFormat luo uudelleenkäytettävän muotoiluolion, mikä on tehokkaampaa kuin kielialuemenetelmien kutsuminen monta kertaa.
const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))Muodon valitseminen
Käyttäkää ISO-merkkijonoja tallennukseen ja API-rajapintoihin sekä kielialuemenetelmiä käyttäjien alueen mukaiseen näyttöön. Pitäkää nämä käyttötarkoitukset erillään.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Pikatarkistus
Testatkaa tietonne muotoilusta.
Kertaus
Kertaus: Valitkaa kuhunkin tarkoitukseen sopiva muotoilumenetelmä.
- toISOString tallennukseen ja API-rajapintoihin
- toLocaleDateString ja vastaavat menetelmät käyttäjän näkymää varten
- Asetukset hallitsevat kuukauden nimiä ja lukujen esitystapoja
- Intl.DateTimeFormat on tehokas toistuvassa muotoilussa
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))
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
Usein kysytyt kysymykset
Onko oppitunti ”Päivämäärien muotoilu” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Päivämäärien muotoilu”. 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 ”Päivämäärien muotoilu”?
Näyttäkää päivämäärät toLocaleDateString-asetuksilla. 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 3/4.
Kuinka kauan ”Päivämäärien muotoilu”-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
- Päivämäärien luominen ja lukeminen
- Aikaleimat ja päivämäärälaskenta
- Päivämäärien muotoilu
- Aikavyöhykkeet ja UTC