Nhiều ứng dụng bạn xây dựng sẽ có một số loại thành phần ngày tháng, cho dù đó là ngày tạo tài nguyên hay dấu thời gian của một hoạt động.
Xử lý định dạng ngày tháng và dấu thời gian có thể rất mệt mỏi. Trong hướng dẫn này, bạn sẽ tìm hiểu cách lấy ngày hiện tại ở các định dạng khác nhau trong JavaScript.
Đối tượng ngày của JavaScript
JavaScript được tích hợp sẵn Date đối tượng lưu trữ ngày giờ và cung cấp các phương thức để xử lý chúng.
Để tạo một phiên bản mới của Date đối tượng, hãy sử dụng new từ khóa:
const date = new Date();Các Date đối tượng chứa một Number đại diện cho một phần nghìn giây đã trôi qua kể từ Kỷ nguyên, tức là ngày 1 tháng 1 năm 1970.
Bạn có thể chuyển một chuỗi ngày đến Date constructor để tạo một đối tượng cho ngày đã chỉ định:
const date = new Date('Jul 12 2011');Để có được năm hiện tại, hãy sử dụng getFullYear() phương pháp ví dụ của Date vật. Các getFullYear() phương thức trả về năm của ngày được chỉ định trong Date người xây dựng:
const currentYear = date.getFullYear();
console.log(currentYear); //2020Tương tự, có các phương pháp để lấy ngày hiện tại của tháng và tháng hiện tại:
const today = date.getDate();
const currentMonth = date.getMonth() + 1; Các getDate() phương thức trả về ngày hiện tại của tháng (1-31).
Các getMonth() phương thức trả về tháng của ngày được chỉ định. Một điểm cần lưu ý về getMonth() là nó trả về các giá trị được lập chỉ mục 0 (0-11) trong đó 0 là cho tháng 1 và 11 cho tháng 12. Do đó, việc thêm 1 để bình thường hóa giá trị của tháng.
Ngày bây giờ
now() là một phương thức tĩnh của Date vật. Nó trả về giá trị tính bằng mili giây đại diện cho thời gian đã trôi qua kể từ Kỷ nguyên. Bạn có thể vượt qua trong một phần nghìn giây được trả về từ now() phương pháp vào Date constructor để khởi tạo một cái mới Date vật:
const timeElapsed = Date.now();
const today = new Date(timeElapsed);Định dạng ngày
Bạn có thể định dạng ngày thành nhiều định dạng (GMT, ISO, v.v.) bằng các phương pháp của Date vật.
Các toDateString() phương thức trả về ngày ở định dạng có thể đọc được của con người:
today.toDateString(); // "Sun Jun 14 2020"Các toISOString() phương thức trả về ngày tuân theo Định dạng mở rộng ISO 8601:
today.toISOString(); // "2020-06-13T18:30:00.000Z"Các toUTCString() phương thức trả về ngày ở định dạng múi giờ UTC:
today.toUTCString(); // "Sat, 13 Jun 2020 18:30:00 GMT"Các toLocaleDateString() phương thức trả về ngày ở định dạng nhạy cảm với địa phương:
today.toLocaleDateString(); // "6/14/2020"Bạn có thể tìm thấy tài liệu tham khảo đầy đủ cho Date các phương pháp trong tài liệu MDN.
Chức năng định dạng ngày tùy chỉnh
Ngoài các định dạng được đề cập trong phần trên, ứng dụng của bạn có thể có một định dạng dữ liệu khác. Nó có thể ở trong yy/dd/mm hoặc yyyy-dd-mm định dạng, hoặc một cái gì đó tương tự.
Để giải quyết vấn đề này, tốt hơn là tạo một chức năng có thể tái sử dụng để nó có thể được sử dụng trên nhiều dự án.
Vì vậy, trong phần này, hãy tạo một hàm tiện ích sẽ trả về ngày ở định dạng được chỉ định trong đối số của hàm:
const today = new Date();
function formatDate(date, format) {
//
}
formatDate(today, 'mm/dd/yy');Bạn cần thay thế các chuỗi “mm”, “dd”, “yy” bằng các giá trị tháng, ngày và năm tương ứng từ chuỗi định dạng được truyền trong đối số.
Để làm điều đó bạn có thể sử dụng replace() phương pháp như hình dưới đây:
format.replace('mm', date.getMonth() + 1);Nhưng điều này sẽ dẫn đến rất nhiều chuỗi phương thức và gây khó khăn cho việc duy trì khi bạn cố gắng làm cho hàm linh hoạt hơn:
format.replace('mm', date.getMonth() + 1)
.replace('yy', date.getFullYear())
.replace('dd', date.getDate());Thay vì xâu chuỗi các phương thức, bạn có thể sử dụng biểu thức chính quy với replace() phương pháp.
Trước tiên, hãy tạo một đối tượng sẽ đại diện cho một cặp khóa-giá trị của chuỗi con và giá trị tương ứng của nó:
const formatMap = {
mm: date.getMonth() + 1,
dd: date.getDate(),
yy: date.getFullYear().toString().slice(-2),
yyyy: date.getFullYear()
};Tiếp theo, sử dụng biểu thức chính quy để khớp và thay thế các chuỗi:
formattedDate = format.replace(/mm|dd|yy|yyy/gi, matched => map[matched]);Chức năng hoàn chỉnh trông như thế này:
function formatDate(date, format) {
const map = {
mm: date.getMonth() + 1,
dd: date.getDate(),
yy: date.getFullYear().toString().slice(-2),
yyyy: date.getFullYear()
}
return format.replace(/mm|dd|yy|yyy/gi, matched => map[matched])
}Bạn cũng có thể thêm khả năng định dạng dấu thời gian trong hàm.
Phần kết luận
Tôi hy vọng bây giờ bạn đã hiểu rõ hơn về Date đối tượng trong JavaScript. Bạn cũng có thể sử dụng các thư viện bên thứ ba khác như datesj và moment để xử lý ngày trong ứng dụng của bạn.
Cho đến lần sau, hãy giữ an toàn và tiếp tục hối hả.
