JavaScript 日期格式化指南：如何正确格式化日期并附示例

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍：为什么在 JavaScript 中日期格式化很重要

在使用 JavaScript 的网页开发中，显示和管理日期时间是必不可少的。例如，日历应用和日志管理系统需要正确格式化的日期时间数据。然而，JavaScript 中的日期处理对初学者来说可能显得有些复杂。

在本指南中，我们将介绍实用技巧和代码示例，帮助你掌握 JavaScript 中的日期格式化。从 Date 对象的基础用法到 Intl.DateTimeFormat 的高级使用，甚至对外部库的比较，本文提供了全面的说明。

需要日期格式化的常见场景

1. 网页应用中的数据展示:

• 支持使用不同日历和时区的用户。

1. 日志管理和调试:

• 为错误日志和用户操作记录时间戳。

1. 多语言支持:

• 为国际用户调整日期显示格式。

对读者的收益

阅读本指南后，你将获得以下技能：

• 了解如何使用基础的 Date 对象。
• 通过手动格式化和内置方法实现灵活的日期显示。
• 借助外部日期库实现高效编码。

在接下来的章节中，我们将更深入地了解 JavaScript Date 对象的基本原理。掌握这些内容后，你可以顺利进入后续的高级主题。

2. JavaScript 中日期处理的基础：什么是 Date 对象？

在 JavaScript 中，Date 对象用于管理日期和时间。了解该对象是正确处理日期格式化的第一步。本节将解释 Date 对象的基本用法。

2.1 如何创建 Date 对象

可以通过以下方式创建 Date 对象。

1. 获取当前日期和时间

   const today = new Date();
   console.log(today); // Outputs the current date and time
   

2. 设置特定的日期和时间

   const customDate = new Date(2024, 11, 28); // Year, month (starts from 0), day
   console.log(customDate); // December 28, 2024
   

3. 从字符串创建日期

   const dateFromString = new Date('2024-12-28');
   console.log(dateFromString); // Date converted from ISO format
   

4. 从时间戳创建日期

   const timestampDate = new Date(1703740800000); // Milliseconds
   console.log(timestampDate); // Date represented by the timestamp
   

2.2 获取日期和时间组件的方法

Date 对象提供了用于获取各个日期和时间组件的方法。

2.3 处理时区和 UTC

获取本地时间:

const date = new Date();
console.log(date.toString()); // Local time

获取 UTC 时间:

console.log(date.toUTCString()); // UTC-based time

获取时区偏移量:

console.log(date.getTimezoneOffset()); // -540 (in minutes, for Japan Standard Time)

小结

在本节中，我们解释了 JavaScript 中 Date 对象 的基础，包括如何创建日期以及如何获取或操作日期组件。

在下一节中，我们将深入探讨 JavaScript 中日期格式化的具体方法。

3. 在 JavaScript 中格式化日期的三种方法

JavaScript 提供了多种方式将日期格式化为不同的表示形式。本节将详细说明三种方法：手动格式化、内置方法以及高级格式化选项。

3.1 手动格式化：从基础到实用

简单的自定义格式示例

const date = new Date();
const year = date.getFullYear(); // Year
const month = ('0' + (date.getMonth() + 1)).slice(-2); // Month (zero-padded)
const day = ('0' + date.getDate()).slice(-2); // Day (zero-padded)

const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example: 2024-12-28

3.2 Locale-Aware Formatting with toLocaleDateString()

Basic Usage

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

Customization with Options

const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleDateString('ja-JP', options)); // Example: 2024/12/28

3.3 Advanced Customization: Using Intl.DateTimeFormat

Basic Usage

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' });
console.log(formatter.format(date)); // Example: Saturday, December 28, 2024

Summary

In this section, we introduced three different ways to format dates in JavaScript. In the next section, we will explain how to improve efficiency by using external libraries for date handling.

4. Using External Libraries: Comparing Moment.js, date-fns, and Day.js

While JavaScript’s built-in date methods are powerful, using external libraries can make complex formatting and processing more concise and efficient.

4.1 Moment.js: A Proven Library for Legacy Systems

Basic Usage

const moment = require('moment'); // Import in a Node.js environment
const now = moment(); // Current date and time
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // Example: 2024-12-28 14:30:45

4.2 date-fns: A Modular Library for Modern Projects

