如何将数字格式化为货币字符串
Posted
技术标签:
【中文标题】如何将数字格式化为货币字符串【英文标题】:How to format numbers as currency strings 【发布时间】:2008-09-29 15:00:28 【问题描述】:我想用 javascript 格式化价格。我想要一个将float
作为参数并返回格式如下的string
的函数:
"$ 2,500.00"
最好的方法是什么?
【问题讨论】:
请各位以后阅读本文的人不要使用浮点数来存储货币。您将失去精度和数据。您应该将其存储为整数美分(或便士等),然后在输出之前进行转换。 @user1308743 浮点数不存储小数位。它使用值、基数和偏移量存储数字。 0.01 实际上无法表示。见:en.wikipedia.org/wiki/Floating_point#Accuracy_problems @user1308743:假设你代表一个非常大的数字(假设你是一个幸运的人,这是你的银行账户余额)。你真的会因为精度不足而亏钱吗? 那么为什么没有人提出以下建议? (2500).toLocaleString("en-GB", style: "currency", currency: "GBP", minimumFractionDigits: 2) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 您可以使用这个 Numeral.js javascript 库将您的数字转换为美元。 (numeraljs.com) 供参考。 【参考方案1】:Intl.NumberFormat
JavaScript 有一个数字格式化程序(国际化 API 的一部分)。
// Create our number formatter.
var formatter = new Intl.NumberFormat('en-US',
style: 'currency',
currency: 'USD',
// These options are needed to round to whole numbers if that's what you want.
//minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
//maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
);
formatter.format(2500); /* $2,500.00 */
使用undefined
代替第一个参数(示例中为'en-US'
)以使用系统区域设置(如果代码在浏览器中运行,则为用户区域设置)。 Further explanation of the locale code.
这是list of the currency codes。
Intl.NumberFormat 与 Number.prototype.toLocaleString
最后一个注释,将其与旧的 .toLocaleString
进行比较。它们都提供基本相同的功能。但是,toLocaleString 在其较旧的化身(pre-Intl)does not actually support locales:它使用系统语言环境。因此,在调试旧浏览器时,请确保您使用的是正确的版本 (MDN suggests to check for the existence of Intl
)。如果您不关心旧浏览器或只使用shim,则根本无需担心这一点。
此外,对于一个单个项,两者的性能是相同的,但如果您有很多数字要格式化,使用Intl.NumberFormat
会快约70 倍。因此,通常最好使用Intl.NumberFormat
并且每次页面加载只实例化一次。无论如何,这是toLocaleString
的等效用法:
(2500).toLocaleString('en-US',
style: 'currency',
currency: 'USD',
); /* $2,500.00 */
关于浏览器支持和 Node.js 的一些说明
浏览器支持如今已不再是问题,全球支持率为 98%,美国为 99%,欧盟为 99% 以上 如果你真的需要的话,有一个 shim 可以在化石浏览器上支持它(例如 Internet Explorer 8) v13 之前的 Node.js 仅支持en-US
开箱即用。一种解决方案是安装full-icu,有关更多信息,请参阅here
查看CanIUse 了解更多信息
【讨论】:
投票这个答案是因为它是一个愚蠢的简单答案,可以在本地工作。 相当高的浏览器现在支持这个。这应该得到更多的支持。 这是一个很好的答案,我让它使用动态货币价值,所以如果在欧洲使用,那么它会更改为 EUR 并显示欧元符号。工作一种享受! 现在是 2018 年,基本上到处都支持。这应该是正确的答案。 支持早至 Internet Explorer 11 (IE 11),所有主流浏览器也都支持。【参考方案2】:Number.prototype.toFixed
此解决方案兼容所有主流浏览器:
const profits = 2489.8237;
profits.toFixed(3) // Returns 2489.824 (rounds up)
profits.toFixed(2) // Returns 2489.82
profits.toFixed(7) // Returns 2489.8237000 (pads the decimals)
您只需添加货币符号(例如"$" + profits.toFixed(2)
),您将获得美元金额。
自定义函数
如果你需要在每个数字之间使用,
,你可以使用这个函数:
function formatMoney(number, decPlaces, decSep, thouSep)
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
decSep = typeof decSep === "undefined" ? "." : decSep;
thouSep = typeof thouSep === "undefined" ? "," : thouSep;
var sign = number < 0 ? "-" : "";
var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
var j = (j = i.length) > 3 ? j % 3 : 0;
return sign +
(j ? i.substr(0, j) + thouSep : "") +
i.substr(j).replace(/(\decSep3)(?=\decSep)/g, "$1" + thouSep) +
(decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : "");
document.getElementById("b").addEventListener("click", event =>
document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
);
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>
像这样使用它:
(123456789.12345).formatMoney(2, ".", ",");
如果你总是要使用 '.'和 ',',您可以将它们从您的方法调用中去掉,该方法将为您默认它们。
(123456789.12345).formatMoney(2);
如果您的文化有两个符号翻转(即欧洲人)并且您想使用默认值,只需将以下两行粘贴到 formatMoney
方法中:
d = d == undefined ? "," : d,
t = t == undefined ? "." : t,
自定义函数(ES6)
如果你可以使用现代 ECMAScript 语法(即通过 Babel),你可以使用这个更简单的函数来代替:
function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",")
try
decimalCount = Math.abs(decimalCount);
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
const negativeSign = amount < 0 ? "-" : "";
let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
let j = (i.length > 3) ? i.length % 3 : 0;
return
negativeSign +
(j ? i.substr(0, j) + thousands : '') +
i.substr(j).replace(/(\d3)(?=\d)/g, "$1" + thousands) +
(decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
catch (e)
console.log(e)
;
document.getElementById("b").addEventListener("click", event =>
document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
);
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>
【讨论】:
首先,优秀、简洁的代码。但是,如果您是美国人,则应将d
和t
的默认值分别更改为.
和,
,这样您就不必每次都指定它们。另外,我建议将return
语句的开头修改为:return s + '$' + [rest]
,否则你不会得到美元符号。
不知道为什么人们认为这段代码很漂亮。这是无法解读的。它似乎工作得很好,但它并不漂亮。
这个 formatMoney 函数是从某个地方的一些缩小的 JavaScript 代码中复制而来的吗?不能发原文吗?变量 c、d、i、j、n、s 和 t 代表什么?从这篇文章的赞成票和 cmets 的数量来看,我可以假设这段代码已被复制粘贴到各地的生产网站中......如果有一天它有错误,祝你好运!
“诗歌”?更像是默默无闻。这不是代码高尔夫;使用一点空白。正确的 var 名称也不会受到伤害。
Any fool can write code that a computer can understand. Good programmers write code that humans can understand【参考方案3】:
短而快速的解决方案(适用于任何地方!)
(12345.67).toFixed(2).replace(/\d(?=(\d3)+\.)/g, '$&,'); // 12,345.67
这个解决方案背后的想法是用第一个匹配和逗号替换匹配的部分,即'$&,'
。匹配是使用lookahead approach 完成的。您可以将表达式理解为“匹配一个数字,如果它后跟三个数字集(一个或多个)和一个点的序列”。
测试:
1 --> "1.00"
12 --> "12.00"
123 --> "123.00"
1234 --> "1,234.00"
12345 --> "12,345.00"
123456 --> "123,456.00"
1234567 --> "1,234,567.00"
12345.67 --> "12,345.67"
演示: http://jsfiddle.net/hAfMM/9571/
扩展短解
您还可以扩展Number
对象的原型,以添加对任意小数[0 .. n]
和数字组大小[0 .. x]
的额外支持:
/**
* Number.prototype.format(n, x)
*
* @param integer n: length of decimal
* @param integer x: length of sections
*/
Number.prototype.format = function(n, x)
var re = '\\d(?=(\\d' + (x || 3) + ')+' + (n > 0 ? '\\.' : '$') + ')';
return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
;
1234..format(); // "1,234"
12345..format(2); // "12,345.00"
123456.7.format(3, 2); // "12,34,56.700"
123456.789.format(2, 4); // "12,3456.79"
演示/测试: http://jsfiddle.net/hAfMM/435/
超扩展短解
在这个super extended version中你可以设置不同的分隔符类型:
/**
* Number.prototype.format(n, x, s, c)
*
* @param integer n: length of decimal
* @param integer x: length of whole part
* @param mixed s: sections delimiter
* @param mixed c: decimal delimiter
*/
Number.prototype.format = function(n, x, s, c)
var re = '\\d(?=(\\d' + (x || 3) + ')+' + (n > 0 ? '\\D' : '$') + ')',
num = this.toFixed(Math.max(0, ~~n));
return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
;
12345678.9.format(2, 3, '.', ','); // "12.345.678,90"
123456.789.format(4, 4, ' ', ':'); // "12 3456:7890"
12345678.9.format(0, 3, '-'); // "12-345-679"
演示/测试: http://jsfiddle.net/hAfMM/612/
【讨论】:
我实际上更进一步:.replace(/(\d)(?=(\d3)+(?:\.\d+)?$)/g, "$1,")
.
CoffeeScript 版本,带有 VisioN 和 kalisjoshua 正则表达式以及指定小数位的方式(因此您可以保留默认值 2 或指定 0 表示无小数):Number.prototype.toMoney = (decimal=2) -> @toFixed(decimal).replace /(\d)(?=(\d3)+(?:\.\d+)?$)/g, "$1,"
@Abbas 是的,将\.
替换为$
(行尾),即this.toFixed(0).replace(/(\d)(?=(\d3)+$)/g, "$1,")
。
@hanumant 这里的正则语法有点复杂,所以我建议你先阅读有关正则表达式的手册(例如MDN)。它背后的想法是用第一个匹配和逗号替换匹配的部分,即$1,
。匹配是使用lookahead approach 完成的。您可以将表达式理解为“匹配一个数字,如果它后跟三个数字集(一个或多个)和一个点的序列”。
@JuliendePrabère 请举一个不适合这种方法的长数字示例。【参考方案4】:
查看 JavaScript Number 对象,看看它是否可以帮助您。
toLocaleString()
将使用特定于位置的千位分隔符来格式化数字。
toFixed()
会将数字四舍五入到特定的小数位数。
要同时使用它们,值的类型必须改回数字,因为它们都输出字符串。
例子:
Number((someNumber).toFixed(1)).toLocaleString()
编辑
toLocaleString 可以直接使用,不需要重铸为数字:
someNumber.toLocaleString(undefined, minimumFractionDigits: 2, maximumFractionDigits: 2);
多个数字
如果您需要频繁地对数字进行类似的格式化,您可以创建一个特定的对象以供重复使用。喜欢德语(瑞士):
const money = new Intl.NumberFormat('de-CH',
style:'currency', currency: 'CHF' );
const percent = new Intl.NumberFormat('de-CH',
style:'percent', maximumFractionDigits: 1, signDisplay: "always");
可以用作:
money.format(1234.50); // output CHF 1'234.50
percent.format(0.083); // output +8.3%
非常漂亮。
【讨论】:
谢谢!基于这个想法,我能够制作一个足够短和简单的! (和本地化)非常好。 其实可以的。即对于美元:'$'+(value + 0.001).toLocaleString().slice(0,-1) 看起来不错,但目前浏览器支持很少 应该注意有一个旧版本的toLocaleString
使用系统区域设置,以及一个来自 ECMAScript Intl API 的新版本(不兼容)。 Explained here。这个答案似乎是针对旧版本的。
不知道为什么投票率如此之高,但这并不能满足 OP 的要求。例如,10000
会变成 "10,000"
而不是 "10,000.00"
,这是货币格式化所期望的行为。【参考方案5】:
下面是 Patrick Desjardins (alias Daok) 代码,添加了一些 cmets 和一些小改动:
/*
decimal_sep: character used as decimal separator, it defaults to '.' when omitted
thousands_sep: char used as thousands separator, it defaults to ',' when omitted
*/
Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep)
var n = this,
c = isNaN(decimals) ? 2 : Math.abs(decimals), // If decimal is zero we must take it. It means the user does not want to show any decimal
d = decimal_sep || '.', // If no decimal separator is passed, we use the dot as default decimal separator (we MUST use a decimal separator)
/*
According to [https://***.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function]
the fastest way to check for not defined parameter is to use typeof value === 'undefined'
rather than doing value === undefined.
*/
t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, // If you don't want to use a thousands separator you can pass empty string as thousands_sep value
sign = (n < 0) ? '-' : '',
// Extracting the absolute value of the integer part of the number and converting to string
i = parseInt(n = Math.abs(n).toFixed(c)) + '',
j = ((j = i.length) > 3) ? j % 3 : 0;
return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d3)(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : '');
还有一些测试:
// Some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert(123456789.67392.toMoney() + '\n' + 123456789.67392.toMoney(3) + '\n' + 123456789.67392.toMoney(0) + '\n' + (123456).toMoney() + '\n' + (123456).toMoney(0) + '\n' + 89.67392.toMoney() + '\n' + (89).toMoney());
// Some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert((-123456789.67392).toMoney() + '\n' + (-123456789.67392).toMoney(-3));
细微的变化是:
将Math.abs(decimals)
移动了一点,仅当不是NaN
时才执行。
decimal_sep
不能再是空字符串(某种小数分隔符是必须)
我们按照How best to determine if an argument is not sent to the JavaScript function 中的建议使用typeof thousands_sep === 'undefined'
不需要(+n || 0)
,因为this
是Number
对象
JSFiddle
【讨论】:
您可能希望使用 '10' 作为 parseInt 中的基数。否则,任何以“0”开头的数字都将使用八进制编号。 @sohtimsso1970:很抱歉回复晚了,但你能解释一下吗?我看不出哪里可以将数字解释为八进制。parseInt
在数字的 INTEGER 部分的绝对值上调用。 INTEGER 部分不能以零开头,除非它只是一个零! parseInt(0) === 0
八进制或十进制。
尝试,例如:parseInt("016") ... 返回 14,因为 parseInt 假定它是八进制编码的,当字符串以零开头时。
@Tracker1:我知道以0
开头的数字被parseInt
视为八进制。但在这段代码中,parseInt
不可能接收016
作为输入(或任何其他八进制格式的值),因为传递给parseInt
的参数首先由Math.abs
函数处理。所以parseInt
无法接收以零开头的数字,除非它只是零或0.nn
(其中nn
是小数)。但是0
和0.nn
字符串都将被parseInt
转换成一个简单的零。
这个函数不正确:> (2030).toMoney(0, '.', ' ');
【参考方案6】:
如果金额是一个数字,比如-123
,那么
amount.toLocaleString('en-US', style: 'currency', currency: 'USD' );
将产生字符串"-$123.00"
。
这是一个完整的工作example。
【讨论】:
这个答案对我来说几乎就在那里,但我需要将它四舍五入到最接近的一分钱。这就是我使用的 amount.toLocaleString('en-GB', style: 'currency', currency: 'GBP', maximumFractionDigits: 2 ); 在 Safari 中似乎不起作用。它只是将数字作为字符串返回,没有任何格式。 MDN Documentation 供任何想查看全套选项的人使用。 哇,这是一个非常好的答案。应该是***的。 如果由于某种原因您不想要美分,您可以使用以下命令更改小数精度:minimumFractionDigits: 0
【参考方案7】:
accounting.js 是一个用于数字、货币和货币格式的小型 JavaScript 库。
【讨论】:
...记得传递货币符号,否则在 IE7 和 IE8 中会出错,IE9 都可以 看起来 IE7/IE8 的 bug 已修复。 这是一个很棒的库,能够传递货币符号也是一个好主意,因为所有货币详细信息都包含在单个函数调用/设置中 我喜欢你可以做相反的事情——传递一个格式化的货币字符串并获取数值。 accounting.js 最近似乎没有维护。最近更改的一个分支是github.com/nashdot/accounting-js【参考方案8】:这是我见过的最好的 JavaScript 货币格式化程序:
Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator)
var n = this,
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
decSeparator = decSeparator == undefined ? "." : decSeparator,
thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
sign = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d3)(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
;
它被重新格式化并从这里借用:How to format numbers as currency strings
您必须提供自己的货币代号(您在上面使用了$
)。
这样称呼它(尽管请注意参数默认为 2、逗号和句点,因此如果您愿意,则无需提供任何参数):
var myMoney = 3543.75873;
var formattedMoney = '$' + myMoney.formatMoney(2, ',', '.'); // "$3,543.76"
【讨论】:
注意全局符号,i,j @hacklikecrack,所有变量都是本地的;他们在var
声明中。
抱歉,是的,尽管您正在重新声明参数。缩进! ;)
可怕地使用了变量名!【参考方案9】:
这是另一个尝试,只是为了好玩:
function formatDollar(num)
var p = num.toFixed(2).split(".");
return "$" + p[0].split("").reverse().reduce(function(acc, num, i, orig)
return num + (num != "-" && i && !(i % 3) ? "," : "") + acc;
, "") + "." + p[1];
还有一些测试:
formatDollar(45664544.23423) // "$45,664,544.23"
formatDollar(45) // "$45.00"
formatDollar(123) // "$123.00"
formatDollar(7824) // "$7,824.00"
formatDollar(1) // "$1.00"
formatDollar(-1345) // "$-1,345.00
formatDollar(-3) // "$-3.00"
【讨论】:
诗歌。杰出的。你试过 reduceRight() developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… 应该消除 reverse() 吗? @Steve - 你是对的,但你需要在回调中执行类似i = orig.length - i - 1
的操作。尽管如此,还是少了一次数组遍历。
与兼容性无关:reduce
方法是在 Ecmascript 1.8 中引入的,在 Internet Explorer 8 及更低版本中不受支持。
就像@Blaise 说的,这种方法在IE 8 或更低版本中不起作用。
不适用于负数【参考方案10】:
Works for all current browsers
使用toLocaleString
以语言敏感表示形式格式化货币(使用ISO 4217 货币代码)。
(2500).toLocaleString("en-GB", style: "currency", currency: "GBP", minimumFractionDigits: 2)
示例南非兰德代码 sn-ps for avenmore:
console.log((2500).toLocaleString("en-ZA", style: "currency", currency: "ZAR", minimumFractionDigits: 2))
// -> R 2 500,00
console.log((2500).toLocaleString("en-GB", style: "currency", currency: "ZAR", minimumFractionDigits: 2))
// -> ZAR 2,500.00
【讨论】:
因为 'locales' 和 'options' 参数仅被极少数浏览器支持,例如 Chrome 24、IE11 和 Opera 15。Firefox、Safari 和其他旧版本仍然不支持它。 同意,所有浏览器(目前)还没有完全支持它,但它仍然是一个解决方案。 (并且可以说是最有效的解决方案,因为它与不受支持的浏览器向前兼容,并且它是 Javascript api 的文档化功能。) 我喜欢这个并且很高兴它适用于印度数字分组。 自 2017 年起已完全支持,应该是唯一正确的答案 最新最好的:) FF69、Chrome76等。这里用的不是“R 2 500,00”,应该是“R 2,500.00”,和en-GB一样。【参考方案11】:我想你想要:
f.nettotal.value = "$" + showValue.toFixed(2);
【讨论】:
@crush 这个工作,但它不再将计算带到税收领域? 添加$符号后,它不再是数字,而是字符串。 此选项不会在千位之间放置逗号。 :-(【参考方案12】:好的,根据你说的,我正在使用这个:
var DecimalSeparator = Number("1.2").toLocaleString().substr(1,1);
var AmountWithCommas = Amount.toLocaleString();
var arParts = String(AmountWithCommas).split(DecimalSeparator);
var intPart = arParts[0];
var decPart = (arParts.length > 1 ? arParts[1] : '');
decPart = (decPart + '00').substr(0,2);
return '£ ' + intPart + DecimalSeparator + decPart;
我对改进建议持开放态度(我不希望包含 YUI 只是为了这样做 :-))
我已经知道我应该检测“。”而不是仅仅将其用作小数分隔符...
【讨论】:
请注意,您的版本没有正确四舍五入到两位小数。例如,3.706 将被格式化为“3.70 英镑”,而不是应有的“3.71 英镑”。 是的,在我的特定情况下没关系,因为我正在使用的金额最多已经有 2 位数字我需要固定为 2 位小数的原因是没有小数位或只有 1 位的金额.【参考方案13】:Numeral.js - @adamwdraper 用于轻松数字格式化的 JavaScript 库
numeral(23456.789).format('$0,0.00'); // = "$23,456.79"
【讨论】:
Numbro 叉子似乎得到了更多的喜爱,因为 Numeral.js 似乎被抛弃了:github.com/foretagsplatsen/numbro Numeral.js 再次激活。 我今天正在使用这个解决方案。但是当原始数字中没有十进制数字时,它无论如何都会显示“.00”。是否有允许 2 个十进制数字但在不需要时隐藏它们的格式?【参考方案14】:我使用库Globalize(来自微软):
这是一个很棒的项目,可以本地化数字、货币和日期,并根据用户区域设置自动以正确的方式格式化它们! ...尽管它应该是一个 jQuery 扩展,但它目前是一个 100% 独立的库。建议大家试试看! :)
【讨论】:
哇,为什么没有更多的支持?用于各种格式的大型标准化库。具有正确全球化的行业标准格式参数。很好的答案! 它仍然被认为是 alpha 阶段,所以谨慎使用,但很好的发现。 不再是 alpha(或 beta)。在我们等待 Safari 满足新标准并等待 IE 【参考方案15】:以下内容简洁易懂,不依赖任何过于复杂的正则表达式。
function moneyFormat(price, sign = '$')
const pieces = parseFloat(price).toFixed(2).split('')
let ii = pieces.length - 3
while ((ii-=3) > 0)
pieces.splice(ii, 0, ',')
return sign + pieces.join('')
console.log(
moneyFormat(100),
moneyFormat(1000),
moneyFormat(10000.00),
moneyFormat(1000000000000000000)
)
这是一个在最终输出中包含更多选项的版本,以允许以不同的地区格式格式化不同的货币。
// higher order function that takes options then a price and will return the formatted price
const makeMoneyFormatter = (
sign = '$',
delimiter = ',',
decimal = '.',
append = false,
precision = 2,
round = true,
custom
= ) => value =>
const e = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000]
value = round
? (Math.round(value * e[precision]) / e[precision])
: parseFloat(value)
const pieces = value
.toFixed(precision)
.replace('.', decimal)
.split('')
let ii = pieces.length - (precision ? precision + 1 : 0)
while ((ii-=3) > 0)
pieces.splice(ii, 0, delimiter)
if (typeof custom === 'function')
return custom(
sign,
float: value,
value: pieces.join('')
)
return append
? pieces.join('') + sign
: sign + pieces.join('')
// create currency converters with the correct formatting options
const formatDollar = makeMoneyFormatter()
const formatPound = makeMoneyFormatter(
sign: '£',
precision: 0
)
const formatEuro = makeMoneyFormatter(
sign: '€',
delimiter: '.',
decimal: ',',
append: true
)
const customFormat = makeMoneyFormatter(
round: false,
custom: ( value, float, sign ) => `SALE:$$valueUSD`
)
console.log(
formatPound(1000),
formatDollar(10000.0066),
formatEuro(100000.001),
customFormat(999999.555)
)
【讨论】:
很棒的代码 sn-p,谢谢。但是,要小心,因为它在 IE 上不起作用,因为不支持默认参数,并且javascript-number-formatter(以前的at Google Code)
简短、快速、灵活且独立。 接受标准数字格式,如#,##0.00
或否定-000.####
。
接受任何国家/地区格式,例如# ##0,00
、#,###.##
、#'###.##
或任何类型的非编号符号。
接受任意数量的数字分组。 #,##,#0.000
或 #,###0.##
均有效。
接受任何冗余/万无一失的格式。 ##,###,##.#
或 0#,#00#.###0#
都可以。
自动数字舍入。
简单的界面,只需像这样提供掩码和值:format( "0.0000", 3.141592)
。
在掩码中包含前缀和后缀
(摘自自述文件)
【讨论】:
【参考方案17】:使用正则表达式的更短的方法(用于插入空格、逗号或点):
Number.prototype.toCurrencyString = function()
return this.toFixed(2).replace(/(\d)(?=(\d3)+\b)/g, '$1 ');
n = 12345678.9;
alert(n.toCurrencyString());
【讨论】:
这太棒了!应该是最好的答案,!【参考方案18】:+1 到Jonathan M for providing the original method。由于这是一个明确的货币格式化程序,我继续在输出中添加了货币符号(默认为“$”),并添加了一个默认逗号作为千位分隔符。如果您实际上不需要货币符号(或千位分隔符),只需使用“”(空字符串)作为参数即可。
Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator, currencySymbol)
// check the args and supply defaults:
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces;
decSeparator = decSeparator == undefined ? "." : decSeparator;
thouSeparator = thouSeparator == undefined ? "," : thouSeparator;
currencySymbol = currencySymbol == undefined ? "$" : currencySymbol;
var n = this,
sign = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return sign + currencySymbol + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d3)(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
;
【讨论】:
第一个变量有点奇怪,因为这些变量已经在函数声明中声明了。除此之外,谢谢! 你是对的。这是我从 Jonathan M 的原文中引入的一个错误,它们都被链接为单个 var 表达式。这些应该是简单的任务。修复。 就此而言,我认为这可能是过早的优化,应该重构以提高可读性。但我的目标是扩充 OP 的代码,而不是从根本上改变它。 还不错——+n || 0
是唯一有点奇怪的东西(无论如何对我来说)。
this
是一个非常有用的变量名。将其转换为 n
以便您可以在定义时保存 3 个字符在 RAM 和带宽以 KB 计算的时代可能是必要的,但在缩小器将在它之前处理所有这些的时代仅仅是混淆打击生产。其他巧妙的微优化至少值得商榷。【参考方案19】:
主要部分是插入千位分隔符,可以这样完成:
<script type="text/javascript">
function ins1000Sep(val)
val = val.split(".");
val[0] = val[0].split("").reverse().join("");
val[0] = val[0].replace(/(\d3)/g, "$1,");
val[0] = val[0].split("").reverse().join("");
val[0] = val[0].indexOf(",") == 0 ? val[0].substring(1) : val[0];
return val.join(".");
function rem1000Sep(val)
return val.replace(/,/g, "");
function formatNum(val)
val = Math.round(val*100)/100;
val = ("" + val).indexOf(".") > -1 ? val + "00" : val + ".00";
var dec = val.indexOf(".");
return dec == val.length-3 || dec == 0 ? val : val.substring(0, dec+3);
</script>
<button onclick="alert(ins1000Sep(formatNum(12313231)));">
【讨论】:
我在向 ins1000Sep() 输入负值时得到错误的数字输出。【参考方案20】:php 函数“number_format”有一个 JavaScript 端口。
我觉得它非常有用,因为它易于使用并且 PHP 开发人员可以识别它。
function number_format (number, decimals, dec_point, thousands_sep)
var n = number, prec = decimals;
var toFixedFix = function (n,prec)
var k = Math.pow(10,prec);
return (Math.round(n*k)/k).toString();
;
n = !isFinite(+n) ? 0 : +n;
prec = !isFinite(+prec) ? 0 : Math.abs(prec);
var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;
var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;
var s = (prec > 0) ? toFixedFix(n, prec) : toFixedFix(Math.round(n), prec);
// Fix for Internet Explorer parseFloat(0.55).toFixed(0) = 0;
var abs = toFixedFix(Math.abs(n), prec);
var _, i;
if (abs >= 1000)
_ = abs.split(/\D/);
i = _[0].length % 3 || 3;
_[0] = s.slice(0,i + (n < 0)) +
_[0].slice(i).replace(/(\d3)/g, sep+'$1');
s = _.join(dec);
else
s = s.replace('.', dec);
var decPos = s.indexOf(dec);
if (prec >= 1 && decPos !== -1 && (s.length-decPos-1) < prec)
s += new Array(prec-(s.length-decPos-1)).join(0)+'0';
else if (prec >= 1 && decPos === -1)
s += dec+new Array(prec).join(0)+'0';
return s;
(来自the original 的评论块,包括在下面的示例和到期的信用)
// Formats a number with grouped thousands
//
// version: 906.1806
// discuss at: http://phpjs.org/functions/number_format
// + original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfix by: Michael White (http://getsprink.com)
// + bugfix by: Benjamin Lupton
// + bugfix by: Allan Jensen (http://www.winternet.no)
// + revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + bugfix by: Howard Yeend
// + revised by: Luke Smith (http://lucassmith.name)
// + bugfix by: Diogo Resende
// + bugfix by: Rival
// + input by: Kheang Hok Chin (http://www.distantia.ca/)
// + improved by: davook
// + improved by: Brett Zamir (http://brett-zamir.me)
// + input by: Jay Klehr
// + improved by: Brett Zamir (http://brett-zamir.me)
// + input by: Amir Habibi (http://www.residence-mixte.com/)
// + bugfix by: Brett Zamir (http://brett-zamir.me)
// * example 1: number_format(1234.56);
// * returns 1: '1,235'
// * example 2: number_format(1234.56, 2, ',', ' ');
// * returns 2: '1 234,56'
// * example 3: number_format(1234.5678, 2, '.', '');
// * returns 3: '1234.57'
// * example 4: number_format(67, 2, ',', '.');
// * returns 4: '67,00'
// * example 5: number_format(1000);
// * returns 5: '1,000'
// * example 6: number_format(67.311, 2);
// * returns 6: '67.31'
// * example 7: number_format(1000.55, 1);
// * returns 7: '1,000.6'
// * example 8: number_format(67000, 5, ',', '.');
// * returns 8: '67.000,00000'
// * example 9: number_format(0.9, 0);
// * returns 9: '1'
// * example 10: number_format('1.20', 2);
// * returns 10: '1.20'
// * example 11: number_format('1.20', 4);
// * returns 11: '1.2000'
// * example 12: number_format('1.2000', 3);
// * returns 12: '1.200'
【讨论】:
这只是一个正确的函数: > number_format(2030, 0, '.', ' ') 【参考方案21】:Patrick Desjardins' 的答案看起来不错,但我更喜欢我的 JavaScript 代码简单。这是我刚刚编写的一个函数,用于输入一个数字并以货币格式(减去美元符号)返回它:
// Format numbers to two decimals with commas
function formatDollar(num)
var p = num.toFixed(2).split(".");
var chars = p[0].split("").reverse();
var newstr = '';
var count = 0;
for (x in chars)
count++;
if(count%3 == 1 && count != 1)
newstr = chars[x] + ',' + newstr;
else
newstr = chars[x] + newstr;
return newstr + "." + p[1];
【讨论】:
我需要一些东西可以在浏览器和旧版本的 Node.js 中工作。这非常有效。谢谢【参考方案22】:在 JavaScript 中有一个内置函数 toFixed:
var num = new Number(349);
document.write("$" + num.toFixed(2));
【讨论】:
这个答案看起来是多余的。粉碎的答案已经提到toFixed()
toFixed()
是Number
对象的函数,如果它是String
,则不会在var num
上工作,所以额外的上下文对我有帮助。【参考方案23】:
请尝试以下代码
"250000".replace(/(\d)(?=(\d3)+(?!\d))/g, '$1,');
回答:250,000
【讨论】:
【参考方案24】:function CurrencyFormatted(amount)
var i = parseFloat(amount);
if(isNaN(i)) i = 0.00;
var minus = '';
if(i < 0) minus = '-';
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) s += '.00';
if(s.indexOf('.') == (s.length - 2)) s += '0';
s = minus + s;
return s;
来自WillMaster。
【讨论】:
小而简单。谢谢。 简单,但 1,000 没有逗号【参考方案25】:我建议使用 Google Visualization API 的 NumberFormat 类。
你可以这样做:
var formatter = new google.visualization.NumberFormat(
prefix: '$',
pattern: '#,###,###.##'
);
formatter.formatValue(1000000); // $ 1,000,000
【讨论】:
【参考方案26】:只使用原生javascript Inlt
你只需使用选项来格式化它的值
const number = 1233445.5678
console.log(new Intl.NumberFormat('en-US', style: 'currency', currency: 'USD' ).format(number));
mozilla documentation link
【讨论】:
你对这个答案有什么不同吗? ***.com/a/16233919/1000608【参考方案27】:通常,有多种方法可以做同样的事情,但我会避免使用Number.prototype.toLocaleString
,因为它可以根据用户设置返回不同的值。
我也不建议扩展 Number.prototype
- 扩展原生对象原型是一种不好的做法,因为它可能会导致与其他人的代码(例如库/框架/插件)发生冲突,并且可能与未来的 JavaScript 实现不兼容/版本。
我相信正则表达式是解决问题的最佳方法,这是我的实现:
/**
* Converts number into currency format
* @param number number Number that should be converted.
* @param string [decimalSeparator] Decimal separator, defaults to '.'.
* @param string [thousandsSeparator] Thousands separator, defaults to ','.
* @param int [nDecimalDigits] Number of decimal digits, defaults to `2`.
* @return string Formatted string (e.g. numberToCurrency(12345.67) returns '12,345.67')
*/
function numberToCurrency(number, decimalSeparator, thousandsSeparator, nDecimalDigits)
//default values
decimalSeparator = decimalSeparator || '.';
thousandsSeparator = thousandsSeparator || ',';
nDecimalDigits = nDecimalDigits == null? 2 : nDecimalDigits;
var fixed = number.toFixed(nDecimalDigits), //limit/add decimal digits
parts = new RegExp('^(-?\\d1,3)((?:\\d3)+)(\\.(\\d'+ nDecimalDigits +'))?$').exec( fixed ); //separate begin [$1], middle [$2] and decimal digits [$4]
if(parts) //number >= 1000 || number <= -1000
return parts[1] + parts[2].replace(/\d3/g, thousandsSeparator + '$&') + (parts[4] ? decimalSeparator + parts[4] : '');
else
return fixed.replace('.', decimalSeparator);
【讨论】:
toLocaleString 的关键在于它确实会根据用户的设置进行调整。【参考方案28】:这可能有点晚了,但这是我刚刚为一位同事设计的一种方法,可以为所有数字添加一个区域设置感知 .toCurrencyString()
函数。内部化仅用于数字分组,不是货币符号 - 如果您输出美元,请使用提供的 "$"
,因为在日本或中国,$123 4567
与 @ 的美元数相同987654324@ 在美国。如果您输出欧元等,则将货币符号从"$"
更改。
在您的 html
部分的任何地方或任何需要的地方声明它,就在您需要使用它之前: Number.prototype.toCurrencyString = function(prefix, suffix)
if (typeof prefix === 'undefined') prefix = '$';
if (typeof suffix === 'undefined') suffix = '';
var _localeBug = new RegExp((1).toLocaleString().replace(/^1/, '').replace(/\./, '\\.') + "$");
return prefix + (~~this).toLocaleString().replace(_localeBug, '') + (this % 1).toFixed(2).toLocaleString().replace(/^[+-]?0+/,'') + suffix;
那么你就完成了!在需要将数字输出为货币的任何地方使用(number).toCurrencyString()
。
var MyNumber = 123456789.125;
alert(MyNumber.toCurrencyString()); // alerts "$123,456,789.13"
MyNumber = -123.567;
alert(MyNumber.toCurrencyString()); // alerts "$-123.57"
【讨论】:
【参考方案29】:Number(value)
.toFixed(2)
.replace(/(\d)(?=(\d3)+(?!\d))/g, "$1,")
【讨论】:
解释一下。例如,9 年(当时)过去 50 多个答案中的任何一个都没有涵盖它?【参考方案30】:这里有一些解决方案,都通过了测试套件。包括测试套件和基准。如果你想复制粘贴来测试,试试this gist。
方法 0(正则表达式)
它基于VisioN's answer,但如果没有小数点,它会修复。
if (typeof Number.prototype.format === 'undefined')
Number.prototype.format = function (precision)
if (!isFinite(this))
return this.toString();
var a = this.toFixed(precision).split('.');
a[0] = a[0].replace(/\d(?=(\d3)+$)/g, '$&,');
return a.join('.');
方法一
if (typeof Number.prototype.format === 'undefined')
Number.prototype.format = function (precision)
if (!isFinite(this))
return this.toString();
var a = this.toFixed(precision).split('.'),
// Skip the '-' sign
head = Number(this < 0);
// Skip the digits that's before the first thousands separator
head += (a[0].length - head) % 3 || 3;
a[0] = a[0].slice(0, head) + a[0].slice(head).replace(/\d3/g, ',$&');
return a.join('.');
;
方法2(拆分为数组)
if (typeof Number.prototype.format === 'undefined')
Number.prototype.format = function (precision)
if (!isFinite(this))
return this.toString();
var a = this.toFixed(precision).split('.');
a[0] = a[0]
.split('').reverse().join('')
.replace(/\d3(?=\d)/g, '$&,')
.split('').reverse().join('');
return a.join('.');
;
方法3(循环)
if (typeof Number.prototype.format === 'undefined')
Number.prototype.format = function (precision)
if (!isFinite(this))
return this.toString();
var a = this.toFixed(precision).split('');
a.push('.');
var i = a.indexOf('.') - 3;
while (i > 0 && a[i-1] !== '-')
a.splice(i, 0, ',');
i -= 3;
a.pop();
return a.join('');
;
使用示例
console.log('======== Demo ========')
console.log(
(1234567).format(0),
(1234.56).format(2),
(-1234.56).format(0)
);
var n = 0;
for (var i=1; i<20; i++)
n = (n * 10) + (i % 10)/100;
console.log(n.format(2), (-n).format(2));
分隔符
如果我们想要自定义千位分隔符或小数分隔符,请使用replace()
:
123456.78.format(2).replace(',', ' ').replace('.', ' ');
测试套件
function assertEqual(a, b)
if (a !== b)
throw a + ' !== ' + b;
function test(format_function)
console.log(format_function);
assertEqual('NaN', format_function.call(NaN, 0))
assertEqual('Infinity', format_function.call(Infinity, 0))
assertEqual('-Infinity', format_function.call(-Infinity, 0))
assertEqual('0', format_function.call(0, 0))
assertEqual('0.00', format_function.call(0, 2))
assertEqual('1', format_function.call(1, 0))
assertEqual('-1', format_function.call(-1, 0))
// Decimal padding
assertEqual('1.00', format_function.call(1, 2))
assertEqual('-1.00', format_function.call(-1, 2))
// Decimal rounding
assertEqual('0.12', format_function.call(0.123456, 2))
assertEqual('0.1235', format_function.call(0.123456, 4))
assertEqual('-0.12', format_function.call(-0.123456, 2))
assertEqual('-0.1235', format_function.call(-0.123456, 4))
// Thousands separator
assertEqual('1,234', format_function.call(1234.123456, 0))
assertEqual('12,345', format_function.call(12345.123456, 0))
assertEqual('123,456', format_function.call(123456.123456, 0))
assertEqual('1,234,567', format_function.call(1234567.123456, 0))
assertEqual('12,345,678', format_function.call(12345678.123456, 0))
assertEqual('123,456,789', format_function.call(123456789.123456, 0))
assertEqual('-1,234', format_function.call(-1234.123456, 0))
assertEqual('-12,345', format_function.call(-12345.123456, 0))
assertEqual('-123,456', format_function.call(-123456.123456, 0))
assertEqual('-1,234,567', format_function.call(-1234567.123456, 0))
assertEqual('-12,345,678', format_function.call(-12345678.123456, 0))
assertEqual('-123,456,789', format_function.call(-123456789.123456, 0))
// Thousands separator and decimal
assertEqual('1,234.12', format_function.call(1234.123456, 2))
assertEqual('12,345.12', format_function.call(12345.123456, 2))
assertEqual('123,456.12', format_function.call(123456.123456, 2))
assertEqual('1,234,567.12', format_function.call(1234567.123456, 2))
assertEqual('12,345,678.12', format_function.call(12345678.123456, 2))
assertEqual('123,456,789.12', format_function.call(123456789.123456, 2))
assertEqual('-1,234.12', format_function.call(-1234.123456, 2))
assertEqual('-12,345.12', format_function.call(-12345.123456, 2))
assertEqual('-123,456.12', format_function.call(-123456.123456, 2))
assertEqual('-1,234,567.12', format_function.call(-1234567.123456, 2))
assertEqual('-12,345,678.12', format_function.call(-12345678.123456, 2))
assertEqual('-123,456,789.12', format_function.call(-123456789.123456, 2))
console.log('======== Testing ========');
test(Number.prototype.format);
test(Number.prototype.format1);
test(Number.prototype.format2);
test(Number.prototype.format3);
基准测试
function benchmark(f)
var start = new Date().getTime();
f();
return new Date().getTime() - start;
function benchmark_format(f)
console.log(f);
time = benchmark(function ()
for (var i = 0; i < 100000; i++)
f.call(123456789, 0);
f.call(123456789, 2);
);
console.log(time.format(0) + 'ms');
// If not using async, the browser will stop responding while running.
// This will create a new thread to benchmark
async = [];
function next()
setTimeout(function ()
f = async.shift();
f && f();
next();
, 10);
console.log('======== Benchmark ========');
async.push(function () benchmark_format(Number.prototype.format); );
next();
【讨论】:
从您的方法改进 2. 从 var a = this.toFixed(precision).split('.') 更改为 var multiplier = Math.pow( 10, precision + 1 ), wholeNumber = Math.floor(这个*乘数); var a = Math.round( WholeNumber / 10 ) * 10 / 乘数; if (String(a).indexOf('.') console.log(parseFloat('4.835').toFixed(2)); > 4.83 控制台.log(parseFloat('54.835').toFixed(2)); > 54.84 控制台.log(parseFloat('454.835').toFixed(2)); > 454.83 控制台.log(parseFloat('8454.835').toFixed(2)); > 8454.83 所有这些值的小数点应该是 .84 而不是 .83以上是关于如何将数字格式化为货币字符串的主要内容,如果未能解决你的问题,请参考以下文章