Kā izmantot Intl API JavaScript

Intl API vienkāršo internacionalizēta teksta, skaitļu, datumu un valūtu formatēšanu un manipulācijas ar tiem. Tas ļauj apstrādāt dažādus datu formātus atbilstoši lokalizācijai.

Šī API atrisina datu formatēšanas izaicinājumu dažādām kultūrām un valodām. Tas atvieglo skaitļu formatēšanu ar atbilstošo valūtas simbolu vai datumiem, izmantojot konkrētam reģionam atbilstošo datuma formātu.

Izmantojot Intl API, varat izveidot tīmekļa lietojumprogrammas, kas ir pieejamas un viegli lietojamas auditorijai dažādos reģionos un kultūrās.

Lietotāja lokalizācijas iegūšana

The JavaScript konstruktori ko nodrošina Intl API, identificējiet lokalizāciju, ko viņi izmantos, lai formatētu datumu, tekstu, numuru utt., ievērojot pazīstamu modeli. Katrs konstruktors ņem a lokalizācija un an iespējas objekts kā argumenti. Izmantojot šos argumentus, konstruktors saskaņo pieprasīto(-ās) lokalizāciju(-es) ar tām pašlaik atbalstītajām lokalizācijām.

Lai iegūtu lietotāja lokalizāciju, varat izmantot navigator.language īpašums. Šis rekvizīts atgriež virkni, kas atspoguļo pārlūkprogrammas valodas versiju.

Vērtība navigator.language rekvizīts ir BCP 47 valodas tags, kas sastāv no valodas koda un, pēc izvēles, reģiona koda un citiem apakštagiem. Piemēram, “en-US” apzīmē angļu valodu tādā veidā, kādā runā Amerikas Savienotajās Valstīs.

Varat arī izmantot navigators.valodas rekvizītu, lai iegūtu lietotāja vēlamo valodu masīvu, kas sakārtotas pēc prioritātes. Pirmais vienums masīvā apzīmē lietotāja primārās valodas preferences.

Kad esat ieguvis lietotāja lokalizāciju, varat pielāgot lietojumprogrammas datumu, laiku, skaitļu un valūtu attēlojumu, izmantojot Intl API.

Jūs varat izveidot vienkāršu JavaScript funkcija lai palīdzētu jums iegūt lietotāja lokalizāciju. Šeit ir koda fragments, kas var palīdzēt:

konst getUserLocale = () => {
ja (navigator.languages ​​&& navigator.languages.length) {
atgriezties navigator.languages[0];
 }
atgriezties navigator.language;
};
konsole.log (getUserLocale());

Šis getUserLocale funkcija atgriež rekvizīta navigator.languages ​​pirmo elementu, ja tas ir pieejams. Pretējā gadījumā tas tiek izmantots rekvizītā navigator.language, kas attēlo lietotāja vēlamo valodu vecākās pārlūkprogrammās.

Datumu formatēšana dažādām lokalizācijām

Lai formatētu datumus, izmantojot Intl API, varat izmantot Intl. DateTimeFormat() konstruktors. Šis konstruktors izmanto divus argumentus: lokalizācijas virkni un opciju objektu.

Opciju objektā var būt rekvizīti, kas kontrolē datuma formatējumu.

Dažas no visbiežāk izmantotajām opcijām ietver:

• darba diena: šī opcija norāda nedēļas dienas formātu. Varat to iestatīt uz jebkuru garš (piektdiena), īss (piektd.), vai Šaurs (F).
• gadā: šī opcija norāda gada formātu. Varat to iestatīt uz jebkuru ciparu (2023) vai 2 ciparu (23).
• mēnesis: šī opcija norāda mēneša formātu. Varat to iestatīt uz jebkuru ciparu (3), 2 ciparu (03), garš (marts), īss (marts), vai Šaurs (M).
• diena: šī opcija norāda dienas formātu. Varat to iestatīt uz jebkuru ciparu (2) vai 2 ciparu (02).

Šeit ir piemērs, kas parāda, kā formatēt datumu, izmantojot Intl. DateTimeFormat() konstruktors:

konst datums = Datums.now()
konst locale = getUserLocale();
konst opcijas = {
 darba diena: "garš",
 gads: "ciparu",
 mēnesis: "garš",
 diena: "ciparu",
};
konst formatētājs = jaunsIntl.DateTimeFormat (lokāle, opcijas);
// nedēļas diena, mēneša datums, gads (piektdiena, 2023. gada 24. marts)
konsole.log (formatter.format (datums));

Šis kods iestata formatētāja objektu, nododot lietotāja lokalizāciju Intl. DateTimeFormat()kopā ar opciju kopu. Pēc tam tas izmanto formatētāju, lai pārveidotu pašreizējo datumu virknē. The iespējas objekts satur rekvizītus, kas kontrolē datuma formatējumu.

Dažādu veidu skaitļu formatēšana

