Allt Du Behöver Veta Om Dagen i JavaScript

0
18

Datum är konstigt i JavaScript. Det blir på våra nerver så mycket att vi når för bibliotek (som Datum-och fns Stund) den stund (ha!) vi behöver arbeta med datum och tid.

Men vi vet inte alltid behöver använda bibliotek. Datum kan faktiskt vara ganska enkelt om du vet vad du ska se upp för. I denna artikel kommer jag gå igenom allt du behöver veta om Date-objekt.

Första, låt oss erkänna existensen av tidszoner.

Tidszoner

Det finns hundratals av tidszoner i vår värld. I JavaScript, vi bara bryr sig om två Lokal Tid och UTC (Coordinated Universal Time).

  • Lokal tid hänvisar till den tidszon som din dator är i.
  • UTC är synonymt med GMT (Greenwich Mean Time) i praktiken.

Som standard, nästan varje dag metod i JavaScript (utom en) ger dig ett datum/tid i lokal tid. Du får bara UTC om du anger UTC.

Med detta, vi kan prata om att skapa datum.

Skapa ett datum

Du kan skapa en date med nya Datum(). Det finns fyra möjliga sätt att använda nya Datum():

  1. Med ett datum-sträng
  2. Med datum argument
  3. Med en tidsstämpel
  4. Utan argument

Datum: string metod

I dag-string metod, du skapar ett datum genom att skicka ett datum-sträng till nytt Datum.

new Date(‘1988-03-21’)

Vi tenderar till att datum-string metod när vi skriver datum. Detta är naturligt eftersom vi har varit med datum-strängar alla våra liv.

Om jag skriver 21-03-1988, har du inga problem att härleda det är 21: a Mars 1988. Ja? Men om du skriver 21-03-1988 i JavaScript, du får Ogiltigt Datum.

new Date(’21-03-1988′) returnerar Ogiltigt Datum.

Det finns en god anledning till detta.

Vi tolkar datum strängar på olika sätt i olika delar av världen. Till exempel 11-06-2019 är antingen 11 juni 2019 eller 6: e November 2019. Men du kan inte vara säker på vilken jag hänvisar till, om du vet att den dag systemet jag använder.

I JavaScript, om du vill använda ett datum, sträng, måste du använda ett format som är accepterad över hela världen. Ett av dessa format är den Utvidgade formatet ISO 8601.

// Utvidgade formatet ISO 8601
“ÅÅÅÅ-MM-DDTHH:mm:ss:sssZ`

Det här är vad våra värderingar innebär:

  • ÅÅÅÅ: 4-siffrig år
  • MM: 2-siffrig månad (där januari är 01-December-12)
  • DD: 2-siffrig datum (0-31)
  • -: Datum avgränsare
  • T: Anger start-tid
  • HH: 24-siffriga timme (0 till 23)
  • mm: Minuter (0-59)
  • ss: Sekunder (0 till 59)
  • sss: Millisekunder (0 till 999)
  • :: Tid avgränsare
  • Z: Om Z är närvarande, datum kommer att vara inställd till UTC. Om Z inte är närvarande, ska det vara Lokal Tid. (Det här gäller bara om tid ges.)

Timmar, minuter, sekunder och millisekunder är valfritt om du skapar ett datum. Så, om du vill skapa en dag för 11: e juni 2019, kan du skriva det här:

new Date(‘2019-06-11’)

Ägna särskild uppmärksamhet här. Det finns ett stort problem med att skapa datum med datum strängar. Du kan upptäcka problem om du konsol.logga in detta datum.

Om du bor i ett område som är bakom GMT, kommer du att få ett datum som anger 10: e juni.

new Date(‘2019-06-11’) producerar 10: e juni, om du är på en plats bakom GMT.

Om du bor i ett område som är före GMT, kommer du att få ett datum som säger att 11: e juni.

new Date(‘2019-06-11’) producerar den 11 juni om du är på en plats efter GMT.

Detta händer eftersom den datum-string metod har ett märkligt beteende: Om du skapar ett datum (utan att ange tid), du får en dag som anges i UTC-tid.

I scenariot ovan, när du skriver new Date(‘2019-06-11’), kan du faktiskt skapa ett datum som säger att 11: e juni, 2019, 12am UTC. Detta är varför människor som bor i områden bakom GMT få en 10: e juni istället för 11: e juni.

Om du vill skapa ett datum i Lokal Tid med datum-string metod, måste du inkludera tid. När du har tid, du behöver för att skriva HH mm och minst (eller Google Chrome returnerar ett ogiltigt datum).

new Date(‘2019-06-11T00:00’)

Datum skapad i Lokal Tid vsl. Datum skapad i UTC.

Hela Lokal Tid vs. UTC sak med datum-strängar kan vara en möjlig källa till fel som är svårt att fånga. Så, jag rekommenderar att du inte skapar datum med datum strängar.

(Förresten, MDN varnar för datum-string strategi sedan webbläsare kan tolka datum strängar på olika sätt).

MDN rekommenderar mot att skapa uppdaterad med datum strängar.

Om du vill skapa datum, använda argument eller tidsstämplar.

Skapa datum med argument

Du kan skicka in upp till sju argument för att skapa ett datum/tid.

  1. Åk: 4-siffrig år.
  2. Månad: Månaden på året (0-11). Månaden är noll-indexerade. Standardvärdet är 0 om det utelämnas.
  3. Dag: Dag i månaden (1-31). Sätts till 1 om det utelämnas.
  4. Timme: Minuter av dagen (0-23). Standardvärdet är 0 om det utelämnas.
  5. Minuter: Minuter (0-59). Standardvärdet är 0 om det utelämnas.
  6. Sekunder: Sekunder (0-59). Standardvärdet är 0 om det utelämnas.
  7. Millisekunder: Millisekunder (0-999). Standardvärdet är 0 om det utelämnas.

// 11 juni 2019, 5:23:59, Lokal Tid
nytt Datum(2019, 5, 11, 5, 23, 59)

Många utvecklare (mig själv inkluderad) att undvika de argument tillvägagångssätt eftersom det verkar komplicerat. Men det är faktiskt ganska enkelt.

Försök att läsa siffrorna från vänster till höger. När du går från vänster till höger du sätter in värden i fallande storleksordning: år, månad, dag, timmar, minuter, sekunder och millisekunder.

nytt Datum(2017, 3, 22, 5, 23, 50)

// Detta datum kan vara lätt att läsa om du följer vänster-höger formel.
// År: 2017,
// Månad: April (eftersom månad är noll-index)
// Datum: 22
// Timmar: 05
// Minuter: 23
// Sekunder: 50

Den mest problematiska delen med Hittills är att den Månad värde är noll-indexerad, som i januari === 0, februari === 1, Mars === 2 och så vidare.

Vi har ingen aning om varför månad i JavaScript är noll-indexerad, men det är det. Snarare än att argumentera om anledningen januari bör vara 1 (inte 0), det är bättre att acceptera att en månad är noll-indexerade i JavaScript. När du accepterar detta faktum, datum blir mycket lättare att arbeta med.

Här är några fler exempel för dig att bekanta dig:

// Den 21 Mars 1988, 12 am, Lokal Tid.
nya Datum(1988, 2, 21)

// 25 December 2019, 8am, Lokal Tid.
nya Datum(2019, 11, 25, 8)

// Den 6 November 2023, 2:20 på morgonen, Lokal Tid
nytt Datum(2023, 10, 6, 2, 20)

// 11 juni 2019, 5:23:59, Lokal Tid
nytt Datum(2019, 5, 11, 5, 23, 59)

Meddelande datum skapad med argument som alla är i Lokal Tid?

Det är en av de största fördelarna med att använda argument—du kommer inte bli förvirrad mellan Lokal Tid och UTC. Om du någonsin behöver UTC, du skapar ett datum i UTC detta sätt:

// 11 juni 2019, 12 am, UTC.
new Date(Datum.UTC(2019, 5, 11))
Skapa datum med tidsstämplar

I JavaScript, en tidsstämpel är mängden millisekunder förflutit sedan den 1 januari 1970 (1 januari 1970 är också känd som Unix epok tid). Från min erfarenhet, du sällan använder tidsstämplar för att skapa datum. Du bara använder tidsstämplar för att jämföra mellan olika datum (mer om detta senare).

// 11 juni 2019, 8am (i min Lokal Tid, Singapore)
nya Datum(1560211200000)
Utan argument

Om du skapar ett datum utan några argument, du får ett datum satt till den aktuella tiden (Lokal Tid).

nya Datum()

Den tid som nu är.

Du kan se på bilden att det är 25: e Maj, 11:10 i Singapore när jag skrev den här artikeln.

Sammanfattning om att skapa datum

  1. Du kan skapa nya Datum().
  2. Det finns fyra möjliga syntax:
    1. Med en datumsträng
    2. Med argument
    3. Med tidsstämpel
    4. Utan argument
  3. Aldrig att skapa en date med den dag string metod.
  4. Det är bäst att skapa datum med de argument som metod.
  5. Kom ihåg (och acceptera) att månaden är noll-indexerade i JavaScript.

Nästa, låt oss tala om att konvertera ett datum i en läsbar sträng.

Formatera ett datum

De flesta programmeringsspråk ger dig en formatering verktyget för att skapa en datumformat du vill. Till exempel i PHP, kan du skriva datum(“d M Y”) till ett datum som 23 Jan 2019.

Men det finns inget enkelt sätt att formatera ett datum i JavaScript.

De infödda Date-objekt levereras med sju formatering metoder. Var och en av dessa sju metoder ger dig ett specifikt värde (och de är helt värdelösa).

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

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

Om du behöver ett eget format, som du behöver för att skapa det själv.

Att skriva ett eget datum format

Låt oss säga att du vill ha något som Thu, 23 januari 2019. För att skapa detta värde, som du behöver veta (och använder) datum metoder som kommer med Date-objekt.

För att få datum, kan du använda dessa fyra metoder:

  1. getFullYear: Får 4-siffrigt år enligt lokal tid
  2. getMonth: Får månad året (0-11) enligt den till lokal tid. Månaden är noll-indexerade.
  3. getDate: Blir dag i månaden (1-31) enligt den till lokal tid.
  4. getDay: Blir dag i veckan (0-6) enligt den till lokal tid. Dag veckan börjar med söndag (0) och slutar med lördag (6).

Det är enkelt att skapa 23 och 2019 för Thu, 23 januari 2019. Vi kan använda getFullYear och getDate för att få dem.

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

Det är svårare att få Tors och januari.

För att komma januari, du behöver för att skapa ett föremål som kartor värdet av alla tolv månader till sina respektive namn.

const månader = {
0: ‘januari’,
1: ‘februari’,
2: ‘Mars’,
3: ‘April’,
4: “Kan”,
5: ‘juni’,
6: ‘juli’,
7: ‘augusti’,
8: ‘September’,
9: ‘oktober’,
10: ‘November’,
11: ‘December’
}

Eftersom Månaden är noll-indexerad, kan vi använda en matris i stället för ett objekt. Det ger samma resultat.

const månader = [
‘Januari’,
‘Februari’,
‘Mars’,
‘April’,
‘Maj’,
‘Juni’,
‘Juli’,
‘Augusti’,
‘September’,
‘Oktober’,
‘November’,
‘December’
]

För att komma januari, du behöver:

  1. Använd getMonth att få noll-indexerade månad från dagen.
  2. Få månaden namn från månader

const monthIndex = d.getMonth()
const monthName = månader(monthIndex)
konsolen.log(monthName) // January

Den kortfattade versionen:

const monthName = månaderna(d.getMonth())
konsolen.log(monthName) // January

Du gör samma sak för att få Tors. Den här gången behöver du en array som innehåller sju dagar i veckan.

const dagar = [
“Solen”,
‘Mån’,
‘Tis’,
‘Ons’,
‘Tor’,
‘Fre’,
Sat’
]

Då du:

  1. Få dayIndex med getDay
  2. Använd dayIndex att få dayName

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

Kort version:

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

Sedan kan du kombinera alla variabler som du skapat för att få formaterad sträng.

const formaterad = `${dayName}, ${datum} ${monthName} ${year}`
konsolen.logga in(formaterad) // Thu, 23 januari 2019

Ja, det tråkiga. Men det är inte omöjligt när du får kläm på det.

Om du någonsin behöver för att skapa en custom-formaterad tid, kan du använda följande metoder:

  1. getHours: Får timme (0-23) enligt den till lokal tid.
  2. getMinutes: Blir minuter (0-59) enligt den till lokal tid.
  3. getSeconds: Får sekunder (0-59) enligt den till lokal tid.
  4. getMilliseconds: Får millisekunder (0-999) enligt den till lokal tid.

Nästa, låt oss tala om att jämföra datum.

Jämföra datum

Om du vill veta om ett datum som kommer före eller efter ett annat datum, du kan jämföra dem direkt med >, <, >, = och <=.

const tidigare = new Date(2019, 0, 26)
const senare = new Date(2019, 0, 27)

konsolen.log(tidigare < senare) // sanna

Det är svårare om du vill kontrollera om det finns två datum som infaller exakt på samma tid. Du kan inte jämföras med == eller ===.

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

konsolen.log(a == b) // false
konsolen.log(a === b) // false

För att kontrollera om två datum som infaller exakt på samma tid, att du kan kontrollera sin tidsstämplar med getTime.

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

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
konsolen.log(isSameTime(a, b)) // sanna

Om du vill kontrollera om två datum infaller på samma dag, du kan kolla deras getFullYear, getMonth och getDate värden.

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

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
konsolen.log(isSameDay(a, b)) // sanna

Det finns en sista sak vi måste täcka.

Att få ett datum från en annan dag

Det finns två möjliga scenarier där du vill få ett datum från en annan dag.

  1. Ange datum/tid-värde från ett annat datum.
  2. Lägg till/subtrahera ett delta från ett annat datum.

Om du anger ett specifikt datum/tid

Du kan använda dessa metoder för att fastställa ett datum/tid-från en annan dag:

  1. setFullYear: Ange den 4-siffriga år i Lokal Tid.
  2. setMonth: Ställ in månad året i Lokal Tid.
  3. setDate: Ställ in dag och månad i Lokal Tid.
  4. setHours: Ställ in timmar i Lokal Tid.
  5. setMinutes: Ställ in minuter i Lokal Tid.
  6. setSeconds: Ställ sekunder i Lokal Tid.
  7. setMilliseconds: Ställa millisekunder i Lokal Tid.

Till exempel om du vill ställa in ett datum till den 15: e i månaden, kan du använda setDate(15).

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

konsolen.log(d) // 15 januari 2019

Om du vill ställa in månad till juni, kan du använda setMonth. (Kom ihåg månad i JavaScript är noll-indexerade!)

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

konsolen.log(d) // 10 juni 2019

Obs: Den set-metoderna ovan mutera den ursprungliga date-objekt. I praktiken bör vi inte mutera objekt (mer om varför här). Vi bör utföra dessa operationer på ett nytt datum objekt i stället.

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

konsolen.log(d) // 10 januari 2019
konsolen.log(newDate) // 10 juni 2019
Lägga till/dra ifrån delta från ett annat datum

En delta-är en förändring. Genom att addera/subtrahera delta från en annan dag, jag menar detta: Du vill få ett datum som är X från en annan dag. Det kan vara X år X månad, dag X, etc.

För att få delta, du behöver känna till aktuell tidpunkt värde. Du kan få det med hjälp av dessa metoder:

  1. getFullYear: Får 4-siffrigt år enligt lokal tid
  2. getMonth: Får månad året (0-11) enligt den till lokal tid.
  3. getDate: Blir dag i månaden (1-31) enligt den till lokal tid.
  4. getHours: Får timme (0-23) enligt den till lokal tid.
  5. getMinutes: Blir minuter (0-59) enligt den till lokal tid.
  6. getSeconds: Får sekunder (0-59) enligt den till lokal tid.
  7. getMilliseconds: Får millisekunder (0-999) enligt den till lokal tid.

Det finns två generella metoder för att addera/subtrahera ett delta. Den första metoden är mer populära på Stack Overflow. Det är koncis, men svårare att förstå. Den andra metoden är mer utförlig, men lättare att förstå.

Låt oss gå igenom de båda strategierna.

Säg att du vill få ett datum som är tre dagar från idag. För detta exempel, låt oss också anta i dag är 28 Mars 2019. (Det är lättare att förklara när vi jobbar med ett fast datum).

Den första metoden (den som strategi)
// Tar i dag är 28 Mars 2019
const idag = new Date(2019, 2, 28)

Först skapar vi en ny Date-objekt (så vi inte mutera det ursprungliga datumet)

const finalDate = new Date(idag)

Nästa, vi behöver veta värdet vi vill ändra på. Eftersom vi är föränderlig dagar, kan vi komma dagen med getDate.

const currentDate = idag.getDate()

Vi vill ha ett datum som är tre dagar från idag. Vi kommer att använda lägg till delta (3) till dagens datum.

finalDate.setDate(currentDate + 3)

Fullständiga koden för den som strategi:

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

konsolen.log(finalDate) // 31 Mars 2019
Den andra metoden (new Date strategi)

Här använder vi getFullYear, getMonth, getDate och andra metoder getter tills vi träffar den typ av värde det vill vi ändra på. Sedan använder vi skapa den slutliga uppdaterad med nya Datum.

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

// Att få erforderliga värden
const år = i dag.getFullYear()
const månad = idag.getMonh()
const dag = idag.getDate()

// Skapar en ny Dag (med delta)
const finalDate = new Date(år, månad, dag + 3)

konsolen.log(finalDate) // 31 Mars 2019

Båda metoderna fungerar. Välja en och hålla fast vid det.

Automatisk korrigering datum

Om du anger Datum med ett värde som ligger utanför dess godtagbart intervall, JavaScript räknar om datum för dig automatiskt.

Här är ett exempel. Låt oss säga att vi satt datum för 33: e Mars 2019. (Det finns ingen 33: e Mars i kalendern). I detta fall, JavaScript justerar 33: e Mars-2 April automatiskt.

// På 33: e Mars => 2: a April
nya Datum(2019, 2, 33)

33: e Mars får omvandlas till 2: a April automatiskt.

Detta innebär att du behöver inte bry dig om att räkna på minuter, timmar, dagar, månader, etc. när du skapar ett delta. JavaScript hanterar det automatiskt åt dig.

// På 33: e Mars => 2: a April
nya Datum(2019, 2, 30 + 3)

30 + 3 = 33. 33: e Mars får omvandlas till 2: a April automatiskt.

Och det är allt du behöver veta om JavaScript ‘ s native Date-objekt.

Intresserad av att lära dig mer JavaScript?

Om du har hittat denna intro till Datum användbart, kanske du älskar att Lära sig JavaScript, en kurs som jag skapade för att lära människor allt de behöver veta om JavaScript.

I kursen, som jag täcker grundläggande begrepp om vad du behöver veta, då ska jag visa er hur man använder de begrepp som du lärt dig att bygga verkliga komponenter.

Ta en titt. Du kanske tycker att det är bra.

Under tiden, om du har någon JavaScript-frågor, tveka inte att kontakta mig. Jag ska göra det bästa för att skapa fria artiklar för att svara på dina frågor.