JavaScript Katana

Hướng Dẫn Định Dạng Ngày trong JavaScript: Từ Cơ Bản Đến Thực Hành Tốt Nhất

Xử lý Dữ liệu (Chuỗi, Số, Ngày, Mảng, Đối tượng)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Giới thiệu

Khi làm việc với JavaScript, bạn sẽ thường xuyên gặp các tình huống cần xử lý ngày tháng. Ví dụ, hiển thị ngày hiện tại trên một trang web hoặc quản lý lịch trình sự kiện. Mặc dù việc định dạng ngày trong JavaScript có vẻ đơn giản lúc đầu, nhưng nhiều người mới bắt đầu lại cảm thấy bối rối khi áp dụng thực tế.

Trong bài viết này, chúng tôi sẽ giải thích rõ ràng về định dạng ngày trong JavaScript, từ những kiến thức cơ bản đến các kỹ thuật nâng cao hơn. Khi đọc hướng dẫn này, bạn sẽ nắm được những kiến thức sau:

  • Các thao tác cơ bản với đối tượng Date của JavaScript
  • Các phương pháp định dạng ngày bằng các API tích hợp như toLocaleDateString() và Intl.DateTimeFormat
  • Giới thiệu về các thư viện hữu ích giúp đơn giản hoá việc định dạng ngày

Bài viết này được thiết kế để giúp người mới bắt đầu nắm vững các nền tảng cơ bản, đồng thời cung cấp cho người dùng trung cấp những kỹ thuật thực tiễn và mẹo sử dụng thư viện. Nhờ đó, bạn sẽ có được những kỹ năng hữu ích trong phát triển thực tế.

Trong phần tiếp theo, chúng ta sẽ bắt đầu bằng việc xem lại các nguyên tắc cơ bản của đối tượng Date trong JavaScript. Hiểu rõ những kiến thức nền tảng này sẽ giúp bạn có cái nhìn sâu hơn về cách hoạt động của việc định dạng ngày.

2. Cơ bản | Xử lý ngày trong JavaScript

JavaScript cung cấp đối tượng Date để xử lý ngày và thời gian. Bằng cách sử dụng đối tượng này, bạn có thể lấy ngày và thời gian hiện tại, chỉ định một ngày cụ thể, và thực hiện các thao tác linh hoạt như cộng hoặc trừ thời gian.

2.1 Tạo đối tượng Date

1. Lấy ngày và thời gian hiện tại

const today = new Date();
console.log(today); // Example output: Sun Dec 29 2024 14:30:00 GMT+0900 (JST)

2. Chỉ định một ngày cụ thể

const specificDate = new Date(2024, 11, 29); // Year, month (0-based), day
console.log(specificDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

3. Tạo Date từ timestamp

const timestampDate = new Date(1703827200000); // Timestamp
console.log(timestampDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

2.2 Lấy các thành phần của ngày

1. Lấy năm, tháng và ngày

const today = new Date();
console.log(today.getFullYear()); // Get year: 2024
console.log(today.getMonth() + 1); // Get month (0-based): 12
console.log(today.getDate()); // Get day: 29

2.3 Chỉnh sửa và thao tác với ngày

1. Cộng ngày vào một Date

today.setDate(today.getDate() + 1);
console.log(today); // Displays the next day's date

2. Thay đổi thành một ngày cụ thể

today.setFullYear(2025); // Change year to 2025
today.setMonth(0); // Change month to January
today.setDate(1); // Change day to the 1st
console.log(today); // Example output: Wed Jan 1 2025 14:30:00 GMT+0900 (JST)

2.4 Múi giờ và UTC

1. Lấy giá trị ngày theo UTC

console.log(today.getUTCFullYear()); // Get UTC year
console.log(today.getUTCMonth() + 1); // Get UTC month
console.log(today.getUTCDate()); // Get UTC day

2. Lấy chuỗi ngày theo chuẩn ISO 8601

console.log(today.toISOString()); // Get ISO 8601 formatted string

Tóm tắt

Trong phần này, chúng tôi đã giải thích các nguyên tắc cơ bản của việc thao tác ngày bằng đối tượng Date của JavaScript.

3. Các phương pháp định dạng ngày [Basic]

Khi làm việc với ngày trong JavaScript, việc tùy chỉnh định dạng hiển thị là vô cùng quan trọng. Trong phần này, chúng tôi sẽ giải thích các phương pháp định dạng ngày cơ bản.

3.1 Nối chuỗi đơn giản

1. Hiển thị ngày theo định dạng YYYY-MM-DD

const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example output: 2024-12-29

3.2 Định dạng bằng toLocaleDateString()

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // Example output: 2024/12/29

3.3 Định dạng ISO 8601 và toISOString()

console.log(date.toISOString());
// Example output: 2024-12-29T05:30:00.000Z

Tóm tắt

Trong phần này, chúng tôi đã trình bày các kiến thức cơ bản về định dạng ngày trong JavaScript.

4. Định dạng ngày nâng cao [Practical]

Trong phần này, chúng tôi sẽ giới thiệu các kỹ thuật định dạng ngày nâng cao và thực tiễn hơn.

4.1 Định dạng tùy chỉnh với Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(formatter.format(date)); // Example output: 2024/12/29

4.2 Xử lý múi giờ

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short'
});
console.log(formatter.format(utcDate));
// Example output: 12/29/2024, EST

