原生粉碎日期與時間格式：釋放 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中文網其他相關文章！