使用 Intl.NumberFormat  顯示數值範圍

前言

  Intl.NumberFormat 不只可以顯示單一數值，也支援顯示數值範圍，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  //maximumFractionDigits: 0,
}).formatRange(3 , 5) );//$3.00 – $5.00
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3 , 5) );//$3 – $5
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3.5 , 5.5) );//$4 – $6
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3.4 , 5.4) );//$3 – $5
//
console.log( new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
}).formatRange(3.5 , 4.4) );//~$4

要顯示數值範圍可以透過 Intl.NumberFormat.formatRange() ，參數就是兩個 Number，個別是範圍的開頭與範圍的結束，第一例就簡單地使用顯示數值範圍，第二例搭配先前的 在 Intl.NumberFormat 控制顯示位數 ，可以控制顯示小數位數，顯示的數值如果低於精度會採取四捨五入的原則來顯示，這點可以在第三例與與第四例看到，第五例比較特別，如果範圍差在最低精度時，且範圍開頭會被五入，這樣就會被顯示成近似於數值，這是 Intl.NumberFormat.formatRange() 相當特別的規則。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

在 Intl.NumberFormat 控制顯示位數

 在 Intl.NumberFormat 控制顯示位數

前言

  Intl.NumberFormat  提供控制顯示位數的功能，在此把學習的過程做個紀錄。

內容

  範例如下

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  minimumIntegerDigits : 3
  }).format( 10) );//010 升

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  minimumFractionDigits : 3
  }).format( 10) );//10.000 升

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  maximumFractionDigits : 3
  }).format( 10.12345) );//10.123

控制顯示位數的參數分別是 minmumIntegerDigits 、 minmumFractionDigits 與 maxmumFractionDigits ， minmumIntegerDigits  是最少整數的顯示位數，如果要顯示的位數彼此數還小前方會補零，minmumFractionDigits  與 maxmumFractionDigits  分別代表最少小數顯示位數與最大小數顯示位數，minmumFractionDigits  碰到為數不足時會補零，maxmumFractionDigits  在超出為數時會直接不顯示。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

使用 Intl.NumberFormat 顯示單位

 調整 Intl.NumberFormat 正負號顯示

前言

  使用  Intl.NumberFormat 時，當數值是負的時候才顯示負號，這是常見的狀況，但如果碰到特殊狀況時可以改嗎?答案是可以的，在此把學習的過程做個紀錄。

內容

  範例如下

let number = 100;
let numberZ = 0;
let numberN = -100;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'auto',
  }).format( numberN) );//-100 升
//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'always',
  }).format( number) );//+100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'always',
  }).format( numberZ) );//+0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'always',
  }).format( numberN) );//-100 升

//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'exceptZero',
  }).format( number) );//+100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'exceptZero',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'exceptZero',
  }).format( numberN) );//-100 升
//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'negative',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'negative',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'negative',
  }).format( numberN) );//-100 升
//
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'never',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'never',
  }).format( numberZ) );//0 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  signDisplay : 'never',
  }).format( numberN) );//100 升

透過 signDisplay 可以調整正負號顯示，參數有 auto 、 always 、 exceptZero 、 negative 與 never ， auto 就是預設，也是常見的只在負值時顯示負號 ，always 則是無論如何都顯示正負號，包含 0 ，exceptZero 也是都顯示正負號，但 0 的時候不顯示 ，negative 則是指在負值顯示，這行為和 auto 是一樣的，never 則是無論如何都不顯示正負號。範例都是用顯示單位的方式使用，但這個參數不只作用在單位顯示，在百分比與貨幣時一樣適用。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

使用 Intl.NumberFormat 顯示單位

 調整 Intl.NumberFormat 顯示單位

前言

  Intl.NumberFormat 可以顯示單位，但有些單位會有需要顯示所縮寫或完整顯示的需求，這時就需要透過參數的調整來顯示，在此把學習的過程做個紀錄。

內容

  範例如下

