Alt Du Trenger å Vite Om Dato i JavaScript

0
39

Dato er rart i JavaScript. Det blir på nervene så mye at vi nå for biblioteker (som Dato-fns og Øyeblikket) det øyeblikket (ha!) vi trenger å jobbe med dato og klokkeslett.

Men vi er ikke alltid nødvendig å bruke biblioteker. Dato kan faktisk være ganske enkelt hvis du vet hva du skal se opp for. I denne artikkelen, jeg vil gå gjennom alt du trenger å vite om Dato objektet.

Først, la oss erkjenne eksistensen av tidssoner.

Tidssoner

Det er hundrevis av tidssoner i vår verden. I JavaScript, vi bare bryr seg om to Lokal Tid og utc (Universal Time (UTC).

  • Lokal tid refererer til tidssonen datamaskinen er på.
  • UTC er synonymt med Greenwich Mean Time (GMT) i praksis.

Som standard, nesten hver dato metode i JavaScript (bortsett fra én) gir deg en dato/klokkeslett i lokal tid. Du får bare UTC hvis du angir UTC.

Med dette, kan vi snakke om å skape datoer.

Opprette en dato

Du kan opprette en dato med ny Dato(). Det er fire mulige måter å bruke new Date ()):

  1. Med en date-string
  2. Med dato argumenter
  3. Med et tidsstempel
  4. Med noen argumenter

Dato-string-metoden

I dato-string-metoden, kan du opprette en dato ved å sende en date-string til ny Dato.

ny Dato(‘1988-03-21’)

Vi har en tendens mot dato-string-metoden når vi skriver datoer. Dette er naturlig fordi vi har vært ved hjelp av dato strenger alle våre liv.

Hvis jeg skriver 21-03-1988, du har ingen problemer deducing det er 21. Mars, 1988. Ja? Men hvis du skriver 21-03-1988 i JavaScript, får du Ugyldig Dato.

ny Dato(’21-03-1988′) returnerer Ugyldig Dato.

Det er en god grunn for dette.

Vi tolke dato strenger forskjellig i ulike deler av verden. For eksempel 11-06-2019 er enten 11. juni, 2019 eller 6. November 2019. Men du kan ikke være sikker på hvilken jeg henviser til, med mindre du vet datoen system jeg bruker.

I JavaScript, hvis du ønsker å bruke en dato, string, må du bruke et format som er akseptert over hele verden. Ett av disse formatene er ISO 8601 Utvidet format.

// ISO 8601 Utvidet format
`YYYY-MM-DDTHH:mm:ss:sssZ`

Her er hva verdiene betyr:

  • ÅÅÅÅ: 4-sifret år
  • MM: 2-sifret måned (januar hvor er 01 og desember er 12)
  • DD: 2-siffer dato (0 til 31)
  • -: Dato skilletegn
  • T: Angir start-tid
  • HH: 24-sifret time (0 til 23)
  • mm: Minutter (0 til 59)
  • ss: Sekunder (0 til 59)
  • sss: Millisekunder (0 til 999)
  • :: På tide skilletegn
  • Z: Hvis Z er til stede, dato vil bli satt til UTC. Hvis Z er ikke til stede, vil det være Lokal Tid. (Dette gjelder bare hvis tid er gitt.)

Timer, minutter, sekunder og millisekunder er valgfri hvis du oppretter en dato. Så, hvis du ønsker å opprette en dato for 11. juni 2019, kan du skrive dette:

ny Dato(‘2019-06-11’)

Vær spesielt oppmerksom her. Det er et stort problem med å skape datoer med dato strenger. Du kan oppdage problemet hvis du konsollen.logg denne dato.

Hvis du bor i et område som er bak GMT, vil du få en dato som sier 10. juni.

ny Dato(‘2019-06-11’) produserer 10. juni hvis du er på et sted bak GMT.

Hvis du bor i et område som er foran GMT, vil du få en dato som sier 11. juni.

ny Dato(‘2019-06-11’) produserer 11. juni hvis du er på et sted etter GMT.

Dette skjer fordi dato-string-metoden har en særegen atferd: Dersom du oppretter en dato (uten å angi tid), får du en dato satt i UTC.

I scenarioet over, når du skriver new Date(‘2019-06-11’), kan du faktisk lage en dato som sier 11. juni, 2019, 12am UTC. Dette er grunnen til at folk som bor i områder bak GMT få en 10. juni i stedet for 11. juni.

