现在我们就来详细讲解“js金额千分位的6种实现方法实例”的完整攻略。
在很多场景下，我们需要显示金融金额，而金融金额的显示习惯是每三个数加一个逗号（英文符号为“,”），以便于人类去识别和理解这个数值，这就是所谓金额千分位。
比如，10000.00元要进行金额千分位转换后为：10,000.00元。
下面我们就来介绍6种实现金额千分位的方法：
function commafy(num) {
num = num + '';
var re = /(-?\d+)(\d{3})/;
while (re.test(num))
num = num.replace(re, '$1,$2')
return num;
}
这个方法是采用正则表达式的方式来实现金额千分位，代码比较简单，并且可以完美的处理负数，但是在处理比较大的数字时，性能会有些问题。
function commafy(num) {
return num.toLocaleString();
}
这个方法是使用JavaScript内置函数toLocaleString()来实现金额千分位，代码很简单，而且可以自动根据不同的地区和语言来显示千分位，但是这个函数并不是所有的浏览器都支持。
function commafy(num) {
if (isNaN(num)) return '';
num = num + '';
var reg = /(-?\d+)(\d{3})/;
while (reg.test(num)) {
num = num.replace(reg, '$1,$2');
}
return num;
}
这个方法是通过算法来实现金额千分位的，比方法一更加高效，并且处理负数和小数点的情况更加准确，但是代码相对来说比较繁琐。
function commafy(num) {
var arr = num.split('.');
var intPart = arr[0].replace(/\B(?=(\d{3})+$)/g, ',');
var decPart = (arr[1] ? '.' + arr[1] : '');
return intPart + decPart;
}
这个方法是与方法三类似，只是代码更加简洁易懂，也比较高效，但是也需要注意小数点的情况。
function commafy(num) {
if (isNaN(num)) return '';
var numArr = num.split('.');
var intPart = numArr[0].replace(/\d(?=(\d{3})+$)/g, (match) => match + ',');
return intPart + (numArr[1] ? '.' + numArr[1] : '');
}
这个方法同样是采用递归算法来实现金额千分位，还是使用了正则表达式来做替换，代码比较简洁高效。
Number.prototype.commafy = function(){
var str = this + ''
var result = str.split('.').join('').split('').reverse().join('').match(/(\d{1,3})/g).join(',').split('').reverse().join('')
if(this < 0) {
result = '-' + result
}
var dotIndex = str.indexOf('.')
if(dotIndex !== -1) {
return result + '.' + str.substring(dotIndex + 1)
} else{
return result
}
}
这个方法是通过自定义Number类型的原型方法来实现金额千分位的，可以在任何数字类型的变量上直接使用该方法来实现，代码比较精简，但可能会造成Number类型的原型链污染，需要考虑到这一点。
下面我们来看一个示例：
const num = 1000000000000000;
console.log(commafy(num)); // 1,000,000,000,000,000
通过调用commay函数来将一个非常大的数字转换为千分位格式后输出。
还有一个更加直接的示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<input type='text' id='input' oninput='changeValue()'>
<script>
function changeValue() {
const inputEl = document.querySelector('#input');
inputEl.value = commafy(inputEl.value);
}
function commafy(num) {
if (isNaN(num)) return '';
var numArr = num.split('.');
var intPart = numArr[0].replace(/\d(?=(\d{3})+$)/g, match => match + ',');
return intPart + (numArr[1] ? '.' + numArr[1] : '');
}
</script>
</body>
</html>
这里我们使用input标签的输入事件来动态的将输入框内的内容变成千分位格式，通过这样的方式，我们可以在页面上类似银行或电商的场景下使用该方法。
本文链接：http://task.lmcjl.com/news/9566.html