อ็อบเจ็กต์ `Date`
บทความนี้อธิบายเกี่ยวกับอ็อบเจ็กต์ Date
เราจะอธิบายเกี่ยวกับอ็อบเจ็กต์ Date ทีละขั้นตอน ตั้งแต่กลไกพื้นฐานไปจนถึงการใช้งานที่พบได้บ่อยในงานจริง พร้อมตัวอย่างที่ชัดเจน
YouTube Video
อ็อบเจ็กต์ Date
อ็อบเจ็กต์ Date คืออะไร?
อ็อบเจ็กต์ Date ใน JavaScript เป็นอ็อบเจ็กต์มาตรฐานสำหรับจัดการวันและเวลา ภายในมันจะจัดการวันและเวลาตามจำนวนมิลลิวินาทีที่ผ่านไปนับตั้งแต่วันที่ 1 มกราคม 1970 เวลา 00:00:00 UTC
ก่อนอื่น มาสร้างอ็อบเจ็กต์ Date ที่แทนวันที่และเวลาปัจจุบัน แล้วตรวจสอบเนื้อหาของมันกัน
1const now = new Date();
2console.log(now);- โค้ดนี้จะสร้างอ็อบเจ็กต์
Dateที่แทนวันและเวลาปัจจุบันในขณะที่รัน รูปแบบการแสดงผลจะขึ้นอยู่กับสภาพแวดล้อมที่รัน เช่น เบราว์เซอร์หรือระบบปฏิบัติการ
วิธีการสร้างอ็อบเจ็กต์ Date
สามารถสร้างอ็อบเจ็กต์ Date ได้หลายวิธีตามความต้องการ ข้อควรระวังที่สำคัญคือ พารามิเตอร์เดือนเริ่มนับจาก 0 หมายความว่าเดือนจะเริ่มที่ 0
1const d1 = new Date(); // Current date and time
2const d2 = new Date("2025-01-01"); // Create from an ISO date string
3const d3 = new Date(2025, 0, 1); // January 1, 2025 (month is zero-based)
4const d4 = new Date(2025, 0, 1, 10, 30); // January 1, 2025, 10:30
5
6console.log(d1, d2, d3, d4);- ใน
new Date(year, month, day)พารามิเตอร์monthหมายถึง0คือเดือนมกราคม และ11คือเดือนธันวาคม หากไม่เข้าใจข้อกำหนดนี้ อาจจะสร้างวันผิดไป 1 เดือนโดยไม่ตั้งใจ ดังนั้นควรระวังไว้เสมอ
การดึงข้อมูลแต่ละส่วนของวันและเวลา
คุณสามารถดึงข้อมูลปี เดือน วัน เวลา และวันในสัปดาห์จากอ็อบเจ็กต์ Date ได้แต่ละรายการ เมธอดดึงค่าทั้งหมดจะคืนค่าเป็นตัวเลข
1const date = new Date();
2
3console.log(date.getFullYear()); // Year
4console.log(date.getMonth()); // Month (0-based: 0 = January)
5console.log(date.getDate()); // Day of the month
6console.log(date.getHours()); // Hours
7console.log(date.getMinutes()); // Minutes
8console.log(date.getSeconds()); // Seconds
9console.log(date.getDay()); // Day of the week (0 = Sunday, 6 = Saturday)
- เช่นเดียวกับการสร้าง ให้ระวังว่า
getMonth()ก็นับเดือนเริ่มจาก 0 เช่นกัน เมื่อนำไปแสดงผล มักจะบวก 1 เพื่อปรับค่าให้ตรงกับเดือนจริง getDay()คืนค่าวันในสัปดาห์ในรูปแบบตัวเลข 0 แทนวันอาทิตย์ และ 6 แทนวันเสาร์
การแก้ไขวันและเวลา
Date เป็นอ็อบเจ็กต์ที่เปลี่ยนค่าได้ หมายความว่าสามารถเปลี่ยนแปลงค่าได้ภายหลัง คุณสมบัตินี้มีประโยชน์ แต่ต้องระวังผลกระทบที่ไม่ตั้งใจ
คุณสามารถใช้เมธอด set เพื่อเปลี่ยนค่าของอ็อบเจ็กต์ Date ที่มีอยู่แล้วได้
1const date = new Date("2025-01-01");
2
3date.setFullYear(2026);
4date.setMonth(5); // June
5date.setDate(15);
6
7console.log(date);- เมธอด
setMonth()ก็นับเดือนเริ่มจาก 0 อ็อบเจ็กต์ต้นฉบับจะถูกเปลี่ยนแปลงโดยตรง
การบวกและลบวันเวลา
โดยปกติจะคำนวณวันเวลาด้วยมิลลิวินาทีหรือใช้ setDate() สำหรับการคำนวณโดยใช้วัน การใช้ setDate() จะเข้าใจง่ายและปลอดภัยเป็นพิเศษ
1const date = new Date("2025-01-01");
2
3date.setDate(date.getDate() + 7);
4console.log(date);- ในตัวอย่างนี้ เรากำลังคำนวณวันที่ถัดไป 7 วันหลังจากวันที่ที่ระบุ แม้ว่าวันที่ที่บวกจะข้ามเดือนไป ระบบก็จะปรับให้โดยอัตโนมัติ
การเปรียบเทียบอ็อบเจ็กต์ Date
อ็อบเจ็กต์ Date สามารถนำมาเปรียบเทียบกันเป็นตัวเลขได้ เนื่องจากจะมีการเปรียบเทียบค่ามิลลิวินาทีภายใน
1const a = new Date("2025-01-01");
2const b = new Date("2025-01-10");
3
4console.log(a < b); // true
5console.log(a > b); // false
- ถ้าต้องการเรียงลำดับวันที่ ไม่จำเป็นต้องแปลงค่าเพิ่มเติม คุณสามารถใช้ตัวดำเนินการเปรียบเทียบได้โดยตรง
การจัดการค่าตราประทับเวลา (มิลลิวินาที)
Date สามารถแปลงเป็นและจากตัวเลขที่แทนมิลลิวินาที (timestamp) ได้ รูปแบบนี้มักใช้ใน API หรือการเชื่อมต่อฐานข้อมูล
1const now = Date.now();
2console.log(now);
3
4const date = new Date(now);
5console.log(date);Date.now()จะคืนค่าเวลาปัจจุบันในรูปแบบมิลลิวินาที มีประโยชน์มากเมื่อคุณต้องการเก็บหรือเปรียบเทียบค่าเป็นตัวเลข
การแปลงวันเวลาเป็นสตริง
การแสดงผล Date ทันที มักจะได้รูปแบบที่อาจไม่ตรงตามความต้องการ ดังนั้นควรกำหนดรูปแบบด้วยตนเองให้เหมาะกับความต้องการ
1const date = new Date("2025-01-01");
2
3const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
4console.log(formatted);- การจัดรูปแบบด้วยตนเองแบบนี้ คุณจะสามารถควบคุมรูปแบบการแสดงผลได้อย่างเต็มที่ ในการทำงานจริง โดยมากจะใช้ไลบรารีสำหรับจุดประสงค์นี้
ความแตกต่างระหว่างเวลา UTC และ Local Time
Date มีเมธอดสำหรับจัดการทั้งเวลา Local และ UTC จำเป็นต้องเข้าใจความแตกต่างนี้ให้ถูกต้องเพื่อการเชื่อมต่อกับเซิร์ฟเวอร์และความเข้ากันได้ระหว่างประเทศ
1const date = new Date();
2
3console.log(date.getHours()); // Local time (hours)
4console.log(date.getUTCHours()); // UTC time (hours)
- เมธอด
getUTC*จะคืนค่าโดยอ้างอิงจากเวลา UTC เสมอ ควรระวังเป็นพิเศษเมื่อจัดการข้อมูลข้ามเขตเวลา
ข้อควรระวังเมื่อใช้อ็อบเจ็กต์ Date
Date ใช้งานสะดวก แต่ก็มีจุดที่อาจทำให้เกิดปัญหาได้ โดยเฉพาะเรื่องเดือนนับจาก 0 และลักษณะข้อมูลที่เปลี่ยนค่าได้ มักเป็นสาเหตุของบั๊ก
เรามาดูตัวอย่างเฉพาะด้านล่างเพื่อดูผลกระทบจากการที่ Date สามารถเปลี่ยนแปลงค่าได้
1const original = new Date("2025-01-01");
2const copy = new Date(original);
3
4copy.setDate(10);
5
6console.log(original);
7console.log(copy);- หากต้องการเก็บวันและเวลาเดิมไว้ ควรสร้างสำเนาใหม่เสมอ เพียงแค่ตระหนักถึงจุดนี้ก็จะช่วยหลีกเลี่ยงบั๊กที่ไม่ตั้งใจได้
เหตุผลว่าทำไม Date จึงจัดการได้ยาก และเกณฑ์การเลือกใช้ไลบรารี
อ็อบเจ็กต์ Date มีฟีเจอร์เพียงพอในฐานะฟังก์ชันมาตรฐาน แต่ในทางปฏิบัติบางครั้งก็ใช้งานได้ยาก ปัญหาทั่วไปเช่น เดือนและวันในสัปดาห์เริ่มที่ศูนย์ มักเกิดความสับสนระหว่างเวลาท้องถิ่นกับ UTC และอ็อบเจ็กต์สามารถเปลี่ยนแปลงค่าได้ ปัญหาเหล่านี้อาจทำให้เกิดบั๊กมากขึ้นเมื่อมีการประมวลผลวันที่มากขึ้น
Date เพียงพอสำหรับการดึงและเปรียบเทียบวันที่แบบง่าย ๆ แต่เมื่อคำนวณหรือกำหนดรูปแบบการแสดงผลมากขึ้น ความสามารถในการอ่านและดูแลรักษาโค้ดจะลดลง
หากคุณมีความต้องการเช่นต่อไปนี้ คุณอาจต้องพิจารณาใช้ไลบรารีวันที่ที่น้ำหนักเบา เช่น dayjs หรือ date-fns
- คุณจำเป็นต้องจัดการเขตเวลาโดยเฉพาะ
- คุณจำเป็นต้องคำนวณวันที่หรือช่วงเวลาบ่อยครั้ง
- คุณต้องการเปลี่ยนรูปแบบการแสดงผลได้อย่างยืดหยุ่น
- คุณต้องการจัดการวันที่และเวลาแบบที่ไม่เปลี่ยนแปลง (immutable)
สรุป
อ็อบเจ็กต์ Date เป็นเครื่องมือพื้นฐานที่สุดสำหรับจัดการวันเวลาใน JavaScript เมื่อเข้าใจรายละเอียด ปัญหาคาใจ การสร้าง ดึงข้อมูล คำนวณ และจัดรูปแบบอย่างถูกต้อง คุณก็สามารถใช้งานได้ปลอดภัยในงานจริง
เมื่อเข้าใจพื้นฐานแล้ว การใช้ไลบรารีวัน/เวลาเพิ่มเติมตามความจำเป็นก็เป็นทางเลือกที่ดี
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย