Semua yang anda perlu tahu mengenai tarikh di JavaScript

Objek tarikh JavaScript sering mengelirukan bahawa kita beralih ke perpustakaan (seperti tarikh-FNS dan momen) setiap kali kita perlu menangani tarikh dan masa.

Tetapi kita tidak selalu memerlukan perpustakaan. Jika anda tahu apa yang perlu diperhatikan, tarikh sebenarnya boleh menjadi sangat mudah. Dalam artikel ini, saya akan membimbing anda melalui semua objek tarikh.

Pertama, marilah kita mengakui kewujudan zon waktu.

Zon waktu

Terdapat beratus -ratus zon masa di dunia. Dalam JavaScript, kami hanya mengambil berat tentang dua perkara - masa tempatan dan diselaraskan masa sejagat (UTC).

• Waktu tempatan merujuk kepada zon waktu di mana komputer anda berada.
• UTC sinonim dengan Greenwich Mean Time (GMT) dalam amalan.

Secara lalai, hampir semua kaedah tarikh dalam JavaScript (kecuali satu) menyediakan tarikh/masa untuk masa tempatan. Anda hanya boleh mendapatkan UTC apabila anda menentukan UTC.

Dengan ini kita boleh membincangkan tarikh penciptaan.

Tarikh penciptaan

Anda boleh membuat tarikh menggunakan new Date() . Terdapat empat cara yang mungkin untuk menggunakan new Date() :

1. Gunakan rentetan tarikh
2. Gunakan parameter tarikh
3. Gunakan timestamp
4. Tanpa parameter

Kaedah rentetan tarikh

Dalam kaedah rentetan tarikh, anda boleh membuat tarikh dengan lulus rentetan tarikh ke new Date .

 Tarikh Baru ('1988-03-21')

Kami cenderung menggunakan kaedah rentetan tarikh semasa menulis tarikh. Ini adalah semulajadi kerana kita telah menggunakan rentetan tarikh sepanjang hidup kita.

Jika saya menulis 21-03-1988, anda tidak akan mempunyai sebarang soalan yang pada 21 Mac 1988. Betul? Tetapi jika anda menulis 21-03-1988 dalam JavaScript, anda mendapat Invalid Date .

Ini mempunyai alasan yang baik.

Kami mentafsirkan rentetan tarikh yang berbeza di bahagian -bahagian yang berlainan di dunia. Sebagai contoh, 11-06-2019 mungkin 11 Jun, 2019 atau 6 November 2019. Tetapi anda tidak dapat memastikan mana yang saya maksudkan melainkan jika anda mengetahui sistem tarikh yang saya gunakan.

Dalam JavaScript, jika anda ingin menggunakan rentetan tarikh, anda perlu menggunakan format yang diterima di seluruh dunia. Salah satu daripada format ini ialah format Extended ISO 8601.

 <code>// ISO 8601 扩展格式`YYYY-MM-DDTHH:mm:ss.sssZ`</code>

Inilah maksud nilai:

• Yyyy: Tahun 4 digit
• MM: Bulan 2 digit (01 pada Januari, 12 pada bulan Disember)
• DD: Tarikh 2 digit (0 hingga 31)
• -: pemisah tarikh
• T: Menunjukkan permulaan masa
• HH: jam 24 digit (0 hingga 23)
• MM: Minit (0 hingga 59)
• SS: Seconds (0 hingga 59)
• SSS: Milisaat (0 hingga 999)
• :: pemisah masa
• Z: Jika Z wujud, tarikh akan ditetapkan ke UTC. Jika z tidak wujud, ia adalah masa tempatan. (Ini hanya terpakai kepada kes -kes di mana masa disediakan.)

Jika anda membuat tarikh, jam, minit, saat, dan milisaat adalah pilihan. Jadi jika anda ingin membuat tarikh untuk 11 Jun 2019, anda boleh menulis ini:

 Tarikh Baru ('2019-06-11')

Sila perhatikan perkara ini. Terdapat masalah besar dalam membuat tarikh menggunakan rentetan tarikh. Jika anda console.log tarikh ini, anda boleh mencari masalah.

Jika anda tinggal di kawasan di belakang GMT, anda akan mendapat tarikh yang dipaparkan pada 10 Jun.

