跳至主要内容

[WebAPIs] toLocaleString

keywords: `i18n`

toLocaleString 是 JavaScript 原生的方法，適用於「時間日期」、「數字」和「陣列」，這些方法中都可以帶入 locales 作為參數，其中常用的 locales 包含：

zh-Hans
zh-Hant
en-US

⚠️ 這幾個 API 在使用時需要留意瀏覽器的相容性。

時間與日期

Date.prototype.toLocaleString() @ MDN

// "2019年11月28日星期四 台北标准时间 下午10:42:53"
new Date().toLocaleString('zh-Hans', {
  dateStyle: 'full',
  timeStyle: 'full',
});

// "2019年11月28日 星期四 下午10:43:49 [台北標準時間]"
new Date().toLocaleString('zh-Hant', {
  dateStyle: 'full',
  timeStyle: 'full',
});

常用的 options 包含：

hour12：要不要使用 12 小時制，填入 false 則會使用 24 小時制
weekday, era, year, month, day, hour, minute, second
timeZoneName

數字

Number.prototype.toLocaleString() @ MDN

(12345.678).toLocaleString('en-US'); // "12,345.678"

// "NTD 12,345.68"
(12345.678).toLocaleString('zh-Hant', {
  style: 'currency',
  currency: 'NTD',
});

// "$12,345.68"
(12345.678).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
});

常用的 options 包含：

style：選擇顯示的是否為幣別（currency）
currency：選擇要顯示的是哪國的幣別符號，例如 EUR、JPY

陣列

陣列的使用主要是針對陣列中的每一個元素去執行 toLocaleString() 後合併：

var arr = [12345678, new Date(), 123445.44];

// 12 345 678,00 €,28 11 2019 après Jésus-Christ à 22:58:24,123 445,44 €
arr.toLocaleString(`fr-FR`, {
  style: 'currency',
  currency: 'EUR',
  era: 'long',
});

時間與日期
數字
陣列