HomeLập trìnhJavaScriptCách định dạng...

Cách định dạng ngày trong JavaScript bằng một dòng mã


Trong một thời gian dài, tôi đã sử dụng các thư viện như Date-fns bất cứ khi nào tôi cần định dạng ngày tháng trong JavaScript. Nhưng nó thực sự trở nên kỳ lạ bất cứ khi nào tôi làm điều này trong các dự án nhỏ yêu cầu các định dạng ngày tháng đơn giản mà JavaScript cung cấp theo mặc định.

Tôi phát hiện ra rằng hầu hết các nhà phát triển làm điều này rất nhiều. Và tôi đã nghĩ rằng đây là cách tốt nhất cho đến khi gần đây tôi phát hiện ra rằng không phải lúc nào chúng ta cũng cần sử dụng thư viện để định dạng ngày trong JavaScript.

Trong trường hợp bạn tò mò muốn dùng thử, đây là mã:👇

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

Sau khi thử điều này trong mã của riêng bạn và thấy rằng nó hoạt động, hãy hiểu tại sao nó hoạt động và tìm hiểu một số cách khác để định dạng ngày tháng trong JavaScript chỉ bằng một dòng mã.

Lấy ngày trong JavaScript thường không phải là vấn đề, nhưng việc định dạng những ngày này cho phù hợp với dự án của bạn có thể gây khó khăn cho người mới bắt đầu. Vì điều này, hầu hết mọi người cuối cùng đều sử dụng thư viện.

Phương pháp được sử dụng nhiều nhất để lấy ngày trong JavaScript là new Date() vật.

Theo mặc định, khi bạn chạy new Date() trong thiết bị đầu cuối của bạn, nó sử dụng múi giờ của trình duyệt của bạn và hiển thị ngày dưới dạng chuỗi văn bản đầy đủ, như Thứ Sáu, ngày 02 tháng 7 năm 2021 12:44:45 GMT+0100 (Giờ mùa hè của Anh).

Đọc thêm  JavaScript document.ready() – Ví dụ về jQuery và JS sẵn sàng cho tài liệu

Nhưng có một cái gì đó như thế này trong trang web hoặc ứng dụng của bạn là không chuyên nghiệp và không dễ đọc. Vì vậy, điều này buộc bạn phải tìm những cách tốt hơn để định dạng những ngày này.

Chúng ta hãy xem xét một số phương thức hoạt động trên đối tượng ngày tháng.

Có rất nhiều phương thức mà bạn có thể áp dụng cho đối tượng ngày tháng. Bạn có thể sử dụng các phương thức này để lấy thông tin từ một đối tượng ngày tháng. Dưới đây là một số trong số họ:

  • getFullYear() – lấy năm dưới dạng số có bốn chữ số (yyyy)
  • getMonth() – lấy tháng dưới dạng số (0-11)
  • getDate() – lấy ngày ở dạng số (1-31)
  • getHours() – được giờ (0-23)

Và nhiều hơn nữa…

Thật không may, hầu hết các phương pháp này vẫn cần rất nhiều mã để chuyển đổi ngày sang định dạng mà chúng ta mong muốn.

Ví dụ, new Date().getMonth() sẽ xuất ra 6 là viết tắt của Tháng bảy. Để tôi sử dụng tháng 7 trong dự án của mình, tôi sẽ cần mã dài như thế này, điều này thực sự có thể gây cồng kềnh:

const currentMonth = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log(months[currentMonth.getMonth()]);

Chúng ta hãy xem xét hai phương pháp mà bạn có thể sử dụng để định dạng ngày của mình theo cách tốt nhất để bạn có thể sử dụng chúng cho các dự án của mình.

Đọc thêm  Có thể sử dụng toString để chuyển đổi entero và cadena de texto

Phương thức toDateString() trong JavaScript

JavaScript toDateString() trả về phần ngày của đối tượng ngày ở dạng chuỗi sử dụng định dạng sau:

  1. Ba chữ cái đầu tiên của tên ngày trong tuần
  2. Ba chữ cái đầu tiên của tên tháng
  3. Ngày có hai chữ số của tháng, được đệm bên trái bằng số 0 nếu cần
  4. Năm có bốn chữ số (ít nhất), được đệm ở bên trái bằng số 0 nếu cần
new Date().toDateString();
//"Fri Jul 02 2021"

Một nhược điểm lớn của phương pháp này là chúng ta không có khả năng điều khiển đầu ra ngày tháng theo cách chúng ta muốn.

Ví dụ: nó không cung cấp cho chúng tôi khả năng hiển thị ngày theo ngôn ngữ của chúng tôi. Chúng ta hãy xem xét một phương pháp khác mà theo tôi vẫn là một trong những phương pháp tốt nhất.

Phương thức toLocaleDateString() trong JavaScript

Phương thức này trả về đối tượng ngày tháng dưới dạng một chuỗi sử dụng các quy ước cục bộ. Nó cũng nhận các tùy chọn làm đối số cho phép bạn/ứng dụng của bạn tùy chỉnh hành vi của hàm.

Cú pháp:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

Chúng ta hãy xem một số ví dụ và đầu ra của chúng:

const currentDate = new Date();

const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(currentDate.toLocaleDateString('de-DE', options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021

Bạn cũng có thể quyết định không sử dụng ngôn ngữ hoặc tùy chọn:

new Date().toLocaleDateString()
// "7/2/2021"

Và bạn cũng có thể quyết định chỉ sử dụng ngôn ngữ. Điều này sẽ xuất ra thông tin giống như thông tin trước đó dựa trên múi giờ của trình duyệt của tôi.

new Date().toLocaleDateString('en-US')
"7/2/2021"

Bạn cũng có thể quyết định xoay các tùy chọn theo ý muốn. Có 4 tùy chọn cơ bản đó là:

  • weekday – Điều này xuất ra ngày trong tuần tùy thuộc vào cách bạn muốn nó xuất hiện (ngắn hay dài).
  • year – Điều này xuất ra năm dưới dạng số
  • month – Điều này xuất ra tháng trong năm tùy thuộc vào cách bạn muốn nó xuất hiện (ngắn hay dài).
  • day – Cuối cùng, điều này xuất ra ngày dưới dạng một số
new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

Đối tượng ngày tháng có khoảng bảy phương thức định dạng. Mỗi phương pháp này cung cấp cho bạn một giá trị cụ thể:

  1. toString() mang đến cho bạn Thứ Sáu, ngày 02 tháng 7 năm 2021 14:03:54 GMT+0100 (Giờ mùa hè của Anh)
  2. toDateString() mang đến cho bạn T6 ngày 02 tháng 7 năm 2021
  3. toLocaleString() mang đến cho bạn 2/7/2021, 2:05:07 CH
  4. toLocaleDateString() mang đến cho bạn 2/7/2021
  5. toGMTString() mang đến cho bạn T6, 02/07/2021 13:06:02 GMT
  6. toUTCString() mang đến cho bạn T6, 02/07/2021 13:06:28 GMT
  7. toISOString() mang đến cho bạn 2021-07-02T13:06:53.422Z
Đọc thêm  Vẫn khó tìm Javascript. Cảm thấy muốn bỏ cuộc - Bạn Có Thể Làm Điều Này!

Nếu bạn đang tìm kiếm các định dạng ngày nâng cao hơn, thì bạn sẽ cần tự tạo một định dạng tùy chỉnh. Hãy xem các tài nguyên bên dưới để giúp bạn hiểu cách tạo định dạng ngày tùy chỉnh.

Tài nguyên hữu ích



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status