JavaScript数值千分位格式化的两种方法

最新推荐文章于 2023-12-08 23:20:17 发布

转载最新推荐文章于 2023-12-08 23:20:17 发布 · 254 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/clumiere/p/4441519.html

文章标签：

#javascript #ViewUI

本文介绍了使用JavaScript实现数字千分位格式化的两种方法：一种是通过Array.prototype.reduce方法逐位插入逗号；另一种则是利用String.prototype.replace方法配合正则表达式实现。这两种方法均能有效处理数字格式化需求。

在对数值进行格式化的时候，一个常见的问题是按照千分位格式化，网上对这个问题已经有很多种解决方法了，还可以利用Array.prototype.reduce方法来实现千分位格式化。

function formatNumber(num) {
	if (isNaN(num)) {
		throw new TypeError("num is not a number");
	}

	var groups = (/([\-\+]?)(\d*)(\.\d+)?/g).exec("" + num),
		mask = groups[1],                       //符号位
		integers = (groups[2] || "").split(""), //整数部分
		decimal = groups[3] || "",              //小数部分
		remain = integers.length % 3;

	var temp = integers.reduce(function(previousValue, currentValue, index) {
		if (index + 1 === remain || (index + 1 - remain) % 3 === 0) {
			return previousValue + currentValue + ",";
		} else {
			return previousValue + currentValue;
		}
	}, "").replace(/\,$/g, "");
	return mask + temp + decimal;
}

Array的reduce方法在IE9以下不支持，不过，我们可以基于ECMAScript 3来实现一个reduce方法，具体请参考MDN上关于Array.prototype.reduce方法的介绍。

在JavaScript中，字符串的replace方法的匹配模式参数除了字符串以外还可以是一个正则表达式，下面是利用String.prototype.replace方法来实现千分位格式化的具体代码：

function formatNumber(num) {
	if (isNaN(num)) {
		throw new TypeError("num is not a number");
	}

	return ("" + num).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");  
}

(\d{1,3})是一个捕获分组，可以用$1来反向引用，?=(\d{3})+(?:$|\.)是正向断言，表示匹配1到3个数字后面必须跟3个数字，但不含最后的3个数字或者3个数字和小数点。

转载于:https://www.cnblogs.com/clumiere/p/4441519.html