使用 CSS 格式化数字（小数位、千位分隔符等）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8677805/
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 numbers (decimal places, thousands separators, etc) with CSS
提问by Don
Is it possible to format numbers with CSS? That is: decimal places, decimal separator, thousands separator, etc.
是否可以使用 CSS 格式化数字？即：小数位、小数分隔符、千位分隔符等。
采纳答案by CascadiaJS
You can use Number.prototype.toLocaleString(). It can also format for other number formats, e.g. latin, arabic, etc.
您可以使用Number.prototype.toLocaleString(). 它还可以格式化为其他数字格式，例如拉丁语、阿拉伯语等。
回答by Yoann
The CSS working group has publish a Draft on Content Formattingin 2008. But nothing new right now.
CSS 工作组在 2008 年发布了一份内容格式草案。但现在已经不是什么新鲜事了。
回答by Anton Y. Reuchenko
Well, for any numbers in Javascript I use next one:
好吧，对于 Javascript 中的任何数字，我使用下一个：
var a = "1222333444555666777888999";
a = a.replace(new RegExp("^(\d{" + (a.length%3?a.length%3:0) + "})(\d{3})", "g"), " ").replace(/(\d{3})+?/gi, " ").trim();
and if you need to use any other separator as comma for example:
如果您需要使用任何其他分隔符作为逗号，例如：
var sep = ",";
a = a.replace(/\s/g, sep);
or as a function:
或作为一个函数：
function numberFormat(_number, _sep) {
_number = typeof _number != "undefined" && _number > 0 ? _number : "";
_number = _number.replace(new RegExp("^(\d{" + (_number.length%3? _number.length%3:0) + "})(\d{3})", "g"), " ").replace(/(\d{3})+?/gi, " ").trim();
if(typeof _sep != "undefined" && _sep != " ") {
_number = _number.replace(/\s/g, _sep);
}
return _number;
}
回答by Ross
Probably the best way to do so is combo of setting a span with a class denoting your formatting then use Jquery .each to do formatting on the spans when the DOM is loaded...
可能最好的方法是设置一个跨度和一个表示格式的类，然后使用 Jquery .each 在加载 DOM 时对跨度进行格式化......
回答by mreq
No, you have to use javascriptonce it's in the DOM or format it via your language server-side (PHP/ruby/python etc.)
不，您必须在 DOM 中使用javascript或通过您的语言服务器端（PHP/ruby/python 等）对其进行格式化
回答by itpastorn
Not an answer, but perhpas of interest. I did send a proposal to the CSS WGa few years ago. However, nothing has happened. If indeed they (and browser vendors) would see this as a genuine developer concern, perhaps the ball could start rolling?
不是答案，而是兴趣。几年前我确实向CSS WG发送了一份提案。然而，什么也没有发生。如果他们（和浏览器供应商）确实将其视为真正的开发人员关注点，那么球可能会开始滚动？
回答by DanielBlazquez
If it helps...
如果有帮助...
I use the PHP function number_format()and the Narrow No-break Space( ). It is often used as an unambiguous thousands separator.
我使用 PHP 函数number_format()和Narrow No-break Space(  )。它通常用作明确的千位分隔符。
echo number_format(200000, 0, "", " ");
Because IE8 has some problems to render the Narrow No-break Space, I changed it for a SPAN
因为IE8在渲染Narrow No-break Space有一些问题，我把它改成了SPAN
echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";
.number SPAN{
padding: 0 1px;
}
回答by Qorbani
You cannot use CSS for this purpose. I recommend using JavaScript if it's applicable. Take a look at this for more information: JavaScript equivalent to printf/string.format
您不能为此目的使用 CSS。如果适用，我建议使用 JavaScript。看看这个了解更多信息：JavaScript相当于 printf/string.format
Also As Petr mentioned you can handle it on server-side but it's totally depends on your scenario.
另外正如 Petr 提到的，您可以在服务器端处理它，但这完全取决于您的场景。
回答by Florin Fr?tic?
I don't think you can. You could use number_format()if you're coding in PHP. And other programing languages have a function for formatting numbers too.
我不认为你可以。如果您使用 PHP 编码，则可以使用number_format()。其他编程语言也有格式化数字的功能。
回答by Mohammad Javed
You could use Jstl tag Library for formatting for JSP Pages
您可以使用 Jstl 标记库来格式化 JSP 页面
JSP Page
//import the jstl lib
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
<c:set var="balance" value="120000.2309" />
<p>Formatted Number (1): <fmt:formatNumber value="${balance}"
type="currency"/></p>
<p>Formatted Number (2): <fmt:formatNumber type="number"
maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (3): <fmt:formatNumber type="number"
maxFractionDigits="3" value="${balance}" /></p>
<p>Formatted Number (4): <fmt:formatNumber type="number"
groupingUsed="false" value="${balance}" /></p>
<p>Formatted Number (5): <fmt:formatNumber type="percent"
maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (6): <fmt:formatNumber type="percent"
minFractionDigits="10" value="${balance}" /></p>
<p>Formatted Number (7): <fmt:formatNumber type="percent"
maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (8): <fmt:formatNumber type="number"
pattern="###.###E0" value="${balance}" /></p>
Result
结果
Formatted Number (1): ￡120,000.23
格式化数字 (1)：￡120,000.23
Formatted Number (2): 000.231
格式化数字 (2)：000.231
Formatted Number (3): 120,000.231
格式化数字 (3)：120,000.231
Formatted Number (4): 120000.231
格式化数字 (4)：120000.231
Formatted Number (5): 023%
格式化数字 (5)：023%
Formatted Number (6): 12,000,023.0900000000%
格式化数字 (6)：12,000,023.0900000000%
Formatted Number (7): 023%
格式化数字 (7)：023%
Formatted Number (8): 120E3
格式化数字 (8)：120E3
