Intl.NumberFormat

Formatuje liczby zgodnie z zasadami danego języka: separatory, waluty, procenty i jednostki.

Zwraca
Obiekt formatera z metodą format() (oraz formatToParts()).
Na tej stronie

Przykład

#
JavaScript
const price = new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' })

console.log(price.format(49))
console.log(price.format(1299.5))
console.log(new Intl.NumberFormat('pl-PL').format(1234567.891))
Konsola
49,00 zł
1299,50 zł
1 234 567,891

Definicja i zastosowanie

#

Intl.NumberFormat to wbudowany formater liczb, który zna zwyczaje zapisu w różnych językach i krajach. W Polsce część dziesiętną oddziela się przecinkiem, a tysiące spacją, a w USA część dziesiętną oddziela kropka, a tysiące przecinek. Zamiast pisać to ręcznie, tworzysz formater dla wybranego języka i wywołujesz jego metodę format().

Opcja style określa rodzaj liczby: "decimal" (domyślnie), "currency" dla kwot (wymaga waluty, np. currency: "PLN"), "percent" dla procentów (wartość 0.85 da „85%”) i "unit" dla jednostek. Opcje minimumFractionDigits i maximumFractionDigits ustalają liczbę miejsc po przecinku, a notation: "compact" skraca duże liczby, np. do „1,5 tys.”.

Utworzenie formatera trochę kosztuje, więc jeśli formatujesz wiele liczb, utwórz go raz i używaj wielokrotnie. Do jednorazowego użycia wystarczy krótsza metoda liczb toLocaleString(), która przyjmuje te same opcje.

Składnia

#
Składnia
new Intl.NumberFormat(locales)
new Intl.NumberFormat(locales, options)

formatter.format(number)

Parametry

#
  • locales

    opcjonalny, napis lub tablica

    Kod języka, np. "pl-PL", "en-US" albo "de-DE". Pominięty oznacza język przeglądarki.
  • options

    opcjonalny obiekt

    Ustawienia, m.in. style, currency, unit, minimumFractionDigits, maximumFractionDigits i notation.

Więcej przykładów

#
Procenty i miejsca po przecinku
JavaScript
const percent = new Intl.NumberFormat('pl-PL', { style: 'percent' })
const twoDigits = new Intl.NumberFormat('pl-PL', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
})

console.log(percent.format(0.85))
console.log(twoDigits.format(3.14159))
console.log(twoDigits.format(7))
Konsola
85%
3,14
7,00
Różne języki i waluty
JavaScript
const amount = 1234.5

console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount))
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(amount))
console.log(amount.toLocaleString('pl-PL', { style: 'currency', currency: 'PLN' }))
Konsola
$1,234.50
1.234,50 €
1234,50 zł
Skrócony zapis dużych liczb
JavaScript
const compact = new Intl.NumberFormat('pl-PL', { notation: 'compact' })

console.log(compact.format(1500))
console.log(compact.format(2500000))
Konsola
1,5 tys.
2,5 mln

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • W języku polskim liczby czterocyfrowe nie mają separatora tysięcy („1234”), a pięciocyfrowe już tak („12 345”). To nie błąd, tylko polska norma.
  • Formater wstawia spacje niełamiące (\u00a0), a nie zwykłe. Porównując wynik w testach, porównuj go z wynikiem tego samego formatera albo uwzględnij ten znak.
  • Utwórz formater raz, poza pętlą, i używaj go wielokrotnie. Dla pojedynczej liczby wystarczy liczba.toLocaleString("pl-PL").

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.