วันที่และเวลา ในภาษา JavaScript

5 November 2020

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

  • วันที่และเวลาปัจจุบัน
  • การสร้างวันที่จากออบเจ็ค Date
  • Unix timestamp
  • การบวกลบวันที่และเวลา
  • การจับเวลาการทำงานของโปรแกรม
  • โปรแกรมนาฬิกาจับเวลา

วันที่และเวลาปัจจุบัน

เมื่อต้องทำงานกับเวลา การทำงานพื้นฐานอย่างหนึ่งที่เรามักจะทำก็คือการนำวันที่และเวลาปัจจุบันในระบบมาใช้งานในโปรแกรม สำหรับตัวอย่างแรกในบทนี้ เราจะมาเขียนโปรแกรมเพื่อแสดงวันที่และเวลาปัจจุบันออกทางหน้าจอ นี่เป็นตัวอย่างของโปรแกรมในภาษา JavaScript

current_date.js
let date = new Date();
console.log(date.toString());
console.log(date.toLocaleString());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Thu Nov 05 2020 20:57:00 GMT+0700 (Indochina Time)
05/11/2020, 20:57:00

ในตัวอย่างนี้ เป็นโปรแกรมสำหรับแสดงวันที่และเวลาปัจจุบันออกทางหน้าจอในภาษา JavaScript ก่อนอื่นเราได้สร้างออบเจ็คของวันที่ปัจจุบันจากคลาส Date และเก็บมันไว้ในตัวแปร date

let date = new Date();

นี่เป็นออบเจ็คของวันที่ปัจจุบันในตอนที่ตัวอย่างนี้ถูกรัน ออบเจ็ค date นั้นประกอบไปด้วยเมธอดที่เราสามารถเรียกข้อมูลเกี่ยวกับวันที่และเวลาได้ ในคำสั่งนี้เนื่องจากเราไม่ได้ส่งค่าใดๆ เข้าไปยังคอนสตรัคเตอร์ในตอนสร้างออบเจ็ค ดังนั้นค่าที่ส่งกลับมาเป็นออบเจ็คของวันที่ปัจจุบัน

เราสามารถใช้คอนสตรัคเตอร์เพื่อสร้างออบเจ็คของวันที่ในรูปแบบอื่นๆ ได้ เช่น สร้างจากวันที่ที่เป็น String หรือการระบุวันที่และเวลาที่ต้องการเป็นตัวเลข ซึ่งเราจะพูดถึงในอีกไม่ช้านี้

และในการแสดงวันที่และเวลาปัจจุบันออกทางหน้าจอ เราสามารถเรียกใช้สองเมธอดพื้นฐานที่มีบนออบเจ็คของวันที่ได้ดังนี้

console.log(date.toString());
console.log(date.toLocaleString());

เมธอด toString ส่งค่ากลับเป็น String ของเวลาและวันปัจจุบันจากคอมพิวเตอร์ของเราในรูปแบบมาตรฐาน และเมธอด toLocaleString ก็เช่นเดียวกัน แต่ส่งค่ากลับเป็นวันที่และเวลาตามรูปแบบของเวลาท้องถิ่นแทน

นอกจากนี้ ในออบเจ็ค Date ยังมีเมธอดอื่นๆ ที่เราสามารถเรียกใช้เพื่อรับเอาค่าของวันที่และเวลาได้ ในตัวอย่างนี้ แสดงงการใช้งานเมธอดเพิ่มเติมนอกจากเมธอดที่ได้กล่าวไปข้างต้น

current_date_method.js
let date = new Date();
console.log(date.toString());
console.log(date.toDateString());
console.log(date.toTimeString());

// UTC date
console.log(date.toUTCString());
console.log(date.toISOString());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Thu Nov 05 2020 21:06:33 GMT+0700 (Indochina Time)
Thu Nov 05 2020
21:06:33 GMT+0700 (Indochina Time)
Thu, 05 Nov 2020 14:06:33 GMT
2020-11-05T14:06:33.006Z

ในตัวอย่างนี้ เราได้แสดงการใช้งานเมธอดอื่นๆ สำหรับรับเอาค่าของวันที่และเวลาปัจจุบันในระบบนอกเหนือจากเมธอด toString และเมธอด toLocaleString

