φυβλαςのβλογ
บล็อกของ phyblas



javascript เบื้องต้น บทที่ ๑๕: การจัดการวันเวลา
เขียนเมื่อ 2019/07/31 23:25
แก้ไขล่าสุด 2020/04/18 09:29



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

ในจาวาสคริปต์นั้นการจัดการเวลาสามารถทำโดยใช้ออบเจ็กต์ Date ซึ่งเป็นออบเจ็กต์ในตัวที่มีเตรียมไว้ตั้งแต่แรกแล้ว

ออบเจ็กต์ Date มีหน้าที่อยู่ ๒ อย่าง คือ
- เป็นคอนสตรักเตอร์สร้างออบเจ็กต์วันเวลา
- รวบรวมฟังก์ชันที่เกี่ยวข้องกับการจัดการวันเวลา

ออบเจ็กต์วันเวลา คือออบเจ็กต์ที่เก็บข้อมูลวันเวลา สร้างขึ้นโดยใช้ Date เป็นคอนสตรักเตอร์ (ใช้ new Date ในการสร้าง) วิธีสร้างมีอยู่หลากหลาย

เช่น ใช้สายอักขระที่เขียนข้อมูลวันเวลาเอาไว้ในการสร้าง
var wanwela = new Date("2019-08-12 12:01:02");
alert(wanwela); // ได้ Mon Aug 12 2019 12:01:02 GMT+0700
var wanwela = new Date("2019/08/12 12:01:02");
alert(wanwela); // ได้ Mon Aug 12 2019 12:01:02 GMT+0700

เวลาจะกั้นด้วย / หรือ - ก็ได้ จะถูกตีความเป็นวันเวลาได้ทั้งนั้น

นอกจากนี้อาจสร้างขึ้นโดยใส่ตัวเลข ระบุ ปี, เดือน, วัน, ชั่วโมง, นาที, วินาที, มิลลิวินาที ตามลำดับ

เพียงแต่ว่าในส่วนของเดือนนั้นจะแปลกหน่อย โดยเดือนมกราคมมีค่าเป็น 0 และธันวาคมเป็น 11 ต่างจากที่คนทั่วไปใช้อยู่ 1 เสมอ

ตัวอย่าง
var wanwela = new Date(2019, 8, 12, 12, 1, 2, 0);
alert(wanwela); // ได้ Thu Sep 12 2019 12:01:02 GMT+0700

จะเห็นว่าใส่เลขเดือนเป็น 8 ไป แต่ผลที่ได้คือเดือนกันยายน ซึ่งตามหลักสากลแล้วควรเป็นเดือน 9

ในออบเจ็กต์มีการบันทึกเขตเวลาด้วย ดังนั้นเวลาที่สร้างขึ้นจริงๆขึ้นอยู่กับเขตเวลาที่ตั้งไว้ในเครื่องนั้น อย่างของไทยจะเป็น GMT+0700 คือเร็วกว่าเวลามาตรฐานไป ๗ ชั่วโมง

หากต้องการเวลาที่ UTC ให้เติม Z ต่อท้าย
var wanwela = new Date("2019-08-12 12:01:02Z");
alert(wanwela); // ได้ Mon Aug 12 2019 19:01:02 GMT+0700

เพียงแต่ว่าค่าเวลาที่แสดงก็ถูกแสดงเป็นเวลาท้องถิ่นอยู่ดี

หากต้องการให้แสดงผลเป็นเวลามาตรฐานกรีนิช หรือแสดงผลในแบบอื่นๆอาจใช้เมธอดอื่นสำหรับแสดงผล



เมธอดแสดงผลของวันเวลาแบบต่างๆ

หากต้องการให้เวลาแสดงเป็นเวลามาตรฐาน ให้ใช้เมธอด toUTCString
var wanwela = new Date("2019-08-16 12:15:30Z");
alert(wanwela.toUTCString()); // ได้ Fri, 16 Aug 2019 12:15:30 GMT

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

หากต้องการแสดงแค่ส่วนวันที่หรือส่วนเวลาอาจใช้เมธอด toDateString และ toTimeString
var wanwela = new Date("2019-08-17 15:20:20");
alert(wanwela.toString()); // ได้ Sat Aug 17 2019 15:20:20 GMT+0700
alert(wanwela.toDateString()); // ได้ Sat Aug 17 2019
alert(wanwela.toTimeString()); // ได้ 15:20:20 GMT+0700

