再探 Intl.NumberFormat 控制顯示位數

前言

  在先前的 在 Intl.NumberFormat 控制顯示位數 介紹了控制顯示位數的參數，但發現少介紹兩個，這次把它補齊，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  minimumSignificantDigits : 4,
  }).format( 10) );//10.00 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumSignificantDigits : 4,
  }).format( 10.5678) );//10.57 公升

少介紹的參數為 minimunSignificantDigits 與 maximunSignificantDigits ，分別控制最大與最少的顯示位數，這個顯示顯示是整數與小樹一起算的，範例的第一例的 10 ，顯示結果是 10.00 是因為要補足最少顯示位數 4 ，所以最後補了兩位小數， 第二例顯示結果是 10.57 ，由於最大顯示位數是 4 加上小數第三位的四捨五入，所以結果不是 10.56 ，而是 10.57。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

在 Intl.NumberFormat 控制顯示位數

 再探 Intl.NumberFormat 的進位原則

前言

  在 調整 Intl.NumberFormat 的進位原則  探索了部分參數的使用，這次把剩下的參數也試用一下，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfCeil'
  }).format( -10.56) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfExpand'
  }).format( -10.54) );//-10.5 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfFloor'
  }).format( -10.54) );//-10.5 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfTrunc'
  }).format( -10.56) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfEven'
  }).format( -10.56) );//-10.6 公升
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'halfEven'
  }).format( -10.45) );//-10.4 公升

剩下的參數為 halfCeil 、 halfExpand 、halfFloor 、 halfTrunc 與 halfEven ，這次的參數不是很容易懂，halfCeil 在正值時採取"四捨五入"，負值時採取"六進五捨"，halfCeil 的正值與負值一樣採用"四捨五入"，也是預設的參數，halfFloor  在正值時採取"六進五捨" ，負值則採用"四捨五入"，halfTrunc 則是正值與負值一樣採用"六進五捨"，最後一個參數 halfEven ，如果進位的數字本身已是奇數結果會和 halfExpand 一樣，範例的 -10.56  裡的進位數字是 5 ，所以進位發生，但如果把數字換成 -10.45 ，這時進位數字是 4 ，也就是偶數，這時所有的進位都不會發生，可以把 halfEven  想成是只有進位數是奇數時才採取"四捨五入"。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

調整 Intl.NumberFormat 的進位原則

 調整 Intl.NumberFormat 的進位原則

前言

  Intl.NumberFormat 的進位原則是可以透過參數調整的，在此把學習的過程做個紀錄。

內容

  範例如下

let numFormat = new Intl.NumberFormat("zh-TW", {
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,

});
//
console.log( numFormat.format(10.54) );//10.5 公升
console.log( numFormat.format(10.55) );//10.6 公升

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'ceil'
  }).format( -10.54) );//-10.5 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'expand'
  }).format( -10.54) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'floor'
  }).format( -10.51) );//-10.6 公升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  maximumFractionDigits : 1,
  roundingMode : 'trunc'
  }).format( -10.51) );//-10.5 公升

範例開頭示範不調整時會以四捨五入為原則來調整，如果要調整原則要透過 roundingMode 參數來調整，由於參數有點多，這次介紹 ceil 、expand 、 floor 與 trunc 這四個參數，ceil 與 expand 可以簡化成"無條件進位"，那分兩個的意義呢?主要差異在負數時的進位， ceil 會進位到 -10.5 ，但 expand 會進位到 -10.6 ， floor 與 trunc 也是一樣的關係，理解成無條件捨棄，但在負數時的原則會不一樣， floor 會捨棄到 -10.6 ， trunc 則是 -10.5 。

  

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

 調整 Intl.NumberFormat 的顯示小數的原則

前言

  Intl.NumberFormat 在顯示美金時會顯示到小數第二位，但如果需要有小數時才顯示小數可行嗎?查了一下可以透過參數調整完成，在此把學習的過程做個紀錄。

內容

  範例如下

let numFormatAuto = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  trailingZeroDisplay : 'auto',
});

console.log( numFormatAuto.format(10000) );//$10,000.00
//
let numFormatStripIfInteger = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  trailingZeroDisplay : 'stripIfInteger'
});

console.log( numFormatStripIfInteger.format(10000) );//$10,000
console.log( numFormatStripIfInteger.format(10000.25) );//$10,000.25

//
let numFormat = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits : 0
});

console.log( numFormat.format(10000.25) );//$10,000

要調整顯示小數的原則是透過 trailingZeroDisplay ，參數有 auto 與 stripIfInteger ，auto 就是預設值，如範例會顯示到小數第二位，使用 stripIfInteger 後，當數值是整數時就不在顯示小數，當有小數時還是會顯示小數，也許你會想到可以透過 maximumFractionDigits 來做到不顯示小數，但使用 maximumFractionDigits  會變成無論如何都不顯示小數，和 stripIfInteger  是不一樣的。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat