JavaScript实现数字千分位格式化的5种方法

JavaScript数字千分位格式化概述

本文分享了JavaScript中将数值转换为千分位格式的具体实现方案，供开发者参考与学习。

数字千分位转换的5种实现方案

虽然距离春节尚有两个月，春运购票热潮已至。在浏览某浏览器界面时，看到界面数字显示，联想到一道经典面试题：数字千分位转换。例如，将87463297转换为87,463,297的形式。实现该功能的方法多样，本文仅列举其中5种常见思路。

基于零宽断言的正则表达式方案

第一种方法基于正则表达式的零宽度正预测先行断言(?=exp)。该断言用于匹配自身位置后能成功匹配表达式exp的位置。千分位的核心特征是首个逗号后的数字个数必为3的倍数，对应正则/(\d{3})+$/；首个逗号前的数字个数可为1至3个，对应正则/\d{1,3}/。组合后的完整正则模式为/\d{1,3}(\d{3})+$/。由于分隔符需从前往后添加，需将前导数字“87”替换为“87,”。若匹配“874”，其后仅剩5位数字，在“632”后添加分隔符将导致末尾“97”不符合千分位规则，因此首个分隔符后的数字位数必须严格为3的倍数。为了在匹配“87”的同时确保其后数字位数为3的倍数，并执行替换操作，需引入(?=exp)断言。此处定义变量var str = "87463297";用于后续处理。

// 零宽断言
console.info( str.replace(/\d{1,3}(?=(\d{3})+$)/g,function(s){
  return s+','
}) )

基于子项替换的正则方案

第二种方法利用正则表达式的子项进行替换，其逻辑与第一种方法相似。

// 子项
console.info( str.replace(/(\d{1,3})(?=(\d{3})+$)/g,function($1){
  return $1=$1+','
}) )

基于数组反转与字符串拼接方案

第三种方法先将字符串转换为数组，利用reverse()方法反转数组后，每隔3个数字添加一个分隔符“,”（字符串末尾除外），最后将数组重新拼接为字符串。

// 利用字符串和数组方法
console.info( str.split("").reverse().join("").replace(/(\d{3})+?/g,function(s){
  return s+",";
}).replace(/,$/,"").split("").reverse().join("") )

基于while循环字符串拼接方案

第四种方法通过while循环拼接字符串，每隔3个数字插入一个分隔符，首尾位置不添加分隔符。

// 利用循环拼接字符串每隔3个加一个分隔符
var result="",
  index = 0,
  len = str.length-1;
while(len>=0) {
  index%3===0&&index!==0 ? result+=","+str[len] : result+=str[len];
  len--;
  index++;
};
result=result.split("").reverse().join("");
console.info(result);

基于while循环数组插入分隔符方案

第五种方法同样使用while循环，但在数组中通过push或splice方式插入分隔符，同样确保首尾不添加分隔符。

// 利用while循环在数组里push分隔符
var result="",
  index = 0,
  len = str.length,
  i = len-1,
  arr = str.split("");
while(len-index>0){
  len>=index&&len-index!==len && arr.splice(len-index,0,",");
  index+=3;
  i-=4;
};
console.log(arr.join(""));

方案总结与源码获取

总结而言，第一种方法代码最为简洁，且执行性能最佳，建议在实际开发中优先使用。文中附有所有示例的demo源码下载链接，若读者有其他更简便高效的实现方式，欢迎交流分享。

如需进一步了解JavaScript相关知识，可参考本站专题：《JavaScript数学运算用法总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript遍历算法与技巧总结》。

希望本文提供的JavaScript程序设计技巧能对读者有所帮助。