นอกจากนี้มีเมธอด toLocaleString toLocaleDateString toLocaleTimeString สำหรับแสดงเวลาตามรูปแบบที่ขึ้นอยู่กับที่ตั้งไว้ในเครื่อง

อย่างในตัวอย่างนี้ตั้งให้แสดงวันเดือนปีแบบไทย คือเป็น พ.ศ. โดยเรียงวัน/เดือน/ปี
alert(wanwela.toLocaleString()); // ได้ 17/8/2562 15:20:20
alert(wanwela.toLocaleDateString()); // ได้ 17/8/2562
alert(wanwela.toLocaleTimeString()); // ได้ 15:20:20




การดูค่าวันเวลาในออบเจ็กต์วันเวลา

เมื่อสร้างออบเจ็กต์วันเวลามาแล้ว การดูค่าทำได้โดยผ่านเมธอดของออบเจ็กต์ เมธอดสำหรับดูค่าต่างๆในออบเจ็กต์จะขึ้นต้นด้วยคำว่า get ได้แก่

เมธอด ความหมาย
getFullYear ดูปี
getMonth ดูเดือน
getDate ดูวันที่
getDay ดูวันในสัปดาห์
getHours ดูชั่วโมง
getMinutes ดูนาที
getSeconds ดูวินาที
getMilliseconds ดูมิลลิวินาที
getTime ดูเวลาวินาทีไล่จาก 1970/01/01 00:00:00 ที่เขตเวลามาตรฐาน
getTimezoneOffset ดุว่าเวลามาตรฐานต่างจากเวลาที่นี่กี่นาที
getUTCFullYear ดูปีที่เขตเวลามาตรฐาน
getUTCMonth ดูเดือนที่เขตเวลามาตรฐาน
getUTCDate ดูวันที่ที่เขตเวลามาตรฐาน
getUTCDay ดูวันในสัปดาห์ที่เขตเวลามาตรฐาน
getUTCHours ดูชั่วโมงที่เขตเวลามาตรฐาน
getUTCMinutes ดูนาทีที่เขตเวลามาตรฐาน
getUTCSeconds ดูวินาทีที่เขตเวลามาตรฐาน
getUTCMilliseconds ดูมิลลิวินาทีที่เขตเวลามาตรฐาน

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

GetDay นั้นแสดงวันในสัปดาห์ โดยวันอาทิตย์นับเป็นเลข 0 วันเสาร์นับเป็น 6

เลขเดือนจะเป็นค่า 0~11 น้อยกว่าเดือนจริงๆอยู่ 1 ต้องระวังด้วย

ตัวอย่าง
var wanwela = new Date(2019, 8, 1, 1, 2, 3);
alert(wanwela); // ได้ Sun Sep 01 2019 01:02:03 GMT+0700
alert(wanwela.getFullYear()); // ได้ 2019
alert(wanwela.getMonth()); // ได้ 8
alert(wanwela.getDate()); // ได้ 1
alert(wanwela.getDay()); // ได้ 0
alert(wanwela.getHours()); // ได้ 1

alert(wanwela.getUTCDate()); // ได้ 31
alert(wanwela.getUTCMonth()); // ได้ 7
alert(wanwela.getUTCHours()); // ได้ 18

alert(wanwela.getTimezoneOffset()); // -420



การแก้ค่าในออบเจ็กต์วันเวลา

ออบเจ็กต์วันเวลาที่สร้างขึ้นมาแล้วสามารถเข้าไปแก้ค่าข้างในได้โดยเมธอดต่างๆที่ขึ้นต้นด้วย set

ชื่อทั้งหมดเหมือนกับเมธอด get ที่กล่าวไปข้างต้น แค่เปลี่ยนจาก get เป็น set เท่านั้น

เมธอด ความหมาย
setFullYear ตั้งค่าปี
setMonth ตั้งค่าเดือน
setDate ตั้งค่าวันที่
setHours ตั้งค่าชั่วโมง
setMinutes ตั้งค่านาที
setSeconds ตั้งค่าวินาที
setMilliseconds ตั้งค่ามิลลิวินาที
setTime ตั้งค่าเวลาวินาทีไล่จาก 1970/01/01 00:00:00 ที่เขตเวลามาตรฐาน
setUTCFullYear ตั้งค่าปีที่เขตเวลามาตรฐาน
setUTCMonth ตั้งค่าเดือนที่เขตเวลามาตรฐาน
setUTCDate ตั้งค่าวันที่ที่เขตเวลามาตรฐาน
setUTCHours ตั้งค่าชั่วโมงที่เขตเวลามาตรฐาน
setUTCMinutes ตั้งค่านาทีที่เขตเวลามาตรฐาน
setUTCSeconds ตั้งค่าวินาทีที่เขตเวลามาตรฐาน
setUTCMilliseconds ตั้งค่ามิลลิวินาทีที่เขตเวลามาตรฐาน

