我试图在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;
}
有更简单或更优雅的方式吗?如果它也适用于浮点数会很好,但这不是必需的 . 它不需要特定于语言环境来决定句点和逗号 .
30 回答
可以使用浏览器的
Intl
对象以国际友好的方式插入千位分隔符:有关更多信息,请参阅MDN's article on NumberFormat,您可以指定区域设置行为或默认为用户的行为 . 这更加万无一失,因为它尊重当地的差异;许多国家使用句点来分隔数字,而逗号表示小数 .
Intl.NumberFormat尚未在所有浏览器中提供,但它适用于最新的Chrome,Opera和IE . Firefox的下一个版本应该支持它 . Webkit似乎没有实现的时间表 .
我认为这是最短的正则表达式:
我检查了几个数字,它工作 .
在写这篇文章之前,我写了这篇文章 . 没有正则表达式,你可以真正理解代码 .
您可以使用此过程来格式化您需要的货币 .
有关详细信息,您可以访问此链接 .
https://www.justinmccandless.com/post/formatting-currency-in-javascript/
这是@ mikez302的答案的变体,但修改为支持带小数的数字(根据@ neu-rah的反馈,numberWithCommas(12345.6789) - >“12,345.6,789”而不是“12,345.6789”
我认为这个功能将处理与此问题相关的所有问题 .
Using Regular expression
Using toLocaleString()
ref MDN:Number.prototype.toLocaleString()
Using Intl.NumberFormat()
ref Intl.NumberFormat
DEMO AT HERE
Performance
http://jsben.ch/sifRd
Intl.NumberFormat
原生JS功能 . 由IE11,Edge,最新的Safari,Chrome,Firefox,Opera,iOS上的Safari和Android上的Chrome提供支持 .
这是一个简单的函数,可以为千位分隔符插入逗号 . 它使用数组函数而不是RegEx .
CodeSandbox链接示例:https://codesandbox.io/s/p38k63w0vq
我添加了tofixed到 Aki143S 的解决方案 . 此解决方案使用数千个分隔符的点和精度的逗号 .
例子;
如果您正在处理货币值和格式化很多,那么可能值得添加处理大量边缘情况和本地化的微小accounting.js:
以下是编码较少的好解决方案......
Number.prototype.toLocaleString()
如果它是由所有浏览器(Safari)本地提供的话会很棒 .我检查了所有其他答案,但似乎没有人填充它 . 这是对此的poc,实际上是前两个答案的组合;如果
toLocaleString
工作则使用它,如果它不使用自定义功能 .我建议使用phpjs.org的number_format()
UPDATE 02/13/14
人们一直在报告这不能按预期工作,所以我做了一个包含自动化测试的JS Fiddle .
Update 26/11/2017
这里的小提琴作为一个稍微修改输出的Stack Snippet:
已经有很多好的答案了 . 这是另一个,只是为了好玩:
一些例子:
来自@ user1437663的解决方案非常棒 .
谁真正了解解决方案正准备理解复杂的正则表达式 .
一个小的改进,使其更具可读性:
该模式以 \B 开头,以避免在单词的开头使用逗号 . 有趣的是,模式返回为空,因为 \B 没有提前"cursor"(同样适用于 $ ) .
O \B 之后是一个鲜为人知的资源,但它是Perl正则表达式的强大功能 .
神奇的是括号中的内容(Pattern2)是一个跟随前一个模式(Pattern1)的模式,但没有推进光标,也不是返回模式的一部分 . 这是一种未来的模式 . 当有人期待但真的不走路时,情况就像这样!
在这种情况下,pattern2是
它表示3位数(一次或多次),后跟字符串的结尾($)
最后, Replace 方法更改所有出现的模式(空字符串)以用于逗号 . 这只发生在剩余部分是3位数的倍数的情况下(未来光标到达原点的末尾的情况) .
让我试着改善uKolka的answer,也许可以帮助别人节省一些时间 .
使用Numeral.js .
只有当browser compatibilty不是问题时,才应该使用Number.prototype.toLocaleString() .
对我来说,最好的答案是像一些成员所说的那样使用toLocaleString . 如果你想要包含'$'符号,只需添加语言和类型选项 . 这是以及将数字格式化为墨西哥比索的示例
捷径
我以为我会分享一些我用于大量格式化的小技巧 . 我没有插入逗号或空格,而是在“千”之间插入一个空但可见的 Span . 这使数千个容易看到,但它允许以原始格式复制/粘贴输入,没有逗号/空格 .
有了这个CSS:
查看示例JSFiddle.
⚠请注意,javascript的maximum integer值为 9007199254740991
toLocaleString:
NumberFormat(不支持Safari):
根据我的检查(至少是Firefox),它们在性能方面或多或少相同 .
我认为你的解决方案是我见过的较短的解决方案之一 . 我不认为有任何标准的JavaScript函数来做这种事情,所以你可能是你自己的 .
我检查了CSS 3规范,看看是否可以在CSS中执行此操作,但除非您想要自己的
<span>
中的每个数字,否则我不可能 .我确实在Google Code上发现了一个看起来很有希望的项目:flexible-js-formatting . 我没有使用它,但它看起来非常灵活,并使用JsUnit进行单元测试 . 开发人员也有很多关于这个主题的帖子(虽然很旧) .
请务必考虑国际用户:许多国家/地区使用空格作为分隔符,并使用逗号将小数与数字的整数部分分开 .
我使用了克里答案的想法,但简化了它,因为我只是为了我的特定目的而寻找简单的东西 . 这是我做的:
这是你真正需要知道的 .
@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位以上的数字,这个函数会在不受欢迎的地方添加逗号 . 如果这是一个问题,您可以使用此功能:
另一种方法,支持小数,不同的分隔符和负数 .
这是我的尝试:
编辑:小数点后添加
感谢大家的回复 . 我已经 Build 了一些答案,以制定更“一刀切”的解决方案 .
第一个片段添加了一个模拟PHP的
number_format()
到Number原型的函数 . 如果我格式化一个数字,我通常需要小数位,所以该函数需要显示小数位数 . 有些国家使用逗号作为十进制和小数作为千位分隔符,因此该函数允许设置这些分隔符 .您将使用如下:
我发现我经常需要为数学运算得到数字,但是parseFloat将5,000转换为5,只需取第一个整数值序列 . 所以我创建了自己的浮点转换函数并将其添加到String原型中 .
现在您可以使用以下两种功能:
我很惊讶没人提到Number.prototype.toLocaleString . 它主要支持主流浏览器's implemented in JavaScript 1.5 (which was introduced in 1999) so it' .
通过包含Intl,它也适用于v0.12的Node.js
注意这个函数返回字符串而不是数字
如果你想要不同的东西,Numeral.js可能会很有趣 .
如果您在删除时选择范围,我也可以使用've adapted your code to work in TextBox (Input type= 377295 ) so we can enter and delete digits in real time without losing cursor. It' . 您可以自由使用箭头和主页/结束按钮 .
谢谢你节省我的时间!
要使用它,只需添加两个事件 - onKeyUp和onKeyDown
以下代码使用char扫描,因此没有正则表达式 .
它表现出了良好的表现:http://jsperf.com/number-formatting-with-commas/5
2015.4.26:当num <0时解决问题的次要修复 . 见https://jsfiddle.net/runsun/p5tqqvs3/