js千分位实现方法

Posted 2023-05-04

参考技术A

在做大数据可视化需求时，经常遇到比较大、比较长的数据，产品就要求对展示的数字进行 千分位 处理。

注意： toLocaleString 只能针对 Number 类型的数据进行千分位处理

说明： 如果想知道具体怎样的分组方式，可在 https://regexper.com/ 上测试

欢迎访问： 个人博客地址

js处理千分位分割

如何使用js进行千分位分割？正则表达式可以解决。快看看吧~
参考第三方npm库 thousandify 的源码，梳理了一下。
主要方法在thousandify中。

   "use strict";

    let toString = Object.prototype.toString;
    let charsetRegExp = /^[\\d\\.]+$/;
    let defaultOption = 
      thousandSeparator: ",", // 千分位分隔符
      decimalSeparator: ".", // 小数分隔符
      decimalDigits: false, // 小数位数量, false表示不特殊处理
    ;
    function isNumber(target) 
      return toString.call(target) === "[object Number]";
    

    function thousandify(amount, option) 
      let parsedAmount = amount + "";
      if (!charsetRegExp.test(parsedAmount)) 
        return amount;
      
      let options = Object.assign(, defaultOption, option),
        decimalSeparator = options.decimalSeparator,// 小数位分隔符
        thousandSeparator = options.thousandSeparator,// 千分位分隔符
        decimalDigits = options.decimalDigits;// 小数位数
      // 将小数部分与整数部分分隔开
      let amountParts = parsedAmount.split(decimalSeparator);
      // 整数部分，从末尾开始每三位数前面插入千分位
      let intPartStr = amountParts[0].replace(/(?!^)(?=(\\d3)+$)/g, thousandSeparator); 
      // 小数部分
      let decimalStr = amountParts[1] || "";
      // 截取小数位数，不处理精度，仅截取
      if (isNumber(decimalDigits)) 
        decimalStr = decimalStr.substr(0, decimalDigits)
      
      return !!decimalStr ? [intPartStr, decimalStr].join(decimalSeparator) : intPartStr;
    

    console.log(thousandify(182918.928,decimalDigits: 2));

效果图：

注：这只是千分位分割，不处理精度（无四舍五入）。