Basic Usage

import { format, addDays } from 'date-fns';

const now = new Date();
console.log(format(now, 'yyyy-MM-dd')); // Example: 2024-12-28

const nextWeek = addDays(now, 7);
console.log(format(nextWeek, 'yyyy-MM-dd')); // Example: 2025-01-04

4.3 Day.js: A Lightweight, Moment-Compatible Modern Library

Basic Usage

const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // Example: 2024-12-28

const nextWeek = now.add(7, 'day');
console.log(nextWeek.format('YYYY-MM-DD')); // Example: 2025-01-04

4.4 Library Comparison Table

Summary

In this section, we compared popular external libraries that simplify date handling in JavaScript. In the next section, we will introduce practical application examples using these formatting techniques.

5. Practical Examples: Applications Using Date Formatting

5.1 Displaying Dates in a Calendar Application

Implementation Example

const selectedDate = new Date(); // Date selected by the user

const formattedDate = selectedDate.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});

console.log(`Selected date: ${formattedDate}`); 
// Example: Selected date: Saturday, December 28, 2024

5.2 Managing Timestamps in Log Files

Implementation Example

const logTime = new Date().toISOString(); // Get date and time in ISO format
console.log(`[LOG] ${logTime}: Process started`);
// Example: [LOG] 2024-12-28T05:30:00.000Z: Process started

5.3 Validating and Formatting Form Input Dates

Implementation Example

function formatInputDate(inputDate) {
  const date = new Date(inputDate); // Convert input string to a Date object

  if (isNaN(date)) {
    console.log('Invalid date format.');
    return null;
  }

  return date.toLocaleDateString('ja-JP', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
}

console.log(formatInputDate('2024-12-28')); // Example: 2024/12/28

Summary

In this section, we introduced practical examples of using date formatting in JavaScript, including calendar displays, log management, and form validation. In the next section, we address frequently asked questions (FAQ) and provide solutions to common issues.

6. Frequently Asked Questions (FAQ)

Q1：如何以 ISO 格式显示日期和时间？

答案

ISO 格式是用于日期和时间表示的国际标准，广泛应用于数据库和 API 通信中。在 JavaScript 中，你可以使用 Date 对象的 toISOString() 方法。

示例代码

const date = new Date();
console.log(date.toISOString()); // Example: 2024-12-28T05:30:00.000Z

Q2：我应该如何处理 UTC 时间与本地时间的差异？

答案

默认情况下，JavaScript 使用本地时间，但它也提供了将时间转换为 UTC 或从 UTC 转换回本地时间的方法。

示例代码

将本地时间转换为 UTC：

const date = new Date();
console.log(date.toUTCString()); // Example: Sat, 28 Dec 2024 05:30:00 GMT

将 UTC 转换为本地时间：

const date = new Date('2024-12-28T05:30:00Z'); 
console.log(date.toString()); 
// Example: Sat Dec 28 2024 14:30:00 GMT+0900 (Japan Standard Time)

Q3：在日期格式化中，最简便的零填充方式是什么？

答案

function zeroPad(number) {
  return number.toString().padStart(2, '0');
}

const date = new Date();
const formattedDate = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
console.log(formattedDate); // Example: 2024-12-28

小结

在本节中，我们介绍了 JavaScript 日期格式化的常见问题并提供了实用的解决方案。接下来，我们将在下一节对全文进行总结，并给出应用所学内容的行动计划。

7. 结论与实用后续步骤

7.1 本文要点

1. JavaScript Date 对象基础：我们讲解了如何创建 Date 对象以及使用方法获取和操作日期时间值。
2. 三种日期格式化方式：手动格式化、内置方法以及使用外部库。
3. 实用案例：日历、日志管理、表单验证等真实场景。
4. FAQ：常见挑战及其成熟解决方案。

7.2 实践实施行动计划

1. 尝试代码示例：在在线编辑器或本地开发环境中运行示例代码，加深理解。
2. 应用到实际项目：在项目中加入日期格式化功能，如日历组件或日志管理。
3. 比较库：测试 Moment.js、date-fns 和 Day.js，找出最适合项目需求的库。

7.3 最后思考

JavaScript 日期格式化涵盖了从简单操作到高级自定义以及强大的外部库。请将本指南作为参考，在你的应用中实现高效、灵活且易于维护的日期处理。