Formatowanie liczb (miejsca dziesiętne, separatory tysięcy itp.) Za pomocą CSS


121

Czy można formatować liczby za pomocą CSS? To znaczy: miejsca dziesiętne, separator dziesiętny, separator tysięcy itp.


61
Nie możesz, ale naprawdę powinieneś być w stanie. W końcu 50 000, 50000 lub 50 000,00 to te same „dane”, które są po prostu prezentowane w inny sposób, do czego służy CSS.
punkrockbuddyholly

4
@MrMisterMan: Jest tu kilka pomysłów: wiki.csswg.org/ideas/content-formatting#numbers Prawdopodobnie będę nękany i oskarżany o cytowanie „specyfikacji” i wzbudzanie nadziei wszystkich. A mnie ciekawi, jak zostałby potraktowany tekst nienumeryczny.
BoltClock

3
Chociaż zgadzam się, że byłoby miło mieć to, numer jest umieszczony na stronie, która w innym przypadku byłaby zlokalizowana. Oznacza to, że reszta strony jest w języku angielskim, chińskim lub w jakimkolwiek innym języku, a numery powinny być zgodne z tą lokalizacją według IMO. Dlaczego powinny być lokalizowane oddzielnie od reszty strony…?
deceze

@deceze: Masz rację. Powinno być możliwe, aby mieć „CSS” s lokalizacja
Don

1
dodanie opcji JS za pomocą Intl.NumberFormat mdn-ref:
Joshua Baboo

Odpowiedzi:




23

Cóż, dla dowolnych liczb w Javascript używam następnego:

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

i jeśli chcesz użyć innego separatora jako przecinka, na przykład:

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

lub jako funkcja:

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

1
Dzięki. Nie jest to czyste rozwiązanie CSS, ale spełnia swoje zadanie!
Don

Lubię to. Ale musiałem również przekonwertować liczbę na ciąg przed zamianą. Nie możesz zastąpić numeru.
Mardok

przed wywołaniem _number.replacemusimy upewnić się, że jest to ciąg taki jak ten, w _number = typeof _number != "undefined" && _number > 0 ? String(_number) : "";przeciwnym razie otrzymasz błąd _number.replacenie jest zdefiniowany lub nie jest funkcją
Shalkam

3
dlaczego nie użyć po prostu: (123456789) .toLocaleString ('en-GB') lub podobnego?
Joehannes

16

Prawdopodobnie najlepszym sposobem na to jest kombinacja ustawienia rozpiętości z klasą oznaczającą formatowanie, a następnie użycie Jquery .each do formatowania na rozpiętościach, gdy DOM jest ładowany ...


9

Nie, musisz używać javascript, gdy już jest w DOM lub sformatować go po stronie serwera języka (PHP / ruby ​​/ python itp.)


5
Format liczb jest kwestią treści, podobnie jak tekst treści lub inne kwestie notacyjne (np. Notacje daty, które są zależne od języka). Zatem formatowanie liczb jest lokalizacją i powinno być obsługiwane podczas generowania treści. Zrobienie tego w JavaScript ma sens w przypadku części treści, która jest generowana przez JavaScript.
Jukka K. Korpela

W pełni się z tym zgadzam. Dlatego napisałem to w mojej odpowiedzi. Powinienem był prawdopodobnie położyć na to większy nacisk.
mreq

Może to być treść lub prezentacja. Weźmy CSS rtl, który pokazuje te same treści w inny sposób: czy powinien być również traktowany po stronie serwera?
Don

6

Nie odpowiedź, ale jakieś interesujące. Wysłałem propozycję do CSS WG kilka lat temu. Jednak nic się nie stało. Jeśli rzeczywiście oni (i dostawcy przeglądarek) uznaliby to za prawdziwy problem programisty, może kula mogłaby zacząć się toczyć?


2
Dzięki za wkład. Mam nadzieję, że któregoś dnia przyjedzie.
ADJenks

4

Jeśli to pomoże ...

Używam funkcji PHP number_format()i Narrow No-Break Space (  ). Często jest używany jako jednoznaczny separator tysięcy.

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

Ponieważ IE8 ma pewne problemy z renderowaniem Narrow No-Break Space, zmieniłem go na SPAN

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";
.number SPAN{
    padding: 0 1px; 
}

Niestety jest to strona serwera, nastąpiło lekkie uderzenie w procesor, potrzebujemy możliwości edycji maski html / css. Ubieranie i renderowanie powinny być po stronie klienta, chyba że udostępniamy plik PDF?
mckenzm

2

Nie możesz w tym celu używać CSS. Zalecam używanie JavaScript, jeśli ma to zastosowanie. Spójrz na to, aby uzyskać więcej informacji: odpowiednik JavaScript printf / string.format

Również, jak wspomniał Petr, możesz sobie z tym poradzić po stronie serwera, ale to całkowicie zależy od twojego scenariusza.



1

Do formatowania stron JSP można użyć biblioteki znaczników 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>

Wynik

Sformatowana liczba (1): 120 000,23

Sformatowana liczba (2): 000,231

Sformatowana liczba (3): 120 000 231

Sformatowany numer (4): 120000.231

Sformatowana liczba (5): 023%

Sformatowana liczba (6): 12000023,0900000000%

Sformatowana liczba (7): 023%

Sformatowana liczba (8): 120E3

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.