數字格式化 1234567890 --> 1,234,567,890
1.普通版
function formatNumber(str) {
let arr = [],
count = str.length
while (count >= 3) {
arr.unshift(str.slice(count - 3, count))
count -= 3
}
// 如果是不是3的倍數就另外追加到上去
str.length % 3 && arr.unshift(str.slice(0, str.length % 3))
return arr.toString()
}
console.log(formatNumber("1234567890")) // 1,234,567,890
優點：自我感覺比網上寫的一堆 for循環 還有 if-else 判斷的邏輯更加清晰直白。
缺點：太普通
2.進階版
function formatNumber(str) {
// ["0", "9", "8", "7", "6", "5", "4", "3", "2", "1"]
return str.split("").reverse().reduce((prev, next, index) => {
return ((index % 3) ? next : (next + ',')) + prev
})
}
console.log(formatNumber("1234567890")) // 1,234,567,890
優點：把 JS 的 API 玩的了如指掌
缺點：可能沒那么好懂，不過讀懂之后就會發出我怎么沒想到的感覺
3.正則版
function formatNumber(str) {
return str.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
console.log(formatNumber("123456789")) // 1,234,567,890
下面簡單分析下正則/\B(?=(\d{3})+(?!\d))/g：
第一 /\B(?=(\d{3})+(?!\d))/g：正則匹配邊界\B，邊界后面必須跟着(\d{3})+(?!\d);
第二 (\d{3})+：必須是1個或多個的3個連續數字;
第三 (?!\d)：第2步中的3個數字不允許后面跟着數字;
第四 (\d{3})+(?!\d)：所以匹配的邊界后面必須跟着3*n（n>=1）的數字。
最終把匹配到的所有邊界換成,即可達成目標。
優點：代碼少，濃縮的就是精華
缺點：需要對正則表達式的位置匹配有一個較深的認識，門檻大一點
4.API版
(123456789).toLocaleString('en-US') // 1,234,567,890
你可能還不知道 JavaScript 的 toLocaleString 還可以這么玩。
還可以使用 Intl對象 - MDN
Intl 對象是 ECMAScript 國際化 API 的一個命名空間，它提供了精確的字符串對比，數字格式化，日期和時間格式化。Collator，NumberFormat 和 DateTimeFormat 對象的構造函數是 Intl 對象的屬性。
new Intl.NumberFormat().format(1234567890) // 1,234,567,890
優點：簡單粗暴，直接調用 API
缺點：Intl兼容性不太好，不過 toLocaleString的話 IE6 都支持
你可能不知道的前端知識點：Intl對象 和 toLocaleString的方法。