調整 Intl.NumberFormat 的顯示數字的格式

前言

  電子工程常常把 1000 記為 K ，百萬記為 M ， Intl.NumberFormat 支援這樣的顯示方式嗎?答案是可行的，而且只需透過簡單的參數調整即可完成，在此把學習的過程做個紀錄。

內容

  範例如下

let numFormatStandard = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'standard',
});

console.log( numFormatStandard.format(10000) );//$10,000.00
//
let numFormatScientific = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'scientific',
});

console.log( numFormatScientific.format(10000) );//$1.00E4
//
let numFormatEngineering = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'engineering',
});

console.log( numFormatEngineering.format(10000) );//$10.00E3
//
let numFormatCompact = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation:'compact',
});

console.log( numFormatCompact.format(10000) );//$10K

透過 notation 參數可以調整顯示數字的格式，參數有 standard 、scientific 、engineering 與 compact ， standard  就是預設值，也是最常見的狀況，scientific  與 engineering 的格式都是在數字末端加 E 來表達，由於我本身對這種格式不熟，就不多作介紹，最後是 compact  ，這個格式就是 1000 記為 K ，百萬記為 M 的顯示格式。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

 複製 Intl.NumberFormat  的參數

前言

  Intl.NumberFormat 在初始化時可以輸入很多參數，如果需要用同樣的參數但不同的地區該如何達成? Intl.NumberFormat 有提供複製參數的方法，在此把學習的過程做個紀錄。

內容

  範例如下

let numFormatUS = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 2,
  roundingIncrement: 5,
  roundingMode: "halfCeil",
});
let options = numFormatUS.resolvedOptions();
console.log( options.locale );//en-US
console.log( options.currency );//USD
//
let numFormatTW = new Intl.NumberFormat( "zh-TW",options );

console.log( numFormatUS.format(10) );//$10.00
console.log( numFormatTW.format(10) );//US$10.00
//
console.log( numFormatTW.format(10.255) );//US$10.25

複製參數是透過 Intl.NumberFormat.resolvedOptions() ，回傳值是個 Object ，裡面有全部的參數，範例分別顯示了 locale 與 currency ，接著進行複製，複製時發現參數本身有 locale ，但初始化的第一個參數也是 locale ，哪會以哪個為主?結果是以初始化的第一個參數為主，回傳的 option 只是拿來讀取的，在複製時不會有作用，最後用顯示 10.255 來檢測 maximumFractionDigits 有沒有確實被複製，結果正確。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

 注意 初探 Intl.NumberFormat.formatRangeToParts() 輸出不一定是範圍

前言

  在先前的 初探 Intl.NumberFormat.formatRangeToParts() 基本的使用了 formatRangeToParts() ，在更之前的 使用 Intl.NumberFormat 顯示數值範圍 也是顯示範圍，但它可能會顯示近似值，formatRangeToParts()  也是如此嗎?是的，在此把學習的過程做個紀錄。

內容

  範例如下

let parts = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRangeToParts( 3.5 , 4.4);

console.log(parts);


// [[object Object] {
//   source: "shared",
//   type: "approximatelySign",
//   value: "~"
// }, [object Object] {
//   source: "shared",
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   source: "shared",
//   type: "integer",
//   value: "4"
// }]


partValues = parts.map((p) => p.value);
console.log(partValues);//["~", "$", "4"]

formatRangeToParts()  也是會有顯示近似值的狀況，設好 maximumFractionDigits ，就可能發生顯示近似值，如範例示範的範圍，如果只想取數值一樣透過 map() 來處理，使用 Intl.NumberFormat.formatRangeToParts() 要考慮有顯示近似值的可能。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

初探 Intl.NumberFormat.formatRangeToParts()

使用 Intl.NumberFormat 顯示數值範圍

 初探 Intl.NumberFormat.formatRangeToParts()

前言

  在上次 初探 Intl.NumberFormat.formatToParts() 介紹了 formatToParts() ，這次學習的 formatRangeToParts() 跟它很像，在此把學習的過程做個紀錄。

內容

  範例如下

let parts = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).formatRangeToParts( 123.45 , 1500);
console.log(parts);

// [[object Object] {
//   source: "startRange",
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   source: "startRange",
//   type: "integer",
//   value: "123"
// }, [object Object] {
//   source: "startRange",
//   type: "decimal",
//   value: "."
// }, [object Object] {
//   source: "startRange",
//   type: "fraction",
//   value: "45"
// }, [object Object] {
//   source: "shared",
//   type: "literal",
//   value: " – "
// }, [object Object] {
//   source: "endRange",
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   source: "endRange",
//   type: "integer",
//   value: "1"
// }, [object Object] {
//   source: "endRange",
//   type: "group",
//   value: ","
// }, [object Object] {
//   source: "endRange",
//   type: "integer",
//   value: "500"
// }, [object Object] {
//   source: "endRange",
//   type: "decimal",
//   value: "."
// }, [object Object] {
//   source: "endRange",
//   type: "fraction",
//   value: "00"
// }]


partValues = parts.map((p) => p.value);
console.log(partValues);//["$", "123", ".", "45", " – ", "$", "1", ",", "500", ".", "00"]



用法和 formatToParts() 很像，指示輸入需要輸入兩個數值來表達範圍，輸出的結果會是個陣列，裡面會有分割好的各部位資料，如果要直接提取可以透過 map() 來提取所有的數值，就像範例的 partValues 一樣，如此就可以直接提取各個部位的資料。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

初探 Intl.NumberFormat.formatToParts()

 初探 Intl.NumberFormat.formatToParts()

前言

   Intl.NumberFormat 可以顯示數值，但如果只需要小數的部分有辦法做到嗎?可以透過 Intl.NumberFormat.formatToParts() 來達成，在此把學習的過程做個紀錄。

內容

  範例如下

let parts = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).formatToParts( 123.45 );
console.log(parts);
//[[object Object] {
//   type: "currency",
//   value: "$"
// }, [object Object] {
//   type: "integer",
//   value: "123"
// }, [object Object] {
//   type: "decimal",
//   value: "."
// }, [object Object] {
//   type: "fraction",
//   value: "45"
// }]
//
partValues = parts.map((p) => p.value);
console.log(partValues);//["$", "123", ".", "45"]

Intl.NumberFormat.formatToParts()  的回傳值是個陣列，不過裡面的內容會含有每個部位的名稱，如果不需要可以透過 map() 來過濾，如同範例的 partValues ，這樣就可以方便提取各部位。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat