Formatowanie liczb w JavaScript

Opublikowano przez Mirosław Gabruś

W Javie mamy dostępną klasę java.text.DecimalFormat, przy pomocy której możemy zdefiniować sposób wyświetlania liczb.

DecimalFormat df = new DecimalFormat("###,##0.00");
String s = df.format(1234567.89)

Wynikiem powyższego działania jest tekst:  “1 234 567,89”

Podobną funkcjonalność w JavaScript można osiągnąć korzystając z obiektu Number. Przykład użycia:

var liczba = 1234567.89;
var liczba_sformatowana = liczba.toLocaleString('pl-PL',{ 
  useGrouping:true, 
  minimumFractionDigits:2, 
  maximumFractionDigits:2 
});

Wynik działania: 1 234 567,89

Użyte opcje:

  • useGrouping – używam grupowania tysięcy
  • minimumFractionDigist – minimalna liczba cyfr po przecinku
  • maximumFractionDigits – maksymalna liczba cyfr po przecinku

Jeżeli obok liczby chcemy mieć też symbol waluty, parametry określamy następująco:

var liczba2 = liczba.toLocaleString('pl-PL', {
  style:'currency',
  currency:'PLN'
});

Wynikiem powyższego kodu jest ciąg:  1 234 567,89 zł

Opis funkcji wraz z jej pozostałymi parametrami znajdziecie tutaj.

3 komentarze do “Formatowanie liczb w JavaScript”

  2. A co z formatowaniem liczb czterocyfrowych?
    dlaczego toLocaleString() z lokalizacją pl-PL dla liczby 1000 zwraca string “1000”, zamiast “1 000”?
    Czy jest możliwość wymuszenia grupowania przy liczbach czterocyfrowych?

    1. Tak na szybko znalazłem to:
      https://st.unicode.org/cldr-apps/v#/pl/Symbols/70ef5e0c9d323e01
      oraz
      http://cldr.unicode.org/translation/-core-data/numbering-systems

      Zdecydowano, że separator pojawi się jeżeli liczba tysięcy jest minimum dwucyfrowa, tj. 10000 i więcej. Dla wartości tysięcy jednocyfrowych (między 1000 a 9999) nie będzie separatora.

      Jeden z wątków dotyczący tego problemu: https://stackoverflow.com/questions/57628055/tolocalestring-not-working-on-numbers-less-than-10000-in-all-browsers

      W wątku
      https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript

      jest przedstawiona funkcja, która może pomóc w formatowaniu liczb poniżej 10000.

      Kod funkcji:
      function numberWithCommas(n) {
      var parts=n.toString().split(".");
      return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
      }

      Można też wykorzystać plugin do jquery
      https://github.com/customd/jquery-number

Możliwość komentowania została wyłączona.