Jūs varat izmantot Intl API, lai formatētu skaitļus, izmantojot Intl. Skaitļa formāts() konstruktors. Patīk Intl. DateTimeFormat(), šis konstruktors kā argumentus izmanto lokalizācijas virkni un opciju objektu.

Opciju objektā ir rekvizīti, kas kontrolē skaitļa formatējumu. Šīs īpašības atšķiras atkarībā no norādītā stils no numura.

Decimālzīmju un procentu formatēšana

Varat formatēt skaitļus kā decimāldaļas un procentus, izmantojot Intl. Skaitļa formāts() konstruktoru, iestatot stila rekvizītu uz decimālzīme decimāldaļām un procentiem par procentiem.

Šeit ir piemērs, kas parāda, kā formatēt decimāldaļu:

konst skaits = 123456;
konst locale = getUserLocale(); // en-US
konst opcijas = {
 stils: "decimāldaļa",
 minimālieFractionDigits: 2,
 maksimālieFractionDigits: 2,
 useGrouping: taisnība,
};
konst formatētājs = jaunsIntl.NumberFormat (lokale, opcijas);
konsole.log (formatter.format (num)); // 123,456.00

Iepriekš minētais koda bloks formatē 123 456 kā decimāldaļu ar grupēšanas atdalītājiem (,) un divas zīmes aiz komata.

Šeit ir piemērs, kas parāda, kā formatēt procentuālo daļu:

konst skaits = 123456;
konst locale = getUserLocale();
konst opcijas = {
 stils: "procenti",
 useGrouping: taisnība,
};
konst formatētājs = jaunsIntl.NumberFormat (lokale, opcijas);
konsole.log (formatter.format (num)); // 12,345,600%

Iepriekš minētais koda bloks izsaka 123 456 procentos ar grupēšanas atdalītājiem.

Valūtu formatēšana

Varat formatēt skaitļus kā valūtas, iestatot stila rekvizītu uz valūta. Blakus tam jāiestata citas opcijas, piemēram:

• valūta: virkne, kas apzīmē ISO 4217 valūtas kodu (piemēram, "USD", "EUR" vai "JPY"), ko izmantot formatēšanai. Ja nenorādīsiet šo opciju, formatētājs izvēlēsies valūtas kodu, pamatojoties uz lietotāja lokalizāciju.
• valūtasDisplejs: šis rekvizīts norāda, kā pārlūkprogrammai ir jāparāda valūta. Tas var būt vai nu simbols (75 USD), kods (75 USD) vai nosaukums (75 ASV dolāri).

Tālāk ir sniegts piemērs, kas parāda, kā var formatēt valūtu.

konst skaits = 123456;
konst locale = getUserLocale(); // en-US
konst opcijas = {
 stils: "valūta",
 valūta: "USD",
 valūtasDisplejs: "kods",
};
konst formatētājs = jaunsIntl.NumberFormat (lokale, opcijas);
konsole.log (formatter.format (num)); // USD 123 456,00

Iepriekš minētais koda bloks formatē 123 456 kā valūtu (USD).

Formatēšanas vienības

Jūs varat izmantot Intl. Skaitļa formāts() konstruktors, lai formatētu skaitļus ar mērvienībām, piemēram, garumu, tilpumu un masu. To var izdarīt, iestatot stils uz vienība. Iestatot stilu uz vienību, ir jānorāda šādas opcijas:

• vienība: šis rekvizīts norāda formatēšanai izmantojamo mērvienību, piemēram, "metrs", "kilograms", "litrs", "sekunde" utt.
• vienībaDisplejs: šis rekvizīts norāda, kā pārlūkprogrammai ir jāparāda vienība. Varat to iestatīt uz jebkuru garš (10 litri), īss (10 L), vai Šaurs (10l).

Šeit ir piemērs, kas parāda, kā varat formatēt vienības:

konst skaits = 123456;
konst locale = getUserLocale();
konst opcijas = {
 stils: "vienība",
 vienība: "litrs",
 vienībaDisplejs: "garš",
};
konst formatētājs = jaunsIntl.NumberFormat (lokale, opcijas);
konsole.log (formatter.format (num)); //123 456 litri

Iepriekš redzamajā koda blokā skaitlis 123 456 tiek formatēts kā vienība litros.

Alternatīvas Intl API

Intl API nodrošina jaudīgu un elastīgu rīku komplektu datumu, skaitļu, valūtu un vienību formatēšanai JavaScript lietojumprogrammās. Tas atbalsta daudzas lokalizācijas un nodrošina konsekventu veidu, kā formatēt datus dažādās kultūrās un valodās.

Iespējams, vēlēsities izmantot alternatīvu bibliotēku, piemēram, Luxon vai Day.js, jo ierobežotais pārlūkprogrammas atbalsts Intl. Galu galā izvēle starp Intl API vai alternatīvu ir atkarīga no jūsu projekta īpašajām prasībām un ierobežojumiem.