Moment.js: คำอธิบายที่สมบูรณ์และตัวอย่างการใช้งานจริงของไลบรารีวันที่

อินฟอร์เมเทค ดิจิตอล » สำนวน » Moment.js: คำอธิบายที่สมบูรณ์และตัวอย่างการใช้งานจริงของไลบรารีวันที่

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

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

Moment.js คืออะไร และเหตุใดจึงได้รับความนิยมอย่างมาก?

Moment.js เป็นไลบรารี JavaScript ที่ออกแบบมาเพื่อให้การทำงานกับวันที่และเวลาเป็นเรื่องง่ายช่วยให้คุณสามารถสร้าง วิเคราะห์ จัดการ และแสดงวันที่ในรูปแบบต่างๆ ได้แทบทุกรูปแบบด้วยไวยากรณ์ที่เรียบง่ายแต่ทรงพลัง เป็นเวลานานแล้วที่ไลบรารีนี้เป็นโซลูชันหลักของชุมชนในการเอาชนะข้อจำกัดของอ็อบเจ็กต์ Date() ดั้งเดิมของ JavaScript

หัวใจหลักของ Moment.js คืออ็อบเจ็กต์`moment()`ซึ่งสามารถสร้างวันที่จากอินพุตที่ถูกต้องเกือบทุกประเภท ได้แก่ สตริงข้อความ อ็อบเจ็กต์ Date การประทับเวลา หรือโดยตรงด้วยตัวเลข ทำให้มีความยืดหยุ่นและมีประโยชน์อย่างมากในโครงการทุกประเภท ตั้งแต่สคริปต์ขนาดเล็กไปจนถึงแอปพลิเคชันระดับองค์กรที่จัดการเขตเวลาสากลหรือบันทึกประวัติ

อะไรที่ทำให้มันประสบความสำเร็จขนาดนี้? ความน่าเชื่อถือ ความง่ายในการใช้งาน และเครื่องมือและปลั๊กอินเสริมที่หลากหลายแม้ว่าโครงการจะเข้าสู่โหมดการบำรุงรักษาแล้วMoment.js ก็ยังคงมีฐานผู้ใช้ขนาดใหญ่และเอกสารประกอบที่ครอบคลุมซึ่งตอกย้ำตำแหน่งผู้นำด้านโซลูชันข้อมูลวันที่ใน JavaScript และ Node.js

คุณสมบัติหลักและประโยชน์ของ Moment.js

• API ที่เรียบง่ายและใช้งานง่ายจุดแข็งอย่างหนึ่งของ Moment.js คือไวยากรณ์ที่ชัดเจน คุณสามารถดำเนินการง่ายๆ เช่น การรับวันที่ปัจจุบัน หรือการแปลงสตริงเป็นรูปแบบเฉพาะ หรือการคำนวณและการตรวจสอบที่ซับซ้อนได้ภายในไม่กี่บรรทัด
• การแยกวิเคราะห์และการจัดรูปแบบที่ยืดหยุ่นการแยกวิเคราะห์สตริงวันที่เกือบทุกรูปแบบและแปลงเป็นผลลัพธ์ที่ต้องการไม่เคยง่ายขนาดนี้มาก่อน Moment.js ช่วยให้การจัดรูปแบบวันที่ในงานนำเสนอที่กำหนดเองเป็นเรื่องรวดเร็วและไม่ยุ่งยาก.
• การจัดการวันที่:การบวกหรือลบวัน เดือน ปี สัปดาห์ หรือหน่วยเวลาอื่นใดก็ง่ายเหมือนการใช้วิธีการเหล่านี้ เพิ่ม() y ลบ()สิ่งนี้มีประโยชน์มากเมื่อคุณต้องทำงานกับวันที่สัมพันธ์กัน วันครบกำหนด หรือกรอบเวลาที่เปลี่ยนแปลงแบบไดนามิก
• การตรวจสอบที่แข็งแกร่ง:หากคุณต้องการตรวจสอบว่าวันที่ถูกต้องหรือมีอยู่จริง (เช่น 30 กุมภาพันธ์) Moment.js จะช่วยให้คุณทำได้อย่างง่ายดาย วิธีการนี้ ถูกต้อง() สามารถตรวจจับข้อผิดพลาดที่ละเอียดอ่อนในรูปแบบหรือตรรกะของวันที่ได้
• รองรับโซนเวลาและการระบุตำแหน่ง: ขอบคุณปลั๊กอินของคุณ ช่วงเวลา-เขตเวลาการแปลงวันที่ระหว่างเขตเวลาต่างๆ นั้นง่ายมาก คุณยังสามารถแสดงวันที่ที่ปรับให้เข้ากับภาษาของผู้ใช้และข้อตกลงของแต่ละภูมิภาค ซึ่งเป็นสิ่งสำคัญในแอปพลิเคชันทั่วโลก
• ระบบนิเวศปลั๊กอิน:นอกเหนือจากไลบรารีหลักแล้ว ยังมีระบบนิเวศของปลั๊กอินเพื่อขยายการใช้งาน (ปฏิทิน ความเข้ากันได้กับเฟรมเวิร์กอื่น รูปแบบที่แปลกใหม่ ฯลฯ)

วิธีเริ่มต้นใช้งาน Moment.js ในโครงการของคุณ

การติดตั้งนั้นง่ายมากคุณสามารถเพิ่ม Moment.js ลงใน HTML ของคุณได้ด้วยบรรทัดเดียว:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

หากคุณทำงานกับ Node.js หรือสภาพแวดล้อมการพัฒนาสมัยใหม่ เป็นเรื่องปกติที่จะติดตั้งโดยใช้ npm หรือ yarn:

