js金额千分位的6种实现方法实例

2023年5月28日上午7:21 • JavaScript

现在我们就来详细讲解“js金额千分位的6种实现方法实例”的完整攻略。

什么是金额千分位？

在很多场景下，我们需要显示金融金额，而金融金额的显示习惯是每三个数加一个逗号（英文符号为“,”），以便于人类去识别和理解这个数值，这就是所谓金额千分位。

比如，10000.00元要进行金额千分位转换后为：10,000.00元。

6种实现金额千分位的方法

下面我们就来介绍6种实现金额千分位的方法：

方法一：正则表达式

function commafy(num) {
  num = num + '';
  var re = /(-?\d+)(\d{3})/;
  while (re.test(num))
  num = num.replace(re, '$1,$2')
  return num;
}

这个方法是采用正则表达式的方式来实现金额千分位，代码比较简单，并且可以完美的处理负数，但是在处理比较大的数字时，性能会有些问题。

方法二：toLocalString

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类型的方法

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标签的输入事件来动态的将输入框内的内容变成千分位格式，通过这样的方式，我们可以在页面上类似银行或电商的场景下使用该方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js金额千分位的6种实现方法实例 - Python技术站