調整 Intl.DurationFormat 的顯示精度

前言

  Intl.DurationFormat 和 Date 在顯示秒數的時候有些不一樣，Date 只能顯示到 milliseSeconds ，但 Intl.DurationFormat 卻可以顯示到 microSecnods ，並且可以控制顯示精度，在此把學習的過程做個紀錄。

內容

  範例如下

let duration = {
  hours: 11,
  minutes: 30,
  seconds: 12,
  milliseconds: 345,
  microseconds: 600,
};
let duration1 = {
  hours: 11,
  minutes: 30,
  seconds: 12,
  milliseconds: 345,
  microseconds: 645,
};
//
console.log( new Intl.DurationFormat("zh-TW", { style: "digital" }).format(duration) );
// "11:30:12.3456"
console.log( new Intl.DurationFormat("zh-TW", { style: "digital" }).format(duration1) );
// "11:30:12.345645"
console.log( new Intl.DurationFormat("zh-TW", { style: "digital" , fractionalDigits: 5 }).format(duration) );
// "11:30:12.34560"
console.log( new Intl.DurationFormat("zh-TW", { style: "digital" , fractionalDigits: 2 }).format(duration) );
// "11:30:12.34"

只要在輸入的參數填入 microseconds 就可以顯示，再不調整精度時，會自動去 0 後顯示，可以在第一例與第二例的使用看出差異，如果要調整精度，可以在參數裡輸入 fractionalDigits ，就可以調整精度，但要注意如果調整精度後就不會自動去 0 ，可以在第三例看出。

參考資料

[ developer.mozilla.org ] Intl.DurationFormat

相關文章與資料

初探 Intl.DurationFormat

 初探 Intl.DurationFormat.formatToParts()

前言

  這次來學習 Intl.DurationFormat.formatToParts() ，在此把學習的過程做個紀錄。

內容

  範例如下

let duration = {
  hours : 8,
  minutes: 30,
  seconds: 40,
};
//
let parts = new Intl.DurationFormat( "zh-TW" ,{ style:'long' }).formatToParts(duration);
console.log( parts );
//
// [[object Object] {
//   type: "integer",
//   unit: "hour",
//   value: "8"
// }, [object Object] {
//   type: "literal",
//   unit: "hour",
//   value: " "
// }, [object Object] {
//   type: "unit",
//   unit: "hour",
//   value: "小時"
// }, [object Object] {
//   type: "literal",
//   value: " "
// }, [object Object] {
//   type: "integer",
//   unit: "minute",
//   value: "30"
// }, [object Object] {
//   type: "literal",
//   unit: "minute",
//   value: " "
// }, [object Object] {
//   type: "unit",
//   unit: "minute",
//   value: "分鐘"
// }, [object Object] {
//   type: "literal",
//   value: " "
// }, [object Object] {
//   type: "integer",
//   unit: "second",
//   value: "40"
// }, [object Object] {
//   type: "literal",
//   unit: "second",
//   value: " "
// }, [object Object] {
//   type: "unit",
//   unit: "second",
//   value: "秒"
// }]
//
partValues = parts.map((p) => p.value);
console.log(partValues);//["8", " ", "小時", " ", "30", " ", "分鐘", " ", "40", " ", "秒"]

Intl.DurationFormat.formatToParts() 可以把結果輸出成好幾個部分，這樣可以方便提取個別項目的資料，但原始輸出是個物件，跟其它的 formatToParts() 一樣，如果要直接提取 value 的話，一樣透過 Array.map() 就可以輸出包含每個 value 的陣列。

參考資料

[ developer.mozilla.org ] Intl.DurationFormat

相關文章與資料

初探 Intl.DurationFormat

設定 Intl.DurationFormat 的顯示格式

 設定  Intl.DurationFormat 的顯示格式

前言

  在先前的 初探 Intl.DurationFormat 裡介紹了基本的使用，這次要來調整顯示格式，在此把學習的過程做個紀錄。

內容

  範例如下

let duration = {
  hours : 8,
  minutes: 30,
  seconds: 40,
};
//
console.log( new Intl.DurationFormat( "en-US" ,{ style:'long' }).format(duration) );//8 hours, 30 minutes, 40 seconds
console.log( new Intl.DurationFormat( "en-US" ,{ style:'short' }).format(duration) );//8 hr, 30 min, 40 sec
console.log( new Intl.DurationFormat( "en-US" ,{ style:'narrow' }).format(duration) );//8h 30m 40s
console.log( new Intl.DurationFormat( "en-US" ,{ style:'digital' }).format(duration) );//8:30:40

在 new Intl.DurationFormat() 時加入 style 的參數就可以調整顯示格式，提供四種，分別是 long 、short 、narrow 與 digital ，short 為預設，範例分別個示範一次。

參考資料

[ developer.mozilla.org ] Intl.DurationFormat

相關文章與資料

初探 Intl.DurationFormat

 初探 Intl.DurationFormat

前言

  Intl 提供期間格式，可以用來表示時差，在此把學習得過程做個紀錄。

內容

  範例如下

let duration = {
  hours : 8,
  minutes: 30,
  seconds: 40,
};
//
console.log( new Intl.DurationFormat("fr").format(duration) );//8 h, 30 min et 40 s
console.log( new Intl.DurationFormat("en-US").format(duration) );//8 hr, 30 min, 40 sec
console.log( new Intl.DurationFormat("zh-TW").format(duration) );//8 小時 30 分鐘 40 秒

期間格式透過 Intl.DurationFormat 來處理，用法和 Intl 常見用法一樣，先 new 出物件再透過 Intl.DurationFormat.format() 來取得期間格式，參數的部分是用物件的方式給予，範例分別示範了三個地區。

參考資料

[ developer.mozilla.org ] Intl.DurationFormat