CSS ile sayıları biçimlendirme (ondalık basamaklar, binlik ayırıcılar, vb.)

Sayıları CSS ile biçimlendirmek mümkün mü? Yani: ondalık basamaklar, ondalık ayırıcı, binlik ayırıcı vb.

Kullanabilirsiniz Number.prototype.toLocaleString(). Diğer sayı biçimleri için de biçimlendirebilir, örneğin latin, arapça vb.

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

CSS çalışma grubu 2008'de İçerik Biçimlendirmesi üzerine bir Taslak yayınladı . Ancak şu anda yeni bir şey yok.

Peki, Javascript'teki herhangi bir sayı için bir sonrakini kullanıyorum:

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();

ve virgül olarak başka bir ayırıcı kullanmanız gerekirse, örneğin:

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

veya bir işlev olarak:

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;
}

Muhtemelen bunu yapmanın en iyi yolu, biçimlendirmenizi belirten bir sınıfla bir yayılma ayarlamadan sonra DOM yüklendiğinde aralıklar üzerinde biçimlendirme yapmak için Jquery .each'i kullanmaktır ...

Hayır, DOM'a girdikten sonra javascript kullanmanız veya dil sunucusu tarafında (PHP / ruby ​​/ python vb.) Biçimlendirmeniz gerekir.

Bir cevap değil, ama ilgi çekici şeyler. Birkaç yıl önce CSS Çalışma Grubu'na bir teklif gönderdim . Ancak hiçbir şey olmadı. Gerçekten onlar (ve tarayıcı satıcıları) bunu gerçek bir geliştirici endişesi olarak görürlerse, belki de top yuvarlanmaya başlayabilir mi?

Yardımı dokunursa ...

PHP işlevini number_format()ve Dar Bölünmez Boşluğu kullanıyorum (  ) kullanıyorum. Genellikle, kesin olmayan binlik ayırıcı olarak kullanılır.

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

IE8'in Dar Bölünmez Alanı oluşturmak için bazı sorunları olduğundan, onu bir SPAN için değiştirdim

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

.number SPAN{
    padding: 0 1px; 
}

Bu amaçla CSS kullanamazsınız. Mümkünse JavaScript kullanmanızı tavsiye ederim. Daha fazla bilgi için şuna bir göz atın: JavaScript printf / string.format ile eşdeğerdir

Ayrıca Petr'in bahsettiği gibi bunu sunucu tarafında halledebilirsiniz, ancak bu tamamen senaryonuza bağlıdır.

Yapabileceğini sanmıyorum. PHP'de kod yazıyorsanız number_format () kullanabilirsiniz . Ve diğer programlama dillerinin de sayıları biçimlendirme işlevi vardır.

JSP Sayfalarını biçimlendirmek için Jstl etiket Kitaplığını kullanabilirsiniz

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>

Sonuç

Biçimlendirilmiş Numara (1): 120.000,23 £

Biçimlendirilmiş Sayı (2): 000.231

Biçimlendirilmiş Sayı (3): 120,000.231

Biçimlendirilmiş Sayı (4): 120000.231

Biçimlendirilmiş Sayı (5):% 023

Biçimlendirilmiş Sayı (6): 12.000,023.0900000000%

Biçimlendirilmiş Sayı (7):% 023

Biçimlendirilmiş Sayı (8): 120E3