JavaScript Academy · Lekcja

Formatowanie liczb i walut

Proszę używać Intl.NumberFormat do formatowania liczb zgodnie z lokalizacją.

Formatowanie liczb i walut to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Przestrzeń nazw Intl

Intl to wbudowane API JavaScriptu do internacjonalizacji. Formatuje liczby, daty, waluty i wiele innych wartości zgodnie z konwencjami danej lokalizacji — bez potrzeby korzystania z biblioteki.

console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"

Podstawy Intl.NumberFormat

Formater należy utworzyć z lokalizacją, a następnie wywołać format(). Lokalizacje używają tagów BCP 47, takich jak "en-US" lub "de-DE".

const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"

Różnice między lokalizacjami

Ta sama liczba jest wyświetlana inaczej w zależności od lokalizacji. W języku niemieckim kropki oddzielają tysiące, a przecinek część dziesiętną.

const n = 1234567.89;
console.log(new Intl.NumberFormat("en-US").format(n)); // 1,234,567.89
console.log(new Intl.NumberFormat("de-DE").format(n)); // 1.234.567,89

Formatowanie walut

Należy przekazać style: "currency" oraz kod currency. Symbol waluty i jego położenie zależą od lokalizacji.

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"

Waluta w różnych lokalizacjach

Waluta pozostaje ta sama, ale jej sposób wyświetlania dostosowuje się do wybranej lokalizacji.

const opts = { style: "currency", currency: "EUR" };
console.log(new Intl.NumberFormat("en-IE", opts).format(1000)); // €1,000.00
console.log(new Intl.NumberFormat("de-DE", opts).format(1000)); // 1.000,00 €

Format procentowy

style: "percent" mnoży wartość przez 100 i dodaje znak procentu właściwy dla danej lokalizacji.

const pct = new Intl.NumberFormat("en-US", { style: "percent" });
console.log(pct.format(0.1875)); // "19%"
console.log(new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 2 }).format(0.1875)); // "18.75%"

Kontrolowanie cyfr ułamkowych

minimumFractionDigits i maximumFractionDigits określają liczbę miejsc po przecinku.

const f = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(f.format(3));    // "3.00"
console.log(f.format(3.14159)); // "3.14"

Jednostki

style: "unit" w połączeniu z unit formatuje jednostki miary, takie jak kilometry czy litry.

const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"

Notacja skrócona

notation: "compact" skraca duże liczby (1.2K, 3.4M) — świetnie sprawdza się w przypadku liczników w mediach społecznościowych.

const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500));    // "1.5K"
console.log(c.format(2300000)); // "2.3M"

Wyświetlanie znaku

signDisplay: "always" pokazuje znak także dla wartości dodatnich — przydatne w przypadku różnic i zmian.

const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5));  // "+5"
console.log(s.format(-5)); // "-5"

Ponowne używanie formaterów

Utworzenie formatera jest stosunkowo kosztowne. Należy utworzyć go raz i używać ponownie dla wielu wartości, zamiast tworzyć nowy przy każdym wywołaniu.

const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const prices = [9.99, 19.5, 100];
console.log(prices.map((p) => money.format(p)));

Szybki test

Proszę przetestować formatowanie liczb.

Podsumowanie: liczby i waluty

Formatowali Państwo liczby zgodnie z lokalizacją, obsługiwali waluty, wartości procentowe, jednostki, notację skróconą i wyświetlanie znaku, kontrolowali liczbę cyfr ułamkowych oraz nauczyli się ponownie używać formaterów. Następny temat: daty i godziny.

Często zadawane pytania

Czy lekcja „Formatowanie liczb i walut” jest bezpłatna?

Tak — pełny tekst „Formatowanie liczb i walut” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Formatowanie liczb i walut”?

Proszę używać Intl.NumberFormat do formatowania liczb zgodnie z lokalizacją. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Formatowanie liczb i walut”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy