淺談Intl物件（DateTimeFormat、ListFormat、RelativeTimeFormat）

前端榮耀發表於2023-04-13
物件ORM

在JavaScript中，Intl物件是一個內建物件，它提供了處理國際化（i18n）的API。Intl物件包含了一系列的子物件，其中最常用的三個子物件是：Intl.DateTimeFormat、Intl.ListFormat和Intl.RelativeTimeFormat。下面將分別介紹這三個子物件的作用、使用場景以及使用過程中的注意事項。

Intl.DateTimeFormat

Intl.DateTimeFormat用於格式化日期和時間。它可以根據不同地區的語言和文化習慣來格式化日期和時間，並且支援多種格式。下面是一個使用Intl.DateTimeFormat的示例程式碼：

const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formatter = new Intl.DateTimeFormat('zh-CN', options);
console.log(formatter.format(date)); // 輸出：2023年4月12日

在上面的程式碼中，我們首先建立了一個Date物件，然後定義了一個options物件，該物件指定了要格式化的日期的具體格式。接著，我們建立了一個Intl.DateTimeFormat物件，並將其傳遞給指定語言環境（'zh-CN'表示中文環境）。最後，我們呼叫formatter.format()方法來格式化日期，並輸出結果。

需要注意的是，在建立Intl.DateTimeFormat物件時，我們可以傳遞一個options物件來指定日期的格式。這個options物件可以包含以下屬性：

  • localeMatcher：指定語言環境匹配方式（"lookup"或"best fit"）。
  • weekday：指定星期幾的格式（"narrow"、"short"或"long"）。
  • era：指定年代的格式（"narrow"、"short"或"long"）。
  • year：指定年份的格式（"numeric"、"2-digit"）。
  • month：指定月份的格式（"numeric"、"2-digit"、"narrow"、"short"或"long"）。
  • day：指定日期的格式（"numeric"、"2-digit"）。
  • hour：指定小時的格式（"numeric"、"2-digit")。
  • minute：指定分鐘的格式（"numeric"、"2-digit")。
  • second：指定秒鐘的格式（"numeric"、"2-digit")。
  • timeZoneName：指定時區名稱的格式（"short"或"long")。

Intl.ListFormat

Intl.ListFormat用於格式化列表。它可以根據不同地區的語言和文化習慣來格式化列表，並且支援多種格式。下面是一個使用Intl.ListFormat的示例程式碼：

const list = ['蘋果', '香蕉', '橙子'];
const formatter = new Intl.ListFormat('zh-CN', { style: 'long', type: 'conjunction' });
console.log(formatter.format(list)); // 輸出：蘋果、香蕉和橙子

在上面的程式碼中，我們首先定義了一個陣列list，然後建立了一個Intl.ListFormat物件，並將其傳遞給指定語言環境（'zh-CN'表示中文環境）。接著，我們呼叫formatter.format()方法來格式化列表，並輸出結果。

需要注意的是，在建立Intl.ListFormat物件時，我們可以傳遞一個options物件來指定列表的格式。這個options物件可以包含以下屬性：

  • localeMatcher：指定語言環境匹配方式（"lookup"或"best fit"）。
  • style：指定列表的樣式（"long"、"short"或"narrow"）。
  • type：指定列表項之間的連線方式（"conjunction"、"disjunction"或"unit"）。

Intl.RelativeTimeFormat

Intl.RelativeTimeFormat用於格式化相對時間。它可以根據不同地區的語言和文化習慣來格式化相對時間，並且支援多種格式。下面是一個使用Intl.RelativeTimeFormat的示例程式碼：

const formatter = new Intl.RelativeTimeFormat('zh-CN', { style: 'long' });
console.log(formatter.format(-1, 'day')); // 輸出：1天

在上面的程式碼中，我們首先建立了一個Intl.RelativeTimeFormat物件，並將其傳遞給指定語言環境（'zh-CN'表示中文環境）。接著，我們呼叫formatter.format()方法來格式化相對時間，並輸出結果。

需要注意的是，在呼叫formatter.format()方法時，我們需要傳遞兩個引數。第一個引數列示相對時間的數值，可以是正數或負數。第二個引數列示相對時間的單位，可以是以下值之一：

  • "year"：年
  • "quarter"：季度
  • "month"：月
  • "week"：周
  • "day"：天
  • "hour"：小時
  • "minute"：分鐘
  • "second"：秒

在建立Intl.RelativeTimeFormat物件時，我們可以傳遞一個options物件來指定相對時間的格式。這個options物件可以包含以下屬性：

  • localeMatcher：指定語言環境匹配方式（"lookup"或"best fit"）。
  • numeric：指定相對時間的數值格式（"always"或"auto"）。
  • style：指定相對時間的樣式（"long"、"short"或"narrow"）。

小結

以上就是Intl物件的三個子物件的作用、使用場景以及使用過程中的注意事項的介紹。透過使用這三個子物件，我們可以更方便地處理國際化的問題。

參考資料：
MDN-Intl物件

相關文章