Jika anda tinggal di kawasan yang menuju ke GMT, anda akan mendapat tarikh yang dipaparkan pada 11 Jun.

Ini berlaku kerana kaedah rentetan tarikh mempunyai tingkah laku khas: Jika anda membuat tarikh (tidak menentukan masa), anda mendapat tarikh yang ditetapkan ke UTC.

Dalam kes di atas, apabila anda menulis new Date('2019-06-11') , tarikh yang sebenarnya anda buat ialah 11 Jun 2019, pada pukul 12 pagi UTC. Itulah sebabnya orang yang tinggal di kawasan di belakang GMT mendapat 10 Jun dan bukannya 11 Jun.

Jika anda ingin membuat tarikh pada waktu tempatan menggunakan kaedah rentetan tarikh, anda perlu memasukkan masa. Apabila termasuk masa, anda perlu menulis sekurang -kurangnya HH dan MM (jika tidak, Google Chrome akan mengembalikan tarikh yang tidak sah).

 Tarikh Baru ('2019-06-11T00: 00')

Seluruh masa tempatan dengan masalah UTC dengan menggunakan rentetan tarikh boleh menjadi sumber sukar untuk menangkap kesilapan. Oleh itu, saya cadangkan anda tidak menggunakan rentetan tarikh untuk membuat tarikh.

(Dengan cara ini, MDN memberi amaran untuk tidak menggunakan kaedah rentetan tarikh, kerana pelayar boleh menghuraikan rentetan tarikh dengan cara yang berbeza).

Jika anda ingin membuat tarikh, gunakan parameter atau cap waktu.

Buat tarikh dengan parameter

Anda boleh lulus sehingga tujuh parameter untuk membuat tarikh/masa.

1. Tahun: Tahun 4 digit.
2. Bulan: Bulan (0-11). Bulan bermula dari awal. Jika ditinggalkan, lalai adalah 0.
3. Tarikh: Tarikh pada bulan (1-31). Jika ditinggalkan, lalai adalah 1.
4. Jam: Jam sepanjang hari (0-23). Jika ditinggalkan, lalai adalah 0.
5. Minit: minit (0-59). Jika ditinggalkan, lalai adalah 0.
6. Seconds: Seconds (0-59). Jika ditinggalkan, lalai adalah 0.
7. Milliseconds: Milliseconds (0-999). Jika ditinggalkan, lalai adalah 0.

 // 11 Jun 2019, 5:23:59 AM, Tarikh Baru Masa Tempatan (2019, 5, 11, 5, 23, 59)

Ramai pemaju (termasuk saya) mengelakkan menggunakan kaedah parameter kerana ia kelihatan rumit. Tetapi ia sebenarnya sangat mudah.

Cuba baca nombor dari kiri ke kanan. Dari kiri ke kanan, anda memasukkan nilai dalam pengurangan amplitud: tahun, bulan, hari, jam, minit, kedua, dan milisaat.

 Tarikh Baru (2017, 3, 22, 5, 23, 50)

// Jika anda mengikuti formula kiri-ke-kanan, anda boleh membaca tarikh ini dengan mudah.
// Tahun: 2017,
// Bulan: April (kerana bulan bermula dari awal)
// Tarikh: 22
// jam: 05
// minit: 23
// saat: 50

Bahagian yang paling bermasalah adalah bahawa nilai bulan bermula dari sifar, iaitu Januari === 0, Februari === 1, Mac === 2, dan sebagainya.

Ia agak pelik bahawa JavaScript bermula dari awal (nampaknya kerana Java melakukannya), tetapi bukannya berhujah mengapa Januari harus 1 (bukan 0), lebih baik menerima bulan -bulan di JavaScript bermula dari awal. Sebaik sahaja anda menerima fakta ini, tarikh menjadi lebih mudah untuk diproses.

Berikut adalah beberapa contoh untuk anda biasa dengan:

 // 21 Mac 1988, pukul 12 pagi, waktu tempatan.
Tarikh Baru (1988, 2, 21)

// 25 Disember 2019, 8 pagi, waktu tempatan.
Tarikh Baru (2019, 11, 25, 8)

// 6 November 2023, 2:20 pagi, Tarikh Baru Masa Tempatan (2023, 10, 6, 2, 20)

// 11 Jun 2019, 5:23:59 AM, Tarikh Baru Masa Tempatan (2019, 5, 11, 5, 23, 59)

Perhatikan bahawa tarikh yang dibuat menggunakan parameter adalah masa tempatan?

Ini adalah salah satu manfaat tambahan menggunakan parameter - anda tidak akan mengelirukan masa tempatan dan UTC. Jika anda memerlukan UTC, anda boleh membuat tarikh di UTC dengan cara ini:

 // 11 Jun 2019, pada pukul 12 pagi, UTC.
Tarikh Baru (Date.UTC (2019, 5, 11))

Buat tarikh dengan cap waktu

Di JavaScript, timestamp adalah bilangan milisaat yang berlalu dari 1 Januari 1970 (1 Januari 1970 juga dikenali sebagai masa UNIX Epoch). Dalam pengalaman saya, anda jarang menggunakan cap waktu untuk membuat tarikh. Anda hanya menggunakan cap waktu untuk membandingkan tarikh yang berbeza (lebih lanjut mengenai ini kemudian).

 // 11 Jun 2019, 8:00 pagi (pada waktu tempatan saya, Singapura)
Tarikh Baru (1560211200000)

Tanpa parameter

Jika anda membuat tarikh tanpa sebarang parameter, anda akan mendapat tarikh yang ditetapkan pada masa semasa (masa tempatan).

 Tarikh Baru ()

Anda dapat melihat dari imej yang apabila saya menulis ini, masa Singapura adalah 25 Mei 2019 pada 11:10 pagi.

Ringkasan tarikh penciptaan

1. Anda boleh membuat tarikh menggunakan new Date() .
2. Terdapat empat sintaks yang mungkin:
   1. Gunakan rentetan tarikh
   2. Parameter penggunaan
   3. Gunakan timestamp
   4. Tanpa parameter
3. Jangan gunakan kaedah rentetan tarikh untuk membuat tarikh.
4. Adalah lebih baik menggunakan kaedah parameter untuk membuat tarikh.
5. Ingat (dan terima) bahawa bulan -bulan di JavaScript bermula dari awal.

Seterusnya, mari kita bercakap tentang menukar tarikh ke rentetan yang boleh dibaca.

Tarikh format

Kebanyakan bahasa pengaturcaraan menyediakan alat pemformatan untuk membuat sebarang format tarikh yang anda mahukan. Sebagai contoh, dalam PHP, anda boleh menulis date("d MY") sebagai tarikh yang serupa dengan 23 Jan 2019.

Tetapi tidak ada cara mudah untuk memformat tarikh di JavaScript.

Objek tarikh asli dilengkapi dengan tujuh kaedah pemformatan. Setiap tujuh kaedah ini memberi anda nilai tertentu (dan mereka sangat tidak berguna).

 Tarikh Const = Tarikh Baru (2019, 0, 23, 17, 23, 42)

1. toString menyediakan anda dengan Rabu 23 Jan 2019 17:23:42 GMT 0800 (Singapura Masa Standard)
2. toDateString Memberi Anda Dengan Rabu 23 Jan 2019
3. toLocaleString memberikan anda 23/01/2019, 17:23:42
4. toLocaleDateString memberikan anda 23/01/2019
5. toGMTString menyediakan anda dengan Rabu, 23 Jan 2019 09:23:42 GMT
6. toUTCString menyediakan anda dengan Rabu, 23 Jan 2019 09:23:42 GMT
7. toISOString menyediakan anda dengan 2019-01-23T09: 23: 42.079z

Jika anda memerlukan format tersuai, anda perlu menciptanya sendiri.

Tulis format tarikh tersuai

Katakan anda mahukan sesuatu seperti THU, 23 Januari 2019. Untuk mencipta nilai ini, anda perlu memahami (dan menggunakan) kaedah tarikh yang datang dengan objek tarikh.

Untuk mendapatkan tarikh, anda boleh menggunakan empat kaedah ini:

1. getFullYear : Dapatkan tahun 4 digit berdasarkan waktu tempatan
2. getMonth : Dapatkan bulan (0-11) berdasarkan masa tempatan. Bulan bermula dari awal.
3. getDate : Dapatkan tarikh pada bulan berdasarkan masa tempatan (1-31).
4. getDay : Dapatkan hari dalam seminggu (0-6) berdasarkan waktu tempatan. Hari dalam seminggu bermula pada hari Ahad (0) dan berakhir pada hari Sabtu (6).

