javascript - JavaScrip如何打印以逗号作为千位分隔符的数字

  显示原文与译文双语对照的内容

我试图在 JavaScript 中打印一个整数,并用逗号作为千位分隔符。 例如我想将数字 1234567显示为" 1,234,567"。 我该怎么做?

下面是我的工作方式:


function numberWithCommas(x) {
 x = x.toString();
 var pattern =/(-?d+)(d{3})/;
 while (pattern.test(x))
 x = x.replace(pattern,"$1,$2");
 return x;
}

有更简单或者更优雅的方法来做它? 如果它同时使用浮动也是不错的,但这并不是必需的。 在句点和逗号之间决定不需要是 locale-specific 。

时间:

我已经有了主意,从回答的凯里郡,但是简化它,因为我只是在做简单的东西来达到我的目的。 这是我所做的:


function numberWithCommas(x) {
 return x.toString().replace(/B(?=(d{3})+(?!d))/g,",");
}

这就是你真正需要知道的。

@Neils Bom询问 正规表达式 如何工作。 我的解释有点长。 它将不适合评论,我也不知道其他的地方,所以我在这里做。 如果任何人有其他建议,请告诉我。

正规表达式 使用 2个断言断言: 积极的方法,来查找任何字符串中的一些点之后有一个 3数字在一行中的倍数的时候,仅仅和一个否定断言,以确保点都只有 3位数的倍数。 替换表达式在那里放置逗号。

例如如果你传递" 123456789.01",那么肯定断言将匹配 7 ( 自自"789"是 3位数的倍数,"678"是 3位数的倍数,"567",等等 )的左边的每个位置。 否定断言检查 3位数的倍数在它的后面没有任何数字。 "789"在其后有一个句点,所以它正好是 3位数的倍数,所以一个逗号就会出现。 "678"是 3位数字的倍数,但它有"9"之后,所以 3个数字是一组 4的一部分,逗号不在那里。 类似于" 567"。" 456789"是 6位数字,它是 3的倍数,所以逗号在。 "345678"是 3的倍数,但它有一个"9"之后,所以没有逗号。 以此类推,"b"使 正规表达式 在字符串的开头放置一个逗号。

@neu-rah 提到,如果小数点后有超过 3个数字,这个函数会在不想要的地方添加逗号。 如果这是一个问题,你可以使用这个函数:


function numberWithCommas(x) {
 var parts = x.toString().split(".");
 parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g,",");
 return parts.join(".");
}

我很惊讶没有人提到 Number.prototype.toLocaleString 。 它是在 JavaScript 1.5 ( 在 1999中引入的) 中实现的,所以主要在主要浏览器上支持它。


var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

P.S 。对于使用节点或者浏览器 Numeral.js的用户来说,可能是有趣的。

这是 @mikez302's 答案的变体,但修改为支持十进制( 每个 @neu-rah's 反馈的numberWithCommas(12345.6789) ->"12,345,6,789"而不是"12,345的数字。6789"


function numberWithCommas(n) {
 var parts=n.toString().split(".");
 return parts[0].replace(/B(?=(d{3})+(?!d))/g,",") + (parts[1]?"." + parts[1] :"");
}


function formatNumber (num) {
 return num.toString().replace(/(d)(?=(d{3})+(?!d))/g,"$1,")
}

print(formatNumber(2665));//2,665
print(formatNumber(102665));//102,665
print(formatNumber(111102665));//111,102,665

感谢大家的答复。 我已经构建了一些答案,以生成更多的"one-size-fits-all"解决方案。

第一个代码Fragment中添加一个函数,它效仿 PHPnumber_format() 到数的Prototype 。 如果我正在格式化一个数字,我通常需要小数位,这样函数就可以使用小数位数来显示。 有些国家使用逗号作为小数点和小数作为千位分隔符,因此函数允许这些分隔符被设置。


Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) {
 dec_point = typeof dec_point!== 'undefined'? dec_point : '.';
 thousands_sep = typeof thousands_sep!== 'undefined'? thousands_sep : ',';

 var parts = this.toFixed(decimals).split('.');
 parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, thousands_sep);

 return parts.join(dec_point);
}

你可以使用如下所示:


var foo = 5000;
console.log(foo.numberFormat(2));//us format: 5,000.00
console.log(foo.numberFormat(2, ',', '.'));//european format: 5.000,00

我发现我经常需要得到数学运算的数字,但是parseFloat将 5,000转换为 5,只接受第一个整数值序列。 所以我创建了自己的浮点转换函数并将它的添加到字符串 Prototype 。


String.prototype.getFloat = function(dec_point, thousands_sep) {
 dec_point = typeof dec_point!== 'undefined'? dec_point : '.';
 thousands_sep = typeof thousands_sep!== 'undefined'? thousands_sep : ',';

 var parts = this.split(dec_point);
 var re = new RegExp("[" + thousands_sep +"]");
 parts[0] = parts[0].replace(re, '');

 return parseFloat(parts.join(dec_point));
}

现在你可以使用以下两个函数:


var foo = 5000;
var fooString = foo.numberFormat(2);//The string 5,000.00
var fooFloat = fooString.getFloat();//The number 5000;

console.log((fooString.getFloat() + 1).numberFormat(2));//The string 5,001.00

如果你正在处理货币值和格式化,那么添加小型 accounting.js 来处理许多边缘情况和本地化可能是值得的:


//Default usage:
accounting.formatMoney(12345678);//$12,345,678.00

//European formatting (custom symbol and separators), could also use options object as second param:
accounting.formatMoney(4999.99,"€", 2,".",",");//€4.999,99

//Negative values are formatted nicely, too:
accounting.formatMoney(-500000,"£", 0);//£ -500,000

//Simple `format` string allows control of symbol position [%v = value, %s = symbol]:
accounting.formatMoney(5318008, { symbol:"GBP", format:"%v %s" });//5,318,008.00 GBP

这是一个简单的函数,可以为千位分隔符插入逗号。 它使用数组函数而不是 正规表达式 。


/**
 * Format a number as a string with commas separating the thousands.
 * @param num - The number to be formatted (e.g. 10000)
 * @return A string representing the formatted number (e.g."10,000")
 */
var formatNumber = function(num) {
 var array = num.toString().split('');
 var index = -3;
 while (array.length + index> 0) {
 array.splice(index, 0, ',');
//Decrement by 4 since we just added another unit to the array.
 index -= 4;
 }
 return array.join('');
};

使用的Intl 浏览器object,中的千位分隔符可以插入一个 international-friendly manner:


Intl.NumberFormat().format(1234);
//returns"1,234" if the user's locale is en_US, for example

有关更多信息,请参见文章的文章。你可以指定区域行为或者默认为用户 这一点更加简单,因为它尊重局部差异;许多国家使用句点来分隔数字,而逗号表示小数。

Intl.NumberFormat 在所有浏览器中都不可用,但它在最新的Chrome,Opera,& IE 中工作。 Firefox 发行版的下一个版本应该支持它。 web kit似乎没有实现的时间表。

我认为这个函数将处理与这个问题相关的所有问题。


function commaFormat(inputString) {
 inputString = inputString.toString();
 var decimalPart ="";
 if (inputString.indexOf('.')!= -1) {
//alert("decimal number");
 inputString = inputString.split(".");
 decimalPart ="." + inputString[1];
 inputString = inputString[0];
//alert(inputString);
//alert(decimalPart);

 }
 var outputString ="";
 var count = 0;
 for (var i = inputString.length - 1; i> = 0 && inputString.charAt(i)!= '-'; i--) {
//alert("inside for" + inputString.charAt(i) +"and count=" + count +" and outputString=" + outputString);
 if (count == 3) {
 outputString +=",";
 count = 0;
 }
 outputString += inputString.charAt(i);
 count++;
 }
 if (inputString.charAt(0) == '-') {
 outputString +="-";
 }
//alert(outputString);
//alert(outputString.split("").reverse().join(""));
 return outputString.split("").reverse().join("") + decimalPart;
}

...