console.log(date.toString());
console.log(date.toDateString());
console.log(date.toTimeString());

ในขณะที่เมธอด toString นั้นส่งค่ากลับเป็นวันที่และเวลาในรูปแบบเต็ม เมธอด toDateString จะส่งค่ากลับเฉพาะส่วนของวันที่ และเมธอด toTimeString จะส่งค่ากลับเฉพาะส่วนของเวลา ถ้าหากคุณต้องการแสดงวันที่หรือเวลาเพียงอย่างเดียว คุณสามารถใช้เมธอดเหล่านี้ได้

ในทำนองเดียวกัน สำหรับการรับค่าวันที่และเวลาในรูปแบบของเวลาท้องถิ่น คุณสามารถใช้เมธอด toLocaleDateString สำหรับรับเอาค่าวันที่เพียงอย่างเดียว หรือเมธอด toLocaleTimeString สำหรับรับเอาค่าของเวลาเพียงอย่างเดียวได้

console.log(date.toUTCString());
console.log(date.toISOString());

เมธอด toUTCString ส่งค่ากลับเป็นวันที่ในรูปแบบของเวลาสากลเชิงพิกัด (UTC) ที่ใช้เป็นเวลาอ้างอิงจากเขตเวลาทั่วโลก เมธอด toISOString ส่งค่ากลับเป็นวันที่ในรูปแบบ ISO 8601 เวลาที่ได้จากเมธอดนี่จะเป็นเวลา UTC ที่มีเขตเวลาเป็น UTC+0 เสมอ

ตัวอักษร Z ที่คุณเห็นใน String ของเวลานั้นหมายถึงเวลาแสดงอยู่ในเขตเวลา UTC+0

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

ในการสร้างออบเจ็คของวันที่ด้วยคลาส Date นั้นเราสามารถสร้างของออบเจ็คของวันที่ที่ต้องการได้ โดยการกำหนดค่าเวลาและวันที่ในรูปแบบของ String และตัวเลข หรือด้วยค่า Timestamp ในตัวอย่างนี้ แสดงการสร้างออบเจ็คของวันที่ด้วยวิธีการต่างๆ

creating_date.js
let today = new Date();
let birthday1 = new Date("March 12, 1988 05:28:00");
let birthday2 = new Date("1988-03-12T05:28:00");
let birthday3 = new Date(1995, 2, 17);      // Using month index
let birthday4 = new Date(1995, 2, 17, 5, 28, 0);

console.log(today);
console.log(birthday1);
console.log(birthday2);
console.log(birthday3);
console.log(birthday4);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

2020-10-01T14:49:03.020Z
1988-03-11T22:28:00.000Z
1988-03-11T22:28:00.000Z
1995-03-16T17:00:00.000Z
1995-03-16T22:28:00.000Z

ในตัวอย่าง แสดงการสร้างเวลาโดยการกำหนดวันที่ในรูปแบบต่างๆ ในการสร้างออบเจ็คด้วยคลาส Date นั้นถ้าเราไม่ส่งอาร์กิวเมนต์ ออบเจ็คที่ได้จะเป็นออบเจ็คของวันที่และเวลาปัจจุบัน เหมือนกับในตัวแปร today

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

let birthday1 = new Date("March 12, 1988 05:28:00");
let birthday2 = new Date("1988-03-12T05:28:00");

ในสองคำสั่งนี้เป็นการสร้างออบเจ็คของวันที่จาก String ของวันที่ในรูปแบบ Local Date และ ISO Date การสร้างวันที่ด้วย String นั้นมีประโยชน์ในกรณีที่เราได้รับค่าของวันที่มาจากแหล่งอื่นที่เป็น String เช่น จากฟอร์มของ HTML หรือวันที่จากฐานข้อมูล เป็นต้น

let birthday3 = new Date(1995, 2, 17);      // Using month index
let birthday4 = new Date(1995, 2, 17, 5, 28, 0);

ต่อมาเป็นการสร้างวันที่โดยส่งพารามิเตอร์เป็นตัวเลข ซึ่งลำดับขอพารามิเตอร์จะเรียงตาม ปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที ตามลำดับ ถ้าหากเราใส่ไม่ครบทุกพารามิเตอร์ ภาษา JavaScript จะใช้ 0 เป็นค่าเริ่มต้นให้กับพารามิเตอร์ที่เหลือ

