2024年5月27日 星期一

使用 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 

2024年5月20日 星期一

使用 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 選擇貨幣顯示的方式


2024年5月13日 星期一

使用 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

2024年5月6日 星期一

使用 Intl.NumberFormat 顯示百分比

 使用 Intl.NumberFormat 顯示百分比

前言

  在 初探 Intl.NumberFormat 示範如何顯示幣值,但 Intl.NumberFormat 不只能顯示幣值,也能顯示百分比,在此把學習的過程做個紀錄。


內容

  範例如下

let number = 0.25;
//
console.log( new Intl.NumberFormat('de-DE', { 
  style: 'percent', 
  }).format( number) );//25 %
//
console.log( new Intl.NumberFormat('ja-JP', { 
  style: 'percent', 
  }).format( number) );//25%
//
console.log( new Intl.NumberFormat('zh-tw', { 
  style: 'percent', 
  }).format( number) );//25%


使用的方法是在 style 參數使用 persent ,要注意 1 代表 100% ,不同區域是有差別的!範例的第一個示範顯示會多空一個空格。


參考資料

[ developer.mozilla.org ] Intl.NumberFormat


相關文章與資料

初探 Intl.NumberFormat