JS 資料顯示常用到的便是數字轉換千分位/上逗號(“,”)，以下是幾個簡單的轉換方法
使用 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"使用 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
使用”正規表達式”轉換千分位/加逗號
以上兩個方法，主要都只適用於較新的瀏覽器版本，在向下相容上，基本不支援，所以如果要保險一點，可以建議採用”正規表達式”結合字串替換 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'結論
以上三種轉換千分位/加逗號的方式，可以看需求自行取用，但如果網站有向下相容需求，還是建議使用正規表達式轉換。
發表迴響