จะเห็นว่าในตัวแปร birthday3 เนื่องจากเรากำหนดเพียงค่าของวันที่ในสามพารามิเตอร์แรก ดังนั้นค่าของเวลาทั้งหมดจึงมีค่าเป็น 0 แทน

สิ่งสำคัญที่คุณต้องทราบในการสร้างวันที่ด้วยตัวเลขก็คือ ค่าของเดือนจะต้องเป็นค่า Index ของเดือนเท่านั้น นั่นหมายความว่าเดือนแรกจะค่า Index เป็น 0 และเดือนสุดท้ายจะมีค่า Index เป็น 11 ดังนั้นในตัวอย่าง เนื่องจากเราสร้างวันที่ของเดือนมีนาคม 2 จึงเป็นค่า Index ของเดือนที่เราใช้ในการสร้างวันที่

และนี่เป็นรูปแบบของการใช้คลาส Date ในการสร้างออบเจ็คของวันที่จากรูปแบบทั้งหมดที่เราสามารถใช้ได้

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

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

นอกจากสร้างออบเจ็คของวันที่ด้วย String และตัวเลขแล้ว เรายังสามารถสร้างวันที่ด้วยค่าของ Timestamp ได้ นี่เป็นตัวอย่าง

from_timestamp.js
let date1 = new Date();
let date2 = new Date(Date.now());
let date3 = new Date(574102800000); // Mar 12 1988 00:00:00

console.log(date1.toString());
console.log(date2.toString());
console.log(date3.toString());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Wed Nov 04 2020 00:16:57 GMT+0700 (Indochina Time)
Wed Nov 04 2020 00:16:57 GMT+0700 (Indochina Time)
Sat Mar 12 1988 00:00:00 GMT+0700 (Indochina Time)

ในตัวอย่าง เป็นการสร้างออบเจ็คของวันที่ด้วยค่า Timestamp คุณสามารถระบุค่า Timestamp สำหรับช่วงเวลาใดๆ หรือรับเอาค่าของ Timestamp ปัจจุบันได้ด้วยเมธอด Date.now เพื่อนำมันมาใช้ในการสร้างออบเจ็คของวันที่

let date1 = new Date();
let date2 = new Date(Date.now());

เมื่อเราสร้างออบเจ็คของวันที่ด้วยค่า Timestamp ปัจจุบันที่ได้จากเมธอด Date.now เราจะได้ออบเจ็คของวันที่ที่มีเวลาเหมือนกับการสร้างออบเจ็คแบบไม่ส่งพารามิเตอร์ ดังนั้นทั้งออบเจ็ค date1 และ date2 นั้นให้ผลลัพธ์การทำงานที่เหมือนกับ ซึ่งเป็นการสร้างออบเจ็คจากวันที่ปัจจุบันนั่นเอง

let date3 = new Date(574102800000);

นอกจากนี้เราสามารถสร้างออบเจ็คของวันที่โดยการใช้ค่า Timestamp ของช่วงเวลาใดๆ ได้ ในตัวอย่าง 574102800000 นั้นเป็นค่าของเวลา Timestamp ของวันที่ 12 มีนาคม 1998 จากนั้นเราแสดงวันที่ทั้งหมดออกทางหน้าจอด้วยการรับค่าจากเมธอด toString

Unix timestamp

Unix timestamp หรือ Timestamp คือเวลาที่แสดงในรูปแบบของตัวเลขที่เริ่มนับจาก Unix epoch หรือวันที่ 1 มกราคม 1970 เวลา 00:00:00 ในภาษา JavaScript นั้นค่าของ Timestamp มีหน่วยเป็นมิลลิวินาที และเนื่องจาก Timestamp เป็นตัวเลข นั่นจึงทำให้เราสามารถใช้มันสำหรับการคำนวณ เช่น การบวกลบเพื่อหาผลต่างของเวลา หรือสร้างเวลาใหม่ที่อ้างอิงจากเวลาปัจจุบันได้ ซึ่งเราจะพูดถึงอีกครั้งในส่วนของการบวกลบวันที่และเวลา

ในภาษา JavaScript เราสามารถรับเอาค่า Timestamp ของออบเจ็ควันที่ใดๆ ได้โดยการเรียกใช้เมธอด getTime หรือรับเอาค่า Timestamp ของเวลาปัจจุบันจาก static เมธอด Date.now นี่เป็นตัวอย่าง

current_timestamp .js
let time1 = new Date().getTime();
let time2 = Date.now();

console.log("Current timestamp");
console.log("getTime: " + time1);
console.log("Date.now: " + time2);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Current timestamp
getTime: 1601550618234
Date.now: 1601550618234

ในตัวอย่างนี้ เป็นการรับเอาค่า Timestamp ของเวลาปัจจุบันจากระบบและแสดงมันออกทางหน้าจอ ในการรับค่า Timestamp ปัจจุบันนั้นสามารถได้สองวิธีดังนี้

let time1 = new Date().getTime();

เราสามารถรับเอาค่า Timestamp จากออบเจ็คของวันที่ได้โดยการเรียกใช้เมธอด getTime เนื่องจากในตัวแปร time1 นั้นเป็นออบเจ็คของวันที่ปัจจุบัน ดังนั้นค่า Timestamp ที่ได้จากเมธอดจะเป็นค่าของเวลาปัจจุบันในระบบ

let time2 = Date.now();

อีกวิธีคือการเรียกใช้งานเมธอด Date.now เมธอดนี้เป็น static เมธอดและใช้กรณีที่เราต้องการรับเอาค่าของ Timestamp ปัจจุบันเพียงอย่างเดียว

ในการทำงานเบื้องของภาษา JavaScript นั้น คุณรู้หรือไม่ว่าค่าของวันที่นั้นถูกเก็บอยู่ในรูปแบบของ Timestamp เสมอ นั่นเป็นเพราะว่า Timestamp เป็นค่าทีสามารถใช้ระบุถึงช่วงเวลาใดๆ ได้ และมันง่ายที่เราจะใช้มันเพื่อแปลงการแสดงผลของวันที่ให้อยู่ในรูปแบบต่างๆ ดังตัวอย่างต่อไปนี้

timestamp_base.js
let date = new Date(1980, 0, 1);

// Timestamp value for Jan 01 1980
console.log(date.getTime());

// Convert it to differnce formats
console.log(date.toString());
console.log(date.toLocaleString());
console.log(date.toISOString());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

315507600000
Tue Jan 01 1980 00:00:00 GMT+0700 (Indochina Time)
01/01/1980, 00:00:00
1979-12-31T17:00:00.000Z

ในตัวอย่างนี้ เราสร้างออบเจ็คของวันที่ Jan 01 1980 เมื่อออบเจ็คถูกสร้าง ค่าของเวลาที่เก็บในออบเจ็คมีเพียงค่าของ Timestamp เท่านั้น และเราสามารถเข้าถึงค่า Timestamp ด้วยเมธอด getTime บนออบเจ็คของวันที่

console.log(date.toString());
console.log(date.toLocaleString());
console.log(date.toISOString());

จากนั้นเมื่อเราเรียกใช้เมธอดเพื่อรับเอาค่าของวันที่ในรูปแบบต่างๆ เมธอดเหล่านี้จะนำค่าของ Timestamp มาแปลงให้อยู่ในรูปแบบที่กำหนด ขึ้นกับว่าเมธอดนั้นส่งค่ากลับเป็นวันที่ในรูปแบบไหน นี่แสดงให้เห็นว่า Timestamp ไม่ขึ้นกับรูปแบบของวันที่ใดๆ

สำหรับตัวอย่างการใช้งาน Timestamp ที่พบบ่อยในการเขียนโปรแกรมคือเราสามารถดำเนินการทางคณิตศาสตร์เช่น การบวกและการลบ Timestamp ได้ ในตัวอย่างนี้ เป็นโปรแกรมสำหรับหาผลต่างจากสองช่วงเวลาในภาษา JavaScript

time_difference.js
let date1 = new Date(1980, 0, 1);
let date2 = new Date(1980, 0, 2);

let diff = Math.abs(date2.getTime() - date1.getTime());
console.log("Difference in millisecond:", diff);
console.log("Difference in second:", diff / 1000);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Difference in millisecond: 86400000
Difference in second: 86400

