初探 Intl.NumberFormat

前言

  這次來學習透過 Intl.NumberFormat 顯示貨幣價值，在此做個紀錄。

內容

  範例如下

let number = 1234;
//
console.log( new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' 
  }).format( number) );//1.234,00 €
//
console.log( new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' 
  }).format( number) );//￥1,234
//
console.log( new Intl.NumberFormat('zh-TW', { style: 'currency', currency: 'TWD' 
  }).format( number) );//$1,234.00

使用的方法跟其他的 Intl 差不多，不過要注意 currency 這個參數，這個參數引響顯示幣值的符號，要輸入的代碼可以在 [ en.wikipedia.org ] ISO 4217 查詢，區域碼會引響的是貨幣符號在前後與是否顯示小術後兩位。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

[ en.wikipedia.org ] ISO 4217

 改用凌晨的方式表達時間

前言

  Intl.DateTimeFormat() 有參數可以改以凌晨的方式來表達時間，在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'narrow',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'long',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738

改變的方法是透過 dayPeriod ，參數有三種，分別是 narrow 、 short 與 long ，範例個別示範一次，要注意的是 dayPeriod  必須搭配 hourCycle 來使用，只有當 hourCycle  是 h11 與 h12 時才有作用，範例的結果三個都是一樣的，可能跟區域有關，換成 fr 的話，第三個會有不同。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

調整 Intl.DateTimeFormat 的時間為 24 小時制

在 Intl.DateTimeFormat 顯示時區

 在 Intl.DateTimeFormat 顯示時區

前言

  先前使用 Intl.DateTimeFormat 都沒顯示時區，要如何顯示呢?在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+8]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'long',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台北標準時間]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'shortOffset',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+8]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'longOffset',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+08:00]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'shortGeneric',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台灣時間]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'longGeneric',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台北標準時間]

透過 timeZoneName 可以顯示時區，但只能用於自訂格式，如果與 dateStyle 或 timeStyle 混用會報錯，有六種參數可以用， short 、 long 、shortOffset 、 longOffset 、 shortGeneric 與 longGeneric ，範例分別個示範一次。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

調整 Intl.DateTimeFormat 的時間為 24 小時制

 進階調整 Intl.DateTimeFormat 的時間為 24 小時制

前言

  在先前的 調整 Intl.DateTimeFormat 的時間為 24 小時制 介紹了調整為 24 小時制的方法，但調整的方法其實不只這一種，有另外一種調整法，在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h23',
}).format(date));//2020/12/21 00:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h24',
}).format(date));//2020/12/21 24:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h12',
}).format(date));//2020/12/21 凌晨12:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h11',
}).format(date));//2020/12/21 上午0:23

上次 調整 Intl.DateTimeFormat 的時間為 24 小時制 是透過 hour12 來調整，這次會使用 hourCycle ，有 4 種參數可以調，分別是 h11 、h12 、h23 與 h24 ，範例都分別示範一次，同為24 小時制有兩種顯示方式，一種顯示 00 ，另一種顯示 24 ，h11 與 h12 也是一樣。使用上要注意 hour12 與 hourCycle  最好不要同時使用，可能在不同瀏覽器會有不同的結果，hour12  為 True 可以用 h12 來替代，為 False 時使用 h24 來替代，這樣就可以完全用不到 hour12  ，也就不會發生混用的情形。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

調整 Intl.DateTimeFormat 的時間為 24 小時制

 調整 Intl.DateTimeFormat 的時間為 24 小時制

前言

  在先前示範 Intl.DateTimeFormat 都是採取 12小時制，會分上午或下午，要如何改成 24 小時制呢?在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 5, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hour12 : false
}).format(date));//2020/12/20 13:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  formatMatcher:'best fit',
  hour12 : false
}).format(date));//2020年12月20日 星期日 13:23:16.738

透過第二個參數裡的 hour12 參數就可以調整成 24 小時制，該值預設是 true ，有舊是 12 小時制，將其設為 false 就是 24 小時制，此參數不管是常見的格式或自訂的格式都可以使用，範例分別都示範一次。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式