將普通的數字轉換為帶千位分隔符格式的數字字符串是一個非常常見的問題,千位分隔符格式的規則是數字的整數部分每三位一組,以“,”分節。小數部分不分節 。
示例:19,351,235.235767
這里有幾個常見的實現方法。
1.方法一
實現思路是將數字轉換為字符數組,再循環整個數組, 每三位添加一個分隔逗號,最后再合并成字符串。因為分隔符在順序上是從后往前添加的:比如 1234567添加后是1,234,567 而不是 123,456,7 ,所以方便起見可以先把數組倒序,添加完之后再倒序回來,就是正常的順序了。要注意的是如果數字帶小數的話,要把小數部分分開處理。
function numFormat(num){
num=num.toString().split("."); // 分隔小數點
var arr=num[0].split("").reverse(); // 轉換成字符數組并且倒序排列
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]){ // 如果有小數的話添加小數部分
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自帶的函數 toLocaleString
語法:
numObj.toLocaleString([locales [, options]])
toLocaleString()
方法返回這個數字在特定語言環境下的表示字符串。
var a=1234567894532;
var b=673439.4542;
console.log(a.toLocaleString()); // "1,234,567,894,532"
console.log(b.toLocaleString()); // "673,439.454" (小數部分四舍五入了)
要注意的是這個函數在沒有指定區域的基本使用時,返回使用默認的語言環境和默認選項格式化的字符串,所以不同地區數字格式可能會有一定的差異。最好確保使用 locales 參數指定了使用的語言。
注:我測試的環境下小數部分會根據四舍五入只留下三位。
3. 方法三
使用正則表達式和replace函數,相對前兩種我更喜歡這種方法,雖然正則有點難以理解。
replace 語法:
str.replace(regexp|substr, newSubStr|function)
其中第一個 RegExp
對象或者其字面量所匹配的內容會被第二個參數的返回值替換。
function numFormat(num){
var res=num.toString().replace(/\d+/, function(n){ // 先提取整數部分
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()