การจัดรูปแบบการแสดงผลวันที่ ในภาษา JavaScript

16 November 2020

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

  • การแสดงวันที่และเวลาแบบมาตรฐาน
  • การรับเอาค่าต่างๆ ของเวลา
  • การแสดงวันที่และเวลาในภาษาไทย
  • การแสดงเวลาในรูปแบบเวลาที่ผ่านไป

การแสดงวันที่และเวลาแบบมาตรฐาน

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

นี่เป็นตัวอย่างสำหรับการใช้งานเมธอดจากคลาส Date ในการจัดรูปแบบการแสดงผลวันที่และเวลาในภาษา JavaScript ในรูปแบบมาตรฐาน

date_format.js
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 นั้นมีเมธอดที่เราสามารถใช้รับเอาค่าต่างๆ ของเวลาได้ ดังนั้นเราสามารถใช้ค่าเหล่านี้เพื่อสร้างรูปแบบของเวลาที่ต้องการได้ทุกรูปแบบ ในตัวอย่างนี้เป็นการใช้งานเมธอดเพื่อรับเอาค่าต่างๆ ของเวลามาแสดงออกทางหน้าจอ

time_components.js
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 น.

thai_date_format.js
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

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

time_passed.js
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 และการประยุกต์ใช้เมธอดเพื่อรับเอาค่าต่างๆ ของเวลาเพื่อแสดงเวลาในภาษาไทย และสุดท้ายเป็นการแสดงเวลาในรูปแบบของเวลาที่ผ่านไปจากการหาผลต่างของเวลา

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