ในตัวอย่างนี้ เรามีออบเจ็คของสองวันที่คือ Jan 01 1980 และ Jan 02 1980 เนื่องจากเราไม่ได้สร้างออบเจ็คโดยการระบุเวลา ดังนั้นเวลาของทั้งสองออบเจ็คนั้นมีค่าเป็น 00:00:00

let diff = Math.abs(date2.getTime() - date1.getTime());

เราสามารถหาผลต่างของเวลาได้โดยการนำ Timestamp ของเวลาทั้งสองมาลบกัน นี่จะส่งค่ากลับเป็นผลต่างของเวลาในหน่วยมิลลิวินาที ดังนั้นผลลัพธ์ที่ได้คือ 86400000 ซึ่งเป็นผลต่างที่อยู่ในหน่วยมิลลิวินาที่ เราสามารถหารด้วย 1000 เพื่อแปลงมิลลิวินาทีไปยังวินาที

ผลลัพธ์ของโปรแกรมแสดงให้เห็นว่าเวลาทั้งสองนั้นต่างกัน 86400 วินาที ซึ่งนี่เป็นค่าของจำนวนวินาทีทั้งหมดในหนึ่งวัน

การบวกลบวันที่และเวลา

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

date_arithmetic.js
let date = new Date(2020, 2, 1, 10, 0, 0);

// Addition
let nextHour = new Date(date.getTime() + 3600E3);
let tomorrow = new Date(date.getTime() + 86400E3);
let nextMonth = new Date(date.getTime() + 30 * 86400E3);

// Subtract
let tenMinutesAgo = new Date(date.getTime() - 600E3);
let yesterday = new Date(date.getTime() - 86400E3);

console.log("Today:", date.toString());
console.log("Next hour:", nextHour.toString());
console.log("Tomorrow:", tomorrow.toString());
console.log("Next month:", nextMonth.toString());

console.log("Last ten minutes:", tenMinutesAgo.toString());
console.log("Yesterday:", yesterday.toString());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Today: Sun Mar 01 2020 10:00:00 GMT+0700 (Indochina Time)
Next hour: Sun Mar 01 2020 11:00:00 GMT+0700 (Indochina Time)
Tomorrow: Mon Mar 02 2020 10:00:00 GMT+0700 (Indochina Time)
Next month: Tue Mar 31 2020 10:00:00 GMT+0700 (Indochina Time)
Last ten minutes: Sun Mar 01 2020 09:50:00 GMT+0700 (Indochina Time)
Yesterday: Sat Feb 29 2020 10:00:00 GMT+0700 (Indochina Time)

ในตัวอย่างนี่ เราสร้างออบเจ็คของวันที่ที่มีค่าเป็น Mar 01 2020 เวลา 10:00:00 และเก็บมันไว้ในตัวแปร date จากนั้นเราจะสร้างออบเจ็คของวันที่อื่นโดยอ้างอิงจากวันที่ในออบเจ็คนี้ โดยการนำค่า Timestamp มาบวกหรือลบกันเพื่อให้ได้วันที่ใหม่

let nextHour = new Date(date.getTime() + 3600E3);
let tomorrow = new Date(date.getTime() + 86400E3);
let nextMonth = new Date(date.getTime() + 30 * 86400E3);

ในสามคำสั่งนี้เป็นการสร้างออบเจ็คของวันที่ใหม่โดยอ้างอิงจากวันที่ในตัวแปร date เมื่อเราทำการบวกค่าของ Timestamp เข้ากับตัวเลข จะทำให้ได้ค่าของ Timestamp ที่เป็นวันที่ที่เลื่อนไปข้างหน้า ตามค่าของเวลาที่บวกเข้าไป

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

let tenMinutesAgo = new Date(date.getTime() - 600E3);
let yesterday = new Date(date.getTime() - 86400E3);

และในทางกลับใน เมื่อเราลบค่าของ Timestamp ออกด้วยระยะเวลาที่กำหนด จะทำให้เราได้เวลาย้อนกลับไปในอดีตหรือเวลาที่ผ่านไปแล้ว ในสองคำสั่งนี้เป็นการสร้างออบเจ็คของวันที่ในสิบนาทีที่แล้ว และวันที่ของเมื่อวานในเวลาเดียวกัน โดยอ้างอิงจากเวลาในออบเจ็ค date

เรื่องน่ารู้: 3600E3 นั้นเป็นการเขียน Literal ของตัวเลขในรูปแบบสัญญกรณ์วิทยาศาสตร์ในภาษา JavaScript ซึ่งมันมีค่าเท่ากับ 3600 * 10 ^ 3 อย่างไรก็ตามคุณสามารถเขียนในรูปแบบเต็มได้ด้วย 3600 * 1000 แต่เนืื่องจากมันต้องเขียนยาวกว่าดังนั้นเราเลือกเขียนในรูปแบบสั้นแทน

นี่เป็นตัวอย่างที่คล้ายกันกับตัวอย่างก่อนหน้า ในตัวอย่างนี้ เป็นการสร้างออบเจ็คของเวลาในหนึ่งชั่วโมงข้างหน้าและหนึ่งชั่วโมงที่ผ่านมา โดยใช้ค่า Timestamp ของเวลาปัจจุบันจากเมธอด Date.now แทน ดังนั้นในตอนที่คุณรันโปรแกรมนี้ วันที่ใหม่ที่ได้จะอ้างอิงจากเวลาปัจจุบันบนคอมพิวเตอร์ของคุณ

date_arithmetic_from_now.js
let now = new Date(Date.now());
let lastHour = new Date(now.getTime() - 3600 * 1000);
let nextHour = new Date(now.getTime() + 3600 * 1000);

console.log(now);
console.log(lastHour);
console.log(nextHour);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

2020-11-04T11:59:48.141Z
2020-11-04T10:59:48.141Z
2020-11-04T12:59:48.141Z

เราสามารถสร้างออบเจ็คของเวลาที่อ้างอิงจากเวลาที่กำหนดได้โดยการบวกค่าอ้างอิงที่ต้องการเข้ากับค่าของ Timestamp ของเวลาปัจจุบันด้วยเมธอด getTime ในตัวอย่างนี้ เราสร้างเวลาในหนึ่งชั่วโมงก่อนและหลังจากเวลา โดยอ้างอิงจากเวลาในตัวแปร now

ในตัวอย่างนี้แสดงการหาผลต่างของเวลาด้วย Timestamp อีกครั้ง แต่เราจะเขียนโปรแกรมเพื่อคำนวณว่าเหลืออีกกี่วันที่จะถึงวันคริสมาสต์ในปีนี้ เราได้กำหนดให้เวลาในตอนนี้เท่ากับวันที่ September 30, 2020

day_until_christmas.js
let nextChristmas = new Date("December 25, 2020");
let today = new Date("September 30, 2020");

let diff = nextChristmas.getTime() - today.getTime();
let dayLeft = Math.floor(diff / 86400E3);

console.log("Diff in ms:", diff);
console.log(`${dayLeft} days left until Christmas!`);

นี่เป็นผลลัพธ์การทำงาของโปรแกรม

Diff in ms: 7430400000
86 days left until Christmas!

ในตัวอย่างนี้ เป็นโปรแกรมเพื่อคำนวณหาว่าเหลือเวลาอีกกี่วันจะถึงวันคริสมาสตร์ที่กำลังจะมาถึงในปีนี้ และเพื่อทำให้ผลลัพธ์การทำงานไม่เปลี่ยนแปลงในการรันแต่ละครั้ง เรากำหนดวันที่ปัจจุบันในตัวแปร today เป็นวันที่ September 30, 2020

let diff = nextChristmas.getTime() - today.getTime();
let dayLeft = Math.floor(diff / 86400E3);

จากนั้นเป็นการหาผลต่างของเวลาทั้งสองโดยนำค่า Timestamp ของเวลามาลบกัน จะได้ความแตกต่างของเวลาในหน่วยมิลลิวินาทีในตัวแปร diff จากนั้นเป็นการแปลงวินาทีให้เป็นวัน โดยการหารด้วย 86400E3 ซึ่งเป็นจำนวนมิลลิวินาทีทั้งหมดในหนึ่งวัน

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

การจับเวลาการทำงานของโปรแกรม

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

ในตัวอย่างแรกสำหรับโปรแกรมจับเวลา เราจะมาเขียนโปรแกรมสำหรับจับเวลาการทำงานของโค้ดว่ามันใช้เวลาเท่าไหร่ในการประมวลผลแต่ส่วน นี่เป็นตัวอย่างโปรแกรมจับเวลาสำหรับการเรียงตัวเลข 100,000 ตัวเลขในอาเรย์

benchmarking.js
let numers = [];
let start, end;

start = Date.now();
for (let i = 0; i < 100000; i++) {
    numers.push(Math.random());
}
end = Date.now();

console.log(`Random 100K numbers took: ${end - start} ms`);

start = Date.now();
numers.sort();
end = Date.now();

console.log(`Sorting 100K numbers took: ${end - start} ms`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Random 100K numbers tooks: 10 ms
Sorting 100K numbers tooks: 377 ms

ในตัวอย่างนี้ เป็นโปรแกรมสำหรับจับเวลาการทำงานของโปรแกรม โดยหาผลต่างของเวลาระหว่างสองจุด ซึ่งเราแบ่งการจับเวลาออกเป็นสองส่วนดังนี้

start = Date.now();
for (let i = 0; i < 100000; i++) {
    numers.push(Math.random());
}
end = Date.now();

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

start = Date.now();
numers.sort();
end = Date.now();

ต่อมาหลังจากที่ได้รับตัวเลขจากการสุ่มทั้ง 1 แสนตัวเลขเก็บไว้ในตัวแปร numers แล้ว เป็นการเรียงตัวเลขในอาเรย์ด้วยเมธอด sort และจับเวลาสำหรับการทำงานนี้ด้วย ซึ่งเมธอดนี้จะทำการเรียงตัวเลขในอาเรย์จากน้อยไปมาก

console.log(`Random 100K numbers took: ${end - start} ms`);
...
console.log(`Sorting 100K numbers took: ${end - start} ms`);

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

ตัวอย่างโปรแกรมนาฬิกาจับเวลา

นี่เป็นอีกตัวอย่างสำหรับการจับเวลาในภาษา JavaScript มันเป็นโปรแกรมแสดงนาฬิกาจับเวลาอย่างง่ายที่แสดงเวลาที่ผ่านไปหลังจากที่โปรแกรมนี้ถูกรัน

stopwatch.js
let start = Date.now();

setInterval(function () {
    let diff = Math.floor((Date.now() - start) / 1000);
    let second = diff % 60;
    let minute = Math.floor(diff / 60);
    console.log(minute + " min " + second + " sec");
}, 1000);

นี่เป็นผลลัพธ์บางส่วนจากการทำงานของโปรแกรม และเนื่องจากโปรแกรมนี้รันตลอดไป คุณจะต้องกด CTRL+C เพื่อหยุดการทำงานของมัน

0 min 1 sec
0 min 2 sec
0 min 3 sec
0 min 4 sec
0 min 5 sec
...

ในตอนที่โปรแกรมเริ่มต้นทำงาน เราเก็บค่า Timestamp ของเวลาที่เริ่มต้นไว้ในตัวแปร start เพื่อที่จะใช้มันคำนวณในภายหลัง จากนั้นเราใช้ฟังก์ชัน setInterval สำหรับรันโค้ดในฟังก์ชันทุกๆ 1 วินาที หรือ 1000 มิลลิวินาทีที่กำหนดในอาร์กิวเมนต์ที่สองของฟังก์ชัน

let diff = Math.floor((Date.now() - start) / 1000);
let second = diff % 60;
let minute = Math.floor(diff / 60);
console.log(minute + " min " + second + " sec");

ฟังก์ชัน setInterval จะรันโค้ดในฟังก์ชัน Callback ทุกๆ หนึ่งวินาทีเพื่อคำนวณหาเวลาที่ผ่านไป โดยนำเวลาปัจจุบันมาลบกับเวลาเริ่มต้นที่โปรแกรมทำงานและเก็บไว้ในตัวแปร diff จากนั้นเป็นการจัดรูปแบบการแสดงผลของเวลาในรูปแบบ นาที และวินาที

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการใช้งานวันที่และเวลาในภาษา JavaScript เราได้พูดถึงการสร้างเวลาในรูปแบบต่างๆ และการใช้งานเมธอดต่างๆ สำหรับจัดรูปแบบการแสดงผลของเวลา และตัวอย่างการประยุกต์ใช้เวลาในการเขียนโปรแกรมในรูปแบบต่างๆ

บทความนี้เป็นประโยชน์หรือไม่? Yes · No