จะเห็นว่าเกือบจะเหมือนกับ get เพียงแต่บางค่าเป็นค่าที่เอาไว้ดูอย่างเดียว ตั้งค่าไม่ได้ เช่น Day วันในสัปดาห์ มีไว้ดูค่าอย่างเดียว มีแต่ get ไม่มี set

เวลาแก้ค่านั้นเราอาจใช้ get เพื่อหาค่าวันหรือเดือนหรือปีเดิม แล้วบวกลบออกจากค่านั้น สามารถเลื่อนวันที่ไปกี่วันกี่เดือนกี่ปีถัดไปตามที่ต้องการได้
ตัวอย่าง
var wanwela = new Date("2019-06-13 12:00:00");
alert(wanwela.toLocaleDateString()); // ได้ 13/6/2562
wanwela.setMonth(wanwela.getMonth() - 7);
alert(wanwela.toLocaleDateString()); // ได้ 13/11/2561
wanwela.setFullYear(wanwela.getFullYear() + 1);
alert(wanwela.toLocaleDateString()); // ได้ 13/11/2562
wanwela.setDate(wanwela.getDate() - 28);
alert(wanwela.toLocaleDateString()); // ได้ 16/10/2562



สร้างออบเจ็กต์วันเวลาโดยระบุข้อมูลแค่บางส่วน

ในการสร้างออบเจ็กต์วันเวลาอาจระบุแค่ปีแล้วส่วนที่เหลือก็จะถูกเติมขึ้นมาเอง
var wanwela = new Date("2019-08-12");
alert(wanwela); // ได้ Mon Aug 12 2019 07:00:00 GMT+0700
var wanwela = new Date("2019");
alert(wanwela); // ได้ Tue Jan 01 2019 07:00:00 GMT+0700

เวลาที่ได้มาจะถูกกำหนดเองเป็นเวลา 00:00 ของเวลามาตรฐานกรีนิช ซึ่งตรงกับ 07:00 ในไทย ดังนั้นจึงขึ้นเป็น 07:00

หากใส่แค่ปีจะได้วันที่ 1 เดือน 1 ของปีนั้น

เพียงแต่ว่ากรณีที่ใส่แค่ปีก็จำเป็นจะต้องใส่ในรูปของสายอักขระ เพราะถ้าใส่ตัวเลขไปแค่ตัวเดียว จะถูกตีความเป็นการสร้างวันเวลาโดยกำหนดค่ามิลลิวินาทีนับตั้งแต่ 1970/01/01 00:00:00 ที่เขตเวลามาตรฐาน
var wanwela = new Date(1600000000000);
alert(wanwela); // ได้ Sun Sep 13 2020 19:26:40 GMT+0700

เวลาช่วงปี 2020~2023 ค่าอยู่ที่ค่าประมาณ 1.6~1.7 ล้านล้าน



เวลาที่นับจาก 1970/01/01 00:00:00

ค่าเวลามิลลิวินาทีนับตั้งแต่จุดเริ่มต้นที่ 1970/01/01 00:00:00 นี้มีความสำคัญ ถูกใช้มาเป็นสากล ถูกกำหนดขึ้นมาเพื่อความสะดวกในการนับเวลา มีความเรียบง่ายกว่าระบบวันที่ที่เราใช้กันอยู่ในชีวิตประจำวัน

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

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

ในทางกลับกัน ในออบเจ็กต์ Date มีฟังก์ชันส่วนหนึ่งที่เอาไว้สำหรับหาตัวเลขนั้นจากวันเวลาที่ป้อนเข้าไป

ฟังก์ชัน ค่าป้อนเข้า
Date.parse สายอักขระแสดงวันเวลาตามเวลาท้องถิ่น
Date.UTC ตัวเลขปี เดือน วัน ชั่วโมง นาที วินาที มิลลิวินาที ตามเวลามาตรฐาน
Date.now เวลา ณ ตอนนี้


