JS数字千分位格式化：5种实现方案与性能分析

JavaScript数字千分位格式化概述

本文详细讲解了JavaScript中实现数字千分位格式化的多种方案，旨在为开发者提供实用的参考代码与技术解析。

主要目标是使用JavaScript将给定数字转换为千分位格式，例如将“10000”转换为“10,000”，并在实现过程中充分考虑代码的性能因素。

基于数组操作的实现方案

第一种思路是将数字通过toString()转换为字符串，再利用split()将其打散为数组。由于直接转换无法单独获取每一位，因此需要通过循环，从后往前逐个将数组元素插入到新数组的头部（unshift）。在插入过程中，每当索引为3的倍数时，额外插入一个逗号，最后将新数组拼接为字符串。


n=1233456;
toQfw(n);
function toQfw(){
  var arr_n=n.toString().split("");
  var result=[];
  var cs=0;
  for(var i=arr_n.length-1;i>=0;i--){
    cs++;
    result.unshift(arr_n[i]);
    if(!(cs%3)&&i!=0){ //i!=0即取到第1位的时候，前面不用加逗号
        result.unshift(",");
    }
    alert(result.join(""))
  }
};

该方法的缺点在于需要逐位处理，性能较差，且涉及字符串到数组的多次转换，增加了不必要的开销。

纯字符串拼接方案

第二种思路尝试完全基于字符串操作，避免使用数组。通过charAt()获取子字符串，主要依赖字符串拼接来完成格式化。


n=1233456;
toQfw(n);
function toQfw(){
  var str_n=n.toString();
  var result="";
  var cs=0;
  for(var i=str_n.length-1;i>=0;i--){
    cs++;
    result=str_n.charAt(i)+result;
    if(!(cs%3)&&i!=0){
        result=","+result;
    }
    alert(result)
  }
};

此方法虽然避免了数组操作，但依然需要逐位处理，性能提升有限。

无循环的字符串截取方案

第三种思路旨在消除循环，纯利用字符串方法实现。具体做法是每次从原字符串末尾截取三位子字符串，拼接到新字符串中，同时不断截断原字符串的后三位，直到原字符串长度小于三位。最后将剩余的原字符串部分与填充好的新字符串拼接。


n=1233456;
toQfw(n);
function toQfw(){
  var str_n=n.toString();
  var result="";
  while(str_n.length>3){
    result=","+str_n.slice(-3)+result;
    str_n=str_n.slice(0,str_n.length-3)
  }
  if(str_n){
    alert(str_n+result)
  }
};

该方法避免了循环带来的性能损耗，被认为是性能最佳的方案之一。

正则表达式匹配方案

第四种方法利用正则表达式，匹配字符串末尾的三位数字。若匹配成功，则保存后三位并在前面添加逗号，随后将原字符串更新为匹配成功后剩余的左侧部分。此过程循环进行，直到正则表达式匹配到的后三位值与原字符串更新后的值相等，表明所有数字已处理完毕。


n=1233456;
toQfw(n);
function toQfw(){
  var str_n=n.toString();
  var result="";
  var re=/\d{3}$/;
  while(re.test(str_n)){
    result=RegExp.lastMatch+result;
    if(str_n!=RegExp.lastMatch){
      result=","+result;
      str_n=RegExp.leftContext; //匹配成功，返回匹配内容左侧的字符信息
    }
    else{
      num="";
    }
  }
  if(str_n){
    alert(str_n+result);
  }
}

简化版正则表达式方案

第五种是简化版正则表达式，利用前向声明和非前向声明从后往前匹配三位数字。在前向声明的位置替换为逗号。需要注意的是，如果数字位数恰好是3的倍数，首位前也会错误添加逗号，因此需要额外添加非前向声明来避免这种情况。


var str="123598752";
var re=/(?=(?!(\b))(\d{3})+$)/g;
str=str.replace(re,",");
alert(str);

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript实现数字千分位格式化的五种方法对比