Intl API: n käyttäminen JavaScriptissä

Intl API yksinkertaistaa kansainvälistyneen tekstin, numeroiden, päivämäärien ja valuuttojen muotoilua ja käsittelyä. Sen avulla voit käsitellä erilaisia ​​tietomuotoja alueiden mukaan.

Tämä API ratkaisee haasteen muotoilla tietoja eri kulttuureja ja kieliä varten. Sen avulla on helppo muotoilla numerot sopivalla valuuttasymbolilla tai päivämäärillä käyttämällä tietylle alueelle sopivaa päivämäärämuotoa.

Intl-sovellusliittymän avulla voit luoda verkkosovelluksia, jotka ovat kaikkien alueiden ja kulttuurien ulottuvilla ja helppokäyttöisiä.

Käyttäjän maa-asetuksen saaminen

The JavaScript-konstruktorit Intl-sovellusliittymän tarjoama kieli- ja maa-asetus, jota he käyttävät muotoillessaan päivämäärän, tekstin, numeron jne. tutun mallin mukaisesti. Jokainen rakentaja ottaa a alue ja an vaihtoehtoja objekti argumentteina. Näitä argumentteja käyttämällä rakentaja vertaa pyydetyt maa-asetukset ja paikat, joita ne tällä hetkellä tukevat.

Voit hankkia käyttäjän maa-asetuksen käyttämällä navigator.language omaisuutta. Tämä ominaisuus palauttaa merkkijonon, joka edustaa selaimen kieliversiota.

Arvo navigator.language ominaisuus on BCP 47 -kielitunniste, joka koostuu kielikoodista ja valinnaisesti aluekoodista ja muista alitunnisteista. Esimerkiksi "en-US" tarkoittaa englantia sellaisena kuin sitä puhutaan Yhdysvalloissa.

Voit myös käyttää navigator.languages ominaisuus saadaksesi joukon käyttäjän haluamia kieliä prioriteetin mukaan lajiteltuina. Taulukon ensimmäinen kohde edustaa käyttäjän ensisijaista kieliasetusta.

Kun olet hankkinut käyttäjän maa-asetuksen, voit mukauttaa sovelluksesi päivämäärien, kellonaikojen, numeroiden ja valuuttojen näyttöä käyttämällä Intl API.

Voit luoda yksinkertaisen JavaScript-toiminto auttaa sinua saamaan käyttäjän maa-asetuksen. Tässä on koodinpätkä, joka voi auttaa:

konst getUserLocale = () => {
jos (navigator.languages ​​&& navigator.languages.length) {
palata navigator.languages[0];
 }
palata navigator.language;
};
konsoli.log (getUserLocale());

Tämä getUserLocale funktio palauttaa navigator.languages-ominaisuuden ensimmäisen elementin, jos se on saatavilla. Muussa tapauksessa se siirtyy takaisin navigator.language-ominaisuuteen, joka edustaa käyttäjän ensisijaista kieltä vanhemmissa selaimissa.

Päivämäärien muotoilu eri kielille

Voit muotoilla päivämäärät käyttämällä Intl API, voit käyttää Intl. DateTimeFormat() rakentaja. Tämä rakentaja käyttää kaksi argumenttia: aluemerkkijono ja asetukset-objekti.

Asetukset-objekti voi sisältää ominaisuuksia, jotka ohjaavat päivämäärän muotoilua.

Joitakin yleisesti käytettyjä vaihtoehtoja ovat:

• arkipäivä: Tämä vaihtoehto määrittää viikonpäivän muodon. Voit asettaa sen jompaan kumpaan tahansa pitkä (Perjantai), lyhyt (pe), tai kapea (F).
• vuosi: Tämä vaihtoehto määrittää vuoden muodon. Voit asettaa sen jompaan kumpaan tahansa numeerinen (2023) tai 2-numeroinen (23).
• kuukausi: Tämä vaihtoehto määrittää kuukauden muodon. Voit asettaa sen jompaan kumpaan tahansa numeerinen (3), 2-numeroinen (03), pitkä (maaliskuu), lyhyt (maaliskuu) tai kapea (M).
• päivä: Tämä vaihtoehto määrittää päivän muodon. Voit asettaa sen jompaan kumpaan tahansa numeerinen (2) tai 2-numeroinen (02).

Tässä on esimerkki, joka näyttää kuinka muotoilla päivämäärä käyttämällä Intl. DateTimeFormat() rakentaja:

konst päivämäärä = Päivämäärä.nyt()
konst locale = getUserLocale();
konst valinnat = {
 arkipäivä: "pitkä",
 vuosi: "numeerinen",
 kuukausi: "pitkä",
 päivä: "numeerinen",
};
konst muotoilija = UusiIntl.DateTimeFormat (paikallinen, asetukset);
// viikonpäivä, kuukausi päivämäärä, vuosi (perjantai, 24. maaliskuuta 2023)
konsoli.log (formatter.format (päivämäärä));

Tämä koodi määrittää muotoiluobjektin välittämällä käyttäjän kieli-asetuksen Intl. DateTimeFormat(), sekä joukon vaihtoehtoja. Sitten se käyttää muotoilijaa muuntaakseen nykyisen päivämäärän merkkijonoksi. The vaihtoehtoja objekti sisältää ominaisuuksia, jotka ohjaavat päivämäärän muotoilua.

