最近被同事問到js
如何實現給長數字添加千位分隔符,即 1344444 ---> 13,444,444 這是一個很常見的前端面試題。看起來簡單,剛開始我都懶得寫。
仔細一想,挺考邏輯的,實現方法有很多種,可以用三位循環、字符串數組分隔,也可以使用正則。剛開自己用js實現了堆棧,代碼太多,不夠優雅,同時也暴露了自己原生js的生疏,事后也看到了同事們各樣的實現方法,無非都是循環和字符串分隔,於是決心使用更優雅的正則裝逼一下。
仔細思考:
輸入:數字(考慮數字是否合法、正負號、小數點)、字符串
輸出:考慮到使用場景,最好是字符串
測試用例:-1234567.9012
期待輸出:-1,234,567.9012
千位分隔符貌似在《精通正則表達式》中講環視的時候作為經典范例,然而寫出來發現js不支持逆序環視,也就是 (?<=expression) (?<!expression) 這兩種是不支持的。
再三考慮和嘗試之后得出以下代碼,只需一行!完美實現!
// 正則
function thousandBitSeparator(num) {
return num && num
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
return $1 + ",";
});
}
console.log(thousandBitSeparator(-1234567.9012));
// -1,234,567.9012
todo
- 千位分隔符的完整攻略:推酷上這位仁兄使用ES6來實現,總結得不錯:
- js正則表達式:司徒正美有關js正則的文章,總結得不錯
- 正則基礎之——環視(Lookaround): 這篇博客講解環視的基礎知識,很詳細(PS:原來C#實現千位分隔符直接用string.Format就可以做到啊囧rz)
--- update 2015年07月03日 ---
經朋友提醒,當測試用例是1000的時候,此正則不能正確標注千位分隔符,現修改如下:
function thousandBitSeparator(num) {
return num && (num
.toString().indexOf('.') != -1 ? num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
return $1 + ",";
}) : num.toString().replace(/(\d)(?=(\d{3}))/g, function($0, $1) {
return $1 + ",";
}));
}
console.log(thousandBitSeparator(1000));
//1,000