JavaScript中的日期和时间格式指南-DEV365 开发者社区

Web应用程序中的处理日期和时间是一项常见的任务，无论您是构建简单的事件调度程序还是完整的日历应用程序。 JavaScript提供了一种强大的工具，用于处理通过Intl.DateTimeFormat对象进行日期和时间格式。在这篇博客文章中，我们将深入研究Intl.DateTimeFormat的世界，并探讨它如何使您的日期和时间处理更高效和用户友好。

intl.datetimeformat简介

Intl.DateTimeFormat对象是国际化API的一部分，该对象是在Ecmascript 2015（ES6）中引入的，以使开发人员能够执行各种语言敏感的操作，包括根据不同地区的格式日期和时间。

使用Intl.DateTimeFormat，您可以：

格式日期和按用户偏好或特定地区的时间。
显示日期和时间以人为可读的格式。
自定义日期和时间组件的格式。

基本用法

让我们从使用Intl.DateTimeFormat的基础开始。要创建此对象的新实例，您只需将一个或多个语言环境字符串作为参数传递。语言字符串定义用于格式化的语言和区域。例如：

const dateFormatter = new Intl.DateTimeFormat('en-GB');

在此示例中，我们创建了一个dateformatter，该dateformatter格式化日期和时间根据英语（英国）语言环境。

要格式化日期，您可以调用dateformatter的格式方法，然后以参数传递日期对象：

const now = new Date();
const formattedDate = dateFormatter.format(now);
// United Kingdom
console.log(formattedDate); // 22/08/2023

格式化变量现在包含一个人类可读字符串，代表“ En-us”语言环境中的当前日期和时间。

现在，让我们将其与英语（美国）语言环境进行比较

// United States
console.log(new Intl.DateTimeFormat('en-US').format(now)); // 8/22/2023

如上所述，美国使用MM/DD/YYYY，而英国使用DD/MM/YYYY和Intl.DateTimeFormat反映了这些差异。

// Arabic
console.log(new Intl.DateTimeFormat('en-US').format(now)); // ٢٢/٨/٢٠٢٣

现在，您可以进一步自定义日期

定制日期和时间格式

intl.dateTimeFormat的最强大功能之一是能够自定义日期和时间格式的功能。您可以通过在创建intl.datetimeformat的实例时提供选项对象作为第二个参数来执行此操作。

new Intl.DateTimeFormat(locale, options)

`locale`

这是第一个论点，这些是支持的各种地方，可以找到示例here

const spanishDateFormatter = new Intl.DateTimeFormat('es-ES', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
const now = new Date();
const formattedDate = spanishDateFormatter.format(now);
console.log(formattedDate); // martes, 22 de agosto de 2023

`options`

这些是一些值得注意的选项

工作日：一周中的日子将如何写。可能的值是long（星期三），short（Wed）或narrow（W）
时区：确定用于显示时间的当前时区，例如美国/los_angeles。完整列表可以在IANA time zone database上找到
日历：这是用于渲染日期的日历类型。示例包括gregory，chinese，indian，islamic等。您可以找到完整的列表MDN。
小时12：确定是否使用12小时时间（下午2点）或24小时时间（14:00）。默认值为false
年：如何展示年度。这包括numeric（2022）或2-digit（22）
月份：如何显示月份。其中包括numeric（8），2-digit（08），long（8月），short（Aug）和narrow（a）
天：定义如何显示一天，并提供numeric和2-digit的选项。
小时：自定义小时显示器，并带有'numeric'和2-digit'的选项。
分钟和第二：同样，您可以控制几分钟和秒的显示。

大约有18个选项，您可以在MDN上找到完整列表。

const customDateFormatter = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
});
const now = new Date();
const formattedDate = customDateFormatter.format(now);
console.log(formattedDate); // Tuesday, August 22, 2023

设置时区

const nyDateFormatter = new Intl.DateTimeFormat("en-US", {
  timeZoneName: "short",
  timeZone: "America/Los_Angeles",
});
const formattedNYDate = nyDateFormatter.format(new Date());
console.log(formattedNYDate); // 8/22/2023, PDT

您可以将其倒入dateStyle和timeStyle，而不是提供单个选项。可能的值是full，long，medium和short

const formatter = new Intl.DateTimeFormat("en-GB", {
  dateStyle: "full",
  timeStyle: "full",
});
const now = new Date();
const formattedDate = formatter.format(now);
console.log(formattedDate); 
// Tuesday, 22 August 2023 at 22:30:29 British Summer Time


// long
// 22 August 2023 at 22:32:11 BST

// medium
// 22 Aug 2023, 22:32:58

// short
// 22/08/2023, 22:33

浏览器支持

intl.dateTimeFormat在现代网络浏览器中得到了广泛支持，包括Chrome，Firefox，Safari和Edge。但是，如果您需要支持较旧的浏览器，则可能需要考虑使用诸如intl-locales支持的polyfill以确保一致的行为。

结论

intl.dateTimeFormat是在JavaScript应用程序中格式化日期和时间的强大工具。它允许您在自定义格式以满足您的特定需求时创建用户友好和本地化日期显示。无论您是构建简单的日期选择器还是复杂的调度应用程序，Mastering Intl.DateTimeFormat都会帮助您提供更好的用户体验并使代码更加可维护。

感谢您的阅读，如果您有任何建议或反馈，请随时在下面的评论中分享它们！