Formatowanie liczb w języku Javascript

Formatowanie liczb w języku Javascript

Jeśli w celu sformatowania liczby nadal kopiujesz funkcje znalezione na stackoverflow, to w tym wpisie pokażę Ci, że już ich nie potrzebujesz W dzisiejszych czasach formatowanie liczb w języku Javascript jest niezwykle proste dzięki Intl.NumberFormat.

Formatowanie liczb

W języku Javascript mamy dwa dobre sposby na formatowanie liczb: Number.prototype.toLocaleString i Intl.NumberFormat.

Number.prototype.toLocaleString możemy wywołać bezpośrednio na liczbie.

const num = 10000000;

console.log(num.toLocaleString('pl')); // 10 000 000

Z drugiej strony Intl.NumberFormat pozwala na stworzenie obiektu służącego do formatowania liczb.

const num = 10000000;
const formatter = new Intl.NumberFormat('pl');

console.log(formatter.format(num)); // 10 000 000

Którą z tych dwóch opcji wybrać? W dokumentacji MDN dotyczącej Number.prototype.toLocaleString jest napisane, że mogą pojawić się problemy z wydajnością i wtedy lepiej użyć Intl.NumberFormat, więc lepiej domyślnie zawsze używać Intl.NumberFormat.

Pierwszym argumentem przekazywanym do Intl.NumberFormat jest identyfikator lokalizacji, a jako drugi argument możemy przekazać obiekt z opcjami formatowania. To właśnie w nim określamy sposób wyświetlenia liczby. Formater domyślnie wyświetla 3 liczby po przecinku.

const decimalNum = 1.23456789;
const repeatingDecimal = 1 / 3;
const formatter = new Intl.NumberFormat('pl');

console.log(formatter.format(decimalNum)); // 1,235
console.log(formatter.format(repeatingDecimal)); // 0,333

Można użyć atrybutów minimumFractionDigits i maximumFractionDigits, aby dostosować ilość liczb po przecinku do naszych potrzeb. Te opcje mogą przyjąć liczbę od 0 do 20.

const integerNumber = 1;
const decimalNum = 1.2345;
const repeatingDecimal = 1 / 3;
const formatter = new Intl.NumberFormat(
  'pl', 
  {
    minimumFractionDigits: 2,
    maximumFractionDigits: 5
  }
);

console.log(
  formatter.format(integerNumber)
); // 1,00

console.log(
  formatter.format(decimalNum)
); // 1,2345

console.log(
  formatter.format(repeatingDecimal)
); // 0,33333

Jeśli przekażemy tylko minimumFractionDigits, to maximumFractionDigits przyjmie większą z dwóch wartości – 3 lub minimumFractionDigits. Zauważ, że formater dokonuje za nas zaokrąglenia zgodnie z zasadami matematycznymi (0 – 4 w dół, 5 – 9 w górę)

const integerNumber = 1;
const decimalNum = 1.2345;
const repeatingDecimal = 1 / 3;
const formatter = new Intl.NumberFormat(
  'pl', 
  {
    minimumFractionDigits: 2
  }
);

console.log(
  formatter.format(integerNumber)
); // 1,00 <- minimumFractionDigits = 2

console.log(
  formatter.format(decimalNum)
); // 1,235 <- maximumFractionDigits = 3

console.log(
  formatter.format(repeatingDecimal)
); // 0,333

Na pewno widziałeś kiedyś numercję w takim stylu:

001
002
...
022
...
222

Aby osiągnąć takie formatowanie wystarczy wykorzystać parametr minimumIntegerDigits.

const a = 2;
const b = 22;
const c = 222;
const formatter = new Intl.NumberFormat(
  'pl', 
  {
    minimumIntegerDigits: 3
  }
);

console.log(
  formatter.format(a)
); // 002

console.log(
  formatter.format(b)
); // 022

console.log(
  formatter.format(c)
); // 222

Pozostały już tylko dwa parametry do formatowania liczb: minimumSignificantDigits (domyślnie 1, zakres 1-21) i (domyślnie 21, zakres 1-21). Dzięki nim możemy określić długość sformatowanej liczby. Zwróc uwagę na różnicę między minimumIntegerDigits, a minimumSignificantDigits. Te pierwsze dodaje wiodące zera, te drugie może dodać zera po przecinku.

const a = 2;
const b = 22;
const c = 222;
const formatter = new Intl.NumberFormat(
  'pl', 
  {
    minimumSignificantDigits: 3
  }
);

console.log(
  formatter.format(a)
); // 2,00

console.log(
  formatter.format(b)
); // 22,0

console.log(
  formatter.format(c)
); // 222

Formatowanie liczb jako waluty

Jednym z parametrów, które przyjmuje obiekt opcji Intl.NumberFormat, jest style. Odpowiada za styl formatowania. Domyślną wartością tego parametru jest decimal, czyli formatowanie liczb zmiennoprzecinkowych.

Inną możliwością jest użycie stylu currency pozwalającego na traktowanie liczb jako pieniędzy. Wykorzystanie tego stylu wymaga od nas zdefiniowania docelowej waluty. Robimy to poprzez przekazanie kodu ISO wybranej waluty jako parametr currency.

const price = 25.60;
const plnFormatter = new Intl.NumberFormat(
  'pl', 
  {
    style: 'currency',
    currency: 'PLN'
  }
);

console.log(
  plnFormatter.format(price)
); // 25,60 zł

Możemy też określić sposób wyświetlania waluty za pomocą parametru currencyDisplay (domyślną wartością jest symbol). Mamy 3 możliwości:

  • symbol – zł, €, $, £ ...
  • code – PLN, EUR, USD, GBP ...
  • name - złotego polskiego, euro, dolara amerykańskiego, funta szterlinga ...

Część symboli nie jest dostępna dla niektórych lokalizacji i wtedy zostaje użyty kod ISO. Tak jest na przykład w przypadku polskiej lokalizacji.

const price = 25.60;
const plFormatter = new Intl.NumberFormat(
  'pl', 
  {
    style: 'currency',
    currency: 'usd'
  }
);

const enFormatter = new Intl.NumberFormat(
  'en', 
  {
    style: 'currency',
    currency: 'usd'
  }
);

console.log(
  plFormatter.format(price)
); // 25,60 USD

console.log(
  enFormatter.format(price)
); // $25,60

Podsumowanie

Intl.NumberFormat daje naprawdę duże możliwości formatowania liczb. Dodatkowo jest w pełni wspierane przez każdą przeglądarkę. Gorąco zachęcam do korzystania z tego API, ponieważ do wyświetlania liczb nie potrzebujesz dodatkowych bibliotek.

Pobierz darmowy ebook zawierający 20 pytań, które możesz usłyszeć na rozmowie kwalifikacyjnej