Native Intl API 簡(jiǎn)介

JavaScript 中的 Intl API 是一種強(qiáng)大的本機(jī)解決方案，用於處理各種語言的資料（例如日期、數(shù)字和文字）的局部化和格式設(shè)定。與許多第三方函式庫不同，這些 API 提供：

• 高效能：整合到 JavaScript 引擎。

• 更小的套件大小：消除了對(duì)外部依賴項(xiàng)的需要。

• 全球支援：包含多種語言和地區(qū)的在地化。

與外部程式庫不同，本機(jī) API 不需要開發(fā)人員更新或維護(hù)。此外，它們還針對(duì)底層 JavaScript 引擎進(jìn)行了最佳化，提供了更輕、更快的在地化和格式化方法。

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

---

Intl.DateTimeFormat 的描述

Intl.DateTimeFormat 是一個(gè)允許本地化日期和時(shí)間格式的類別。它提供了高級(jí)功能，例如支援不同的本地化、可自訂的格式以及處理替代日曆和時(shí)區(qū)。

---

建立格式化程式

格式化程式是 Intl.DateTimeFormat 的一個(gè)實(shí)例，它儲(chǔ)存日期格式化的特定配置。透過使用格式化程序，您可以重複將相同的格式套用於不同的日期，使您的程式碼更有效率和可讀。

要建立格式化程序，請(qǐng)使用帶有所需參數(shù)的 Intl.DateTimeFormat 建構(gòu)子：

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

• locale：定義在地化的字串（例如，「en-US」表示美式英語，「it-IT」表示義大利語）。

• options：用於指定日期組成部分的選用物件（例如，工作日、月份、年份等）。

雖然將格式化程式實(shí)例保存在變數(shù)中以供重用是很常見的，但這一步並不是嚴(yán)格要求的?？梢灾苯雍艚?Intl.DateTimeFormat 建構(gòu)子來內(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)需要將相同的格式套用到多個(gè)日期時(shí)，建立格式化程式實(shí)例就變得特別有用，可以提高程式碼一致性並避免冗餘：

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

---

基本範(fàn)例：Intl.DateTimeFormat 入門

透過這些基礎(chǔ)範(fàn)例來探索 Intl.DateTimeFormat 的簡(jiǎn)單性和強(qiáng)大功能。我們將示範(fàn)如何建立可在您的應(yīng)用程式中重複使用的預(yù)設(shè)格式和自訂格式的格式化程式。

1. 預(yù)設(shè)格式

如果未提供選項(xiàng)，格式化程式將使用所選語言環(huán)境的預(yù)設(shè)格式。

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

2. 自訂格式

透過指定所需的選項(xiàng)來自訂輸出。

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"

---

進(jìn)階範(fàn)例：釋放 Intl.DateTimeFormat 的全部潛力

透過高級(jí)方案將日期和時(shí)間格式提升到一個(gè)新的水平，例如處理多個(gè)本地化、備用日曆和時(shí)區(qū)。這些範(fàn)例展示了 Intl.DateTimeFormat 在複雜應(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. 使用替代行事曆進(jìn)行格式化

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. 處理時(shí)區(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ā)體驗(yàn)。 Intl.DateTimeFormat 的 TypeScript 定義是內(nèi)建的，為其方法和屬性提供自動(dòng)完成和文件。

這是一個(gè)例子：

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)格類型化有助於透過在編譯時(shí)捕獲潛在問題（例如不正確的選項(xiàng)或方法呼叫）來避免執(zhí)行階段錯(cuò)誤。

---

與流行圖書館的比較

為什麼要考慮 Intl.DateTimeFormat？

• 輕量級(jí)：它是原生的，不需要外部函式庫，減少了套件大小。

• 效能：通常比基於函式庫的解決方案更快。

• 內(nèi)建本地化：原生支援多種語言和日曆。

範(fàn)例：簡(jiǎn)單格式設(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'));

雖然外部函式庫可能提供語法糖，但本機(jī) API 提供了等效的功能，而不會(huì)犧牲靈活性或效率。本機(jī) API 稍長(zhǎng)的語法是對(duì)其在可維護(hù)性、效能和簡(jiǎn)單性方面的優(yōu)勢(shì)的一個(gè)小小的權(quán)衡。

---

結(jié)論

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

要深入了解 Intl.DateTimeFormat 並探索其他功能，請(qǐng)?jiān)煸L官方 MDN Web 文件。在那裡，您將找到全面的文件和實(shí)際範(fàn)例，以幫助您掌握這個(gè)強(qiáng)大的 API。

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