JavaScript 多方位详解日期格式化

一、前言

日期是在很多应用中常用的数据类型之一，对于日期的格式化是一个非常常见且重要的操作。在 JavaScript 中，我们可以通过内置的 Date 对象来处理日期和时间，并进行相应的格式化。

本文将详细介绍 JavaScript 中日期的格式化方法，包括使用内置方法、第三方库和自定义方法进行日期格式化的不同方式，帮助你全面了解如何在 JavaScript 中进行日期格式化。

二、使用内置方法进行日期格式化

JavaScript Date 对象提供了一些内置方法来获取日期的各个部分，比如年份、月份、日期、小时、分钟、秒等。我们可以利用这些方法来进行简单的日期格式化。

1. 获取年份、月份和日期

通过 Date 对象的 getFullYear()、getMonth() 和 getDate() 方法，我们可以分别获取年份、月份和日期。

示例代码：

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1; // 注意月份是从 0 开始的，所以需要加 1
const day = date.getDate();
console.log(` ${year}-$ {month}-${day}`);

运行结果：

2022-1-1

2. 获取小时、分钟和秒

除了获取日期的部分，我们还可以通过 Date 对象的 getHours()、getMinutes() 和 getSeconds() 方法获取时间的小时、分钟和秒。

示例代码：

const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
console.log(` ${hours}:$ {minutes}:${seconds}`);

运行结果：

10:30:15

3. 补足长度

上述方法获取的月份、日期、小时、分钟和秒可能是个位数，如果需要固定长度的格式，我们可以使用自定义函数来补足长度。

示例代码：

function padZero(num) {
  return num < 10 ? `0 ${num}` : num; } const date = new Date(); const year = date.getFullYear(); const month = padZero(date.getMonth() + 1); const day = padZero(date.getDate()); const hours = padZero(date.getHours()); const minutes = padZero(date.getMinutes()); const seconds = padZero(date.getSeconds()); console.log(`$ {year}- ${month}-$ {day}  ${hours}:$ {minutes}:${seconds}`);

运行结果：

2022-01-01 10:30:15

4. 日期时间格式化函数

为了简化日期格式化的操作，我们可以封装一个通用的日期时间格式化函数。下面的示例代码中，我们使用内置的方法获取日期的各个部分，并利用模板字符串将它们拼接起来。

示例代码：

function formatDateTime(date) {
  const year = date.getFullYear();
  const month = padZero(date.getMonth() + 1);
  const day = padZero(date.getDate());
  const hours = padZero(date.getHours());
  const minutes = padZero(date.getMinutes());
  const seconds = padZero(date.getSeconds());

  return ` ${year}-$ {month}- ${day}$ {hours}: ${minutes}:$ {seconds}`;
}

const datetime = new Date();
console.log(formatDateTime(datetime));

运行结果：

2022-01-01 10:30:15

三、使用第三方库进行日期格式化

除了使用 JavaScript 内置的方法进行日期格式化外，我们还可以借助第三方库来简化日期格式化的操作。下面介绍两个常用的日期格式化库：Moment.js 和 Luxon。

1. Moment.js

Moment.js 是一个非常流行的日期和时间处理库，它提供了丰富的格式化和操作日期的方法。

在使用 Moment.js 之前，我们需要先用 npm 安装 Moment.js：

npm install moment

下面是使用 Moment.js 进行日期格式化的示例代码：

const moment = require('moment');

const datetime = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(datetime);

运行结果：

2022-01-01 10:30:15

2. Luxon

Luxon 是一个用于处理日期和时间的现代 JavaScript 库，它提供了类似 Moment.js 的 API，并且在性能和功能上更加先进。

在使用 Luxon 之前，我们需要先用 npm 安装 Luxon：

npm install luxon

下面是使用 Luxon 进行日期格式化的示例代码：

const { DateTime } = require('luxon');

const datetime = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
console.log(datetime);

运行结果：

2022-01-01 10:30:15

四、自定义日期格式化方法

如果你不想依赖第三方库，也可以自定义一个日期格式化的方法。下面是一个简单的自定义方法，通过传入一个日期对象和格式模板，返回格式化后的日期字符串。

示例代码：

function formatDate(date, template) {
  const year = date.getFullYear();
  const month = padZero(date.getMonth() + 1);
  const day = padZero(date.getDate());
  const hours = padZero(date.getHours());
  const minutes = padZero(date.getMinutes());
  const seconds = padZero(date.getSeconds());

  return template
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day)
    .replace('HH', hours)
    .replace('mm', minutes)
    .replace('ss', seconds);
}

const datetime = new Date();
console.log(formatDate(datetime, 'YYYY-MM-DD HH:mm:ss'));

运行结果：