Native Intl API 簡介

JavaScript 中的 Intl API 是一種強大的本機解決方案，用于處理各種語言的數(shù)據(jù)（例如日期、數(shù)字和文本）的本地化和格式設(shè)置。與許多第三方庫不同，這些 API 提供：

• 高性能：集成到 JavaScript 引擎中。

• 更小的包大小：消除了對外部依賴項的需要。

• 全球支持：包括多種語言和地區(qū)的本地化。

與外部庫不同，本機 API 不需要開發(fā)人員更新或維護。此外，它們還針對底層 JavaScript 引擎進行了優(yōu)化，提供了更輕、更快的本地化和格式化方法。

在本文中，我們將重點關(guān)注 Intl.DateTimeFormat，這是一個專門用于根據(jù)所需本地化設(shè)置日期和時間格式的 API。我們將了解此 API 如何取代 Moment.js、date-fns 或 Day.js 等流行庫來滿足格式化需求，從而提供現(xiàn)代且原生的替代方案。

---

Intl.DateTimeFormat 的描述

Intl.DateTimeFormat 是一個允許本地化日期和時間格式的類。它提供了高級功能，例如支持不同的本地化、可自定義的格式以及處理替代日歷和時區(qū)。

---

創(chuàng)建格式化程序

格式化程序是 Intl.DateTimeFormat 的一個實例，它存儲日期格式化的特定配置。通過使用格式化程序，您可以重復(fù)將相同的格式應(yīng)用于不同的日期，使您的代碼更加高效和可讀。

要創(chuàng)建格式化程序，請使用帶有所需參數(shù)的 Intl.DateTimeFormat 構(gòu)造函數(shù)：

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

• locale：定義本地化的字符串（例如，“en-US”表示美式英語，“it-IT”表示意大利語）。

• options：用于指定日期組成部分的可選對象（例如，工作日、月份、年份等）。

雖然將格式化程序?qū)嵗４嬖谧兞恐幸怨┲赜檬呛艹Ｒ姷模@一步并不是嚴(yán)格要求的。可以直接調(diào)用 Intl.DateTimeFormat 構(gòu)造函數(shù)來內(nèi)嵌日期格式，如下所示：

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

但是，當(dāng)需要將相同的格式應(yīng)用于多個日期時，創(chuàng)建格式化程序?qū)嵗妥兊锰貏e有用，可以提高代碼一致性并避免冗余：

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

---

基本示例：Intl.DateTimeFormat 入門

通過這些基礎(chǔ)示例探索 Intl.DateTimeFormat 的簡單性和強大功能。我們將演示如何創(chuàng)建可在您的應(yīng)用程序中重復(fù)使用的默認格式和自定義格式的格式化程序。

1. 默認格式

如果未提供選項，格式化程序?qū)⑹褂盟x語言環(huán)境的默認格式。

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 的全部潛力

通過高級方案將日期和時間格式提升到一個新的水平，例如處理多個本地化、備用日歷和時區(qū)。這些示例展示了 Intl.DateTimeFormat 在復(fù)雜應(yīng)用中的多功能性和適應(yīng)性。

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. 處理時區(qū)

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 結(jié)合使用可確保類型安全和更好的開發(fā)體驗。 Intl.DateTimeFormat 的 TypeScript 定義是內(nèi)置的，為其方法和屬性提供自動完成和文檔。

這是一個例子：

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

嚴(yán)格類型化有助于通過在編譯時捕獲潛在問題（例如不正確的選項或方法調(diào)用）來避免運行時錯誤。

---

與流行圖書館的比較

為什么考慮 Intl.DateTimeFormat？

• 輕量級：它是原生的，不需要外部庫，減少了包大小。

• 性能：通常比基于庫的解決方案更快。

• 內(nèi)置本地化：原生支持多種語言和日歷。

示例：簡單格式設(shè)置

使用 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 稍長的語法是對其在可維護性、性能和簡單性方面的優(yōu)勢的一個小小的權(quán)衡。

---

結(jié)論

Intl.DateTimeFormat 為日期和時間格式化提供了強大的本機解決方案，使其成為 Moment.js、date-fns 和 Day.js 等流行庫的絕佳替代品。憑借其高性能、內(nèi)置本地化和簡化的維護，它是現(xiàn)代 JavaScript 應(yīng)用程序的寶貴工具。

要深入了解 Intl.DateTimeFormat 并探索其他功能，請訪問官方 MDN Web 文檔。在那里，您將找到全面的文檔和實際示例，幫助您掌握這個強大的 API。

以上是原生粉碎日期和時間格式：釋放 Intl.DateTimeFormat 的隱藏力量的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！