Tóm tắt

Trong phần này, chúng tôi đã giới thiệu các kỹ thuật định dạng ngày nâng cao phù hợp cho các ứng dụng thực tế.

5. Thư viện bên ngoài hữu ích cho việc định dạng ngày

JavaScript cung cấp nhiều tính năng tích hợp sẵn để thao tác ngày tháng, nhưng việc sử dụng các thư viện bên ngoài có thể cải thiện đáng kể hiệu suất và khả năng đọc mã.

5.1 Sử dụng Moment.js (Đã lỗi thời)

const moment = require('moment');
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

5.2 Tại sao date-fns được khuyến nghị và ví dụ sử dụng

import { format } from 'date-fns';
const today = new Date();
const formattedDate = format(today, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

Tóm tắt

Trong phần này, chúng tôi đã giới thiệu lợi ích của các thư viện bên ngoài và cách sử dụng chúng một cách hiệu quả.

6. Các lỗi thường gặp và giải pháp [FAQ]

Khi làm việc với ngày tháng trong JavaScript, cả người mới bắt đầu và các nhà phát triển trung cấp thường gặp phải các lỗi và vấn đề tương tự. Trong phần này, chúng tôi giải thích các vấn đề phổ biến, nguyên nhân và giải pháp thực tế dưới dạng FAQ.

Q1. Tại sao tháng lại dịch một đơn vị?

Ví dụ vấn đề

const date = new Date(2024, 12, 29);
console.log(date); // Output: 2025-01-29

Nguyên nhân

Trong JavaScript, chỉ số tháng bắt đầu từ 0, không phải 1.

Giải pháp

Khi chỉ định tháng, hãy trừ 1 khỏi giá trị tháng mong muốn.

const date = new Date(2024, 11, 29); // Correct way to specify December
console.log(date); // Output: 2024-12-29

Q2. Tại sao các số không được điền số 0 phía trước?

Ví dụ vấn đề

const today = new Date();
const month = today.getMonth() + 1; // 12
const day = today.getDate();       // 9
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-9

Giải pháp

Sử dụng slice() hoặc padStart() để áp dụng việc điền số 0.

const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-09

Tóm tắt

Trong phần này, chúng tôi đã giải thích các lỗi thường gặp và những lưu ý quan trọng liên quan đến việc xử lý ngày tháng trong JavaScript dưới dạng FAQ.

7. Lưu ý quan trọng và các thực hành tốt nhất

Việc xử lý ngày tháng trong JavaScript rất mạnh mẽ, nhưng hiểu lầm về các quy định hoặc sử dụng không đúng có thể dễ dàng dẫn đến lỗi và bug. Trong phần này, chúng tôi giới thiệu các lưu ý quan trọng và các thực hành tốt nhất để thao tác ngày tháng một cách an toàn và hiệu quả.

7.1 Chỉ số tháng và việc điền số 0

const date = new Date(2024, 11, 29); // December 29
console.log(date.getMonth() + 1); // Output: 12

7.2 Quản lý múi giờ

Sử dụng UTC

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
console.log(utcDate.toISOString());
// Output: 2024-12-29T12:00:00.000Z

7.3 Cải thiện khả năng đọc và bảo trì

Tạo một hàm định dạng ngày

function formatDate(date) {
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
console.log(formatDate(new Date()));
// Output: 2024-12-29

Tóm tắt

Trong phần này, chúng tôi đã giải thích các lưu ý quan trọng và các thực tiễn tốt nhất khi xử lý ngày trong JavaScript.

8. Kết luận

Xử lý ngày trong JavaScript là một tính năng thường được yêu cầu trong phát triển web. Trong bài viết này, chúng tôi đã giải thích mọi thứ từng bước, từ các khái niệm cơ bản đến các kỹ thuật nâng cao, giúp độc giả nắm được kiến thức có thể áp dụng trong các dự án thực tế.

Tổng quan các kiến thức chính

  1. Các thao tác ngày cơ bản
  • Giải thích các thao tác cơ bản và các lưu ý quan trọng khi sử dụng đối tượng Date.
  1. Cơ bản và kỹ thuật định dạng nâng cao
  • Giới thiệu định dạng tùy chỉnh, hỗ trợ quốc tế hoá và xử lý múi giờ.
  1. Sử dụng thư viện bên ngoài
  • So sánh tính năng và cách sử dụng các thư viện như date-fns và Day.js.
  1. Các lỗi thường gặp và giải pháp
  • Tổ chức các trường hợp lỗi điển hình và giải pháp của chúng dưới dạng FAQ.

Các bước tiếp theo

  1. Thử mã mẫu trong môi trường của bạn.
  2. Giới thiệu các thư viện và thực hiện so sánh.
  3. Thử thách bản thân với các ứng dụng thực tế trong hệ thống thực.

Suy nghĩ cuối cùng

Xử lý ngày trong JavaScript có thể trở nên phức tạp khi xét đến các thông số chi tiết và quốc tế hoá. Hãy sử dụng bài viết này như một tài liệu tham khảo để tiếp tục nâng cao kỹ năng thực hành của bạn.

広告