web-dev-qa-db-ja.com

CSSを使用した数値のフォーマット（小数点以下の桁数、千単位の区切り記号など）

CSSで数値をフォーマットすることは可能ですか？つまり、小数点以下の桁数、小数点区切り記号、千単位の区切り記号などです。

csscss3number-formatting
110
Don

Number.prototype.toLocaleString()を使用できます。また、他の数値形式用にフォーマットすることもできます。ラテン語、アラビア語など.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

5
CascadiaJS

CSSワーキンググループは、2008年に Content Formatting に関するドラフトを公開しました。しかし、今のところ新しいものはありません。

25
Yoann

さて、Javascriptの数字には次のものを使用します。

var a = "1222333444555666777888999";
a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();

そして、例えばカンマとして他のセパレータを使用する必要がある場合：

var sep = ",";
a = a.replace(/\s/g, sep);

または関数として：

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"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();
    if(typeof _sep != "undefined" && _sep != " ") {
        _number = _number.replace(/\s/g, _sep);
    }
    return _number;
}
23
Anton Y. Reuchenko

おそらくこれを行う最良の方法は、フォーマットを示すクラスでスパンを設定し、DOMがロードされたときにJquery .eachを使用してスパンでフォーマットを行うことの組み合わせです...

16
Ross

いいえ、 javascript をDOMで使用するか、言語サーバー側（PHP/Ruby/pythonなど）でフォーマットする必要があります

8
mreq

答えではありませんが、興味のあるパーパスです。私は CSS WGへの提案 を数年前に送りました。しかし、何も起こりませんでした。実際に彼ら（およびブラウザーベンダー）がこれを真の開発者の関心事と見なすとしたら、おそらくボールは転がり始めるでしょうか？

6
itpastorn

それが役立つ場合...

PHP関数 number_format() および Narrow No-break Space （ ）を使用します。多くの場合、数千の明確な区切り文字として使用されます。

echo number_format(200000, 0, "", " ");

IE8にはNarrow No-break Spaceのレンダリングにいくつかの問題があるため、SPAN用に変更しました

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";

.number SPAN{
    padding: 0 1px; 
}
4
Daniel G. Blázquez

できるとは思わない。 PHPでコーディングしている場合は、 number_format（） を使用できます。また、他のプログラミング言語にも数値をフォーマットする機能があります。

2
Florin Frătică

この目的でCSSを使用することはできません。該当する場合はJavaScriptを使用することをお勧めします。詳細については、こちらをご覧ください： JavaScriptはprintf/string.formatと同等

また、Petrが述べたように、サーバー側で処理することもできますが、シナリオに完全に依存します。

2
Qorbani

JSPページのフォーマットにJstlタグライブラリを使用できます

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>

結果

書式設定された番号（1）：£120,000.23

書式設定された番号（2）：000.231

書式設定された番号（3）：120,000.231

書式設定された番号（4）：120000.231

書式付き数値（5）：023％

書式設定された番号（6）：12,000,023.0900000000％

書式設定された番号（7）：023％

書式設定された番号（8）：120E3

1
Mohammad Javed