Mewujudkan 23 dan 2019 untuk THU, 23 Januari 2019 adalah mudah. Kita boleh menggunakan getFullYear dan getDate untuk mendapatkannya.

 Const D = Tarikh Baru (2019, 0, 23)
const year = d.getLelyEar () // 2019
const date = d.getDate () // 23

Mendapatkan Thu dan Januari adalah sukar.

Untuk mendapatkan Januari, anda perlu membuat objek yang memetakan semua nilai dua belas bulan kepada nama masing-masing.

 bulan const = {
  0: 'Januari',
  1: 'Februari',
  2: 'Mac',
  3: 'April',
  4: 'Mei',
  5: 'Jun',
  6: 'Julai',
  7: 'Ogos',
  8: 'September',
  9: 'Oktober',
  10: 'November',
  11: 'Disember'
}

Sejak bulan bermula dari sifar, kita boleh menggunakan tatasusunan dan bukannya objek. Ia menghasilkan hasil yang sama.

 bulan const = [
  'Januari',
  'Februari',
  'Mac',
  'April',
  'Mei',
  'Jun',
  'Julai',
  'Ogos',
  'September',
  'Oktober',
  'November',
  'Disember'
]

Untuk mendapatkan Januari yang anda perlukan:

1. Gunakan getMonth untuk mendapatkan bulan bermula dari tarikh.
2. Dapatkan Nama Bulan Dari months

 const monthindex = d.getmonth ()
Const Monthame = Bulan [MonthIndex]
Console.log (nama bulan) // Januari

Versi Singkatan:

 Const Monthame = Bulan [d.getmonth ()]
Console.log (nama bulan) // Januari

Anda melakukan perkara yang sama dengan Thu. Kali ini, anda memerlukan array yang mengandungi tujuh hari seminggu.

 hari const = [
  'Matahari',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Duduk'
]

Kemudian anda:

1. Gunakan getDay untuk mendapatkan dayIndex
2. Gunakan dayIndex untuk mendapatkan dayName

 const dayIndex = d.getday ()
const dayname = hari [dayIndex] // thu

Versi Singkatan:

 const dayname = hari [d.getday ()] // thu

Anda kemudian menggabungkan semua pembolehubah yang anda buat untuk mendapatkan rentetan yang diformat.

 const formatted = `$ {dayname}, $ {date} $ {monthname} $ {year}`
Console.log (diformat) // Thu, 23 Januari 2019

Ya, itu rumit. Tetapi apabila anda mendapat silap mata, mustahil.

Jika anda perlu membuat format tersuai, anda boleh menggunakan kaedah berikut:

1. getHours : Dapatkan jam (0-23) berdasarkan masa tempatan.
2. getMinutes : Dapatkan minit (0-59) berdasarkan masa tempatan.
3. getSeconds : Dapatkan detik (0-59) berdasarkan masa tempatan.
4. getMilliseconds : Dapatkan milisaat (0-999) berdasarkan masa tempatan.

Seterusnya, mari kita bercakap tentang membandingkan tarikh.

Bandingkan tarikh

Jika anda ingin tahu sama ada satu tarikh lebih awal atau lebih lambat daripada yang lain, anda boleh membandingkannya secara langsung dengan>, = dan <.>

 const terdahulu = Tarikh Baru (2019, 0, 26)
const kemudian = Tarikh Baru (2019, 0, 27)

