原生粉碎日期和时间格式：释放 Intl.DateTimeFormat 的隐藏力量-js教程-PHP中文网

Crush Date and Time Formatting Natively: Unleash the Hidden Power of Intl.DateTimeFormat

Native Intl API 简介

JavaScript 中的 Intl API 是一种强大的本机解决方案，用于处理各种语言的数据（例如日期、数字和文本）的本地化和格式设置。与许多第三方库不同，这些 API 提供：

高性能：集成到 JavaScript 引擎中。
更小的包大小：消除了对外部依赖项的需要。
全球支持：包括多种语言和地区的本地化。

与外部库不同，本机 API 不需要开发人员更新或维护。此外，它们还针对底层 JavaScript 引擎进行了优化，提供了更轻、更快的本地化和格式化方法。

在本文中，我们将重点关注 Intl.DateTimeFormat，这是一个专门用于根据所需本地化设置日期和时间格式的 API。我们将了解此 API 如何取代 Moment.js、date-fns 或 Day.js 等流行库来满足格式化需求，从而提供现代且原生的替代方案。

Intl.DateTimeFormat 的描述

Intl.DateTimeFormat 是一个允许本地化日期和时间格式的类。它提供了高级功能，例如支持不同的本地化、可自定义的格式以及处理替代日历和时区。

创建格式化程序

格式化程序是 Intl.DateTimeFormat 的一个实例，它存储日期格式化的特定配置。通过使用格式化程序，您可以重复将相同的格式应用于不同的日期，使您的代码更加高效和可读。

要创建格式化程序，请使用带有所需参数的 Intl.DateTimeFormat 构造函数：

const formatter = new Intl.DateTimeFormat(locale, options);

登录后复制

locale：定义本地化的字符串（例如，“en-US”表示美式英语，“it-IT”表示意大利语）。
options：用于指定日期组成部分的可选对象（例如，工作日、月份、年份等）。

虽然将格式化程序实例保存在变量中以供重用是很常见的，但这一步并不是严格要求的。可以直接调用 Intl.DateTimeFormat 构造函数来内嵌日期格式，如下所示：

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

登录后复制

但是，当需要将相同的格式应用于多个日期时，创建格式化程序实例就变得特别有用，可以提高代码一致性并避免冗余：

const formatter = new Intl.DateTimeFormat(locale, options);

登录后复制

基本示例：Intl.DateTimeFormat 入门

通过这些基础示例探索 Intl.DateTimeFormat 的简单性和强大功能。我们将演示如何创建可在您的应用程序中重复使用的默认格式和自定义格式的格式化程序。

1. 默认格式

如果未提供选项，格式化程序将使用所选语言环境的默认格式。

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

登录后复制

2. 自定义格式

通过指定所需的选项来自定义输出。

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

console.log(formatter.format(new Date(2024, 11, 19))); // Output: "December 19, 2024"
console.log(formatter.format(new Date(2023, 5, 15))); // Output: "June 15, 2023"

登录后复制

高级示例：释放 Intl.DateTimeFormat 的全部潜力

通过高级方案将日期和时间格式提升到一个新的水平，例如处理多个本地化、备用日历和时区。这些示例展示了 Intl.DateTimeFormat 在复杂应用中的多功能性和适应性。

1. 处理不同的本地化

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date)); // Output: "12/19/2024"

登录后复制

2. 使用替代日历进行格式化

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(formatter.format(date)); // Output: "Thursday, December 19, 2024"

登录后复制

3. 处理时区

const date = new Date(2024, 11, 19);
const italianFormatter = new Intl.DateTimeFormat('it-IT', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(italianFormatter.format(date)); // Output: "giovedì 19 dicembre 2024"

登录后复制

TypeScript 和 Intl.DateTimeFormat

将 Intl.DateTimeFormat 与 TypeScript 结合使用可确保类型安全和更好的开发体验。 Intl.DateTimeFormat 的 TypeScript 定义是内置的，为其方法和属性提供自动完成和文档。

这是一个例子：

const islamicFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic');
console.log(islamicFormatter.format(new Date(2024, 11, 19))); // Output: Date in the Islamic calendar

登录后复制

严格类型化有助于通过在编译时捕获潜在问题（例如不正确的选项或方法调用）来避免运行时错误。

与流行图书馆的比较

为什么考虑 Intl.DateTimeFormat？

轻量级：它是原生的，不需要外部库，减少了包大小。
性能：通常比基于库的解决方案更快。
内置本地化：原生支持多种语言和日历。

示例：简单格式设置

使用 Moment.js

const date = new Date(Date.UTC(2024, 11, 19, 15, 30)); // Ensure the date is set in UTC

// Formatter for UTC
const utcFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'UTC',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(utcFormatter.format(date)); 
// Output: "Dec 19, 2024, 03:30 PM UTC"

// Formatter for Tokyo time zone
const tokyoFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'Asia/Tokyo',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(tokyoFormatter.format(date)); 
// Output: "2024/12/20 00:30 JST"

// Formatter for Berlin time zone
const berlinFormatter = new Intl.DateTimeFormat('de-DE', {
  timeZone: 'Europe/Berlin',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(berlinFormatter.format(date)); 
// Output: "19. Dez. 2024, 16:30 MEZ"

登录后复制

带有 date-fns

const formatter: Intl.DateTimeFormat = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

const formattedDate: string = formatter.format(new Date(2024, 11, 19));
console.log(formattedDate); // Output: "December 19, 2024"

登录后复制

使用 Day.js

const moment = require('moment');
console.log(moment("2024-12-19").format('dddd, MMMM Do YYYY'));

登录后复制

使用 Intl.DateTimeFormat

const { format } = require('date-fns');
console.log(format(new Date(2024, 11, 19), 'EEEE, MMMM do yyyy'));

登录后复制

虽然外部库可能提供语法糖，但本机 API 提供了等效的功能，而不会牺牲灵活性或效率。本机 API 稍长的语法是对其在可维护性、性能和简单性方面的优势的一个小小的权衡。

结论

Intl.DateTimeFormat 为日期和时间格式化提供了强大的本机解决方案，使其成为 Moment.js、date-fns 和 Day.js 等流行库的绝佳替代品。凭借其高性能、内置本地化和简化的维护，它是现代 JavaScript 应用程序的宝贵工具。

要深入了解 Intl.DateTimeFormat 并探索其他功能，请访问官方 MDN Web 文档。在那里，您将找到全面的文档和实际示例，帮助您掌握这个强大的 API。

以上是原生粉碎日期和时间格式：释放 Intl.DateTimeFormat 的隐藏力量的详细内容。更多信息请关注PHP中文网其他相关文章！