Html 使用 CSS 将数字格式化为货币
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9372624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Formatting a number as currency using CSS
提问by Daniel Imms
Just wondering if anyone knows whether it is possible to format the content of an element as currency using only CSS. It would be nice to have how the value is presented in CSS if possible, can't find anything though so I'm not holding my breath :)
只是想知道是否有人知道是否可以仅使用 CSS 将元素的内容格式化为货币。如果可能的话，在 CSS 中如何呈现值会很好，但找不到任何东西，所以我没有屏住呼吸:)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.dollars:before { content:'$'; }
</style>
</head>
<body>
Pure CSS: <span class="dollars">25153.3</span>
<br />
Ideal format: <span>,153.30</span>
</body>
</html>
That example comes out as:
该示例如下：
Pure CSS: $25153.3
纯 CSS：25153.3 美元
Ideal format: $25,153.30
理想格式：25,153.30 美元
Also I'm aware that it's fairly trivial using javascript - http://css-tricks.com/snippets/javascript/format-currency/.
此外，我知道使用 javascript - http://css-tricks.com/snippets/javascript/format-currency/相当简单。
回答by ozkary
The currency format can be achieved with CSS and a bit of Javascript which is needed for the parsing of the number to add the commas. A CSS class adds the additional styling like negative (red) or currency sign (i.e. $ Dollar sign). The approach is a follows:
货币格式可以通过 CSS 和一些 Javascript 来实现，这是解析数字以添加逗号所需的。CSS 类添加了额外的样式，如负（红色）或货币符号（即 $ 美元符号）。方法如下：
1) Convert the value to number (adds the commas based on the locale)
1) 将值转换为数字（根据语言环境添加逗号）
Number(value).toLocaleString('en');
2) Add a class to determine if it is negative or positive value (i.e. red color)
2）添加一个类来判断它是负值还是正值（即红色）
.enMoney::before {
content:"$";
}
.negMoney {
color:red;
}
See more detail here with the sample code and css:
使用示例代码和 css 在此处查看更多详细信息：
http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html
http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html
回答by Timothy Nwanwene
var number = 25153.3;
console.log(number.toLocaleString());/------
var number = 25153.3;
console.log(number.toLocaleString());/------
var number = 25153.3;
result="$ " + number.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})
console.log(result);
console.log();
//---------------------------------------------------
// request a currency format
console.log(number.toLocaleString('us-US', { style: 'currency', currency: 'USD' }));
// → $ 251,52.30
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 25.152,30
// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥251,53回答by penartur
If you're asking about number formatting in CSS (that is, parsing a number from a string and then formatting it with thousands separator, decimal separator, fixed decimal digits number etc), then no, it is impossible in CSS, and this is not what CSS was designed for.
如果您在 CSS 中询问数字格式（即从字符串中解析数字，然后使用千位分隔符、小数分隔符、固定十进制数字等对其进行格式化），那么不，在 CSS 中这是不可能的，这是不是 CSS 的设计目的。
If you want to do any formatting, then you'd better to use XSLT. For example:
如果要进行任何格式化，那么最好使用 XSLT。例如：
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="span[@class='dollars']">
<span>
<xsl:text>$</xsl:text>
<xsl:value-of select="format-number(current(), '###,###.00')"/>
</span>
</xsl:template>
<xsl:template match="@* | node()">
<xsl:copy>
<xsl:apply-templates select="@* | node()"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
回答by Garet Claborn
Well, this doesn't fit your own use case unfortunately, and it's fairly obvious, but you could do this for integer numbers from -999 to 999.
好吧，不幸的是，这不适合您自己的用例，而且很明显，但是您可以对从 -999 到 999 的整数执行此操作。
.currency:before{ content:'$'; }
.currency:after{ content: '.00'; }<span class="currency">789</span>Then, a possible, annoying, solution if you're working server side, is to convert your number to a reversed string and loop over each character. If you really wanted you could place the characters into li's and css could then do the formatting you wanted as follows. However this is incredibly pointless as you may as well simply author the string at that point.
然后，如果您在服务器端工作，一个可能的、烦人的解决方案是将您的数字转换为反转字符串并循环遍历每个字符。如果您真的想要，您可以将字符放入 li's 中，然后 css 可以按如下方式进行您想要的格式设置。然而，这是非常没有意义的，因为您也可以在那时简单地创作字符串。
.currency li:before{ content: ' ,';}
.currency li:first-child:before{ content:'$' !important; }
.currency *{ display: inline-block; }
.currency, .currency > *{ display: inline-block; }
.currency:after{ content: '.00'; }<ul class="currency"><li>123</li><li>456</li><li>789</li></ul>
<ul class="currency"><li>456</li><li>789</li></ul>
<ul class="currency"><li>789</li></ul> For an even deeper dive into pointless effort, you could prepend a
为了更深入地研究毫无意义的努力，你可以预先准备一个
<style> .currency:after{ content: '.00'; } </style>
above the <ul>, allowing your script to change the decimal value in CSS, lol
在 之上<ul>，允许您的脚本更改 CSS 中的十进制值，哈哈
Still, if you were to cave and use JavaScript, then the CSS may actually be somewhat useful. You can output a plain int or double (any precision) and just have JS break it into <li>s.
尽管如此，如果您愿意使用 JavaScript，那么 CSS 实际上可能会有些用处。您可以输出一个普通的 int 或 double（任何精度），然后让 JS 将其分解为<li>s。