Hvis du ønsker å opprette en dato i Lokalt Klokkeslett med dato-string-metoden, må du ta tid. Når du tar tid, du trenger for å skrive HH og mm på et minimum (eller Google Chrome returnerer et ugyldig dato).

ny Dato(‘2019-06-11T00:00’)

Dato opprettet i Lokal Tid vsl. Dato opprettet i UTC.

Hele Lokal Tid vs. UTC ting med date-strenger kan være en mulig kilde til feil som er vanskelig å fange. Så, jeg anbefaler deg å ikke lage datoer med dato strenger.

(Forresten, MDN advarer mot dato-streng tilnærming siden nettlesere kan analysere dato strenger på en annen måte).

MDN anbefaler mot å skape oppdatert med dato strenger.

Hvis du ønsker å opprette datoer, bruke argumenter eller tidsstempler.

Opprette datoer med argumenter

Du kan passere i opp til syv argumenter for å opprette en dato/klokkeslett.

  1. År: 4-sifret år.
  2. Måned: Måned i året (0-11). Måneden er null-indeksert. Standard er 0 hvis utelatt.
  3. Dag: Dagen i måneden (1-31). Standard er 1 hvis utelatt.
  4. Time: Time på dagen (0-23). Standard er 0 hvis utelatt.
  5. Minutter: Minutter (0-59). Standard er 0 hvis utelatt.
  6. Sekunder: Sekunder (0-59). Standard er 0 hvis utelatt.
  7. Millisekunder: Millisekunder (0-999). Standard er 0 hvis utelatt.

// 11. juni 2019, 5:23:59am, Lokal Tid
ny Dato(2019, 5, 11, 5, 23, 59)

Mange utviklere (meg selv inkludert) unngå argumentene tilnærming fordi det ser komplisert. Men det er faktisk ganske enkelt.

Prøv å lese tallene fra venstre til høyre. Som du går fra venstre til høyre, kan du sette inn verdier i avtagende størrelse: år, måned, dag, timer, minutter, sekunder, og millisekunder.

ny Dato(2017, 3, 22, 5, 23, 50)

// Denne dato kan være lett å lese, hvis du følger den venstre-høyre-formel.
// År: 2017,
// Måned: April (fordi måned er null-indeksert)
// Dato: 22
// Timer: 05
// Minutt: 23
// Sekunder: 50

De mest problematiske del med Dato, er at den Måned verdien er null-indeksert, som i januar === 0, februar === 1, Mars === 2 og så videre.

Vi har ingen anelse om hvorfor måned i JavaScript er null-indeksert, men det er. I stedet for å krangle om hvorfor januar bør være 1 (og ikke 0), er det bedre å akseptere at måned er null-indeksert i JavaScript. Når du akseptere dette faktum, datoer blitt mye enklere å jobbe med.

Her er noen flere eksempler for deg å gjøre deg kjent:

// 21. Mars 1988, 12am, Lokal Tid.
ny Dato(1988, 2, 21)

// 25. desember 2019, 8am, Lokal Tid.
ny Dato(2019, 11, 25, 8)

// 6. November 2023, 2:20am, Lokal Tid
ny Dato(2023, 10, 6, 2, 20)

// 11. juni 2019, 5:23:59am, Lokal Tid
ny Dato(2019, 5, 11, 5, 23, 59)

Varsel datoer som er opprettet med argumenter er alle i Lokal Tid?

Det er en av fordelene med å bruke argumenter—du vil ikke bli forvirret mellom Lokal Tid og UTC. Hvis du noen gang trenger UTC, oppretter du en dato i UTC denne måten:

// 11. juni 2019, 12am UTC.
ny Dato(Dato.UTC(2019, 5, 11))
Opprette datoer med tidsstempler

I JavaScript, et tidsstempel er mengden av millisekunder gått siden 1. januar 1970 (1. januar 1970 er også kjent som Unix epoch tid). Fra min erfaring er at du sjelden bruker, tidsstempler for å skape datoer. Du bare bruker tidsstempler til å sammenligne mellom ulike datoer (mer om dette senere).

// 11. juni 2019, 8am (i mine Lokal Tid, Singapore)
ny Dato(1560211200000)
Med noen argumenter

Hvis du vil opprette en dato uten noen argumenter, får du en dato nåværende tidspunkt (i Lokal Tid).