Date.parse นั้นจะให้ผลเหมือนกับสร้างออบเจ็กต์วันเวลาขึ้นมาโดยใช้สายอักขระจากนั้นใช้เมธอด getTime
alert(Date.parse("2019-08-18 15:20:20")); // ได้ 1566116420000
var wanwela = new Date("2019-08-18 15:20:20");
alert(wanwela.getTime()); // ได้ 1566116420000

นอกจากนี้อาจใช้ฟังก์ชัน Number เพื่อแปลงวันเวลาเป็นค่าตัวเลขได้ ผลเหมือนใช้ .getTime แต่จะใช้ parseInt แทนไม่ได้ ถ้าใช้ parseInt จะได้เป็น NaN
alert(Number(wanwela)); // ได้ 1566116420000
alert(parseInt(wanwela)); // ได้ NaN


ส่วน Date.UTC จะรับข้อมูลเป็นตัวเลขซึ่งบอกวันเวลาในเขตเวลามาตรฐาน
alert(Date.UTC(2019, 7, 18, 15, 20, 20)); // ได้ 1566141620000
alert(Date.UTC(2019, 7, 18, 8, 20, 20)); // ได้ 1566116420000


การหาส่วนต่างของเวลา

ออบเจ็กต์เวลาเมื่อนำมาใช้กับเครื่องหมายลบจะถูกเปลี่ยนเป็นตัวเลขมิลลิวินาทีนับจาก 1970/01/01 00:00:00 ไม่ว่าจะคำนวณกับข้อมูลชนิดตัวเลข หรือคำนวณกับข้อมูลชนิดวันเวลาด้วยกันก็ตาม

เช่น
var wanwela = new Date("2019-08-21 12:30:30");
alert(wanwela); // ได้ Wed Aug 21 2019 12:30:30 GMT+0700
alert(wanwela - 3600000); // ได้ 1566361830000
alert(wanwela - new Date("2019-08-21 12:30:29")); // ได้ 1000

ส่วนต่างที่ได้จากการลบวันเวลานั้นมีค่าเป็นหน่วยมิลลิวินาที ดังนั้นหากต้องการหาระยะห่างระหว่าง ๒ วันก็ต้องแปลงหน่วยเอา
var w1 = new Date("2019-08-22 12:30:30");
var w2 = new Date("2019-09-22 12:30:30");
alert((w2 - w1) / (1000 * 60 * 60 * 24)); // ได้ 31


การบวกเวลา

กรณีที่ต้องการเอาเวลามาบวกกันนั้นจะยุ่งยากหน่อย เพราะต่างจากลบตรงที่เวลาเอาออบเจ็กต์วันเวลามาบวกกันจะถูกแปลงเป็นสายอักขระ ดังนั้นจึงต้องแปลงเป็นเลขก่อน โดยใช้ Number หรือ .getTime

เช่น หากต้องการหาเวลากึ่งกลางระหว่างวัน ๒ วัน
var w1 = new Date("2019-08-24 18:30:00");
var w2 = new Date("2019-09-24 18:30:00");
var w3 = new Date((Number(w1) + Number(w2)) / 2);
alert(w3); // ได้ Mon Sep 09 2019 06:30:00 GMT+0700




-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> javascript

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
มอดูลต่างๆ
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
maya
javascript
ความน่าจะเป็น
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
-- บันทึกในฮ่องกง
-- บันทึกในมาเก๊า
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
เรียนภาษาจีน
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  ค้นหาบทความ

  บทความแนะนำ

รวมรายชื่อนักร้องเพลงกวางตุ้ง
ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
หลักการเขียนทับศัพท์ภาษาจีนกวางตุ้ง
การใช้ unix shell เบื้องต้น ใน linux และ mac
หลักการเขียนทับศัพท์ภาษาจีนกลาง
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
บันทึกการเที่ยวสวีเดน 1-12 พ.ค. 2014
แนะนำองค์การวิจัยและพัฒนาการสำรวจอวกาศญี่ปุ่น (JAXA)
เล่าประสบการณ์ค่ายอบรมวิชาการทางดาราศาสตร์โดยโซวเคนได 10 - 16 พ.ย. 2013
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
บันทึกการเที่ยวญี่ปุ่นครั้งแรกในชีวิต - ทุกอย่างเริ่มต้นที่สนามบินนานาชาติคันไซ
หลักการเขียนทับศัพท์ภาษาญี่ปุ่น
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ
ทำไมถึงอยากมาเรียนต่อนอก
เหตุผลอะไรที่ต้องใช้ภาษาวิบัติ?

ไทย

日本語

中文