將普通的數(shù)字轉(zhuǎn)換為帶千位分隔符格式的數(shù)字字符串是一個非常常見的問題,千位分隔符格式的規(guī)則是數(shù)字的整數(shù)部分每三位一組粟害,以“掉房,”分節(jié)茧跋。小數(shù)部分不分節(jié) 。
示例:19,351,235.235767
這里有幾個常見的實現(xiàn)方法卓囚。
1.方法一
實現(xiàn)思路是將數(shù)字轉(zhuǎn)換為字符數(shù)組瘾杭,再循環(huán)整個數(shù)組, 每三位添加一個分隔逗號哪亿,最后再合并成字符串粥烁。因為分隔符在順序上是從后往前添加的:比如 1234567添加后是1,234,567 而不是 123,456,7 ,所以方便起見可以先把數(shù)組倒序锣夹,添加完之后再倒序回來页徐,就是正常的順序了。要注意的是如果數(shù)字帶小數(shù)的話银萍,要把小數(shù)部分分開處理变勇。
function numFormat(num){
num=num.toString().split("."); // 分隔小數(shù)點
var arr=num[0].split("").reverse(); // 轉(zhuǎn)換成字符數(shù)組并且倒序排列
var res=[];
for(var i=0,len=arr.length;i<len;i++){
if(i%3===0&&i!==0){
res.push(","); // 添加分隔符
}
res.push(arr[i]);
}
res.reverse(); // 再次倒序成為正確的順序
if(num[1]){ // 如果有小數(shù)的話添加小數(shù)部分
res=res.join("").concat("."+num[1]);
}else{
res=res.join("");
}
return res;
}
var a=1234567894532;
var b=673439.4542;
console.log(numFormat(a)); // "1,234,567,894,532"
console.log(numFormat(b)); // "673,439.4542"
2.方法二
使用JS自帶的函數(shù) toLocaleString
語法:
numObj.toLocaleString([locales [, options]])
toLocaleString()
方法返回這個數(shù)字在特定語言環(huán)境下的表示字符串。
var a=1234567894532;
var b=673439.4542;
console.log(a.toLocaleString()); // "1,234,567,894,532"
console.log(b.toLocaleString()); // "673,439.454" (小數(shù)部分四舍五入了)
要注意的是這個函數(shù)在沒有指定區(qū)域的基本使用時,返回使用默認的語言環(huán)境和默認選項格式化的字符串搀绣,所以不同地區(qū)數(shù)字格式可能會有一定的差異飞袋。最好確保使用 locales 參數(shù)指定了使用的語言。
注:我測試的環(huán)境下小數(shù)部分會根據(jù)四舍五入只留下三位链患。
3. 方法三
使用正則表達式和replace函數(shù)巧鸭,相對前兩種我更喜歡這種方法,雖然正則有點難以理解麻捻。
replace 語法:
str.replace(regexp|substr, newSubStr|function)
其中第一個 RegExp
對象或者其字面量所匹配的內(nèi)容會被第二個參數(shù)的返回值替換纲仍。
function numFormat(num){
var res=num.toString().replace(/\d+/, function(n){ // 先提取整數(shù)部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
var a=1234567894532;
var b=673439.4542;
console.log(numFormat(a)); // "1,234,567,894,532"
console.log(numFormat(b)); // "673,439.4542"
參考閱讀:
1.正則表達式30分鐘入門教程
2.String.prototype.replace()