npm install moment

เมื่อทำเสร็จแล้ว คุณสามารถนำเข้า Moment.js ตามรูปแบบที่คุณใช้ได้:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

การสร้างวันที่: วิธีการที่แตกต่างกันและตัวอย่างในทางปฏิบัติ

สร้างวันที่ได้อย่างง่ายดาย

เพื่อรับวันที่และเวลาปัจจุบัน เพียงแค่ใช้ moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

คุณสามารถสร้างวันที่เจาะจงได้โดยการส่งอาร์กิวเมนต์:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

คุณสามารถเริ่มจากสตริงและรูปแบบที่กำหนดได้ แม้ในโหมดเข้มงวด:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

คุณมีวัตถุ Date ดั้งเดิมหรือไม่?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

การจัดรูปแบบและการแสดงวันที่

Moment.js ช่วยให้คุณแสดงวันที่ในรูปแบบใดก็ได้ตามต้องการตัวอย่างเช่น การแสดงวันที่ปัจจุบันในรูปแบบ วัน/เดือน/ปี:

moment().format('DD/MM/YYYY');

หากคุณต้องการโซ่ที่มีความเป็นมนุษย์มากขึ้น คุณสามารถใช้:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

สัญลักษณ์ที่มีประโยชน์บางส่วนสำหรับการจัดรูปแบบ :

• YYYY: ปี 4 หลัก
• MM: ของฉัน
• DD: วันของเดือน
• hh o HH: เวลา (รูปแบบ 12 ชม. หรือ 24 ชม.)
• mm: นาที
• ss: วินาที
• a: เช้า/บ่าย

เช่น การแสดงเฉพาะเวลา:

moment().format('HH:mm:ss');

การจัดรูปแบบขั้นสูงด้วยโทเค็นและการสนับสนุนระดับภูมิภาค

Moment.js รองรับรูปแบบและภาษาท้องถิ่นหลายภาษาสามารถสลับภาษาได้ทันทีเพื่อแสดงชื่อเดือนและวันในภาษาอื่น

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

การจัดการวันที่: การบวก การลบ และการเปรียบเทียบ

การทำงานกับวันที่สัมพันธ์กันเป็นหนึ่งในจุดแข็งของ Moment.js

• เพิ่มวัน เดือน หรือปี:

  moment().add(3, 'days').format('DD/MM/YYYY');

• ลบหน่วย:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• การเริ่มต้นและสิ้นสุดของงวด:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

ตรวจสอบวันที่และตรวจจับข้อผิดพลาด

ก่อนที่จะดำเนินการกับวันที่ สิ่งสำคัญคือต้องตรวจสอบว่าวันเหล่านั้นถูกต้อง:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

วิธีนี้จะช่วยป้องกันข้อผิดพลาดที่ไม่คาดคิดในแอปพลิเคชันที่รับข้อมูลจากผู้ใช้

การเปรียบเทียบวันที่: ตรวจสอบว่าวันที่ใดเป็นวันเดียวกับวันอื่นๆ

Moment.js มีวิธีการหลายวิธีสำหรับการเปรียบเทียบวันที่:

• ก่อน():ตรวจสอบว่าวันที่หนึ่งอยู่ก่อนอีกวันหนึ่งหรือไม่
• isAfter(): ตรวจสอบว่าวันที่อยู่หลังกว่าหรือไม่
• isBetween():ระบุว่าวันที่อยู่ระหว่างสองวันที่กำหนดหรือไม่

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

การจัดการโซนเวลาและวันที่สากล

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

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

นอกจากนี้ Moment.js ยังสามารถแสดงวันที่โดยปรับให้เข้ากับการตั้งค่าภูมิภาคของผู้ใช้โดยแสดงชื่อเดือนและวันที่มีการแปลอย่างถูกต้อง

ตัวอย่างการใช้งานที่สำคัญและเคล็ดลับขั้นสูง

รับความแตกต่างระหว่างวันที่

คุณสามารถคำนวณเวลาที่ผ่านไประหว่างสองวันในหน่วยที่แตกต่างกันได้:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

วันสัมพันธ์และเวลาของมนุษย์

Moment.js เหมาะอย่างยิ่งสำหรับการแสดงข้อความเช่น "3 วันที่แล้ว" หรือ "ใน 5 ชั่วโมง":

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

ปฏิทินมนุษย์

ฟังก์ชัน calendar ()แสดงวันที่แบบสัมพัทธ์ เช่น "เมื่อวานเวลา 17:00 น.", "พรุ่งนี้เวลา 9:00 น." ทำให้ใช้งานได้สะดวกมากสำหรับแอปปฏิทิน

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

รองรับการกระโดดข้ามปีและวันพิเศษ

คุณต้องการทราบว่าปีใดเป็นปีอธิกสุรทินหรือไม่?

moment([2024]).isLeapYear(); // true

เมธอดisLeapYear()จะให้คำตอบแก่คุณโดยตรง

การปรับแต่งขั้นสูง: รูปแบบ โทเค็น และการแยกวิเคราะห์อย่างเข้มงวด

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

ตัวอย่างเช่น การแยกวิเคราะห์วันที่ในรูปแบบ "วัน/เดือน/ปี":

moment('12/03/2023', 'DD/MM/YYYY', true);

รายการโทเค็นทั่วไปและตัวอย่าง

• ปี: ปี (2024), ปี (24), ปี (-500)
• เดือน: MM (01 – 12), MMM (ม.ค.), MMMM (ม.ค.)
• Día: DD (01 – 31), C (1 – 31)
• เวลา: HH (00 – 23), hh (01 – 12), mm (นาที), ss (วินาที)
• เขตเวลา: Z, ZZ

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