Làm việc với ngày và giờ trong JavaScript luôn hơi rườm rà. Các phương pháp ngày gốc là dài dòng và API thường không nhất quán. Đó là lý do tại sao nếu bạn hỏi một câu hỏi liên quan đến ngày tháng trên StackOverflow, bạn sẽ thường nghe thấy câu trả lời “Sử dụng Moment.js”.
Moment.js là gì?
Khoảnh khắc.js là một con dao của Quân đội Thụy Sĩ để làm việc với ngày tháng trong JavaScript. Nó cho phép bạn phân tích cú pháp, xác thực, thao tác và hiển thị ngày và giờ bằng cách sử dụng một API gọn gàng và ngắn gọn.
Trong bài viết này, tôi sẽ chỉ cho bạn cách thiết lập và chạy với Moment.js, cũng như minh họa một số trường hợp sử dụng phổ biến của nó.
Bắt đầu với Moment.js
Moment.js có sẵn miễn phí để tải xuống từ trang chủ của dự án. Moment.js có thể được chạy từ trình duyệt cũng như từ trong ứng dụng Node. Để sử dụng nó với Node, hãy cài đặt mô-đun bằng lệnh sau.
npm install moment
Sau đó, đơn giản require() và sử dụng nó trong ứng dụng của bạn như được hiển thị bên dưới.
const moment = require('moment');
const today = moment();
console.log(today.format()); // 2020-01-09T15:45:51+01:00
Để chạy Moment.js từ trình duyệt, hãy bao gồm nó bằng cách sử dụng <script> , như được hiển thị bên dưới. Moment.js tạo ra một toàn cầu moment đối tượng có thể được sử dụng để truy cập vào tất cả chức năng phân tích cú pháp và thao tác ngày và giờ.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Moment.js</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script> // You have a 'moment' global here const today = moment(); console.log(today.format()); </script> </body>
</html>
Định dạng ngày tháng
Trước đây, tôi nhớ lại việc chuyển đổi chuỗi ngày thành Date các đối tượng, lấy từng phần dữ liệu, sau đó thực hiện nối chuỗi. Moment.js đã đơn giản hóa quá trình chuyển đổi ngày tháng sang bất kỳ định dạng cụ thể nào. Chuyển đổi định dạng ngày với Moment rất đơn giản, như thể hiện trong ví dụ sau.
moment().format('YYYY-MM-DD');
đang gọi moment() cung cấp cho chúng tôi ngày và giờ hiện tại, trong khi format() chuyển đổi nó sang định dạng được chỉ định. Ví dụ này định dạng một ngày là một năm có bốn chữ số, theo sau là dấu gạch ngang, tiếp theo là tháng có hai chữ số, một dấu gạch nối khác và ngày có hai chữ số.
Xem bút
Định dạng ngày với Moment.js bởi SitePoint (@SitePoint)
on CodePen.
Mẹo: Hãy thử thử nghiệm với một số các định dạng ngày khác được liệt kê trong tài liệu của dự án.
Xác thực ngày
Một tác vụ khó chịu khác mà Moment.js đã đơn giản hóa rất nhiều là xác thực ngày tháng. Để thực hiện xác thực, chỉ cần chuyển một chuỗi ngày vào moment đối tượng, cùng với định dạng ngày mong muốn và gọi isValid() phương pháp. Điều này sẽ trở lại true nếu ngày đó hợp lệ, và false nếu không thì.
console.log(moment("2020-01-01", "YYYY-MM-DD").isValid()); // true
console.log(moment("not-a-date", "YYYY-MM-DD").isValid()); // false
Tuy nhiên, hãy lưu ý rằng Khoảnh khắc mang lại cho bạn khả năng làm việc với từng phần ngày tháng, điều này có thể dẫn đến kết quả không mong muốn.
console.log( moment("2019 was a great year because I got married", "YYYY-MM-DD").isValid()
);
// Returns true because 2019 matches YYYY
Để tránh điều này, bạn có thể đặt Moment vào chế độ phân tích cú pháp nghiêm ngặt bằng cách chuyển nó true như một lập luận thứ ba.
console.log( moment("2019 was a great year because I got married", "YYYY-MM-DD", true).isValid()
);
// false
Đây là một ví dụ để giới thiệu chức năng này.
Xem bút
Kiểm tra tính hợp lệ của ngày với Moment.js bởi SitePoint (@SitePoint)
on CodePen.
Có một số cờ hữu ích khác trong đối tượng được trả về bởi moment():
- tràn - Điều này được đặt khi xảy ra tràn. Ví dụ sẽ là tháng thứ 13 hoặc ngày thứ 32.
- không hợp lệ tháng - Đặt khi tháng không hợp lệ, như Jannnuaarry.
- trống - Đặt khi ngày đã nhập không chứa gì có thể phân tích cú pháp.
- nullĐầu vào - Đặt khi ngày nhập là
null.
Bạn có thể đọc thêm về các cờ này và các cờ có sẵn khác trên trang chủ của dự án.
Thao tác ngày
Có một số tùy chọn để thao tác moment vật. Ví dụ: bạn có thể thêm hoặc trừ ngày, tháng, năm, v.v. Điều này đạt được thông qua thêm vào() và trừ () các phương pháp. Ví dụ sau đây cho biết cách bảy ngày, tháng hoặc tuần được thêm vào ngày hiện tại.
moment().add(7, 'days'); // adds 7 days to current date
moment().add(7, 'months'); // adds 7 months to current date
moment().add(7, 'years'); // adds 7 years to current date
Tương tự, subtract() phương pháp được hiển thị bên dưới.
moment().subtract(7, 'days'); // subtracts 7 days to current date
moment().subtract(7, 'months'); // subtracts 7 months to current date
moment().subtract(7, 'years'); // subtracts 7 years to current date
Lưu ý rằng mỗi ví dụ trên sẽ trả về moment vật. Nếu bạn muốn một ngày tháng mà con người có thể đọc được, bạn sẽ cần phải định dạng nó cho phù hợp.
const today = moment();
const nextWeek = today.add(7, 'days');
console.log(nextWeek.format('dddd Do MMMM, YYYY')); // Thursday 16th January, 2020
Thời gian từ bây giờ
Một nhiệm vụ phổ biến khác là xác định khoảng thời gian tồn tại giữa hai ngày. Để tính toán thời gian kể từ ngày hiện tại, Moment.js sử dụng một phương pháp có tên từ giờ(). Dưới đây là cách kiểm tra thời gian đã trôi qua kể từ đầu thập kỷ:
moment('2020.01.01', 'YYYY.MM.DD').fromNow();
// 9 days ago
Nếu chúng tôi vượt qua true như một đối số, chúng ta có thể nhận giá trị mà không có hậu tố.
moment('2020.01.01', 'YYYY.MM.DD').fromNow(true);
// 9 days
Thời gian từ một ngày khác
Sản phẩm fromNow() phương pháp được sử dụng để so sánh thời gian với ngày hiện tại. Đây chỉ là một trường hợp đặc biệt của từ(), so sánh hai ngày tùy ý. Một ví dụ sử dụng from() được hiển thị dưới đây.
const dateA = moment('01-01-1900', 'DD-MM-YYYY');
const dateB = moment('01-01-2000', 'DD-MM-YYYY'); console.log(dateA.from(dateB));
Bạn có thể chơi với phương pháp này trong bản demo sau.
Xem bút
Thời gian từ một ngày khác với Moment.js bởi SitePoint (@SitePoint)
on CodePen.
Tính toán sự khác biệt giữa các ngày
Moment.js cung cấp một cách để tính toán sự khác biệt giữa hai ngày. Sự khác biệt được tính bằng mili giây theo mặc định, nhưng cũng có thể được trả về theo ngày, tháng, năm, v.v. Để tính toán sự khác biệt, hãy gọi diff () phương pháp. Phương thức này lấy một ngày làm đối số đầu tiên của nó. Đơn vị thời gian có thể được chỉ định bằng cách sử dụng đối số thứ hai tùy chọn. Nếu điều này không được bao gồm, thì mili giây được sử dụng. Ví dụ và bản trình diễn sau đây minh họa cách diff() Được sử dụng.
const dateB = moment('2014-11-11');
const dateC = moment('2014-10-11'); console.log('Difference is ', dateB.diff(dateC), 'milliseconds');
console.log('Difference is ', dateB.diff(dateC, 'days'), 'days');
console.log('Difference is ', dateB.diff(dateC, 'months'), 'months');
Xem bút
Tính toán sự khác biệt giữa các ngày với Moment.js bởi SitePoint (@SitePoint)
on CodePen.
Truy vấn ngày tháng
Moment.js cũng cung cấp các phương pháp so sánh ngày khác nhau. Các phương pháp này bao gồm isBefore(), isAfter()và isSame() mà, như tên ngụ ý, trả về một Boolean cho biết nếu một ngày là trước, sau hoặc bằng một ngày khác. Một ví dụ sử dụng isAfter() được hiển thị dưới đây.
console.log(moment('2020-01-01').isAfter('2019-01-01')); // true
console.log(moment('2020-01-01').isAfter('2020-01-08')); // false
cũng một có isLeapYear () phương pháp kiểm tra các năm nhuận.
console.log(moment([2020]).isLeapYear()); // true
console.log(moment([2019]).isLeapYear()); // false
Hỗ trợ ngôn ngữ quốc tế
Moment.js cung cấp tuyệt vời hỗ trợ i18n. Nó cho phép bạn chỉ định một ngôn ngữ chung hoặc đặt ngôn ngữ cho một moment vật. Theo mặc định, nó hỗ trợ ngôn ngữ tiếng Anh. Nếu bạn muốn hỗ trợ bất kỳ ngôn ngữ nào khác, thì hãy gán các giá trị chính của ngôn ngữ cụ thể đó cho moment.locale. Ví dụ rút gọn sau đây, lấy từ tài liệu Moment.js, cho biết cách có thể thêm hỗ trợ cho tiếng Pháp.
const moment = require('moment'); moment.locale('fr', { months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'), weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'), relativeTime : { future : 'dans %s', past : 'il y a %s', s : 'quelques secondes', m : 'une minute', mm : '%d minutes', h : 'une heure', hh : '%d heures', d : 'un jour', dd : '%d jours', M : 'un mois', MM : '%d mois', y : 'un an', yy : '%d ans' }
}); moment.locale('fr'); console.log(moment(1316116057189).fromNow());
// il y a une heure console.log(moment().format('dddd Do MMMM, YYYY'));
// jeudi 9e janvier, 2020
Xem bút
Quốc tế hóa với Moment.js bởi SitePoint (@SitePoint)
on CodePen.
Tại sao Moment có thể không phải là một phù hợp tốt
Mặc dù Moment.js là một thư viện ngày và giờ tuyệt vời, nó cũng là một thứ gì đó khổng lồ. Ví dụ: nếu bạn sử dụng nó với webpack, chỉ là một require('moment'); là đủ đảm bảo rằng tất cả các của các ngôn ngữ đi cùng cho chuyến đi. Điều này làm tăng đáng kể kích thước gói của bạn và bạn cần sử dụng bổ sung để lấy nó trở lại.
Nó cũng đi kèm với nhiều tính năng tuyệt vời, nhưng ngược lại với các thư viện như Nhà nghỉ, nó không cho phép bạn chọn anh đào những thứ bạn cần. Thay vào đó, bạn luôn phải tải toàn bộ thư viện.
Một khiếu nại phổ biến khác là moment đối tượng có thể thay đổi. Điều này có thể dẫn đến sự nhầm lẫn giữa các nhà phát triển. Coi như:
const moment = require('moment');
const today = moment();
const nextWeek = today.add(7, 'days');
console.log(today.fromNow());
Bạn mong đợi điều gì được đăng nhập vào bảng điều khiển? Rất tiếc, câu trả lời là "trong 7 ngày nữa" (chứ không phải "vài giây trước"), vì mã today.add(7, 'days') đột biến moment đối tượng, đặt nó thành bảy ngày trong tương lai.
Điều này có thể tránh được bằng cách sao chép moment đối tượng trước khi định dạng trước bất kỳ phép toán ngày tháng nào, nhưng vào thời điểm bạn nhớ làm điều đó, rất có thể bạn đã dành khá nhiều thời gian để gỡ lỗi.
const moment = require('moment');
const today = moment();
const nextWeek = today.clone().add(7, 'days');
console.log(today.fromNow());
// a few seconds ago
Một giải pháp thay thế trọng lượng nhẹ
Đối với những người bạn đang tìm kiếm một giải pháp thay thế nhẹ hơn, hãy xem xét ngày-fns. Date-fns là bất biến, luôn trả về một ngày mới thay vì thay đổi ngày bạn nhập vào. Nó có một API đơn giản, là người bạn đồng hành hoàn hảo cho Webpack và với kiểu hàm trên mỗi tệp, bạn có thể chọn ngay những gì bạn cần.
Nếu bạn muốn tìm hiểu thêm, hãy đọc: Giới thiệu về date-fns - Thư viện ngày JavaScript nhẹ
Kết luận
Moment.js thực sự là một thư viện tuyệt vời giúp đơn giản hóa các thao tác và xác nhận liên quan đến ngày tháng và thời gian. Trong bài viết này, chúng tôi tập trung vào một số tính năng của Moment.js giúp phân tích cú pháp, xác thực và thao tác ngày và giờ trong trình duyệt và ứng dụng Node.js. Một số plugin hữu ích cũng có sẵn cho Moment.js. Bạn có thể tìm thấy các plugin như Lịch ISO, Lịch Jalaali và nhiều plugin khác trên trang plugin chính thức. Để biết thêm về Moment.js, người đọc được chuyển hướng đến thư viện của tài liệu hướng dẫn.
Tăng cường hiểu biết của bạn về JavaScript với JavaScript: Người mới làm quen với Ninja. Đó là một hướng dẫn thú vị, thiết thực và toàn diện về cách sử dụng hiện đại của ngôn ngữ mạnh mẽ được đánh giá cao này.
Nguồn: https://www.sitepoint.com/managing-dates-times-using-moment-js/?utm_source=rss