new Date()

Den gang som nå.

Du kan se på bildet at det er 25. Mai, 11:10am i Singapore, når jeg skrev denne artikkelen.

Oppsummering om å skape datoer

  1. Du kan opprette dato med ny Dato().
  2. Det er fire mulige syntaxes:
    1. Med en date string
    2. Med argumenter
    3. Med tidsstempel
    4. Med noen argumenter
  3. Aldri lage en date med dato string-metoden.
  4. Det er best å lage datoer med argumenter metode.
  5. Husker (og godta) denne måneden er null-indeksert i JavaScript.

Neste, la oss snakke om hvordan du konverterer en dato i en lesbar streng.

Hvis du formaterer en dato

De fleste programmeringsspråk gi deg en formatering verktøy for å lage en hvilken som helst Dato format du ønsker. For eksempel, i PHP, kan du skrive dato(“d-M-Y”) til en dato som Jan 23 2019.

Men det er ingen enkel måte å formatere en dato i JavaScript.

De innfødte Dato objektet leveres med syv formatering metoder. Hver av disse sju metoder gi deg med en bestemt verdi (og de er ganske ubrukelig).

const date = new Date(2019, 0, 23, 17, 23, 42)

  1. toString gir deg Ons Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time)
  2. toDateString gir deg Ons Jan 23 2019
  3. toLocaleString gir deg 23/01/2019, 17:23:42
  4. toLocaleDateString gir deg 23/01/2019
  5. toGMTString gir deg Wed, 23 Jan 2019 09:23:42 GMT
  6. toUTCString gir deg Wed, 23 Jan 2019 09:23:42 GMT
  7. toISOString gir deg 2019-01-23T09:23:42.079 Z

Hvis du trenger et egendefinert format, du trenger for å lage det selv.

Å skrive en egendefinert dato format

La oss si at du vil ha noe som Thu, 23 januar 2019. For å lage denne verdi, du trenger å vite (og bruk) dato metoder som kommer med Dato-objekt.

For å få datoer, kan du bruke disse fire metoder:

  1. getFullYear: Får 4-sifret året i henhold til lokal tid
  2. getMonth: Får måned i året (0-11) i henhold til lokal tid. Måneden er null-indeksert.
  3. getDate: Blir dagen i måneden (1-31) i henhold til lokal tid.
  4. getDay: Blir dagen i uken (0-6) i henhold til lokal tid. Dagen i uken begynner med søndag (0) og slutter med lørdag (6).

Det er enkelt å lage 23 2019 for Thu, 23 januar 2019. Vi kan bruke getFullYear og getDate å få dem.

const d = new Date(2019, 0, 23)
const år = d.getFullYear() // 2019
const date = d.getDate() // 23

Det er vanskeligere å få Thu og januar.

For å komme i januar, du trenger for å opprette et objekt som maps-verdien av alle tolv måneder til sine respektive navn.

const måneder = {
0: ‘januar’,
1: ‘februar’,
2: ‘Mars’,
3: ‘April’,
4: ‘Mai’,
5: ‘juni’,
6: ‘juli’,
7: ‘August’,
8: ‘September’,
9: ‘oktober’,
10: ‘November’,
11: ‘desember’
}

Siden Måned er null-indeksert, kan vi bruke en matrise i stedet for et objekt. Det gir samme resultat.

const måneder = [
‘Januar’,
‘Februar’,
‘Mars’,
‘April’,
‘Mai’,
‘Juni’,
‘Juli’,
‘August’,
‘September’,
‘Oktober’,
‘November’,
‘Desember’
]

For å komme i januar, må du:

  1. Bruk getMonth å få null-indeksert måned fra dato.
  2. Få måneden navn fra måneder

const monthIndex = d.getMonth()
const monthName = måneder(monthIndex)
– konsollen.logg(monthName) // januar

Den kondenserte versjonen:

const monthName = måneder(d.getMonth())
– konsollen.logg(monthName) // januar

Du kan gjøre det samme for å få Thu. Denne gangen, trenger du en tabell som inneholder syv dager i uken.

const dager = [
‘Søn’,
‘Man’,
‘Tir’,
‘Ons’,
‘Tor’,
‘Fre’,
‘Lør’
]

Deretter kan du:

  1. Få dayIndex med getDay
  2. Bruk dayIndex å få dayName

