JS数字每三位加逗号的最简单方法

我们经常遇到如下需要使用JS对数字进行格式化为每三位加一个逗号（JS三位分节法或者叫JS千分位加逗号）以方便阅读。使用JS实现这个功能的方法也有很多。

示例：      人均: 1,923,456.58元

如果你只需要一个简便的方法来完成工作，复制以下代码即可。

<script>

function thousands(num){
        var str = num.toString();
        var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg,"$1,");
}

alert(thousands(1234567.1234567));
alert(thousands(7654321));

</script>

如果你想一起探究，请继续阅读。

方法一【原生】：

<script>

function thousands(num){
    return num.toLocaleString();
}

alert(thousands(1234567.1234567));
alert(thousands(7654321));

</script>

这个方法最为简单，使用JS原生实现。toLocaleString在将数字转换为字符串的同时，会使用三位分节法进行显示。如果是浮点数，只保留小数点后三位数，并进行了四舍五入。如果对结果要求不高，这个算是最简单的实现。

方法二【正则表达式】：

<script>

function thousands(num){
        var str = num.toString();
        var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg,"$1,");
}

alert(thousands(1234567.1234567));
alert(thousands(7654321));

</script>

利用正则表达式，也是代码量较少的一种方法。如果仅考虑整数，或指定位数的小数，可以更加简洁：

保留两位小数：

num.toFixed(2).toString().replace(/(\d)(?=(\d{3})+\.)/g,"$1,");

保留整数：

num.toFixed(0).toString().replace(/(\d)(?=(?:\d{3})+$)/g,"$1,");

方法三【字符串打散】：

<script>

function thousands(num){
	var splits=[],res=[];
	var splits = num.toString().split(".");
	splits[0].split("").reverse().map(function(item,i){
		if(i%3 == 0 && i!=0){ res.push(","); }
		res.push(item);
	});
	return res.reverse().join("")+(splits.length>1 ? "."+splits[1] : "");
}

alert(thousands(1234567.1234567));
alert(thousands(7654321));

</script>

把数字分成整数和小数两部分，然后把整数部分差成单字符数组，反向排列后每3位插入一个逗号（因为逗号是从后向前加）。然后再一次反向排列并合成字符串，加上小数部分就完成了。

如果有保留小数位数的要求，以上方法都可以对参数 num 使用 toFixed(n) 方法，toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。参数 n 规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。

例如，保留两位小数：

<script>

function thousands(num){
	num = num.toFixed(2);//保留两位小数
        var str = num.toString();
        var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg,"$1,");
}

alert(thousands(1234567.1234567));

</script>

还有一些算法大多是与第二，三种方法的类似或结合的使用，不再罗列。