การจัดรูปแบบการแสดงผลวันที่ ในภาษา JavaScript
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการจัดรูปแบบการแสดงผลวันที่และเวลาในภาษา JavaScript สำหรับจัดรูปแบบวันที่ในรูปแบบมาตรฐานหรือแบบกำหนดเองโดยการประยุกต์ใช้เมธอดจากคลาส Date
นี่เป็นเนื้อหาในบทนี้
- การแสดงวันที่และเวลาแบบมาตรฐาน
- การรับเอาค่าต่างๆ ของเวลา
- การแสดงวันที่และเวลาในภาษาไทย
- การแสดงเวลาในรูปแบบเวลาที่ผ่านไป
การแสดงวันที่และเวลาแบบมาตรฐาน
คลาส Date
นั้นมีเมธอดพื้นฐานที่เราสามารถใช้เพื่อแปลงวันที่และเวลาเพื่อแสดงในรูปแบบต่างๆ สำหรับการใช้งานของบางเมธอดนั้นเราได้พูดถึงไปแล้วในบทวันที่และเวลา ในบทนี้ เราจะมาทบทวนการใช้งานเมธอดเหล่านั้นอีกครั้ง
นี่เป็นตัวอย่างสำหรับการใช้งานเมธอดจากคลาส Date
ในการจัดรูปแบบการแสดงผลวันที่และเวลาในภาษา JavaScript ในรูปแบบมาตรฐาน
let today = new Date("September 30, 2020 11:28:00");
console.log(today.toISOString());
console.log(today.toUTCString());
// Convert time to curreny locale
console.log(today.toString());
console.log(today.toLocaleString());
// Convert time to specified locale
console.log(today.toLocaleString("en-GB", { timeZone: "UTC" }));
console.log(today.toLocaleString("th-TH", { timeZone: "UTC" }));
console.log(today.toLocaleString("tr-TR", { timeZone: "UTC" }));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
2020-09-30T04:28:00.000Z
Wed, 30 Sep 2020 04:28:00 GMT
Wed Sep 30 2020 11:28:00 GMT+0700 (Indochina Time)
30/09/2020, 11:28:00
30/09/2020, 04:28:00
30/9/2563 04:28:00
30.09.2020 04:28:00
ในตัวอย่างนี้ เราได้สร้างออบเจ็คของวันที่ 30 กันยายน 2020 เวลา 11:28:00 สำหรับแสดงการจัดรูปแบบของวันที่และเวลา จากนั้นเรียกใช้เมธอดบนออบเจ็ค Date
เพื่อแปลงวันที่ให้อยู่ในรูปแบบต่างๆ
console.log(today.toISOString());
console.log(today.toUTCString());
เมธอด toISOString
ใช้สำหรับแปลงวันที่ในรูปแบบของ ISO และเมธอด toUTCString
ใช้สำหรับแปลงวันที่ในรูปแบบวันที่ UTC ตามลำดับ โดยเวลาที่ได้จากสองเมธอดนี้จะเป็นเวลา UTC หรือเวลาในเขตเวลา GTM เสมอ
console.log(today.toString());
console.log(today.toLocaleString());
เมธอด toString
ใช้สำหรับแปลงออบเจ็คของวันที่เป็น String พร้อมกับชื่อเขตเวลา ส่วนเมธอด toLocaleString
ใช้สำหรับแปลงวันที่ให้อยู่ในรูปแบบของเวลาท้องถิ่น
console.log(today.toLocaleString("en-GB", { timeZone: "UTC" }));
โดยปกติแล้วเมธอด toLocaleString
ใช้แปลงเวลาให้อยู่ในรูปแบบท้องถิ่นปัจจุบันจากเครื่องคอมพิวเตอร์ของเรา อย่างไรก็ตาม เราสามารถแปลงวันที่ในท้องถิ่นที่ต้องการได้โดยส่งรหัสของภาษาในพารามิเตอร์แรก พร้อมกับกำหนดเขตเวลาในพารามิเตอร์ที่สองเหมือนในตัวอย่าง
นอกจากนี้การใช้งานเมธอดเหล่านี้ยังมีรูปแบบอื่นๆ ที่ให้เราสามารถใช้ได้ เช่น การรับเอาเพียงค่าของวันที่หรือเวลาเพียงอย่างเดียว เป็นต้น
date.toDateString();
date.toTimeString();
date.toLocaleDateString(...);
date.toLocaleTimeString(...);
เราสามารถแปลงออบเจ็คของวันที่โดยเอาเพียงส่วนของวันที่หรือเวลาได้ ยกตัวอย่าเช่น เมธอด toDateString
ส่งค่ากลับเพียงแค่ส่วนของวันทีี่เพียงอย่างเดียว หรือเมธอด toTimeString()
ส่งค่ากลับเพียงแค่ส่วนของเวลาเพียงอย่างเดียว เป็นต้น
การรับเอาค่าต่างๆ ของเวลา
ในตัวอย่างก่อนหน้าเราได้ใช้เมธอดเพื่อแปลงวันที่ให้อยู่ในรูปแบบมาตรฐานเท่านั้น อย่างไรก็ตามในการเขียนโปรแกรม เราอาจต้องการแสดงวันที่และเวลาในรูปแบบที่กำหนดเอง เช่น วันที่ในรูปแบบของภาษาไทย 30 กันยายน 2563 11:28:00 น. หรือ 30/09/2020 11:28:00 เป็นต้น ซึ่งในภาษา JavaScript นั้นไม่มีเมธอดสำหรับการทำเช่นนี้
แต่โชคดีที่คลาส Date
นั้นมีเมธอดที่เราสามารถใช้รับเอาค่าต่างๆ ของเวลาได้ ดังนั้นเราสามารถใช้ค่าเหล่านี้เพื่อสร้างรูปแบบของเวลาที่ต้องการได้ทุกรูปแบบ ในตัวอย่างนี้เป็นการใช้งานเมธอดเพื่อรับเอาค่าต่างๆ ของเวลามาแสดงออกทางหน้าจอ
let today = new Date("September 30, 2020 11:28:00");
console.log("Year:", today.getFullYear());
console.log("Month:", today.getMonth());
console.log("Date:", today.getDate());
console.log("Day:", today.getDay());
console.log("Hour:", today.getHours());
console.log("Minute:", today.getMinutes());
console.log("Second:", today.getSeconds());
console.log("Millisecond:", today.getMilliseconds());
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Year: 2020
Month: 8
Date: 30
Day: 3
Hour: 11
Minute: 28
Second: 0
Millisecond: 0
ในตัวอย่างนี้ เป็นการใช้งานเมธอดสำหรับรับเอาค่าต่างๆ ของเวลาแยกจากกัน เมธอดเหล่านี้มีประโยชน์ในกรณีที่เราต้องการสนใจแค่ส่วนของเวลาที่ต้องการ และเมธอดทั้งหมดนั้นส่งค่ากลับเป็นส่วนของเวลาตามชื่อของมัน
แต่มีเพียงสองเมธอดเท่านั้นที่มีการทำงานที่คุณควรเข้าใจการทำงานของมัน นั่นคือเมธอด getMonth
และ getDay
เมธอดเหล่านี้ส่งค่ากลับเป็น Index ของเดือนและวันที่ในสัปดาห์แทน
console.log("Month:", today.getMonth());
...
console.log("Day:", today.getDay());
- เมธอด getMonth: ส่งค่ากลับเป็น Index ของเดือนที่มีค่าระหว่าง
0 - 11
โดยที่0
หมายถึงเดือนมกราคม ไปจนถึง11
หมายถึงเดือนธันวาคม - เมธอด getDay: ส่งค่ากลับเป็น Index ของวันในสัปดาห์ที่มีค่าระหว่าง
0 - 6
โดยที่0
หมายถึงวันอาทิตย์ ไปจนถึง5
หมายถึงวันเสาร์
เนื่องจากวันที่ที่เรากำหนดในออบเจ็คของวันที่นั้นเป็นเดือน September ซึ่งเป็นเดือน 9 ดังนั้นเมธอด getMonth
ส่งค่ากลับเป็น 8 ซึ่งเป็น Index ของเดือนแทน และเช่นเดียวกันเมธอด getDay()
ส่งค่ากลับเป็น 3 ซึ่งหมายถึงวันพุธซึ่งเป็นวันที่สี่ของสัปดาห์
การแสดงวันที่และเวลาในภาษาไทย
เมื่อเราสามารถแยกส่วนต่างๆ ของเวลาออกจากกันได้แล้ว เราสามารถใช้มันจัดรูปแบบวันที่ในรูปแบบที่ต้องการได้ ในตัวอย่างนี้ มาสร้างฟังก์ชันสำหรับจัดรูปวันที่และเวลาในภาษาไทย ตามรูปแบบที่เราได้แนะนำไปก่อนหน้านั่นคือ 30 กันยายน 2563 11:28:00 น.
function toThaiDateString(date) {
let monthNames = [
"มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน",
"พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม.",
"กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"
];
let year = date.getFullYear() + 543;
let month = monthNames[date.getMonth()];
let numOfDay = date.getDate();
let hour = date.getHours().toString().padStart(2, "0");
let minutes = date.getMinutes().toString().padStart(2, "0");
let second = date.getSeconds().toString().padStart(2, "0");
return `${numOfDay} ${month} ${year} ` +
`${hour}:${minutes}:${second} น.`;
}
let date1 = new Date();
let date2 = new Date("September 30, 2020 11:28:00");
let date3 = new Date("March 12, 1988 00:00:00");
console.log(toThaiDateString(date1));
console.log(toThaiDateString(date2));
console.log(toThaiDateString(date3));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
1 ตุลาคม 2563 23:35:34 น.
30 กันยายน 2563 11:28:00 น.
12 มีนาคม 2531 00:00:00 น.
ในตัวอย่างนี้ เป็นโปรแกรมสำหรับแปลงวันที่ให้อยู่ในรูปแบบของวันที่และเวลาในภาษาไทย ฟังก์ชัน toThaiDateString
นั้นเป็นฟังก์ชันสำหรับแปลงออบเจ็คของวันที่ให้อยู่ในรูปแบบของภาษาไทย โดยการนำส่วนต่างๆ ของเวลามาใช้ในการคำนวณ ต่อไปเป็นการอธิบายว่าฟังก์ชันนี้ทำงานอย่างไร
let year = date.getFullYear() + 543;
ในคำสั่งนี้เป็นการแปลงปีคริสต์ศักราชให้อยู่ในรูปแบบของปีพุทธศักราช เนื่องจากเมธอด getFullYear
นั่นส่งค่ากลับเป็นปีแบบคริสศักราชเสมอ ดังนั้นการบวกด้วย 543 จะทำให้เราได้ปีแบบพุทธศักราช เนื่องจากมันเป็นรูปแบบของปีที่เราใช้ในประเทศไทย
let month = monthNames[date.getMonth()];
คำสั่งนี่เป็นการแปลง Index ของเดือนให้เป็นชื่อเดือนในภาษาไทย เนื่องจากค่าที่ส่งมาจากเมธอด getMonth
เป็นค่า Index ดังนั้นเราสามารถใช้มันเพื่อรับเอาชื่อของเดือนในอาเรย์ได้เลย
let hour = date.getHours().toString().padStart(2, "0");
สำหรับในส่วนของเวลานั้นเราใช้เมธอด padStart
ของ String เพื่อทำให้แน่ใจว่าค่าของเวลาจะมีสองตัวเลขเสมอโดยเพิ่ม 0
นำหน้าเข้าไป
return `${numOfDay} ${month} ${year} ` +
`${hour}:${minutes}:${second} น.`;
เมื่อเราจัดรูปแบบส่วนของต่างๆ ของเวลาครบแล้ว ทำการรวมมันเข้าด้วยกันด้วยการเชื่อมต่อ String และส่งค่ากลับ ในตอนนี้เรามีฟังก์ชันที่สามารถแปลงวันที่และเวลาให้อยู่ในรูปแบบของภาษาไทยได้แล้ว
การแสดงเวลาในรูปแบบเวลาที่ผ่านไป
ในการใช้งานเว็บโซเซียล เช่น Facebook หรือ Twitter คุณอาจเคยเห็นการแสดงเวลาในรูปแบบของเวลาที่ผ่านไปแล้ว ยกตัวอย่างเช่น โพสต์นี้ถูกเขียนขึ้นเมื่อ 10 นาทีที่แล้ว หรือทวีิตนี้ถูกเขียนขึ้นเมื่อ 5 วันที่แล้ว ต่อไปเราจะมาเขียนโปรแกรมสำหรับแสดงเวลาในรูปแบบดังกล่าวในภาษา JavaScript
ในตัวอย่างนี้ เป็นโปรแกรมในการแสดงรายการของบทความพร้อมกับวันที่ที่เผยแพร่บทความเหล่านั้น โดยการบอกเวลาเผยแพร่นั้นจะบอกในรูปแบบของเวลาที่ผ่านไป
function timePassed(date) {
let now = new Date("September 20, 2019 10:00:00");
let diff = now.getTime() - date.getTime();
let second = Math.floor(diff / 1000);
if (second < 60) {
return second + " วินาที";
} else if (second < 3600) {
return Math.floor(second / 60) + " นาที";
} else if (second < 86400) {
return Math.floor(second / 3600) + " ชั่วโมง";
} else if (second < 86400 * 30) {
return Math.floor(second / 86400) + " วัน";
} else if (second < 86400 * 365) {
return Math.floor(second / (86400 * 30)) + " เดือน";
} else {
return Math.floor(second / (86400 * 365)) + " ปี";
}
}
let posts = [
{
title: "ขอแนะนำ JavaScript",
published: new Date("September 20, 2019 09:59:44")
},
{
title: "ความลับเกี่ยวกับภาษา JavaScript",
published: new Date("September 20, 2019 09:50:00")
},
{
title: "จะประกาศตัวแปรใน JavaScript ได้อย่างไร?",
published: new Date("September 20, 2019 06:00:00")
},
{
title: "ทำไม JavaScript จึงเป็นที่นิยม?",
published: new Date("September 15, 2019 10:00:00")
},
{
title: "ความแตกต่างระหว่างการใช้ let และ const",
published: new Date("Febuary 19, 2019 10:00:00")
},
{
title: "JavaScript เป็นภาษาที่สนุก",
published: new Date("September 20, 2015 10:00:00")
}
];
for (let post of posts) {
console.log("Title: " + post.title);
console.log("Published: " + timePassed(post.published) + "ที่แล้ว");
}
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Title: ขอแนะนำ JavaScript
Published: 16 วินาทีที่แล้ว
Title: ความลับเกี่ยวกับภาษา JavaScript
Published: 10 นาทีที่แล้ว
Title: จะประกาศตัวแปรใน JavaScript ได้อย่างไร?
Published: 4 ชั่วโมงที่แล้ว
Title: ทำไม JavaScript จึงเป็นที่นิยม?
Published: 5 วันที่แล้ว
Title: ความแตกต่างระหว่างการใช้ let และ const
Published: 7 เดือนที่แล้ว
Title: JavaScript เป็นภาษาที่สนุก
Published: 4 ปีที่แล้ว
ในตัวอย่างนี้ เป็นโปรแกรมสำหรับแสดงเวลาที่ผ่านไปแล้วโดยอ้างอิงกับเวลาในปัจจุบัน คุณได้เคยเห็นการแสดงผลเวลาในรูปแบนี้แล้วในเว็บโซเซียลต่างๆ เช่นบน Facebook หรือ Twitter การแสดงเวลาในรูปแบบนี้สามารถช่วยให้ประสบการณ์ของผู้ใช้ดีขึ้นได้ และเหมาะกับการแสดงเวลาในเว็บโซเซียลหรือเว็บที่มีเนื้อหาที่อัพเดทค่อนข้างเร็ว
ฟังก์ชัน timePassed
เป็นฟังก์ชันสำหรับจัดรูปแบบการแสดงผลของเวลาในรูปแบบเวลาที่ผ่านไปแล้ว โดยรับพารามิเตอร์เป็นออบเจ็คของวันที่ date
ที่ต้องการนำมาคำนวณหาเวลาที่ผ่านไป โดยเปรียบเทียบกับเวลาปัจจุบัน
let now = new Date("September 20, 2019 10:00:00");
ในตัวอย่างนี้ เราได้กำหนดเวลาปัจจุบันในตัวแปร now
เป็นวันที่ September 20, 2019 10:00:00 เพื่อทำให้ผลลัพธ์ไม่เปลี่ยนแปลงในการรันแต่ละครั้ง และเพื่อทำให้คุณเข้าใจมันได้ง่ายขึ้น ในการใช้งานจริงคุณเพียงแค่เปลี่ยนมันเป็น new Date()
เพื่อใช้เวลาปัจจุบันจริงๆ จากระบบ
let diff = now.getTime() - date.getTime();
let second = Math.floor(diff / 1000);
จากนั้นหาผลต่างของเวลาจากวันที่ที่ส่งเข้ามากับเวลาปัจจุบันเก็บไว้ในตัวแปร diff
และแปลงค่าให้อยู่ในหน่วยวินาที ในตอนนี้เราทราบแล้วว่าจากเวลาในพารามิเตอร์ date
มาจนถึงเวลาปัจจุบันในตัวแปร now
นั้นผ่านไปกี่วินาทีแล้ว
if (second < 60) {
return second + " วินาที";
} else if (second < 3600) {
return Math.floor(second / 60) + " นาที";
} else if (second < 86400) {
return Math.floor(second / 3600) + " ชั่วโมง";
} else if (second < 86400 * 30) {
return Math.floor(second / 86400) + " วัน";
} else if (second < 86400 * 365) {
return Math.floor(second / (86400 * 30)) + " เดือน";
} else {
return Math.floor(second / (86400 * 365)) + " ปี";
}
จากนั้นตรวจสอบว่าเวลาผ่านไปนานเท่าไหร่แล้ว เพื่อจัดรูปแบบการแสดงให้ตามหน่วยของเวลาที่เหมาะสม เช่น ถ้าหากเวลาผ่านไปยังไม่เกิน 1 นาที การแสดงผลจะแสดงเป็น S
วินาทีที่แล้ว และในทำนองเดียวกัน ถ้าหากเวลาผ่านไปยังไม่เกิน 1 ชัั่วโมง การแสดงผลจะอยู่ในรูปแบบ M
นาทีที่แล้ว ตามลำดับ
for (let post of posts) {
console.log("Title: " + post.title);
console.log("Published: " + timePassed(post.published) + "ที่แล้ว");
}
เพื่อทดสอบการทำงานของฟังก์ชัน เราได้จำลองข้อมูลของบทความพร้อมกับวันที่ที่มันถูกเผยแพร่ในตัวแปรอาเรย์ posts
จากนั้นใช้คำสั่ง for loop เพื่อวนแสดงเวลาในรูปแบบเวลาที่ผ่านไปว่าโพสต์นั้นถูกเขียนไปนานแค่ไหนแล้ว
ในตัวอย่างนี้ คุณได้เรียนรู้การจัดรูปแบบวันที่และเวลาในภาษา JavaScript เราได้พูดถึงการใช้งานเมธอดจากคลาส Date
และการประยุกต์ใช้เมธอดเพื่อรับเอาค่าต่างๆ ของเวลาเพื่อแสดงเวลาในภาษาไทย และสุดท้ายเป็นการแสดงเวลาในรูปแบบของเวลาที่ผ่านไปจากการหาผลต่างของเวลา