Javascript 日期输出格式化

在前端开发中，处理日期时间是一项非常基础和重要的任务。Javascript 提供了 Date 对象来处理日期和时间数据。但是，Date 对象默认的输出格式并不总是符合我们的需求。因此，本文将介绍如何使用 Javascript 格式化输出日期。

Date 对象

Javascript 中的 Date 对象是一个表示日期和时间的对象，可以用于执行各种日期操作。

// 创建一个 Date 对象
const date = new Date();

Date 对象有很多方法来获取日期和时间信息：

• getFullYear()：获取年份（四位数）
• getMonth()：获取月份（0 - 11）
• getDate()：获取月份中的某一天（1 - 31）
• getDay()：获取星期几（0 - 6）
• getHours()：获取小时数（0 - 23）
• getMinutes()：获取分钟数（0 - 59）
• getSeconds()：获取秒数（0 - 59）

输出格式化日期

Date 对象默认的 toString() 方法返回一个字符串，其中包含完整的日期和时间信息，例如：

const date = new Date();
console.log(date.toString()); // Wed Apr 07 2023 14:51:18 GMT+0800 (中国标准时间)

然而，在实际应用中，我们通常需要自定义日期的输出格式。Javascript 提供了一些方法来格式化日期，例如：

toLocaleDateString()

toLocaleDateString() 方法返回一个格式化后的日期字符串，其中包含日期的年、月、日，但不包括时间信息。

const date = new Date();
console.log(date.toLocaleDateString()); // "2023/4/7"

toLocaleDateString() 方法支持传递参数来指定输出格式。例如，可以使用 options 参数来指定语言、时区和日期格式：

const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
console.log(date.toLocaleDateString('en-US', options)); // "April 7, 2023"

toLocaleTimeString()

toLocaleTimeString() 方法返回一个格式化后的时间字符串，其中包含时间的小时、分钟和秒，但不包括日期信息。

const date = new Date();
console.log(date.toLocaleTimeString()); // "2:51:18 PM"

toLocaleTimeString() 方法也支持传递参数来指定输出格式。例如，可以使用 options 参数来指定语言、时区和时间格式：

const date = new Date();
const options = { hour12: false, hour: '2-digit', minute: '2-digit' };
console.log(date.toLocaleTimeString('en-US', options)); // "14:51"

toLocaleString()

toLocaleString() 方法返回一个格式化后的日期和时间字符串，包含日期和时间的完整信息。

const date = new Date();
console.log(date.toLocaleString()); // "2023/4/7 上午10:51:18"

toLocaleString() 方法也支持传递参数来指定输出格式。例如，可以使用 options 参数来指定语言、时区和日期时间格式：

const date = new Date();
const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
console.log(date.toLocaleString('en-US', options)); // "Apr 7, 2023, 10:51 AM"

自定义日期格式

除了使用 Date 对象提供的方法来格式化日期外，我们还可以使用第三方库或自己编写函数来实现自定义日期格式。

以下是一个简单的函数，将 Date 对象转换为自定义格式的字符串：

-- -------------------- ---- -------
-------- ---------------- ------- -
  ----- --- - -
    ---- --------------- - --
    ---- ---------------
    ---- ----------------
    ---- ------------------
    ---- ------------------
    ---- --------------------------- - -- - ---
    ---- ----------------------
  --
  ------ - --------------------------

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
展开代码