แอปพลิเคชันเกือบทุกประเภทที่เขียนด้วย JavaScript ใช้งานได้กับเวลาหรือวันที่ในระดับหนึ่ง ในตอนแรก สิ่งนี้จำกัดอยู่เพียง Date API ในตัวเท่านั้น API นี้มีฟังก์ชันการทำงานพื้นฐาน แต่ค่อนข้างจำกัดในสิ่งที่สามารถทำได้ ไลบรารีของบริษัทอื่น เช่น Moment.js และ API ในตัวรุ่นหลัง เช่น Intl API และ Temporal API ใหม่ เพิ่มความยืดหยุ่นมากขึ้นในการทำงานกับเวลาและวันที่ การขึ้นและลงของ Moment.js Moment.js เป็นไลบรารี JavaScript ที่มียูทิลิตี้อันทรงพลังสำหรับการทำงานกับเวลาและวันที่ ประกอบด้วยคุณลักษณะที่ขาดหายไปจาก Date API พื้นฐาน เช่น การเปลี่ยนแปลงเขตเวลา และทำให้การดำเนินการทั่วไปหลายอย่างง่ายขึ้น Moment ยังมีฟังก์ชันสำหรับการจัดรูปแบบวันที่และเวลาอีกด้วย มันกลายเป็นไลบรารี่ที่ใช้กันอย่างแพร่หลายในแอปพลิเคชั่นต่างๆมากมาย อย่างไรก็ตาม Moment ก็มีปัญหาเช่นกัน เป็นไลบรารีขนาดใหญ่และสามารถเพิ่มขนาดบันเดิลของแอปพลิเคชันได้อย่างมาก เนื่องจากไลบรารีไม่รองรับการเขย่าต้นไม้ (คุณลักษณะของ Bundler สมัยใหม่ที่สามารถลบส่วนที่ไม่ได้ใช้ของไลบรารีได้) ไลบรารี Moment ทั้งหมดจึงถูกรวมไว้แม้ว่าคุณจะใช้ฟังก์ชันเพียงหนึ่งหรือสองฟังก์ชันเท่านั้น ปัญหาอีกประการหนึ่งของ Moment ก็คือความจริงที่ว่าวัตถุที่สร้างขึ้นนั้นไม่แน่นอน การเรียกใช้ฟังก์ชันบางอย่างบนวัตถุ Moment มีผลข้างเคียงและทำให้ค่าของวัตถุนั้นกลายพันธุ์ สิ่งนี้สามารถนำไปสู่พฤติกรรมหรือข้อบกพร่องที่ไม่คาดคิด ในปี 2020 ผู้ดูแล Moment ตัดสินใจให้ห้องสมุดเข้าสู่โหมดการบำรุงรักษา ไม่มีการพัฒนาฟีเจอร์ใหม่ และผู้ดูแลไม่แนะนำให้ใช้กับโปรเจ็กต์ใหม่ มีไลบรารีวันที่ของ JavaScript อื่น ๆ เช่น date-fns แต่มีผู้เล่นใหม่ในเมือง ซึ่งเป็น API ที่สร้างโดยตรงใน JavaScript: Temporal เป็นมาตรฐานใหม่ที่เติมเต็มช่องโหว่ของ Date API ดั้งเดิม รวมถึงแก้ไขข้อจำกัดบางประการที่พบใน Moment และไลบรารีอื่นๆ ชั่วขณะคืออะไร? Temporal คือ API เวลาและวันที่ใหม่ที่เพิ่มเข้ามาในมาตรฐาน ECMAScript ซึ่งกำหนด JavaScript สมัยใหม่ ในเดือนมีนาคม 20266 กระบวนการได้มาถึงขั้นตอนที่ 4 ของกระบวนการ TC39 แล้ว (คณะกรรมการที่ดูแลข้อเสนอและการเพิ่มเติมภาษา JavaScript) และจะรวมอยู่ในข้อกำหนด ECMAScript เวอร์ชันถัดไป มีการใช้งานแล้วในเบราว์เซอร์หลายตัว: Chrome 144+ และ Firefox 139+ โดยคาดว่า Safari จะตามมาในเร็วๆ นี้ Polyfill ยังพร้อมใช้งานสำหรับเบราว์เซอร์และ Node.js ที่ไม่รองรับ Temporal API สร้างออบเจ็กต์ที่โดยทั่วไปแล้วจะแสดงถึงช่วงเวลาต่างๆ สิ่งเหล่านี้อาจเป็นการประทับเต็มเวลาและวันที่ในเขตเวลาที่กำหนด หรืออาจเป็นตัวอย่างทั่วไปของเวลา "นาฬิกาแขวน" โดยไม่มีข้อมูลโซนเวลาหรือวันที่ใดๆ คุณสมบัติหลักบางประการของ Temporal ได้แก่:
เวลาที่มีหรือไม่มีวันที่ วัตถุชั่วคราวสามารถแสดงเวลาที่ระบุในวันที่ระบุ หรือเวลาที่ไม่มีข้อมูลวันที่ใดๆ สามารถแสดงวันที่ที่ระบุโดยไม่มีเวลาได้เช่นกัน การสนับสนุนเขตเวลา วัตถุชั่วคราวจะรับรู้เขตเวลาอย่างสมบูรณ์และสามารถแปลงข้ามเขตเวลาที่แตกต่างกันได้ Moment รองรับเขตเวลาด้วย แต่ต้องมีไลบรารีเขตเวลาเพิ่มเติม ความไม่เปลี่ยนรูป เมื่อสร้างวัตถุชั่วคราวแล้ว จะไม่สามารถเปลี่ยนแปลงได้ การคำนวณเวลาหรือการแปลงเขตเวลาไม่ได้แก้ไขวัตถุที่ซ่อนอยู่ แต่พวกเขาสร้างวัตถุชั่วคราวใหม่แทน การทำดัชนีแบบ 1 แหล่งที่มาของจุดบกพร่องที่พบบ่อยใน Date API (รวมถึง Moment) คือเดือนที่มีการจัดทำดัชนีเป็นศูนย์ ซึ่งหมายความว่าเดือนมกราคมเป็นเดือน 0 แทนที่จะเป็นเดือน 1 ตามที่เราทุกคนเข้าใจในชีวิตจริง แก้ไขปัญหาชั่วคราวโดยใช้การจัดทำดัชนีแบบ 1 — มกราคมคือเดือนที่ 1 มีอยู่ในเบราว์เซอร์ เนื่องจาก Temporal เป็น API ในเบราว์เซอร์ จึงไม่เพิ่มขนาดบันเดิลของแอปพลิเคชันของคุณ
สิ่งสำคัญที่ควรทราบคือ Date API จะไม่หายไป แม้ว่า Temporal จะเข้ามาแทนที่ API นี้ แต่จะไม่ถูกลบหรือเลิกใช้งาน แอปพลิเคชันจำนวนมากอาจใช้งานไม่ได้หากเบราว์เซอร์ลบ Date API ออกกะทันหัน อย่างไรก็ตาม โปรดทราบว่าตอนนี้ Moment ถือเป็นโปรเจ็กต์ดั้งเดิมในโหมดการบำรุงรักษา ในส่วนที่เหลือของบทความ เราจะดู “สูตร” บางส่วนสำหรับการย้ายโค้ดที่อิงตาม Moment ไปยัง Temporal API ใหม่ มาเริ่มปรับโครงสร้างใหม่กันเถอะ! การสร้างวัตถุวันที่และเวลา ก่อนที่เราจะสามารถจัดการวันที่และเวลาได้ เราต้องสร้างวัตถุที่แสดงถึงสิ่งเหล่านั้นก่อน หากต้องการสร้างวัตถุ Moment ที่แสดงวันที่และเวลาปัจจุบัน ให้ใช้ฟังก์ชัน Moment const ตอนนี้ = โมเมนต์ (); console.log(ตอนนี้); // ช่วงเวลา<2026-02-18T21:26:29-05:00>
ขณะนี้วัตถุนี้สามารถจัดรูปแบบหรือจัดการได้ตามต้องการ
// แปลงเป็น UTC //คำเตือน: สิ่งนี้จะกลายพันธุ์วัตถุ Moment และทำให้มันอยู่ในโหมด UTC! console.log(ตอนนี้.utc()); // ช่วงเวลา<2026-02-19T02:26:29Z>
// พิมพ์สตริงที่จัดรูปแบบ - โปรดทราบว่าขณะนี้ใช้เวลา UTC console.log(now.format('MM/DD/YYYY hh:mm:ss a')); // 19/02/2569 02:27:07 น
สิ่งสำคัญที่ต้องจำเกี่ยวกับ Moment ก็คือวัตถุ Moment จะมีข้อมูลเกี่ยวกับเวลาและวันที่อยู่เสมอ หากคุณเพียงแต่ต้องทำงานกับข้อมูลเวลา ก็มักจะเป็นเรื่องปกติ แต่อาจทำให้เกิดการทำงานที่ไม่คาดคิดในสถานการณ์ต่างๆ เช่น เวลาออมแสงหรือปีอธิกสุรทิน ซึ่งวันที่อาจส่งผลต่อการคำนวณเวลา ชั่วคราวมีความยืดหยุ่นมากขึ้น คุณสามารถสร้างออบเจ็กต์ที่แสดงวันที่และเวลาปัจจุบันได้โดยการสร้างออบเจ็กต์ Temporal.Instant นี่แสดงถึงช่วงเวลาหนึ่งที่กำหนดตามเวลาตั้งแต่ "ยุค" (เที่ยงคืน UTC ของวันที่ 1 มกราคม 1970) สิ่งชั่วคราวสามารถอ้างอิงช่วงเวลานี้ด้วยความแม่นยำระดับนาโนวินาที const ตอนนี้ = Temporal.Now.instant();
// ดูนาโนวินาทีดิบตั้งแต่ยุค console.log(ตอนนี้.epochNanoseconds); // 1771466342612000000n
// รูปแบบสำหรับ UTC console.log(ตอนนี้toString()); // 2026-02-19T01:55:27.844Z
// จัดรูปแบบสำหรับเขตเวลาเฉพาะ console.log(now.toString({ โซนเวลา: 'อเมริกา/นิว_ยอร์ค' })); // 2026-02-18T20:56:57.905-05:00
Temporal.Instant object ยังสามารถสร้างตามเวลาและวันที่ที่ระบุได้โดยใช้เมธอด from static
const myInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');
// จัดรูปแบบ Instant ในเขตเวลาท้องถิ่น โปรดทราบว่านี่เป็นเพียงการควบคุมเท่านั้น // การจัดรูปแบบ - มันไม่เปลี่ยนวัตถุเหมือนที่ Moment.utc ทำ console.log(myInstant.toString({ โซนเวลา: 'อเมริกา/นิวยอร์ค' })); // 2026-02-18T21:10:00-05:00
คุณยังสามารถสร้างวัตถุชั่วคราวประเภทอื่นๆ ได้ เช่น:
Temporal.PlainDate: วันที่ที่ไม่มีข้อมูลเวลา Temporal.PlainTime: เวลาที่ไม่มีข้อมูลวันที่ Temporal.ZonedDateTime: วันที่และเวลาในเขตเวลาที่ระบุ
แต่ละวิธีมีเมธอด from ที่สามารถเรียกได้ด้วยออบเจ็กต์ที่ระบุวันที่และ/หรือเวลา หรือสตริงวันที่ที่จะแยกวิเคราะห์ //แค่เดท. const วันนี้ = Temporal.PlainDate.from({ ปี: 2026, เดือน: 2, // โปรดทราบว่าเราใช้ 2 สำหรับเดือนกุมภาพันธ์ วัน: 18 }); console.log(today.toString()); // 18-02-2026
//แค่เวลาเท่านั้น. const LunchTime = Temporal.PlainTime.from({ ชั่วโมง: 12 }); console.log(lunchTime.toString()); // 12:00:00
// วันที่และเวลาในเขตเวลาตะวันออกของสหรัฐอเมริกา const เนื่องจาก At = Temporal.ZonedDateTime.from({ โซนเวลา: 'อเมริกา/นิวยอร์ก', ปี: 2026, เดือน: 3, วัน: 1, ชั่วโมง: 12, นาที: 0, วินาที: 0 }); console.log(เนื่องจากAt.toString()); // 2026-03-01T12:00:00-05:00[อเมริกา/นิวยอร์ก]
การแยกวิเคราะห์ เราได้กล่าวถึงการสร้างข้อมูลวันที่และเวลาโดยทางโปรแกรมแล้ว ตอนนี้เรามาดูการแยกวิเคราะห์ การแยกวิเคราะห์เป็นพื้นที่หนึ่งที่ Moment มีความยืดหยุ่นมากกว่า Temporal API ในตัว คุณสามารถแยกสตริงวันที่ได้โดยส่งผ่านไปยังฟังก์ชันโมเมนต์ ด้วยอาร์กิวเมนต์เดียว Moment คาดหวังสตริงวันที่ ISO แต่คุณสามารถใช้รูปแบบอื่นได้หากคุณระบุอาร์กิวเมนต์ที่สองที่ระบุรูปแบบวันที่ที่ใช้
const isoDate = โมเมนต์('2026-02-21T09:00:00'); const formattedDate = Moment('2/21/26 9:00:00', 'M/D/YY h:mm:ss');
console.log(isoDate); // ช่วงเวลา<2026-02-21T09:00:00-05:00>
console.log(จัดรูปแบบวันที่); // ช่วงเวลา<2026-02-21T09:00:00-05:00>
ในเวอร์ชันเก่า Moment จะคาดเดาได้ดีที่สุดเพื่อแยกวิเคราะห์สตริงวันที่ที่จัดรูปแบบตามอำเภอใจ สิ่งนี้อาจนำไปสู่ผลลัพธ์ที่คาดเดาไม่ได้ เช่น 02-03-2026 คือ 2 กุมภาพันธ์ หรือ 3 มีนาคม? ด้วยเหตุนี้ Moment เวอร์ชันใหม่จึงแสดงคำเตือนการเลิกใช้งานที่ชัดเจน หากถูกเรียกโดยไม่มีสตริงวันที่ที่จัดรูปแบบ ISO (เว้นแต่จะได้รับอาร์กิวเมนต์ที่สองที่มีรูปแบบที่ต้องการด้วย) ชั่วคราวจะแยกวิเคราะห์สตริงวันที่ที่มีรูปแบบเฉพาะเท่านั้น สตริงต้องเป็นไปตามรูปแบบ ISO 8601 หรือส่วนขยาย RFC 9557 หากสตริงวันที่ที่ไม่สอดคล้องถูกส่งผ่านไปยังเมธอด from Temporal จะส่ง RangeError
// ใช้สตริงวันที่ RFC 9557 const myDate = Temporal.Instant.from('2026-02-21T09:00:00-05:00[อเมริกา/New_York]'); console.log(myDate.toString({ โซนเวลา: 'อเมริกา/นิวยอร์ก' })); // 2026-02-21T09:00:00-05:00
// ใช้สตริงวันที่ที่ไม่รู้จัก const otherDate = Temporal.Instant.from('2/21/26 9:00:00'); // RangeError: ข้อผิดพลาดชั่วคราว: อักขระไม่ถูกต้องขณะแยกวิเคราะห์ค่าปี
ข้อกำหนดที่แน่นอนของสตริงวันที่ขึ้นอยู่กับประเภทของออบเจ็กต์ Temporal ที่คุณกำลังสร้าง ในตัวอย่างข้างต้น Temporal.Instant ต้องใช้ ISO แบบเต็มสตริงวันที่ 8601 หรือ RFC 9557 ที่ระบุวันที่และเวลาด้วยการออฟเซ็ตโซนเวลา แต่คุณสามารถสร้างออบเจ็กต์ PlainDate หรือ PlainTime โดยใช้เพียงชุดย่อยของรูปแบบวันที่ได้ const myDate = Temporal.PlainDate.from('2026-02-21'); console.log(myDate.toString()); // 21-02-2026
const myTime = Temporal.PlainTime.from('09:00:00'); console.log(myTime.toString()); // 09:00:00
โปรดทราบว่าสตริงเหล่านี้จะต้องเป็นไปตามรูปแบบที่คาดไว้ มิฉะนั้นจะเกิดข้อผิดพลาด
// การใช้สตริงเวลาที่ไม่สอดคล้องกัน สิ่งเหล่านี้ทั้งหมดจะทำให้เกิด RangeError Temporal.PlainTime.from('9:00'); Temporal.PlainTime.from('9:00:00 น.');
เคล็ดลับสำหรับมือโปร: การจัดการสตริงที่ไม่ใช่ ISO เนื่องจาก Temporal ให้ความสำคัญกับความน่าเชื่อถือ จึงจะไม่พยายามเดารูปแบบของสตริงเช่น 02-01-2026 หากแหล่งข้อมูลของคุณใช้สตริงดังกล่าว คุณจะต้องดำเนินการแก้ไขสตริงเพื่อจัดเรียงค่าใหม่ให้เป็นสตริง ISO เช่น 2026-02-01 ก่อนที่จะลองใช้กับ Temporal
การจัดรูปแบบ เมื่อคุณมีวัตถุ Moment หรือ Temporal แล้ว คุณอาจต้องการแปลงวัตถุนั้นเป็นสตริงที่จัดรูปแบบแล้วในบางครั้ง นี่เป็นตัวอย่างที่ Moment สั้นกว่านี้อีกเล็กน้อย คุณเรียกวิธีการจัดรูปแบบของวัตถุด้วยสตริงโทเค็นที่อธิบายรูปแบบวันที่ที่ต้องการ วันที่ const = ช่วงเวลา ();
console.log(date.format('MM/DD/YYYY')); // 22/02/2026
console.log(date.format('MMMM Do YYYY, h:mm:ss a')); // วันที่ 22 กุมภาพันธ์ 2569 เวลา 20:18:30 น
ในทางกลับกัน Temporal ต้องการให้คุณใช้รายละเอียดมากกว่านี้เล็กน้อย อ็อบเจ็กต์ชั่วคราว เช่น Instant มีเมธอด toLocaleString ที่ยอมรับตัวเลือกการจัดรูปแบบต่างๆ ที่ระบุเป็นคุณสมบัติของอ็อบเจ็กต์
วันที่ const = Temporal.Now.instant();
// โดยไม่มีข้อโต้แย้ง เราจะได้รูปแบบเริ่มต้นสำหรับโลแคลปัจจุบัน console.log(date.toLocaleString()); // 22/2/2026, 20:23:36 น. (สมมติว่าเป็นภาษา en-US)
// ส่งตัวเลือกการจัดรูปแบบเพื่อสร้างสตริงรูปแบบที่กำหนดเอง console.log(date.toLocaleString('en-US', { เดือน: 'ยาว' วัน: 'ตัวเลข' ปี: 'ตัวเลข', ชั่วโมง: '2 หลัก', นาที: '2 หลัก' })); // 22 กุมภาพันธ์ 2569 เวลา 20:23 น
// ส่งเฉพาะฟิลด์ที่คุณต้องการในรูปแบบสตริงเท่านั้น console.log(date.toLocaleString('en-US', { เดือน: 'สั้น' วัน: 'ตัวเลข' })); // 22 ก.พ.
การจัดรูปแบบวันที่ชั่วคราวใช้ Intl.DateTimeFormat API (ซึ่งมีอยู่แล้วในเบราว์เซอร์สมัยใหม่) ภายใต้ประทุน นั่นหมายความว่าคุณสามารถสร้างออบเจ็กต์ DateTimeFormat ที่นำมาใช้ใหม่ได้ด้วยตัวเลือกการจัดรูปแบบที่คุณกำหนดเอง จากนั้นส่งผ่านออบเจ็กต์ Temporal ไปยังวิธีการจัดรูปแบบ ด้วยเหตุนี้ จึงไม่รองรับรูปแบบวันที่ที่กำหนดเองเหมือนกับ Moment หากคุณต้องการบางอย่างเช่น "ไตรมาสที่ 1 ปี 2026" หรือการจัดรูปแบบพิเศษอื่นๆ คุณอาจต้องใช้โค้ดการจัดรูปแบบวันที่ที่กำหนดเองหรือเข้าถึงไลบรารีของบุคคลที่สาม const formatter = new Intl.DateTimeFormat('en-US', { เดือน: '2 หลัก' วัน: '2 หลัก', ปี: 'ตัวเลข' });
วันที่ const = Temporal.Now.instant(); console.log(formatter.format(วันที่)); // 22/02/2026
โทเค็นการจัดรูปแบบของ Moment นั้นเขียนได้ง่ายกว่า แต่ก็ไม่เป็นมิตรกับสถานที่ สตริงรูปแบบ "ฮาร์ดโค้ด" เช่น ลำดับเดือน/วัน ข้อดีของการใช้อ็อบเจ็กต์การกำหนดค่า เช่นเดียวกับที่ Temporal ทำคือ มันจะปรับให้เข้ากับโลแคลที่กำหนดโดยอัตโนมัติ และใช้รูปแบบที่ถูกต้อง วันที่ const = Temporal.Now.instant();
ตัวเลือกรูปแบบ const = { เดือน: 'ตัวเลข' วัน: 'ตัวเลข' ปี: 'ตัวเลข' };
console.log(date.toLocaleString('en-US', formatOptions)); // 22/2/2026
console.log(date.toLocaleString('en-GB', formatOptions)); // 22/02/2026
การคำนวณวันที่ ในหลายแอปพลิเคชัน คุณจะต้องคำนวณวันที่ด้วย คุณอาจต้องการเพิ่มหรือลบหน่วยเวลา (วัน ชั่วโมง วินาที ฯลฯ) ตัวอย่างเช่น หากคุณมีวันที่ปัจจุบัน คุณอาจต้องการแสดงวันที่ 1 สัปดาห์ต่อจากนี้ให้ผู้ใช้เห็น วัตถุโมเมนต์มีวิธีต่างๆ เช่น การบวกและการลบที่ดำเนินการเหล่านี้ ฟังก์ชันเหล่านี้รับค่าและหน่วย เช่น add(7, 'days') อย่างไรก็ตาม ข้อแตกต่างที่สำคัญอย่างหนึ่งระหว่าง Moment และ Temporal ก็คือ เมื่อทำการคำนวณวันที่เหล่านี้ ออบเจ็กต์ที่อยู่ด้านล่างจะได้รับการแก้ไข และค่าดั้งเดิมของออบเจ็กต์จะหายไป const ตอนนี้ = โมเมนต์ ();
console.log(ตอนนี้); // ช่วงเวลา<2026-02-24T20:08:36-05:00>
const nextWeek = now.add(7, 'วัน'); console.log (สัปดาห์หน้า); // ช่วงเวลา<2026-03-03T20:08:36-05:00>
// Gotcha - วัตถุดั้งเดิมถูกกลายพันธุ์ console.log(ตอนนี้); // ช่วงเวลา<2026-03-03T20:08:36-05:00>
เพื่อหลีกเลี่ยงการสูญเสียวันที่เดิม คุณสามารถเรียกโคลนบนวัตถุ Moment เพื่อสร้างสำเนาได้ ตกลงตอนนี้= ช่วงเวลา(); const nextWeek = now.clone().add(7, 'วัน');
console.log(ตอนนี้); // ช่วงเวลา<2026-02-24T20:12:55-05:00>
console.log (สัปดาห์หน้า); // ช่วงเวลา<2026-03-03T20:12:55-05:00>
ในทางกลับกัน วัตถุชั่วคราวไม่เปลี่ยนรูป เมื่อคุณสร้างออบเจ็กต์ เช่น Instant, PlainDate และอื่นๆ แล้ว ค่าของออบเจ็กต์นั้นจะไม่มีวันเปลี่ยนแปลง วัตถุชั่วคราวยังมีวิธีการบวกและลบ Temporal ค่อนข้างจะพิถีพิถันเล็กน้อยเกี่ยวกับหน่วยเวลาที่สามารถเพิ่มให้กับประเภทอ็อบเจ็กต์ได้ ตัวอย่างเช่น คุณไม่สามารถเพิ่มวันลงใน Instant ได้:
const ตอนนี้ = Temporal.Now.instant(); const nextWeek = now.add({ วัน: 7 }); // RangeError: ข้อผิดพลาดชั่วคราว: หน่วยที่ใหญ่ที่สุดไม่สามารถเป็นหน่วยวันที่ได้
เนื่องจากออบเจ็กต์ทันใจแสดงถึงจุดเวลาเฉพาะใน UTC และไม่เชื่อเรื่องปฏิทิน เนื่องจากความยาวของวันสามารถเปลี่ยนแปลงได้ตามกฎโซนเวลา เช่น เวลาออมแสง การคำนวณนี้จึงไม่สามารถใช้ได้ในทันที อย่างไรก็ตาม คุณสามารถดำเนินการนี้กับวัตถุประเภทอื่นได้ เช่น PlainDateTime: const ตอนนี้ = Temporal.Now.plainDateTimeISO(); console.log(now.toLocaleString()); // 24/2/2569, 20:23:59 น
const nextWeek = now.add({ วัน: 7 });
// โปรดทราบว่า PlainDateTime ดั้งเดิมยังคงไม่เปลี่ยนแปลง console.log(now.toLocaleString()); // 24/2/2569, 20:23:59 น
console.log(nextWeek.toLocaleString()); // 3/3/2569, 20:23:59 น
คุณยังสามารถคำนวณระยะเวลาระหว่างวัตถุช่วงเวลาหรือวัตถุเวลาสองชิ้นได้ ด้วยฟังก์ชัน diff ของ Moment คุณจะต้องเตรียมหน่วยสำหรับรายละเอียด ไม่เช่นนั้นจะส่งกลับค่าความแตกต่างเป็นมิลลิวินาที const date1 = โมเมนต์('2026-02-21T09:00:00'); const date2 = โมเมนต์('2026-02-22T10:30:00');
console.log(date2.diff(date1)); // 91800000
console.log(date2.diff(date1, 'วัน')); // 1
เมื่อต้องการทำเช่นนี้กับวัตถุ Temporal คุณสามารถส่งวัตถุ Temporal อื่นไปยังเมธอดของวัตถุนั้นจนถึงหรือตั้งแต่นั้นได้ สิ่งนี้จะส่งคืนออบเจ็กต์ Temporal.Duration ที่มีข้อมูลเกี่ยวกับความแตกต่างของเวลา ออบเจ็กต์ Duration มีคุณสมบัติสำหรับแต่ละองค์ประกอบของความแตกต่าง และยังสามารถสร้างสตริงระยะเวลา ISO 8601 ที่แสดงถึงความแตกต่างของเวลาได้
const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00'); const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');
// largeUnit ระบุหน่วยเวลาที่ใหญ่ที่สุดในการแสดง // ในการคำนวณระยะเวลา const diff = date2.since(date1, { หน่วยที่ใหญ่ที่สุด: 'วัน' });
console.log(diff.วัน); // 1
console.log(diff.ชั่วโมง); // 1
console.log(diff.นาที); // 30
console.log(diff.toString()); // P1DT1H30M // (สตริงระยะเวลา ISO 8601: 1 วัน 1 ชั่วโมง 30 นาที)
การเปรียบเทียบวันที่และเวลา Moment และ Temporal ให้คุณเปรียบเทียบวันที่และเวลาเพื่อพิจารณาว่าสิ่งใดมาก่อนวันอื่น แต่ใช้แนวทางที่แตกต่างกับ API Moment จัดเตรียมวิธีการต่างๆ เช่น isBefore, isAfter และ isSame เพื่อเปรียบเทียบวัตถุ Moment สองชิ้น const date1 = โมเมนต์('2026-02-21T09:00:00'); const date2 = โมเมนต์('2026-02-22T10:30:00');
console.log(date1.isBefore(date2)); //จริง
Temporal ใช้วิธีการเปรียบเทียบแบบคงที่เพื่อทำการเปรียบเทียบระหว่างวัตถุสองชิ้นที่เป็นประเภทเดียวกัน จะส่งกลับ -1 ถ้าวันแรกมาก่อนวันที่สอง 0 ถ้าเท่ากัน หรือ 1 ถ้าวันแรกอยู่หลังวันที่สอง ตัวอย่างต่อไปนี้แสดงวิธีเปรียบเทียบวัตถุ PlainDate สองรายการ อาร์กิวเมนต์ทั้งสองของ Temporal.PlainDate.compare ต้องเป็นอ็อบเจ็กต์ PlainDate
const date1 = Temporal.PlainDate.from({ ปี: 2026, เดือน: 2, วัน: 24 }); const date2 = Temporal.PlainDate.from({ ปี: 2026, เดือน: 3, วัน: 24 });
// date1 มาก่อน date2 ดังนั้น -1 console.log(Temporal.PlainDate.compare(date1, date2));
// เกิดข้อผิดพลาดหากเราพยายามเปรียบเทียบวัตถุสองชิ้นที่มีประเภทต่างกัน console.log(Temporal.PlainDate.compare(date1, Temporal.Now.instant())); // TypeError: ข้อผิดพลาดชั่วคราว: ระบุฟิลด์ PlainDate ไม่ถูกต้อง
โดยเฉพาะอย่างยิ่ง สิ่งนี้ทำให้ง่ายต่อการจัดเรียงอาร์เรย์ของวัตถุชั่วคราวตามลำดับเวลา // อาร์เรย์ของวัตถุ Temporal.PlainDate วันที่คงที่ = [ ... ];
// ใช้ Temporal.PlainDate.compare เป็นฟังก์ชันเปรียบเทียบ Dates.sort(Temporal.PlainDate.compare);
การแปลงเขตเวลา ไลบรารี Moment หลักไม่รองรับการแปลงเขตเวลา หากคุณต้องการฟังก์ชันนี้ คุณจะต้องติดตั้งแพ็คเกจเขตเวลาด้วย แพ็คเกจนี้ไม่สั่นไหวดังนั้นจึงสามารถเพิ่มขนาดมัดของคุณได้อย่างมาก เมื่อคุณติดตั้งเขตเวลาช่วงเวลาแล้ว คุณสามารถแปลงวัตถุ Moment เป็นเขตเวลาอื่นได้ด้วยวิธี tz เช่นเดียวกับการดำเนินการ Moment อื่นๆ สิ่งนี้จะกลายพันธุ์พื้นฐานวัตถุ. // สมมติว่าตามเวลาตะวันออกของสหรัฐอเมริกา const ตอนนี้ = โมเมนต์ (); console.log(ตอนนี้); // ช่วงเวลา<2026-02-28T20:08:20-05:00>
// แปลงเป็นเวลาแปซิฟิก // เวลาตะวันออกเดิมหายไป now.tz('อเมริกา/ลอส_แองเจลิส'); console.log(ตอนนี้); // ช่วงเวลา<2026-02-28T17:08:20-08:00>
ฟังก์ชันโซนเวลาถูกสร้างขึ้นใน Temporal API เมื่อใช้ออบเจ็กต์ Temporal.ZonedDateTime ออบเจ็กต์เหล่านี้มีเมธอด withTimeZone ที่ส่งคืน ZonedDateTime ใหม่ที่แสดงถึงช่วงเวลาเดียวกัน แต่อยู่ในโซนเวลาที่ระบุ // อีกครั้ง โดยสมมติว่าเป็นเวลาตะวันออกของสหรัฐอเมริกา const ตอนนี้ = Temporal.Now.zonedDateTimeISO(); console.log(now.toLocaleString()); // 28/2/2026, 20:12:02 น. EDT
// แปลงเป็นเวลาแปซิฟิก const nowPacific = now.withTimeZone('อเมริกา/Los_Angeles'); console.log(nowPacific.toLocaleString()); // 28/2/2026, 17:12:02 น. PST
// วัตถุดั้งเดิมยังคงไม่เปลี่ยนแปลง console.log(now.toLocaleString()); // 28/2/2026, 20:12:02 น. EDT
หมายเหตุ: ค่าที่จัดรูปแบบที่ส่งคืนโดย toLocaleString เป็นไปตามชื่อที่แสดงถึง ขึ้นอยู่กับสถานที่ โค้ดตัวอย่างได้รับการพัฒนาในภาษา en-US ดังนั้นรูปแบบจึงเป็นดังนี้: 28/2/2026, 17:12:02 น. PST ในสถานที่อื่น สิ่งนี้อาจแตกต่างกัน ตัวอย่างเช่น ในภาษา en-GB คุณจะได้รับข้อความเช่น 28/2/2026, 17:12:02 GMT-8 การปรับโครงสร้างใหม่ในโลกแห่งความเป็นจริง สมมติว่าเรากำลังสร้างแอปเพื่อกำหนดเวลากิจกรรมข้ามเขตเวลา ส่วนหนึ่งของแอปนี้คือฟังก์ชัน getEventTimes ซึ่งรับสตริง ISO 8601 ที่แสดงเวลาและวันที่ของเหตุการณ์ เขตเวลาท้องถิ่น และเขตเวลาเป้าหมาย ฟังก์ชันสร้างสตริงเวลาและวันที่ที่จัดรูปแบบสำหรับเหตุการณ์ในทั้งสองโซนเวลา หากฟังก์ชันได้รับสตริงอินพุตที่ไม่ใช่สตริงเวลา/วันที่ที่ถูกต้อง ฟังก์ชันจะเกิดข้อผิดพลาด นี่คือการใช้งานดั้งเดิมโดยใช้ Moment (ต้องใช้แพ็คเกจเขตเวลาช่วงเวลาด้วย)
นำเข้าช่วงเวลาจาก 'ช่วงเวลา-เขตเวลา';
ฟังก์ชั่น getEventTimes (inputString, userTimeZone, targetTimeZone) { const timeFormat = 'MMM D, YYYY, h:mm:ss a z';
// 1. สร้างช่วงเวลาเริ่มต้นในเขตเวลาของผู้ใช้ const eventTime = โมเมนต์.tz( อินพุตสตริง, Moment.ISO_8601, // คาดว่าจะมีสตริง ISO 8601 จริง // แยกวิเคราะห์อย่างเข้มงวด ผู้ใช้TimeZone );
// เกิดข้อผิดพลาดหาก inputString ไม่ได้แสดงถึงวันที่ที่ถูกต้อง ถ้า (!eventTime.isValid()) { โยนข้อผิดพลาดใหม่ ('การป้อนข้อมูลวันที่ / เวลาไม่ถูกต้อง'); }
// 2. คำนวณเวลาเป้าหมาย // สำคัญมาก: เราต้องโคลน ไม่เช่นนั้น 'eventTime' จะเปลี่ยนแปลงไปตลอดกาล! const targetTime = eventTime.clone().tz(targetTimeZone);
กลับ { ท้องถิ่น: eventTime.format (timeFormat) เป้าหมาย: targetTime.format (timeFormat) }; }
กำหนดการ const = getEventTimes( '2026-03-05T15:00-05:00', 'อเมริกา/นิวยอร์ก', 'ยุโรป/ลอนดอน' );
console.log (กำหนดการ. local); // 5 มี.ค. 2569, 15:00:00 น. EST
console.log(กำหนดการ.เป้าหมาย); // 5 มี.ค. 2569, 20:00:00 น. GMT
ในตัวอย่างนี้ เรากำลังใช้รูปแบบวันที่คาดหวัง ISO 8601 ซึ่งสร้างไว้อย่างมีประโยชน์ใน Moment นอกจากนี้เรายังใช้การแยกวิเคราะห์ที่เข้มงวด ซึ่งหมายความว่า Moment จะไม่พยายามเดาด้วยสตริงวันที่ที่ไม่ตรงกับรูปแบบ หากส่งสตริงวันที่ที่ไม่ใช่ ISO จะส่งผลให้ออบเจ็กต์วันที่ไม่ถูกต้องและเราจะเกิดข้อผิดพลาด การใช้งานชั่วคราวมีลักษณะคล้ายกัน แต่มีความแตกต่างที่สำคัญบางประการ
ฟังก์ชั่น getEventTimes (inputString, userTimeZone, targetTimeZone) { // 1. แยกวิเคราะห์อินพุตลงใน Instant โดยตรง จากนั้นจึงสร้าง // ZonedDateTime ในโซนของผู้ใช้ const ทันที = Temporal.Instant.from (inputString); const eventTime = ทันที toZonedDateTimeISO (userTimeZone);
// 2. แปลงเป็นโซนเป้าหมาย // สิ่งนี้จะส่งคืนออบเจ็กต์ใหม่โดยอัตโนมัติ 'eventTime' ปลอดภัย const targetTime = eventTime.withTimeZone (targetTimeZone);
// 3. จัดรูปแบบโดยใช้ Intl (ในตัว) ตัวเลือก const = { ปี: 'ตัวเลข', เดือน: 'สั้น' วัน: 'ตัวเลข' ชั่วโมง: 'ตัวเลข', นาที: '2 หลัก', ที่สอง: '2 หลัก', ชื่อโซนเวลา: 'สั้น' };
กลับ { ท้องถิ่น: eventTime.toLocaleString (navigator. language, ตัวเลือก), เป้าหมาย: targetTime.toLocaleString (navigator. language, ตัวเลือก) }; }
กำหนดการ const = getEventTimes( '2026-03-05T15:00-05:00', 'อเมริกา/นิวยอร์ก', 'ยุโรป/ลอนดอน' );
console.log (กำหนดการ. local); // 5 มี.ค. 2569, 15:00:00 น. EST
console.log(กำหนดการ.เป้าหมาย); // 5 มี.ค. 2569, 20:00:00 น. GMT
ด้วย Moment เราต้องระบุสตริงรูปแบบสำหรับสตริงวันที่ที่เป็นผลลัพธ์อย่างชัดเจน ไม่ว่าผู้ใช้จะอยู่ที่ไหนหรือสถานที่ใดก็ตาม เวลาของกิจกรรมจะถูกจัดรูปแบบเป็นวันที่ 5 มีนาคม 2026 เวลา 3:00:00 น. เสมอน. เวลาตะวันออก นอกจากนี้ เราไม่จำเป็นต้องโยนข้อยกเว้นอย่างชัดเจน หากมีการส่งสตริงที่ไม่ถูกต้องไปยัง Temporal.Instant.from ทาง Temporal จะส่งข้อยกเว้นให้เรา สิ่งหนึ่งที่ควรทราบคือแม้จะมีการแยกวิเคราะห์ที่เข้มงวด แต่เวอร์ชัน Moment ก็ยังคงผ่อนปรนมากกว่า เวลาชั่วคราวต้องมีการชดเชยโซนเวลาที่ส่วนท้ายของสตริง คุณควรทราบด้วยว่าเนื่องจากเราใช้ navigator.language โค้ดนี้จึงจะทำงานในสภาพแวดล้อมของเบราว์เซอร์เท่านั้น เนื่องจากไม่ได้กำหนด Navigator ไว้ในสภาพแวดล้อม Node.js การใช้งานชั่วคราวจะใช้สถานที่ปัจจุบันของเบราว์เซอร์ (navigator. language) ดังนั้นผู้ใช้จะได้รับเวลาของเหตุการณ์ที่จัดรูปแบบโดยอัตโนมัติในรูปแบบเวลาท้องถิ่นของตน ในพื้นที่ en-US คือวันที่ 5 มีนาคม 2026 เวลา 15:00:00 น. EST อย่างไรก็ตาม หากผู้ใช้อยู่ในลอนดอน เวลาของกิจกรรมจะมีรูปแบบเป็นวันที่ 5 มีนาคม 2026 เวลา 15:00:00 GMT-5 สรุป
การดำเนินการ โมเมนต์.js ชั่วขณะ เวลาปัจจุบัน ช่วงเวลา() Temporal.Now.zonedDateTimeISO() กำลังแยกวิเคราะห์ ISO ช่วงเวลา(str) Temporal.Instant.from(str) เพิ่มเวลา .add(7, 'วัน') (กลายพันธุ์) .add({ วัน: 7 }) (วัตถุใหม่) ความแตกต่าง .diff(อื่นๆ, 'ชั่วโมง') .ตั้งแต่(อื่นๆ).ชั่วโมง เขตเวลา .tz('โซน/ชื่อ') .withTimeZone('โซน/ชื่อ')
เมื่อมองแวบแรก ความแตกต่างอาจแตกต่างกันเล็กน้อย (และในกรณีของ Temporal บางครั้งอาจละเอียดกว่าและเข้มงวดกว่า) แต่มีข้อดีที่สำคัญหลายประการในการใช้ Temporal เหนือ Moment.js:
ความชัดเจนมากขึ้นหมายถึงความประหลาดใจและข้อบกพร่องที่ไม่ได้ตั้งใจน้อยลง ช่วงเวลาอาจดูเหมือนผ่อนปรนมากกว่า แต่เกี่ยวข้องกับ "การคาดเดา" ซึ่งบางครั้งอาจส่งผลให้วันที่ไม่ถูกต้อง หากคุณให้บางสิ่งที่ไม่ถูกต้องกับ Temporal มันจะเกิดข้อผิดพลาด หากโค้ดทำงาน คุณจะรู้ว่าคุณมีวันที่ที่ถูกต้อง Moment สามารถเพิ่มขนาดที่สำคัญให้กับชุดแอปพลิเคชัน โดยเฉพาะอย่างยิ่งหากคุณใช้แพ็คเกจเขตเวลาช่วงเวลา Temporal ไม่ได้เพิ่มอะไรเลย (เมื่อจัดส่งในเบราว์เซอร์เป้าหมายของคุณแล้ว) ความไม่เปลี่ยนรูปช่วยให้คุณมั่นใจได้ว่าคุณจะไม่สูญเสียหรือเขียนทับข้อมูลเมื่อทำการแปลงวันที่และการดำเนินการ การแสดงเวลาที่แตกต่างกัน (Instant, PlainDateTime, ZonedDateTime) ขึ้นอยู่กับความต้องการของคุณ โดยที่ Moment จะเป็น wrapper รอบการประทับเวลา UTC เสมอ Temporal ใช้ Intl API สำหรับการจัดรูปแบบวันที่ ซึ่งหมายความว่าคุณสามารถมีการจัดรูปแบบ Locale-Aware ได้โดยไม่ต้องระบุโทเค็นอย่างชัดเจน
หมายเหตุเกี่ยวกับ Polyfill ตามที่กล่าวไว้ก่อนหน้านี้ มี Temporal polyfill ซึ่งแจกจ่ายเป็นแพ็คเกจ npm ชื่อ @js-temporal/polyfill หากคุณต้องการใช้ Temporal วันนี้ คุณจะต้องมีโพลีฟิลนี้เพื่อรองรับเบราว์เซอร์ เช่น Safari ที่ยังไม่ได้จัดส่ง API ข่าวร้ายก็คือ มันจะเพิ่มขนาดมัดของคุณ ข่าวดีก็คือว่ายังคงเพิ่มน้อยกว่าช่วงเวลาหรือเขตเวลาขณะนั้นอย่างมาก นี่คือการเปรียบเทียบขนาดมัดตามที่รายงานโดย Bundlephobia.com ซึ่งเป็นเว็บไซต์ที่นำเสนอข้อมูลเกี่ยวกับขนาดแพ็คเกจ npm (คลิกที่ชื่อแพ็คเกจแต่ละรายการเพื่อดูการวิเคราะห์ Bundlephobia):
แพ็คเกจ ย่อเล็กสุด ย่อขนาด & gzipped @ js-ชั่วคราว/polyfill 154.1 กิโลไบต์ 44.1 กิโลไบต์ ช่วงเวลา 294.4 กิโลไบต์ 75.4 กิโลไบต์ ช่วงเวลา 1 เมกะไบต์ 114.2 กิโลไบต์
ในอดีตโพลีฟิลยังมีปัญหาด้านประสิทธิภาพบางประการเกี่ยวกับการใช้หน่วยความจำ และในขณะที่เขียน จะถือว่าอยู่ในสถานะอัลฟ่า ด้วยเหตุนี้คุณจึงอาจไม่ต้องการใช้มันในการผลิตจนกว่าจะถึงสถานะที่เป็นผู้ใหญ่มากขึ้น ข่าวดีอีกอย่างก็คือ หวังว่าจะไม่ต้องใช้โพลีฟิลอีกต่อไป (เว้นแต่คุณจะต้องรองรับเบราว์เซอร์รุ่นเก่าแน่นอน) ในขณะที่เขียน Temporal ได้จัดส่งใน Chrome, Edge และ Firefox ยังไม่พร้อมใน Safari แม้ว่าดูเหมือนว่าจะสามารถใช้งานได้กับการตั้งค่าสถานะรันไทม์ใน Technology Preview ล่าสุด
