JavaScript 实现数字千分位格式化(每三位加逗号)的六种方法
本文总结了JavaScript中将数字格式化为千分位(每三位加逗号)的六种常见方法。涵盖从基础的数组操作、字符串拼接,到利用正则表达式匹配、截取子串以及分组合并等多种实现思路。文章详细解析了各方法的代码逻辑、性能特点及适用场景,帮助开发者根据实际需求选择最优方案。
方法一
function toThousands(num) {
var result = [ ], counter = 0;
num = (num || 0).toString().split('');
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result.unshift(num[i]);
if (!(counter % 3) && i != 0) { result.unshift(','); }
}
return result.join('');
}该方法的核心逻辑是将输入数字转换为字符串,随后将其拆分为字符数组。接着从数组末尾开始遍历,逐个将元素插入到结果数组(result)的头部。在插入过程中使用计数器(counter)记录已处理元素的数量,每当计数器达到3的倍数且当前不是数组起始位置(即 i 不等于 0)时,便在结果数组头部插入一个逗号。最后,调用结果数组的 join 方法拼接成最终字符串。此方法逻辑直观易懂,曾在项目中实际应用,但从直觉判断,其性能表现可能并不理想。
方法二
function toThousands(num) {
var result = '', counter = 0;
num = (num || 0).toString();
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result = num.charAt(i) + result;
if (!(counter % 3) && i != 0) { result = ',' + result; }
}
return result;
}作为方法一的优化版本,该方法不再将字符串拆分为数组,而是直接对字符串进行操作。通过字符串的拼接方式构建结果,避免了数组操作带来的额外开销。
方法三 - 循环匹配末尾的三个数字
function toThousands(num) {
var num = (num || 0).toString(), re = /\d{3}$/, result = '';
while ( re.test(num) ) {
result = RegExp.lastMatch + result;
if (num !== RegExp.lastMatch) {
result = ',' + result;
num = RegExp.leftContext;
}
else {
num = '';
break;
}
}
if (num) { result = num + result; }
return result;
}这是一种截然不同的算法思路,利用正则表达式循环匹配字符串末尾的三个数字。每次匹配成功后,将匹配到的内容(RegExp.lastMatch)和逗号插入到结果字符串的开头,并将待处理字符串(num)更新为未匹配的部分(RegExp.leftContext)。需要注意的是以下边界情况:
1. 若数字总位数是 3 的倍数,最后一次匹配的内容必然是三个数字,但最前面的三个数字前不应添加逗号; 2. 若数字总位数不是 3 的倍数,循环结束后变量 num 中会剩余 1 到 2 个数字,需将这些剩余数字插入到结果字符串的开头。
尽管方法三通过一次循环处理三个字符减少了循环次数,但由于引入了正则表达式的编译与匹配过程,一定程度上增加了计算消耗。
方法四 - 方法三的字符串版
function toThousands(num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) { result = num + result; }
return result;
}实际上,截取末尾三个字符的功能可以直接利用字符串类型的 slice、substr 或 substring 方法实现。这种方式避免了正则表达式的开销,从而提升了执行效率。
方法五 - 分组合并法
function toThousands(num) {
var num = (num || 0).toString(), temp = num.length % 3;
switch (temp) {
case 1:
num = '00' + num;
break;
case 2:
num = '0' + num;
break;
}
return num.match(/\d{3}/g).join(',').replace(/^0+/, '');
}首先将数字字符串的长度补足为 3 的倍数(通过前置补 0 实现),然后利用正则表达式将其切割为每三个数字一组的数组,再通过 join 方法添加逗号分隔符。最后,需要移除之前补足的 0,以得到正确结果。
方法六 - 懒人法
function toThousands(num) {
return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}一直认为格式化操作可以通过一条正则表达式替换完成,但这通常需要用到断言等高级写法,对正则熟练度要求较高。经搜索发现确实存在这样的正则表达式,这大概是目前代码量最短的实现方式。
到此这篇关于JS格式化数字的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持本站。
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办?常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js,怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26
