紀錄工作經驗、相關知識,解決技術相關問題。

Javascript, React, 新手 Jamp Holes, 未分類, 網站相關

JS 數字加逗號/轉換千分位顯示

JS 資料顯示常用到的便是數字轉換千分位/上逗號(“,”),以下是幾個簡單的轉換方法

1. 使用 toLocaleString() 轉換千分位/加逗號

使用 toLocaleString() 需要特別注意只適用數字,傳入字串則會錯誤,範例如下:

// 數字
const num = 9999999
console.log(num.toLocaleString());
// output: "9,999,999"

// 字串
const num2 = '9999999'
console.log(num2.toLocaleString());
// output: "9999999"

為了避免字串無效問題,最好的最好建議可以寫成:

const thousandthsFormat = (value) => {
  value = parseInt(value)
  if(isNaN(value)) return
  return value.toLocaleString()
}

const num = 9999999
console.log(thousandthsFormat(num))
// output: "9,999,999"

const num2 = '9999999'
console.log(thousandthsFormat(num2))
// output: "9,999,999"

const num3 = 'abcd'
console.log(thousandthsFormat(num3))
// output: "NaN"

2. 使用 Intl.NumberFormat 轉換千分位/加逗號

使用 Intl.NumberFormat 可以簡單的將”數字”、”字串”轉換千分位/加逗號顯示,範例如下:

const number = 123456.789;
const num = new Intl.NumberFormat().format(number)
console.log(num);
// output: "123,456.789"

const number2 = "123456.789";
const num2 = new Intl.NumberFormat().format(number2)
console.log(num2);
// output: "123,456.789"

使用 Intl.NumberFormat的好處,是可以直接以參數方式指定幣別顯示,以下範例:

const number = 123456.789;
const num = new Intl.NumberFormat('zh', { style: 'currency', currency: 'TWD' }).format(number)
console.log(num);
// output: "NT$123,456.79"

const num2 = new Intl.NumberFormat('zh', { style: 'currency', currency: 'JPY' }).format(number)
console.log(num2);
// output: "JP¥123,457"

const num3 = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number3)
console.log(num3);
// output: "¥123,457"

使用方式可以參照 MDN Web Docs: Intl.NumberFormat

3. 使用”正規表達式”轉換千分位/加逗號

以上兩個方法,主要都只適用於較新的瀏覽器版本,在向下相容上,基本不支援,所以如果要保險一點,可以建議採用”正規表達式”結合字串替換 replace 的方式,對輸入的資料進行轉換,以下是範例:

const const thousandthsFormat = (value) => {
  const regex = /\B(?=(\d{3})+(?!\d))/g
  value = value.toString()
  return value.replace(regex, ',')
}

const number = 1234567.89;
console.log(thousandthsFormat(number))
// output: '1,234,567.89'

結論

以上三種轉換千分位/加逗號的方式,可以看需求自行取用,但如果網站有向下相容需求,還是建議使用正規表達式轉換。

發表迴響