Intl API kasutamine JavaScriptis

Intl API lihtsustab rahvusvaheliste tekstide, numbrite, kuupäevade ja valuutade vormindamist ja töötlemist. See võimaldab teil hallata erinevaid andmevorminguid vastavalt lokaadile.

See API lahendab erinevate kultuuride ja keelte jaoks andmete vormindamise väljakutse. Selle abil on lihtne vormindada numbreid sobiva valuutasümboli või kuupäevadega, kasutades konkreetse piirkonna jaoks sobivat kuupäevavormingut.

Intl API abil saate luua veebirakendusi, mis on juurdepääsetavad ja hõlpsasti kasutatavad erinevate piirkondade ja kultuuride vaatajaskonnale.

Kasutaja lokaadi hankimine

The JavaScripti konstruktorid Intl API pakub kindlaks lokaadi, mida nad kasutavad kuupäeva, teksti, numbri jne vormindamiseks, järgides tuttavat mustrit. Iga konstruktor võtab a lokaat ja an valikuid objekt argumentidena. Neid argumente kasutades sobitab konstruktor taotletud lokaadi(d) praegu toetatavate lokaatidega.

Kasutaja lokaadi hankimiseks võite kasutada

navigator.language vara. See atribuut tagastab stringi, mis esindab brauseri keeleversiooni.

Väärtus navigator.language atribuut on BCP 47 keelemärgend, mis koosneb keelekoodist ja valikuliselt piirkonnakoodist ja muudest alammärgenditest. Näiteks "en-US" tähistab Ameerika Ühendriikides räägitavat inglise keelt.

Võite kasutada ka navigaator.keeled atribuut, et saada massiivi kasutaja eelistatud keeltest, mis on järjestatud prioriteedi järgi. Massiivi esimene üksus tähistab kasutaja esmast keele-eelistust.

Kui olete saanud kasutaja lokaadi, saate kohandada oma rakenduse kuupäevade, kellaaegade, numbrite ja valuutade kuvamist, kasutades Intl API.

Saate luua lihtsa JavaScripti funktsioon et aidata teil leida kasutaja asukohta. Siin on koodilõik, mis võib aidata:

konst getUserLocale = () => {
kui (navigator.languages ​​&& navigator.languages.length) {
tagasi navigator.languages[0];
 }
tagasi navigator.language;
};
konsool.log (getUserLocale());

See getUserLocale funktsioon tagastab atribuudi navigator.languages ​​esimese elemendi, kui see on saadaval. Vastasel juhul läheb see tagasi atribuudile navigator.language, mis esindab vanemates brauserites kasutaja eelistatud keelt.

Kuupäevade vormindamine erinevate asukohtade jaoks

Kuupäevade vormindamiseks, kasutades nuppu Intl API, saate kasutada Intl. DateTimeFormat() konstruktor. Sellel konstruktoril on kaks argumenti: lokaadi string ja suvandite objekt.

Suvandite objekt võib sisaldada atribuute, mis kontrollivad kuupäeva vormingut.

Mõned sagedamini kasutatavad valikud hõlmavad järgmist:

• argipäev: see suvand määrab nädalapäeva vormingu. Saate selle seada ükskõik kummale pikk (reede), lühike (R) või kitsas (F).
• aastal: see suvand määrab aasta vormingu. Saate selle seada ükskõik kummale numbriline (2023) või 2-kohaline (23).
• kuu: see suvand määrab kuu vormingu. Saate selle seada ükskõik kummale numbriline (3), 2-kohaline (03), pikk (märts), lühike (märts) või kitsas (M).
• päeval: see suvand määrab päeva vormingu. Saate selle seada ükskõik kummale numbriline (2) või 2-kohaline (02).

Siin on näide, mis näitab, kuidas kuupäeva vormindada kasutades Intl. DateTimeFormat() konstruktor:

konst kuupäev = Kuupäev.now()
konst locale = getUserLocale();
konst valikud = {
 tööpäev: "pikk",
 aasta: "numbriline",
 kuu: "pikk",
 päev: "numbriline",
};
konst vormindaja = uusIntl.DateTimeFormat (lokaal, valikud);
// nädalapäev, kuu kuupäev, aasta (reede, 24. märts 2023)
konsool.log (formatter.format (kuupäev));

See kood seadistab vormindusobjekti, edastades kasutaja lokaadi Intl. DateTimeFormat(), koos valikute komplektiga. Seejärel kasutab see vormindajat, et muuta praegune kuupäev stringiks. The valikuid objekt sisaldab atribuute, mis kontrollivad kuupäeva vormingut.

Erinevat tüüpi numbrite vormindamine

Võite kasutada Intl API numbrite vormindamiseks kasutades Intl. NumberFormat() konstruktor. meeldib Intl. DateTimeFormat(), võtab see konstruktor argumentidena lokaadi stringi ja suvandite objekti.

Suvandite objekt sisaldab atribuute, mis juhivad numbri vormindamist. Need omadused varieeruvad olenevalt täpsustatud omadustest stiilis numbrist.

Kümnendkohtade ja protsentide vormindamine

Saate vormindada numbreid kümnendkohtade ja protsentidena kasutades Intl. NumberFormat() ehitaja, määrates stiili atribuudiks kümnend kümnendkohtade jaoks ja protsenti protsentide jaoks.

Siin on näide, mis näitab kümnendkoha vormindamist.

konst arv = 123456;
konst locale = getUserLocale(); // et-US
konst valikud = {
 stiil: "kümnend",
 minimaalsed murdarvud: 2,
 maksimaalsed murdarvud: 2,
 useGrouping: tõsi,
};
konst vormindaja = uusIntl.NumberFormat (lokaal, valikud);
konsool.log (formater.format (arv)); // 123,456.00

Ülaltoodud koodiplokk vormindab 123 456 kümnendkohana koos rühmitamise eraldajatega (,) ja kaks kohta pärast koma.

Siin on näide, mis näitab, kuidas protsenti vormindada.

konst arv = 123456;
konst locale = getUserLocale();
konst valikud = {
 stiil: "protsent",
 useGrouping: tõsi,
};
konst vormindaja = uusIntl.NumberFormat (lokaal, valikud);
konsool.log (formater.format (arv)); // 12,345,600%

Ülaltoodud koodiplokk väljendab 123 456 protsentides koos rühmitamise eraldajatega.

Valuutade vormindamine

Saate vormindada numbreid valuutadena, määrates stiili atribuudiks valuuta. Selle kõrvale peaksite määrama muid valikuid, näiteks:

• valuuta: string, mis esindab ISO 4217 valuutakoodi (nt "USD", "EUR" või "JPY"), mida kasutatakse vormindamiseks. Kui te seda valikut ei paku, valib vormindaja valuutakoodi kasutaja lokaadi alusel.
• valuutakuva: see atribuut määrab, kuidas brauser peaks valuutat kuvama. See võib olla kas sümbol (75 USD), kood (75 USD) või nimi (75 USA dollarit).

Siin on näide valuuta vormindamise kohta.

konst arv = 123456;
konst locale = getUserLocale(); // et-US
konst valikud = {
 stiil: "valuuta",
 valuuta: "USD",
 valuutaKuva: "kood",
};
konst vormindaja = uusIntl.NumberFormat (lokaal, valikud);
konsool.log (formater.format (arv)); // 123 456,00 USD

Ülaltoodud koodiplokk vormistab valuutana (USD) 123 456.

Vormindusühikud

Võite kasutada Intl. NumberFormat() konstruktor arvude vormindamiseks ühikutega, nagu pikkus, maht ja mass. Seda saate teha, määrates stiilis juurde üksus. Kui määrate stiili ühikuks, peate määrama järgmised valikud:

• üksus: see atribuut määrab vormindamiseks kasutatava ühiku, näiteks "meeter", "kilogramm", "liiter", "sekund" jne.
• üksuse ekraan: see atribuut määrab, kuidas brauser peaks ühikut kuvama. Saate selle seada ükskõik kummale pikk (10 liitrit), lühike (10 L) või kitsas (10 l).

Siin on näide, mis näitab, kuidas saate ühikuid vormindada.

konst arv = 123456;
konst locale = getUserLocale();
konst valikud = {
 stiil: "üksus",
 ühik: "liiter",
 üksuse ekraan: "pikk",
};
konst vormindaja = uusIntl.NumberFormat (lokaal, valikud);
konsool.log (formater.format (arv)); //123 456 liitrit

Ülaltoodud koodiplokk vormistab numbri 123 456 ühikuna liitrites.

Alternatiivid Intl API-le

Intl API pakub võimsat ja paindlikku tööriistakomplekti kuupäevade, numbrite, valuutade ja ühikute vormindamiseks JavaScripti rakendustes. See toetab paljusid lokaate ja pakub ühtset viisi erinevate kultuuride ja keelte andmete vormindamiseks.

Intl-i brauseri piiratud toe tõttu võite soovida kasutada alternatiivset teeki, nagu Luxon või Day.js. Lõppkokkuvõttes sõltub Intl API või alternatiivi vahel otsustamine teie projekti spetsiifilistest nõuetest ja piirangutest.