將普通的數(shù)字轉(zhuǎn)換為帶千位分隔符格式的數(shù)字字符串是一個(gè)非常常見的問題,千位分隔符格式的規(guī)則是數(shù)字的整數(shù)部分每三位一組,以“,”分節(jié)。小數(shù)部分不分節(jié) 。
示例:19,351,235.235767
這里有幾個(gè)常見的實(shí)現(xiàn)方法。
1.方法一
實(shí)現(xiàn)思路是將數(shù)字轉(zhuǎn)換為字符數(shù)組,再循環(huán)整個(gè)數(shù)組, 每三位添加一個(gè)分隔逗號(hào),最后再合并成字符串。因?yàn)榉指舴陧樞蛏鲜菑暮笸疤砑拥模罕热?1234567添加后是1,234,567 而不是 123,456,7 ,所以方便起見可以先把數(shù)組倒序,添加完之后再倒序回來,就是正常的順序了。要注意的是如果數(shù)字帶小數(shù)的話,要把小數(shù)部分分開處理。
function numFormat(num){
num=num.toString().split("."); // 分隔小數(shù)點(diǎn)
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
語(yǔ)法:
numObj.toLocaleString([locales [, options]])
toLocaleString()
方法返回這個(gè)數(shù)字在特定語(yǔ)言環(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ù)部分四舍五入了)
要注意的是這個(gè)函數(shù)在沒有指定區(qū)域的基本使用時(shí),返回使用默認(rèn)的語(yǔ)言環(huán)境和默認(rèn)選項(xiàng)格式化的字符串,所以不同地區(qū)數(shù)字格式可能會(huì)有一定的差異。最好確保使用 locales 參數(shù)指定了使用的語(yǔ)言。
注:我測(cè)試的環(huán)境下小數(shù)部分會(huì)根據(jù)四舍五入只留下三位。
3. 方法三
使用正則表達(dá)式和replace函數(shù),相對(duì)前兩種我更喜歡這種方法,雖然正則有點(diǎn)難以理解。
replace 語(yǔ)法:
str.replace(regexp|substr, newSubStr|function)
其中第一個(gè) RegExp
對(duì)象或者其字面量所匹配的內(nèi)容會(huì)被第二個(gè)參數(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.正則表達(dá)式30分鐘入門教程
2.String.prototype.replace()