Erilaisten numeroiden muotoilu

Voit käyttää Intl API muotoilla numerot käyttämällä Intl. Numeromuoto() rakentaja. Kuten Intl. DateTimeFormat(), tämä rakentaja ottaa argumenteiksi kieli- ja asetukset-objektin.

Asetukset-objekti sisältää ominaisuuksia, jotka ohjaavat numeron muotoilua. Nämä ominaisuudet vaihtelevat määritellyn mukaan tyyli numerosta.

Desimaalien ja prosenttiosuuksien muotoilu

Voit muotoilla numerot desimaalilukuina ja prosentteina käyttämällä Intl. Numeromuoto() rakentaja asettamalla tyyli-ominaisuuden arvoksi desimaali desimaaleille ja prosenttia prosenteille.

Tässä on esimerkki, joka näyttää kuinka muotoilla desimaali:

konst numero = 123456;
konst locale = getUserLocale(); // fi-US
konst valinnat = {
 tyyli: "desimaali",
 minimimurtonumerot: 2,
 enimmäismurtonumerot: 2,
 use Grouping: totta,
};
konst muotoilija = UusiIntl.NumberFormat (paikallinen, asetukset);
konsoli.log (formatter.format (num)); // 123,456.00

Yllä oleva koodilohko muotoilee 123 456 desimaaliksi ryhmittelyerottimella (,) ja kaksi desimaalin tarkkuutta.

Tässä on esimerkki prosenttiosuuden muotoilusta:

konst numero = 123456;
konst locale = getUserLocale();
konst valinnat = {
 tyyli: "prosentti",
 use Grouping: totta,
};
konst muotoilija = UusiIntl.NumberFormat (paikallinen, asetukset);
konsoli.log (formatter.format (num)); // 12,345,600%

Yllä oleva koodilohko ilmaisee 123 456 prosentteina ryhmittelyerottimilla.

Valuuttojen muotoilu

Voit muotoilla numerot valuutoiksi asettamalla tyyli-ominaisuuden arvoksi valuutta. Sinun tulisi asettaa sen rinnalle muita vaihtoehtoja, kuten:

• valuutta: Merkkijono, joka edustaa ISO 4217 -valuuttakoodia (kuten "USD", "EUR" tai "JPY"), jota käytetään muotoiluun. Jos et määritä tätä vaihtoehtoa, muotoilija valitsee valuuttakoodin käyttäjän kielen perusteella.
• valuutanäyttö: Tämä ominaisuus määrittää, kuinka selaimen tulee näyttää valuutta. Se voi olla joko symboli (75 USD), koodi (75 USD) tai nimi (75 Yhdysvaltain dollaria).

Tässä on esimerkki valuutan muotoilemisesta:

konst numero = 123456;
konst locale = getUserLocale(); // fi-US
konst valinnat = {
 tyyli: "valuutta",
 valuutta: "USD",
 valuutanäyttö: "koodi",
};
konst muotoilija = UusiIntl.NumberFormat (paikallinen, asetukset);
konsoli.log (formatter.format (num)); // USD 123 456,00

Yllä oleva koodilohko muotoilee 123 456 valuutaksi (USD).

Muotoiluyksiköt

Voit käyttää Intl. Numeromuoto() konstruktori muotoillaksesi numeroita yksiköillä, kuten pituus, tilavuus ja massa. Voit tehdä tämän asettamalla tyyli to yksikkö. Kun asetat tyylin yksiköksi, sinun on määritettävä seuraavat vaihtoehdot:

• yksikkö: Tämä ominaisuus määrittää muotoiluun käytettävän yksikön, kuten "metri", "kilogramma", "litra", "sekunti" ja niin edelleen.
• yksikön näyttö: Tämä ominaisuus määrittää, kuinka selaimen tulee näyttää yksikkö. Voit asettaa sen jompaan kumpaan tahansa pitkä (10 litraa), lyhyt (10 l), tai kapea (10 l).

Tässä on esimerkki yksiköiden muotoilusta:

konst numero = 123456;
konst locale = getUserLocale();
konst valinnat = {
 tyyli: "yksikkö",
 yksikkö: "litra",
 yksikön näyttö: "pitkä",
};
konst muotoilija = UusiIntl.NumberFormat (paikallinen, asetukset);
konsoli.log (formatter.format (num)); //123 456 litraa

Yllä oleva koodilohko muotoilee luvun 123 456 yksiköksi litroina.

Vaihtoehtoja Intl API: lle

Intl API tarjoaa tehokkaat ja joustavat työkalut päivämäärien, numeroiden, valuuttojen ja yksiköiden muotoiluun JavaScript-sovelluksissa. Se tukee monia kielialueita ja tarjoaa yhtenäisen tavan muotoilla tietoja eri kulttuureista ja kielistä.

Saatat haluta käyttää vaihtoehtoista kirjastoa, kuten Luxon tai Day.js, koska selaintuki on rajoitettu Intl. Viime kädessä valinta Intl API: n vai vaihtoehdon välillä riippuu projektisi erityisvaatimuksista ja rajoituksista.