let number = 100;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'short',
  }).format( number) );//100 升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'narrow',
  }).format( number) );//100升
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'liter',
  unitDisplay : 'long',
  }).format( number) );//100 公升

要調整顯示單位可以透過 unitDisplay 來調整，可以接受的參數有 short 、 narrow 與 long ，範例以公升來示範， short 顯示(空白)與升，narrow 就只顯示升，long 才會顯示(空白)與公升，short 與 narrow 顯示縮寫，差異在於有沒有空白，long 則是完全顯示。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

使用 Intl.NumberFormat 顯示單位

使用 Intl.NumberFormat 顯示單位

前言

  Intl.NumberFormat 不只可以顯示錢幣，還可以用來顯示單位，在此把學習的過程做個紀錄。

內容

  範例如下

let number = 100;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'meter'
  
  }).format( number) );//100 公尺
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'centimeter'
  
  }).format( number) );//100 公分
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'unit', 
  unit : 'kilogram'
  
  }).format( number) );//100 公斤

使用 Intl.NumberFormat 顯示單位時，要在 style 輸入 unit ，接著就可以透過 unit 來輸入要顯示的單位，單位的參數可以透過 Single units sanctioned for use in ECMAScript 來查詢，範例分別示範了公尺、公分與公斤。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

Single units sanctioned for use in ECMAScript

相關文章與資料

初探 Intl.NumberFormat 

 使用 Intl.NumberFormat 選擇記帳格式

前言

  在查閱 Intl.NumberFormat 的功能時發現有個參數可以調整記帳格式，在此把學習的過程做個紀錄。

內容

  範例如下

let number = -1234;
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencySign : 'standard'
  
  }).format( number) );//-$1,234.00

//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencySign : 'accounting'
  
  }).format( number) );//($1,234.00)

調整記帳格式的差異在於有的區域記帳時顯示負值的方式不是用負號，而是使用括號，可以透過 currencySign 來調整，參數內容可以是 stardard 與 accounting ，預設為 stardard  ，範例使用 stardard 如預期在前方加負號顯示， 使用 accounting  則是越括號來表達。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

初探 Intl.NumberFormat

使用 Intl.NumberFormat 選擇貨幣顯示的方式

 使用 Intl.NumberFormat 選擇貨幣顯示的方式

前言

  在先前的 初探 Intl.NumberFormat 介紹了顯示貨幣的方式，但貨幣都是用符號來顯示， Intl.NumberFormat 還支援其它的顯示方式，在此把學習的過程做個紀錄。

內容

  範例如下

let number = 1234;
//
console.log( new Intl.NumberFormat('de-DE', { 
  style: 'currency', 
  currency: 'EUR',
  currencyDisplay : 'code'
  }).format( number) );//1.234,00 EUR
//
console.log( new Intl.NumberFormat('ja-JP', { 
  style: 'currency', 
  currency: 'JPY',
  currencyDisplay : 'symbol'
  }).format( number) );//￥1,234
//
console.log( new Intl.NumberFormat('en-US', { 
  style: 'currency', 
  currency: 'TWD' ,
  }).format( number) );//NT$1,234.00
//
console.log( new Intl.NumberFormat('en-US', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencyDisplay : 'narrowSymbol'
  }).format( number) );//$1,234.00
//
console.log( new Intl.NumberFormat('zh-TW', { 
  style: 'currency', 
  currency: 'TWD' ,
  currencyDisplay : 'name'
  
  }).format( number) );//1,234.00 新台幣

控制顯示貨幣的方式是透過 currencyDisplay 來調整，參數可輸入 code 、 symbol 、 narrowSymbol 與 name ， code 顯示就是用貨幣碼來顯示， symbol 就是符號也是預設的參數 ， narrowSymbol 目前只發現在顯示非本國貨幣時會有差異，範例示範在 en-US 顯示台幣時的差異，最後，name 是用文字來顯示貨幣。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

相關文章與資料

初探 Intl.NumberFormat