วันที่และเวลาของ JavaScript:คู่มือสำหรับผู้เริ่มต้น

ไม่มีทางหนีจากนาฬิกาไปได้ โดยเฉพาะในการเขียนโปรแกรม เช่นเดียวกับที่เราอาศัยนาฬิกาและนาฬิกาในการติดตามวันของเรา โปรแกรมต่างๆ ก็ใช้เครื่องมือติดตามเวลาเพื่อรู้ว่าอะไรควรเกิดขึ้นและเมื่อใด

แอปพลิเคชั่นหลายตัวต้องติดตามเวลา แอปพลิเคชันบล็อกจำเป็นต้องจดจำเมื่อมีการสร้างโพสต์ ในขณะที่แอปพลิเคชันปฏิทินจะแสดงกิจกรรมตามกำหนดการของคุณ

ในคู่มือนี้ เราจะพูดถึงวิธีการทำงานกับวันที่และเวลาใน JavaScript เราจะแนะนำคุณผ่านตัวอย่างบางส่วนเพื่อแสดงวิธีทำงานกับเครื่องมือเหล่านี้

ออบเจ็กต์วันที่ของ JavaScript คืออะไร

ในการทำงานกับเวลาใน JavaScript เราใช้วัตถุวันที่ นี่เป็นวัตถุพิเศษที่เก็บวันที่และเวลา ยิ่งไปกว่านั้น วัตถุ Date ยังมาพร้อมกับวิธีการต่างๆ ที่เราสามารถใช้เพื่อดึงข้อมูลบางส่วนเกี่ยวกับวันที่และเวลา

วัตถุวันที่มีลักษณะดังนี้:

new Date();

ในบทช่วยสอนนี้ คุณจะสังเกตเห็นว่า Date เป็นตัวพิมพ์ใหญ่ เนื่องจากวันที่เป็นวัตถุ JavaScript ในตัว คุณต้องใช้อักษรตัวพิมพ์ใหญ่ของคำว่า Date เพื่อทำงานกับวัตถุวันที่

วิธีใช้ออบเจ็กต์วันที่

หากไม่มีค่าใดๆ วัตถุ Date จะบอกเราถึงวันที่และเวลาปัจจุบัน ซึ่งคำนวณตามการตั้งค่าระบบปฏิบัติการของคุณและคำนึงถึงเขตเวลาของคุณ

เราสามารถใช้วัตถุ Date เพื่อดึงข้อมูลวันที่ปัจจุบันได้ดังนี้:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

var currentDate = new Date();
console.log(currentDate);

รหัสของเราส่งคืนวัตถุ Date ซึ่งมีค่าต่อไปนี้:

Wed Jun 24 2020 10:49:46 GMT+0100 (British Summer Time)

อย่างที่คุณเห็น บทความนี้เขียนขึ้นในสหราชอาณาจักรเมื่อวันที่ 24 มิถุนายน 2020 ตามการประทับเวลาของเรา ความสวยงามของวัตถุ Date คือการส่งคืนข้อมูลในรูปแบบวันที่ที่มนุษย์สามารถอ่านได้ เพื่อให้เราเข้าใจได้ง่าย

เรียกการประทับเวลาโดยใช้วันที่

มนุษย์เราอ่านโค้ดด้านบนได้ แต่มีปัญหา—JavaScript ทำงานต่างกัน มันแปลวันที่โดยใช้การประทับเวลา Unix การประทับเวลา Unix จะนับจำนวนวินาทีที่ผ่านไปตั้งแต่วันที่ 1 มกราคม 1970 ซึ่งเป็นเวลาที่เวลา Unix เริ่มต้นขึ้น

ในการดึงข้อมูลเวลาปัจจุบันเป็นการประทับเวลา คุณสามารถใช้ getTime() วิธีการ:

var currentDate = new Date();
console.log(currentDate.getTime());

รหัสของเราส่งคืน 1592992393313 ซึ่งเป็นตัวเลขที่จาวาสคริปต์สามารถตีความได้

การสร้างออบเจ็กต์วันที่

ค่าเริ่มต้นของวัตถุ Date คือวันที่และเวลาปัจจุบัน คุณสามารถเปลี่ยนค่านี้เพื่อสร้างวันที่ตามการประทับเวลาหรือวันที่และเวลาโดยเฉพาะได้

คุณสามารถทำได้โดยระบุการประทับเวลา สตริงวันที่ หรือชุดตัวเลขที่สอดคล้องกับวันที่และเวลาปัจจุบัน:

• วันที่ใหม่(ประทับเวลา)
• วันที่ใหม่(สตริง)
• วันที่ใหม่ (ปี เดือน วัน ชั่วโมง นาที วินาที จำนวนมิลลิวินาที)

สมมติว่าเราต้องการสร้างการประทับเวลาสำหรับวันที่ 1 มกราคม 2021 เราสามารถทำได้โดยใช้รหัสนี้:

var nextYear = new Date("January 1 2021 12:00");
console.log(nextYear);

รหัสของเราส่งคืน:ศุกร์ 01 ม.ค. 2021 12:00:00 GMT+0000 (Greenwich Mean Time)

นอกจากนี้เรายังสามารถสร้างการประทับเวลานี้โดยใช้บรรทัดของรหัสเหล่านี้:

var nextYear = new Date(1609502400000);
console.log(nextYear);

var nextYear = new Date(2021, 1, 1, 0, 0, 0, 0);
console.log(nextYear);

รหัสของเราส่งคืน:

Fri Jan 01 2021 12:00:00 GMT+0000 (Greenwich Mean Time)
Fri Jan 01 2021 12:00:00 GMT+0000 (Greenwich Mean Time)

เมธอดทั้งหมดเหล่านี้สร้างอ็อบเจ็กต์ Date เดียวกัน

เรียกวันที่

ออบเจ็กต์ Date มาพร้อมกับอาร์เรย์ของเมธอดในตัวเพื่อเข้าถึงข้อมูลบางส่วนเกี่ยวกับวันที่ วิธีการที่ให้คุณดึงข้อมูลเกี่ยวกับวันที่เริ่มต้นด้วย get . นี่คือรายการสำหรับการอ้างอิงของคุณ:

• ปี:getFullYear()
• เดือน:getMonth() (ระหว่าง 0 ถึง 11 โดยที่ 0 คือ มกราคม)
• วันของเดือน:getDate() (ระหว่าง 1 ถึง 31)
• วันในสัปดาห์:getDay() (ระหว่าง 0 ถึง 6 โดยที่วันอาทิตย์คือ 0)
• ชั่วโมง:getHours() (ระหว่าง 0 ถึง 23 โดยที่เที่ยงคืนคือ 0)
• นาที:getMinutes()
• วินาที:getSeconds()
• มิลลิวินาที:getMilliseconds()
• การประทับเวลา:getTime()

สมมุติว่าเราอยากจะรู้ว่าตอนนี้กี่โมงแล้ว เราสามารถทำได้โดยใช้รหัสนี้:

const currentDate = new Date();
console.log(currentDate.getHours());

รหัสของเราส่งคืน 11 . นี่แสดงให้เราเห็นว่าขณะนี้เป็นเวลา 11 ชั่วโมงต่อวัน

ฟังก์ชันเหล่านี้มีประโยชน์เพราะช่วยให้เราดึงข้อมูลเฉพาะเกี่ยวกับวันนั้นๆ เราไม่จำเป็นต้องกังวลเกี่ยวกับการจัดการสตริงใดๆ เราก็ใช้ get . ได้เลย วิธีการเรียนรู้เพิ่มเติมเกี่ยวกับเวลาปัจจุบัน

คุณสามารถดึงการประทับเวลาโดยใช้ Universal Time Coordinated (UTC) โดยเพิ่ม UTC ระหว่างคำว่า get และค่าวันที่ ตามค่าเริ่มต้น วัตถุ Date จะส่งคืนข้อมูลในเขตเวลาท้องถิ่นของผู้ใช้ หากคุณกำลังทำงานกับผู้ใช้ในหลายเขตเวลา ควรใช้ UTC เพื่อติดตามเหตุการณ์เวลาที่เกิดขึ้นอย่างง่ายดาย

กำลังอัปเดตออบเจ็กต์วันที่

สามารถอัปเดตวัตถุวันที่โดยใช้ Date set วิธีการ มี set วิธีการสำหรับทุก get วิธีการที่นำเสนอโดยวัตถุ Date:

• ปี:setFullYear()
• เดือน:setMonth()
• วันของเดือน:setDate()
• วันในสัปดาห์:setDay()
• ชั่วโมง:setHours()
• นาที:setMinutes()
• วินาที:setSeconds()
• มิลลิวินาที:setMilliseconds()
• ประทับเวลา:setTime()

สมมติว่าเราต้องการค้นหาว่าวันนี้เป็นวันอะไรของสัปดาห์ในปีที่แล้ว เราสามารถทำได้โดยตั้งค่าปีบนวัตถุ Date เป็น 2019 โดยใช้ setFullYear() . จากนั้น เราก็ใช้ getDay() เพื่อดึงข้อมูลวันในสัปดาห์:

const currentDate = new Date();
currentDate.setFullYear(2019);

const daysOfTheWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', Saturday', Sunday'];
const dayLastYear = currentDate.getDay();

console.log('On this day last year it was ' + daysOfTheWeek[dayLastYear]);

รหัสของเราส่งคืน:วันนี้ปีที่แล้วเป็นวันอังคาร

ก่อนอื่นเราใช้ Date() เพื่อดึงวันที่ปัจจุบัน จากนั้นเราใช้ setFullYear() วิธีการกำหนดปีบนวัตถุวันที่ของเราเป็น 2019

ต่อไป เราประกาศอาร์เรย์ชื่อ daysOfTheWeek . ซึ่งช่วยให้เราแปลงตัวเลขที่ส่งคืนโดย getDay() ในวันหนึ่งของสัปดาห์

จากนั้นเราใช้ getDay() วิธีหาว่าคราวนี้เป็นวันอะไรของสัปดาห์ในปี 2019 จากนั้นเราก็พิมพ์ข้อความ On this day last year it was ตามด้วยวันในสัปดาห์

บทสรุป

การใช้วัตถุ Date คุณสามารถทำงานกับวันที่และเวลาใน JavaScript วัตถุ Date มาพร้อมกับช่วงของ get วิธีที่ช่วยให้คุณเรียนรู้เกี่ยวกับเวลาปัจจุบันและ set วิธีการจัดการวัตถุวันที่และเวลา ตอนนี้คุณพร้อมที่จะเริ่มทำงานกับวันที่และเวลาใน JavaScript อย่างผู้เชี่ยวชาญแล้ว!