console.log (lebih awal <kemudian benar><p> Jika anda ingin menyemak sama ada dua tarikh berlaku pada masa yang sama, lebih sukar untuk dibandingkan. Anda tidak boleh membandingkannya menggunakan == atau ===.</p>
<pre class="brush:php;toolbar:false"> Const A = Tarikh Baru (2019, 0, 26)
Const B = Tarikh Baru (2019, 0, 26)

console.log (a == b) // palsu
console.log (a === b) // palsu

Untuk memeriksa sama ada dua tarikh berlaku pada masa yang sama, anda boleh menyemak cap waktu mereka menggunakan getTime .

 const issameTime = (a, b) => {
  kembali a.getTime () === b.getTime ()
}

Const A = Tarikh Baru (2019, 0, 26)
Const B = Tarikh Baru (2019, 0, 26)
Console.log (Issametime (A, B)) // Benar

Jika anda ingin menyemak sama ada kedua -dua tarikh pada hari yang sama, anda boleh menyemak nilai getFullYear , getMonth dan getDate mereka.

 const issameday = (a, b) => {
  kembali a.getLelyEar () === b.getLelyEar () &&
    A.getmonth () === B.getmonth () &&
    a.getDate () === B.GetDate ()
}

Const A = Tarikh Baru (2019, 0, 26, 10) // 26 Januari 2019, 10:00 pagi Const B = Tarikh Baru (2019, 0, 26, 12) // 26 Januari 2019, 12:00 Noon Console.log (Issameday (a, b)) /

Terdapat satu lagi perkara yang mesti kita perkenalkan.

Dapatkan tarikh dari tarikh lain

Terdapat dua senario yang mungkin di mana anda perlu mendapatkan tarikh dari tarikh lain.

1. Tetapkan nilai tarikh/masa tertentu dari tarikh lain.
2. Tambah/tolak kenaikan dari tarikh lain.

Tetapkan tarikh/masa tertentu

Anda boleh menetapkan tarikh/masa dari tarikh lain menggunakan kaedah ini:

1. setFullYear : Menetapkan tahun 4 digit pada waktu tempatan.
2. setMonth : Tetapkan bulan pada waktu tempatan.
3. setDate : Menetapkan tarikh pada bulan pada waktu tempatan.
4. setHours : Tetapkan jam pada waktu tempatan.
5. setMinutes : Tetapkan minit pada waktu tempatan.
6. setSeconds : Tetapkan saat pada waktu tempatan.
7. setMilliseconds : Tetapkan milisaat pada waktu tempatan.

Sebagai contoh, jika anda mahu menetapkan tarikh pada hari ke -15 bulan, anda boleh menggunakan setDate(15) .

 Const D = Tarikh Baru (2019, 0, 10)
D.SetDate (15)

Console.log (d) // 15 Januari 2019

Jika anda mahu menetapkan bulan hingga Jun, anda boleh menggunakan setMonth . (Ingat, bulan di JavaScript bermula dari awal!)

 Const D = Tarikh Baru (2019, 0, 10)
D.SetMonth (5)

Console.log (d) // 10 Jun 2019

Nota: Kaedah tetapan di atas mengubah objek tarikh asal. Dalam amalan, kita tidak boleh mengubah objek (sebabnya dijelaskan secara terperinci di sini). Kita harus melakukan operasi ini pada objek tarikh baru.

 Const D = Tarikh Baru (2019, 0, 10)
const newDate = Tarikh Baru (D)
NewDate.SetMonth (5)

Console.log (d) // 10 Januari 2019 Console.log (Newdate) // 10 Jun 2019

Tambah/tolak kenaikan dari tarikh lain

Kenaikan adalah perubahan. Menambah/menolak kenaikan dari tarikh lain bermakna: Anda ingin mendapatkan tarikh dengan jarak x dari tarikh lain. Ia boleh menjadi x tahun, x bulan, x hari, dll.

Untuk mendapatkan kenaikan, anda perlu mengetahui nilai tarikh semasa. Anda boleh menggunakannya menggunakan kaedah berikut:

1. getFullYear : Dapatkan tahun 4 digit berdasarkan waktu tempatan
2. getMonth : Dapatkan bulan (0-11) berdasarkan masa tempatan.
3. getDate : Dapatkan tarikh pada bulan berdasarkan masa tempatan (1-31).
4. getHours : Dapatkan jam (0-23) berdasarkan masa tempatan.
5. getMinutes : Dapatkan minit (0-59) berdasarkan masa tempatan.
6. getSeconds : Dapatkan detik (0-59) berdasarkan masa tempatan.
7. getMilliseconds : Dapatkan milisaat (0-999) berdasarkan masa tempatan.

Terdapat dua cara biasa untuk menambah/menolak kenaikan. Kaedah pertama lebih popular di Stack Overflow. Ia ringkas dan jelas, tetapi sukar difahami. Kaedah kedua lebih jelas, tetapi lebih mudah difahami.

Mari memperkenalkan kedua -dua kaedah ini.

Katakan anda ingin mendapatkan tarikh tiga hari dari hari ini. Dalam contoh ini, kita juga mengandaikan bahawa hari ini adalah 28 Mac, 2019 (lebih mudah untuk dijelaskan apabila kita menggunakan tarikh tetap).

Kaedah pertama (kaedah penetapan)

// Anggap hari ini ialah 28 Mac, 2019 Const hari ini = Tarikh Baru (2019, 2, 28)

Pertama, kami membuat objek tarikh baru (jadi kami tidak mengubah tarikh asal)

 const finalDate = tarikh baru (hari ini)

Seterusnya, kita perlu tahu nilai yang ingin kita ubah. Oleh kerana kita mengubah tarikh, kita boleh menggunakan getDate untuk mendapatkan tarikh.

 const currentDate = hari ini.getDate ()

Kami mahukan tarikh tiga hari kemudian daripada hari ini. Kami akan menambah kenaikan (3) ke tarikh semasa menggunakan.

 FinalDate.SetDate (CurrentDate 3)

Kod lengkap untuk menetapkan kaedah:

 Const Hari ini = Tarikh Baru (2019, 2, 28)
const finalDate = tarikh baru (hari ini)
finalDate.setDate (Today.getDate () 3)

Console.log (FinalDate) // 31 Mac 2019

Kaedah kedua (kaedah tarikh baru)

Di sini kita menggunakan kaedah getFullYear , getMonth , getDate dan lain -lain sehingga kita dapati jenis nilai yang kita mahu ubah. Kemudian kami menggunakan new Date untuk membuat tarikh akhir.

 Const Hari ini = Tarikh Baru (2019, 2, 28)

// Dapatkan nilai yang diperlukan const year = hari ini.getLelyEar ()
const bulan = hari ini.getmonth ()
const hari = hari ini.getDate ()

// Buat tarikh baru (dengan kenaikan)
Const FinalDate = Tarikh Baru (Tahun, Bulan, Hari 3)

Console.log (FinalDate) // 31 Mac 2019

Kedua -dua kaedah berfungsi. Pilih satu dan tegang.

Pembetulan tarikh automatik

Jika anda memberikan tarikh dengan nilai di luar julat yang boleh diterima, JavaScript secara automatik akan mengira semula tarikh untuk anda.

Berikut adalah contoh. Katakan kami menetapkan tarikh hingga 33 Mac, 2019. (Tidak ada 33 Mac pada kalendar). Dalam kes ini, JavaScript secara automatik akan menyesuaikan diri dengan 33 Mac hingga 2 April.

 // 33 Mac => 2 April Tarikh Baru (2019, 2, 33)

Ini bermakna apabila membuat kenaikan, anda tidak perlu bimbang tentang mengira minit, jam, tarikh, bulan, dan lain -lain. JavaScript secara automatik akan mengendalikannya untuk anda.

 // 33 Mac => 2 April Tarikh Baru (2019, 2, 30 3)

Ini adalah semua yang anda perlu tahu mengenai objek tarikh asli JavaScript.

Maklumat lanjut mengenai Tarikh di JavaScript

• Memahami Tarikh dan Masa di JavaScript (DigitalOcean)
• Terokai objek tarikh JavaScript (Alligator.io)

Berminat untuk mempelajari lebih banyak JavaScript?

Jika anda mendapati pengenalan tarikh ini berguna, anda mungkin suka belajar JavaScript, kursus yang saya buat untuk mengajar orang semua yang mereka perlu tahu mengenai JavaScript.

Dalam kursus ini, saya akan memperkenalkan konsep asas yang perlu anda ketahui dan kemudian menunjukkan kepada anda cara menggunakan konsep yang anda pelajari untuk membina komponen dunia nyata.

Lihat. Anda mungkin mendapati ia berguna.

Juga, jika anda mempunyai sebarang masalah JavaScript, sila hubungi saya. Saya akan berusaha sedaya upaya untuk membuat artikel percuma untuk menjawab soalan anda.

Atas ialah kandungan terperinci Semua yang anda perlu tahu mengenai tarikh di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!