const dayIndex = d.getDay()
const dayName = dager[dayIndex] // Thu

Kort versjon:

const dayName = dager[d.getDay()] // Thu

Deretter kan du kombinere alle variablene som du har opprettet for å få formatert streng.

const formatert = `${dayName}, ${dato} ${monthName} ${året}`
– konsollen.logg(formatert) // Thu, 23 januar 2019

Ja, det er kjedelig. Men det er ikke umulig når du får taket på det.

Hvis du noen gang trenger å opprette en tilpasset-formatert tid, kan du bruke følgende metoder:

  1. getHours: Får timer (0-23) i henhold til lokal tid.
  2. getMinutes: Får minutter (0-59) i henhold til lokal tid.
  3. getSeconds: Blir sekunder (0-59) i henhold til lokal tid.
  4. getMilliseconds: Får millisekunder (0-999) i henhold til lokal tid.

Neste, la oss snakke om å sammenligne datoer.

Sammenligning av datoer

Hvis du ønsker å vite om en dato som kommer før eller etter en annen dato, kan du sammenligne dem direkte med >, <, >= og <=.

const tidligere = new Dato(2019, 0, 26)
const senere = new Dato(2019, 0, 27)

– konsollen.logg(tidligere < nyere) // true

Det er vanskeligere hvis du ønsker å sjekke om det er to datoer faller akkurat på samme tid. Du kan ikke sammenlignet dem med == eller ===.

const a = new Dato(2019, 0, 26)
const b = new Dato(2019, 0, 26)

– konsollen.log(a == b) // false
– konsollen.log(a === b) // false

For å sjekke om to datoer faller akkurat på samme tid, kan du sjekke sin tidsstempler med getTime.

const isSameTime = (a, b) => {
tilbake.getTime() === b.getTime()
}

const a = new Dato(2019, 0, 26)
const b = new Dato(2019, 0, 26)
– konsollen.logg(isSameTime(a, b)) // true

Hvis du ønsker å sjekke om to datoer faller på samme dag, kan du sjekke sin getFullYear, getMonth og getDate verdier.

const isSameDay = (a, b) => {
tilbake.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate()=== b.getDate()
}

const a = new Dato(2019, 0, 26, 10) // 26 Jan 2019, kl 10
const b = new Dato(2019, 0, 26, 12) // 26 Jan 2019, 12 pm
– konsollen.logg(isSameDay(a, b)) // true

Det er en siste ting vi har til å dekke.

Å få en dato fra en annen dato

Det er to mulige scenarier der du ønsker å få en dato fra en annen dato.

  1. Angi en bestemt dato/tid-verdien fra en annen dato.
  2. Legge til/trekke fra en delta fra en annen dato.

Å sette en bestemt dato/tid

Du kan bruke disse metodene til å sette en dato/klokkeslett fra en annen dato:

  1. setFullYear: Sett 4-sifret år i Lokal Tid.
  2. setMonth: Angi måned i året i Lokal Tid.
  3. setDate: Sett dagen i måneden i Lokal Tid.
  4. setHours: Angi timer i Lokal Tid.
  5. setMinutes: Sett minutter i Lokal Tid.
  6. setSeconds: Sett sekunder i Lokal Tid.
  7. setMilliseconds: Sett millisekunder i Lokal Tid.

For eksempel, hvis du ønsker å angi en dato til den 15. i måneden, kan du bruke setDate(15).

const d = new Date(2019, 0, 10)
d.setDate(15)

– konsollen.log(d) // 15. januar 2019

Hvis du ønsker å angi måned til juni, kan du bruke setMonth. (Husk måned i JavaScript er null-indeksert!)

const d = new Date(2019, 0, 10)
d.setMonth(5)

– konsollen.log(d) // 10 juni 2019

Merk: fuglehunden metodene nevnt ovenfor, mutere den opprinnelige dato-objekt. I praksis bør vi ikke mutere objekter (mer om hvorfor her). Vi bør utføre disse operasjonene på en ny dato objektet i stedet.

const d = new Date(2019, 0, 10)
const newDate = new Dato(d)
newDate.setMonth(5)

– konsollen.log(d) // 10 januar 2019
– konsollen.logg(newDate) // 10 juni 2019
Legge til/Trekke fra delta fra en annen dato

Et delta er en endring. Ved å legge til/trekke fra delta fra en annen dato, mener jeg dette: Du vil få en dato som er X fra en annen dato. Det kan være X i året, X måned, X dag, osv.

