Đặc biệt là đối với các ứng dụng web, định dạng ngày tháng là một công việc khá phổ biến. Hãy xem bất kỳ trang web nào, cho dù đó là ứng dụng email như Gmail, Twitter hay thậm chí trên các bài viết về Lạm dụng ngăn xếp, chắc chắn sẽ có một chuỗi ngày / giờ ở đâu đó trên trang. Trong nhiều trường hợp, đặc biệt là các ứng dụng có nội dung giao diện người dùng được tạo động, ngày tháng được định dạng bằng mã JavaScript. Vì vậy, tôi muốn nói rằng thật an toàn khi cho rằng đây là một nhiệm vụ bạn sẽ gặp phải khá thường xuyên.
Mỗi phần sau đây mô tả một phương pháp (hoặc thư viện) mà bạn có thể sử dụng để định dạng ngày tháng trong JavaScript. Vì có một số cách khác nhau để đạt được điều này, tôi đã liệt kê chúng theo thứ tự sở thích cá nhân của mình. Tuy nhiên, bạn có thể thấy rằng một trong các giải pháp sau đây sẽ không hoạt động đối với ứng dụng của bạn vì lý do này hay lý do khác, trong trường hợp này, bạn có thể tìm kiếm thứ gì đó phù hợp hơn với nhu cầu của mình trong danh sách.
Contents
Moment.js
Moment.js được nhiều người coi là thư viện ngày-giờ tốt nhất cho JavaScript, và vì lý do chính đáng. Nó cực kỳ dễ sử dụng, được ghi chép đầy đủ và có kích thước dưới 20kb (thu nhỏ, nén). Nó hoạt động với cả Node.js và JavaScript phía trình duyệt, cho phép bạn sử dụng nó trong toàn bộ cơ sở mã của mình. Đây là một điểm cộng khá lớn khi bạn chỉ cần học một thư viện ngày-giờ duy nhất, bất kể bạn đang lập trình front-end hay back-end.
Trước khi bắt đầu định dạng ngày tháng, hãy sử dụng Node REPL để kiểm tra moment lót:
> const moment = require('moment');
> let m = moment(); // Create a new date, which defaults to the current time
> m = moment('2016-08-02 15:37'); // Parse an ISO 8601 date string
> m.month(9); // Set month to October - months are 0-indexed!
Có khá nhiều cách để tạo, phân tích cú pháp và thao tác ngày với Moment mà chúng tôi sẽ không trình bày hoàn toàn ở đây. Để có cái nhìn tổng quan tốt về toàn bộ thư viện, hãy xem bài viết của chúng tôi, Moment.js: A Better Date Library for JavaScript.
Bây giờ bạn đã biết đại khái cách sử dụng Moment để tạo và thao tác ngày tháng, hãy xem cách sử dụng nó để định dạng ngày tháng của bạn dưới dạng chuỗi.
Cách đơn giản nhất để bắt đầu là sử dụng .format() phương thức không có đối số:
> moment().format(); '2016-08-02T15:44:09-05:00'
Thao tác này sẽ in ra một ngày được định dạng trong ISO 8601 Tiêu chuẩn. Tuy nhiên, trừ khi bạn đang in ngày tháng sẽ được lưu trong JSON hoặc thứ gì đó tương tự, bạn có thể không muốn người dùng của mình phải xử lý những ngày tháng giống như vậy. Sử dụng định dạng mã thông báongày tháng có thể được tùy chỉnh theo ý thích của bạn.
Nếu bạn đến với JavaScript từ một ngôn ngữ khác như Java hoặc Python, thì bạn có thể sẽ quen thuộc với khái niệm mã thông báo định dạng ngày. Mặc dù, một lời cảnh báo, đừng cho rằng các mã thông báo từ một ngôn ngữ khác hoàn toàn giống với các mã thông báo được sử dụng trong Moment. Bạn nên tham khảo các tài liệu trước vì có khá nhiều điểm khác biệt.
Với .format() bạn có thể tạo một chuỗi mã thông báo tham chiếu đến một thành phần cụ thể của ngày (như ngày, tháng, phút hoặc sáng / chiều).
Ví dụ: giả sử bạn chỉ muốn xem biểu diễn đơn giản của thời gian hiện tại (giờ: phút: giây sáng / chiều). Chúng ta có thể đạt được điều này với:
> moment().format('[The time is] h:mm:ss a');
'The time is 4:47:09 pm'
Dưới đây là bảng phân tích các mã thông báo bạn thấy ở trên:
- [The time is]: Tất cả văn bản trong ngoặc ([]) bị bộ phân tích cú pháp bỏ qua
- h: Giờ (không có số 0 phía trước)
- mm: Phút (với số 0 ở đầu)
- ss: Giây (với số 0 ở đầu)
- a: ante / post meridiem (am / pm)
Tất cả văn bản được đặt trong dấu ngoặc và các ký tự không phải chữ và số, như ký tự dấu hai chấm (‘:’), đều bị trình phân tích cú pháp bỏ qua. Bằng cách này, bạn có thể thêm định dạng vào chuỗi của mình.
Định dạng chuỗi có thể phức tạp hơn một chút so với ví dụ của chúng tôi ở trên. Ví dụ, nếu bạn muốn in ra tháng, có 5 cách để làm như vậy:
- M: Số tháng (1, 2, 3… 12)
- Mo: Số tháng với chỉ báo thứ tự (1, 2, 3… 12)
- MM: Số tháng có số 0 đứng đầu (01, 02, 03… 12)
- MMM: Viết tắt của tháng (tháng 1, tháng 2, tháng 3… tháng 12)
- MMMM: Tên tháng (tháng 1, tháng 2, tháng 3… tháng 12)
Danh sách các lựa chọn sẽ dài hơn nhiều khi bạn xem xét nhiều biến thể cho ngày trong tháng, ngày trong tuần, giờ, năm, v.v. Một khi bạn tìm hiểu khái niệm và chơi với nó một chút, phần còn lại sẽ trở nên dễ dàng. Mặc dù có thể dễ dàng quên mã thông báo, vì vậy hãy giữ tài liệu tham khảo thuận tiện khi lập trình.
Ngoài ra còn có một số hỗ trợ tuyệt vời cho cả hai múi giờ và tùy chỉnh các ngày được định dạng theo các ngôn ngữ khác nhau. Đây thường không phải là một vấn đề lớn đối với các ứng dụng nhỏ, nhưng nó có thể là một vấn đề lớn đối với những ứng dụng lớn hơn. Nếu bạn cần hỗ trợ quốc tế hóa thì Moment sẽ là cứu cánh cho bạn.
Cho đến nay, Moment là cách yêu thích của tôi để xử lý, thao tác và định dạng các chuỗi trong JavaScript, vì vậy tôi thực sự khuyên bạn nên kiểm tra nó. Mặc dù, không phải ai cũng có thể bổ sung thêm các phụ thuộc, đặc biệt là để phát triển giao diện người dùng, có nghĩa là bạn có thể cần thử một trong hai tùy chọn định dạng tiếp theo bên dưới.
Gói định dạng ngày tháng
dateformat tương tự như Moment ở chỗ nó định dạng ngày tháng bằng cách sử dụng chuỗi mã thông báo, nhưng nó làm như vậy hơi khác một chút. Sử dụng phiên bản trình duyệt của datetimenó sẽ mở rộng Date để có một .format() hoạt động giống như phương pháp định dạng của Moment:
Browser-side
today = new Date();
today.format('dd-m-yy'); // Returns '02-8-16'
Với Phiên bản Node.js, nó hoạt động hơi khác một chút. Thay vì mở rộng Date.prototype bao gồm format()bạn phải dùng dateformat như một phương pháp chính nó và vượt qua Date:
Node.js
> const dateformat = require('dateformat');
> let now = new Date();
> dateformat(now, 'dddd, mmmm dS, yyyy, h:MM:ss TT');
'Tuesday, August 2nd, 2016, 5:45:19 PM'
Ngoài cách bạn gọi phương thức định dạng, tất cả định dạng mã thông báo hoạt động giống nhau giữa các phiên bản trình duyệt và Node.js.
Một lợi ích khác của việc sử dụng dateformat là các định dạng được đặt tên của nó. Mặc dù mọi người đều có sở thích riêng về cách định dạng ngày tháng, nhưng thực sự chỉ có một số định dạng khác nhau hầu hết người sử dụng. Thư viện này nhằm mục đích tránh tất cả sự trùng lặp của công việc bằng cách cung cấp các định dạng ngày phổ biến theo tên:
Node.js
> const dateformat = require('dateformat');
> let now = new Date();
> dateformat(now, 'fullDate');
'Tuesday, August 2, 2016'
> dateformat(now, 'longTime');
'5:45:19 PM CDT'
Hơn 10 định dạng được đặt tên này được cung cấp. Kiểm tra tài liệu (được liên kết ở trên) để xem danh sách đầy đủ.
Bạn cũng có thể thấy thư viện này phù hợp hơn nhờ kích thước nhỏ của nó. Tệp chỉ có 1,2 KB khi được thu nhỏ và nén. Không tồi khi xem xét lợi ích mà nó mang lại.
Date.toLocaleString ()
Bây giờ, mặc dù tôi không khuyên bạn nên sử dụng phương pháp này, nhưng tôi biết rằng dựa trên các ràng buộc của dự án, đây có thể là sự lựa chọn duy nhất của bạn. Điều quan trọng là phải chỉ ra điều này vì đây là cách tích hợp duy nhất để định dạng chuỗi ngày, vì vậy nó có thể hữu ích vào một số thời điểm.
Sử dụng cài sẵn Date.toLocaleString() là một cách không phụ thuộc để định dạng ngày-giờ của bạn. Tuy nhiên, nó không được hỗ trợ trong Safari và nó chỉ được hỗ trợ trong các phiên bản mới hơn của các trình duyệt chính khác, vì vậy xét cho cùng thì nó có thể không phải là một lựa chọn tốt (trừ khi bạn đang sử dụng Node). Nhưng dù sao, hãy xem nó hoạt động như thế nào.
Thay vì sử dụng chuỗi mã thông báo như trong các thư viện ở trên, ở đây chúng tôi sử dụng options nơi mỗi phần trong ngày của bạn có thể được định cấu hình.
Ví dụ, thay vì mm trong một giờ có 2 chữ số, chúng tôi sẽ sử dụng {hour: ‘2-digit’}. Điều tương tự cũng xảy ra đối với tất cả các thành phần khác của ngày, như ngày trong tuần, năm, tháng, ngày, v.v.
let now = new Date();
let options = {
weekday: 'long',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
};
now.toLocaleString('en-us', options); // Returns 'Tuesday, Aug 2, 2016, 6:03 PM'
Như bạn có thể thấy, bằng cách sử dụng .toLocaleString() phương pháp này dài dòng hơn nhiều so với các phương pháp định dạng khác mà chúng ta đã thấy trong suốt bài viết này.
Một số thành phần ngày phổ biến hơn mà bạn có thể đặt trong đối tượng tùy chọn (và các giá trị có thể có của chúng) là:
- weekday: hẹp, ngắn, dài
- year: số, 2 chữ số
- month: số, 2 chữ số, hẹp, ngắn, dài
- day: số, 2 chữ số
- hour: số, 2 chữ số
- minute: số, 2 chữ số
- second: số, 2 chữ số
Tác động định dạng tương tự có thể được thực hiện với .toLocaleString()nhưng nó chỉ cần nỗ lực hơn một chút.
Sự kết luận
JavaScript / Node.js có khá nhiều thư viện có thể định dạng chuỗi ngày tháng cho bạn, nhưng tôi chỉ trình bày một số phương pháp phổ biến hơn trong bài viết này. Mỗi loại đều có những ưu điểm riêng, vì vậy bạn nên đánh giá loại nào phù hợp nhất với mình.
Bạn thích thư viện ngày-giờ nào hơn? Có bất kỳ điều gì không được đề cập ở đây mà lẽ ra phải có? Hãy cho chúng tôi biết trong phần bình luận!
