JavaScript Academy · Oppitunti

Lukujen ja valuuttojen muotoilu

Käyttäkää Intl.NumberFormatia lokalisoitujen lukujen käsittelyyn.

Oppitunti 1/413 vaihetta

Lukujen ja valuuttojen muotoilu on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Intl-nimiavaruus

Intl on JavaScriptin sisäänrakennettu kansainvälistämis-API. Se muotoilee luvut, päivämäärät, valuutat ja paljon muuta kielialueen käytäntöjen mukaan — erillistä kirjastoa ei tarvita.

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

Intl.NumberFormatin perusteet

Luokaa muotoilija kielialueen avulla ja kutsukaa sitten format()-menetelmää. Kielialueet käyttävät BCP 47 -tunnisteita, kuten "en-US" tai "de-DE".

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

Kielialueiden erot

Sama luku esitetään eri kielialueilla eri tavoin. Saksassa tuhaterottimena käytetään pistettä ja desimaalierottimena pilkkua.

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

Valuutan muotoilu

Välittäkää asetukset style: "currency" ja valuutan currency-koodi. Symboli ja sen sijainti määräytyvät kielialueen mukaan.

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

Valuutta eri kielialueilla

Valuutta pysyy samana, mutta sen esitystapa mukautuu valittuun kielialueeseen.

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 €

Prosenttityyli

style: "percent" kertoo arvon sadalla ja lisää kielialueen prosenttimerkin.

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%"

Desimaalien määrän hallinta

minimumFractionDigits ja maximumFractionDigits määrittävät desimaalien määrän.

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"

Yksiköt

style: "unit" ja unit muotoilevat mittoja, kuten kilometrejä tai litroja.

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

Tiivis esitystapa

notation: "compact" lyhentää suuret luvut (1.2K, 3.4M) — tämä sopii erinomaisesti sosiaalisen median lukumäärille.

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

Etumerkin näyttäminen

signDisplay: "always" näyttää etumerkin myös positiivisille luvuille — tämä on kätevää erotuksille ja muutoksille.

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

Muotoilijoiden uudelleenkäyttö

Muotoilijan luominen on suhteellisen kallista. Luokaa muotoilija kerran ja käyttäkää sitä uudelleen useille arvoille sen sijaan, että loisitteen uuden jokaisella kutsukerralla.

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

Pikatarkistus

Testatkaa lukujen muotoilua.

Vastaa interaktiivisessa oppitunnissa

Kertaus: luvut ja valuutat

Muotoilitte lukuja kielialueen mukaan, käsittelitte valuuttoja, prosentteja, yksiköitä, tiivistä esitystapaa ja etumerkkien näyttämistä, hallitsitte desimaalien määrää ja opitte käyttämään muotoilijoita uudelleen. Seuraavaksi käsittelemme päivämääriä ja kellonaikoja.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Lukujen ja valuuttojen muotoilu” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Lukujen ja valuuttojen muotoilu”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Lukujen ja valuuttojen muotoilu”?

Käyttäkää Intl.NumberFormatia lokalisoitujen lukujen käsittelyyn. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Lukujen ja valuuttojen muotoilu”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy