PJCHENder 未整理筆記

[WebAPIs] toLocaleString

2019-04-30

[WebAPIs] toLocaleString

keywords: i18n

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

  • zh-Hans
  • zh-Hant
  • en-US

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

時間與日期

Date.prototype.toLocaleString() @ MDN

1
2
3
4
5
6
7
8
9
10
11
// "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

1
2
3
4
5
6
7
8
9
10
11
12
13
(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:選擇要顯示的是哪國的幣別符號,例如 EURJPY

陣列

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

1
2
3
4
5
6
7
8
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'
});
Tags: WebAPIs

掃描二維條碼,分享此文章