For å få delta, du trenger å vite for gjeldende dato verdi. Du kan få det ved hjelp av disse metodene:

  1. getFullYear: Får 4-sifret året i henhold til lokal tid
  2. getMonth: Får måned i året (0-11) i henhold til lokal tid.
  3. getDate: Blir dagen i måneden (1-31) i henhold til lokal tid.
  4. getHours: Får timer (0-23) i henhold til lokal tid.
  5. getMinutes: Får minutter (0-59) i henhold til lokal tid.
  6. getSeconds: Blir sekunder (0-59) i henhold til lokal tid.
  7. getMilliseconds: Får millisekunder (0-999) i henhold til lokal tid.

Det er to generelle tilnærminger for å legge til/trekke fra en delta. Den første tilnærmingen er mer populære på Stack Overflow. Det er kortfattet, men vanskeligere å forstå. Den andre tilnærmingen er mer utførlig, men lettere å forstå.

La oss gå gjennom begge tilnærminger.

Si at du ønsker å få en dato som er tre dager fra i dag. For eksempel, la oss også anta at i dag er 28 Mars 2019. (Det er lettere å forklare når vi arbeider med en fast dato).

Den første tilnærmingen (set-metode)
// Påtar i dag er 28 Mars 2019
const idag = new Date(2019, 2, 28)

Først oppretter vi en ny Dato-objekt (så vi ikke mutere den opprinnelige dato)

const finalDate = new Dato(dag)

Neste, vi trenger å vite verdien vi ønsker å endre. Siden vi er i endring dager, kan vi få dagen med getDate.

const currentDate = i dag.getDate()

Vi ønsker en dato som er tre dager fra i dag. Vi vil bruke legg til delta (3) til dagens dato.

finalDate.setDate(currentDate + 3)

Fullstendig kode for å angi fremgangsmåte:

const idag = new Date(2019, 2, 28)
const finalDate = new Dato(dag)
finalDate.setDate(i dag.getDate() + 3)

– konsollen.logg(finalDate) // 31. Mars 2019
Den andre tilnærmingen (ny Dato tilnærming)

Her bruker vi getFullYear, getMonth, getDate og andre getter metoder før vi treffer den type verdi vi ønsker å endre. Deretter bruker vi lage den siste dato med ny Dato.

const idag = new Date(2019, 2, 28)

// Komme krevde verdier
const år = i dag.getFullYear()
const måned = dag.getMonh()
const dag = i dag.getDate()

// Lager en ny Dato (delta)
const finalDate = new Dato(år, måned, dag + 3)

– konsollen.logg(finalDate) // 31. Mars 2019

Begge tilnærminger arbeid. Velg ett og stokk med det.

Automatisk korrigering av dato

Hvis du oppgir Dato med en verdi som er utenfor sin akseptabelt område, JavaScript rekalkulerer dato automatisk for deg.

Her er et eksempel. La oss si at vi satt dato til 33. Mars 2019. (Det er ingen 33. Mars på kalenderen). I dette tilfellet, JavaScript justerer 33. Mars til 2. April automatisk.

// 33. Mars => 2. April
ny Dato(2019, 2, 33)

33. Mars blir konvertert til 2. April automatisk.

Dette betyr at du ikke trenger å bekymre deg for beregning minutter, timer, dager, måneder, osv. når du oppretter et delta. JavaScript håndterer det for deg automatisk.

// 33. Mars => 2. April
ny Dato(2019, 2, 30 + 3)

30 + 3 = 33. 33. Mars blir konvertert til 2. April automatisk.

Og det er alt du trenger å vite om JavaScript er innfødt Dato-objekt.

Interessert i å lære mer JavaScript?

Hvis du fant denne intro til Dato nyttig, du kan gjerne Lære JavaScript, et kurs som jeg opprettet for å lære folk alt de trenger å vite om JavaScript.

I kurset, jeg dekker de grunnleggende konseptene over hva du trenger å vite, da jeg vise deg hvordan du bruker begrepene du har lært å bygge den virkelige verden komponenter.

Ta en titt. Du kan finne det nyttig.

I mellomtiden, hvis du har noen JavaScript spørsmål, ta gjerne kontakt med meg. Jeg skal gjøre av beste for å opprette gratis artikler for å svare på dine spørsmål.