JavaScript实现日期格式化的方法汇总

日期是许多 JavaScript 应用程序的基本组成部分，无论是在网页上显示当前日期还是处理用户输入以安排事件。

但以清晰一致的格式显示日期对于积极的用户体验至关重要。

在本文中，我们将探讨在 JavaScript 中格式化日期的各种技术，使您能够以您的应用程序所需的格式显示日期。

如何使用 JavaScript 日期对象

在我们深入研究日期格式之前，让我们熟悉一下 JavaScriptDate对象。它提供了有效处理日期和时间的方法。

要创建一个新的日期实例，您可以使用new Date()构造函数。

例如：

 const currentDate = new Date();
 console.log(currentDate); // Wed May 31 2023 08:26:18 GMT+0100 (West Africa Standard Time)

上面的代码将以默认格式输出当前日期和时间。但是，这种格式并不适合所有用例。

这就是为什么我们需要格式化日期，以便我们可以从这个日期对象中提取我们需要的内容。

在 JavaScript 中，没有直接的语法可以为您提供预期的格式，因为日期格式会因位置、环境等因素而异。

基本的 JavaScript 日期格式化方法

JavaScript 提供了一些内置方法来方便地格式化日期。让我们来看看其中的一些方法：

1.toDateString() ：此方法将对象的日期部分转换Date为人类可读的字符串格式。

例如：

 const date = new Date();
 console.log(date.toDateString());

输出：Wed May 30 2023

2.toISOString() ：此方法将Date对象转换为符合 ISO 8601 格式的字符串表示形式。

例如：

 const date = new Date();
 console.log(date.toISOString());

输出：2023-05-30T00:00:00.000Z

3.toLocaleDateString() Date ：此方法使用系统的本地约定返回表示对象日期部分的字符串。

例如：

 const date = new Date();
 console.log(date.toLocaleDateString());

输出：5/30/2023。此格式可能因系统的区域设置而异。

JavaScript 中的自定义日期格式

虽然基本格式设置方法在某些情况下很有用，但您可能经常需要对日期格式进行更多控制。

JavaScript 提供了几种实现自定义日期格式的方法：

1.字符串连接：一种方法是使用字符串操作手动连接日期的不同组成部分。

例如：

 const date = new Date();
 const formattedDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
 console.log(formattedDate);

输出：**30-5-2023**。

您可以随心所欲地操纵它，并想出更有创意的日期表示方式。

2.Intl.DateTimeFormat：JavaScript 的Intl对象通过对象提供了强大的格式化功能DateTimeFormat。它提供本地化支持和各种选项来格式化日期和时间。

这是一个例子：

 const date = new Date();
 const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' });
 const formattedDate = formatter.format(date);
 console.log(formattedDate);

输出：5/30/23

使用Intl.DateTimeFormat，您可以指定所需的区域设置和各种选项以根据需要精确地格式化日期。

处理日期时如何处理时区

使用日期时，必须考虑时区，尤其是在处理全球应用程序或时间敏感信息时。

JavaScript 提供了有效处理时区的方法：

• 时区偏移量：对象getTimezoneOffset()的方法Date返回本地时区和 UTC 之间的分钟差值。您可以使用此偏移来调整特定时区的日期。

• 显示时区：要在日期旁边显示时区信息，您可以使用toLocaleString()带有适当选项的方法。

例如：

 const date = new Date();
 const formattedDate = date.toLocaleString('en-US', { timeZoneName: 'short' });
 console.log(formattedDate);

输出：5/30/2023, 12:00:00 AM PDT。

常见的日期格式模式

某些日期格式化模式是常用的。这里有一些例子：

1.特定日期格式：要以特定格式显示日期，例如DD/MM/YYYY，您可以使用Intl.DateTimeFormat适当的选项。

例如：

 const date = new Date();
 const formatter = new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' });
 const formattedDate = formatter.format(date);
 console.log(formattedDate);

输出：30/05/2023。

2.时间格式：要格式化日期的时间部分，您可以使用hour、minute和second选项。

例如：

 const date = new Date();
 const formatter = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
 const formattedTime = formatter.format(date);
 console.log(formattedTime);

输出：12:00:00 AM

如何处理日期输入

除了格式化日期以供显示之外，有效处理用户输入的日期也很重要。以下是一些注意事项：

• 解析用户输入：使用Date.parse()Moment.js 或 Luxon 等方法或外部库将用户提供的日期解析为有效Date对象。

• 验证用户输入：实施验证机制以确保用户的输入符合预期的日期格式。正则表达式或外部库可以帮助解决这个问题。

来源：https://juejin.cn/post/7240088790424305721