Pasiekite platesnę auditoriją pritaikydami turinį bet kuriai kalbai ar lokalei naudodami Intl API.

Intl API supaprastina internacionalizuoto teksto, skaičių, datų ir valiutų formatavimą ir manipuliavimą. Tai leidžia tvarkyti įvairius duomenų formatus pagal lokalę.

Ši API išsprendžia duomenų formatavimo skirtingoms kultūroms ir kalboms iššūkį. Tai leidžia lengvai formatuoti skaičius su atitinkamu valiutos simboliu arba datomis, naudojant atitinkamą datos formatą konkrečiam regionui.

Naudodami Intl API galite kurti žiniatinklio programas, kurios yra prieinamos ir lengvai naudojamos auditorijai įvairiuose regionuose ir kultūrose.

Naudotojo lokalės gavimas

The JavaScript konstruktoriai Intl API pateikia lokalę, kurią jie naudos formatuodami datą, tekstą, skaičių ir pan., vadovaudamiesi žinomu modeliu. Kiekvienas konstruktorius imasi a lokale ir an galimybės objektas kaip argumentai. Naudodamas šiuos argumentus, konstruktorius suderina prašomą (-as) lokalę (-es) su šiuo metu palaikomomis lokalėmis.

instagram viewer

Norėdami gauti vartotojo lokalę, galite naudoti navigatorius.kalba nuosavybė. Ši ypatybė pateikia eilutę, vaizduojančią naršyklės kalbos versiją.

Vertė navigatorius.kalba ypatybė yra BCP 47 kalbos žyma, kurią sudaro kalbos kodas ir, pasirinktinai, regiono kodas bei kitos antrinės žymos. Pavyzdžiui, „en-US“ reiškia anglų kalbą, kuria kalbama Jungtinėse Valstijose.

Taip pat galite naudoti navigatorius.kalbos ypatybę, kad gautumėte vartotojo pageidaujamų kalbų masyvą, surūšiuotą pagal prioritetą. Pirmasis masyvo elementas nurodo vartotojo pirminę kalbos pasirinkimą.

Kai gausite vartotojo lokalę, galite tinkinti savo programos datų, laiko, skaičių ir valiutų rodymą naudodami Tarpt API.

Galite sukurti paprastą JavaScript funkcija kad padėtų jums nustatyti vartotojo lokalę. Štai kodo fragmentas, kuris gali padėti:

konst getUserLocale = () => {
jeigu (navigator.languages ​​&& navigator.languages.length) {
grąžinti navigator.languages[0];
 }
grąžinti navigator.language;
};
konsolė.log (getUserLocale());

Tai getUserLocale funkcija grąžina pirmąjį ypatybės navigator.languages ​​elementą, jei jis yra. Kitu atveju ji vėl patenka į ypatybę navigator.language, kuri nurodo vartotojo pageidaujamą kalbą senesnėse naršyklėse.

Skirtingų vietovių datų formatavimas

Norėdami formatuoti datas naudodami Tarpt API, galite naudoti Tarpt. DateTimeFormat() konstruktorius. Šis konstruktorius naudoja du argumentus: lokalės eilutę ir parinkčių objektą.

Parinkčių objektas gali turėti savybių, kurios valdo datos formatavimą.

Kai kurios dažniausiai naudojamos parinktys:

  • savaitės diena: Ši parinktis nurodo savaitės dienos formatą. Galite nustatyti bet kurį ilgai (penktadienis), trumpas (Penk.), arba siauras (F).
  • metų: Ši parinktis nurodo metų formatą. Galite nustatyti bet kurį skaitinis (2023) arba 2 skaitmenų (23).
  • mėnuo: Ši parinktis nurodo mėnesio formatą. Galite nustatyti bet kurį skaitinis (3), 2 skaitmenų (03), ilgai (Kovas), trumpas (kovo mėn.), arba siauras (M).
  • dieną: Ši parinktis nurodo dienos formatą. Galite nustatyti bet kurį skaitinis (2) arba 2 skaitmenų (02).

Štai pavyzdys, rodantis, kaip formatuoti datą naudojant Tarpt. DateTimeFormat() konstruktorius:

konst data = Data.dabar()
konst locale = getUserLocale();
konst parinktys = {
 savaitės diena: "ilgai",
 metai: "skaitinis",
 mėnuo: "ilgai",
 diena: "skaitinis",
};


konst formatuotojas = naujasTarpt.DateTimeFormat (lokalė, parinktys);
// savaitės diena, mėnesio data, metai (2023 m. kovo 24 d., penktadienis)
konsolė.log (formatter.format (data));

Šis kodas nustato formatavimo objektą, perduodamas vartotojo lokalę Tarpt. DateTimeFormat(), kartu su parinkčių rinkiniu. Tada jis naudoja formatavimo priemonę, kad dabartinę datą paverstų eilute. The galimybės Objekte yra ypatybių, kurios valdo datos formatavimą.

Įvairių tipų skaičių formatavimas

Galite naudoti Tarpt API formatuoti skaičius naudojant Tarpt. Skaičiaus formatas () konstruktorius. Kaip Tarpt. DateTimeFormat(), šis konstruktorius kaip argumentus paima lokalės eilutę ir parinkčių objektą.

Parinkčių objekte yra ypatybių, kurios valdo skaičiaus formatavimą. Šios savybės skiriasi priklausomai nuo nurodyto stilius numerio.

Dešimtainių skaičių ir procentų formatavimas

Galite suformatuoti skaičius kaip dešimtainius ir procentus naudodami Tarpt. Skaičiaus formatas () konstruktorių nustatydami stiliaus ypatybę į dešimtainis po kablelio ir proc dėl procentų.

Štai pavyzdys, rodantis, kaip formatuoti dešimtainį skaičių:

konst skaičius = 123456;
konst locale = getUserLocale(); // en-US
konst parinktys = {
 stilius: "dešimtainis",
 minimalios trupmenos skaitmenys: 2,
 didžiausios trupmenos skaitmenys: 2,
 UseGrouping: tiesa,
};


konst formatuotojas = naujasTarpt.NumberFormat (lokalė, parinktys);
konsolė.log (formateris.format (skaičius)); // 123,456.00

Aukščiau pateiktas kodo blokas formatuoja 123 456 kaip dešimtainį skaičių su grupavimo skyrikliais (,) ir du skaitmenys po kablelio.

Štai pavyzdys, rodantis, kaip formatuoti procentą:

konst skaičius = 123456;
konst locale = getUserLocale();
konst parinktys = {
 stilius: "procentas",
 UseGrouping: tiesa,
};


konst formatuotojas = naujasTarpt.NumberFormat (lokalė, parinktys);
konsolė.log (formateris.format (skaičius)); // 12,345,600%

Aukščiau pateiktas kodo blokas išreiškia 123 456 procentais su grupavimo skyrikliais.

Valiutų formatavimas

Skaičius galite formatuoti kaip valiutas, nustatydami stiliaus ypatybę į valiuta. Greta jo turėtumėte nustatyti kitas parinktis, pvz.:

  • valiuta: eilutė, nurodanti ISO 4217 valiutos kodą (pvz., „USD“, „EUR“ arba „JPY“), naudojama formatavimui. Jei nepateiksite šios parinkties, formatuotojas pasirinks valiutos kodą pagal naudotojo lokalę.
  • valiutos ekranas: ši ypatybė nurodo, kaip naršyklė turi rodyti valiutą. Tai gali būti arba simbolis (75 USD), kodas (75 USD) arba vardas (75 JAV dolerių).

Štai pavyzdys, rodantis, kaip galite formatuoti valiutą:

konst skaičius = 123456;
konst locale = getUserLocale(); // en-US
konst parinktys = {
 stilius: "valiuta",
 valiuta: "USD",
 valiutos ekranas: "kodas",
};


konst formatuotojas = naujasTarpt.NumberFormat (lokalė, parinktys);
konsolė.log (formateris.format (skaičius)); // 123 456,00 USD

Aukščiau pateiktas kodo blokas suformatuoja 123 456 kaip valiutą (USD).

Formatavimo vienetai

Galite naudoti Tarpt. Skaičiaus formatas () konstruktorius, kad formatuotų skaičius su vienetais, tokiais kaip ilgis, tūris ir masė. Tai galite padaryti nustatydami stilius į vienetas. Kai nustatote vieneto stilių, turite nurodyti šias parinktis:

  • vienetas: ši ypatybė nurodo formatavimui naudojamą vienetą, pvz., „metras“, „kilogramas“, „litras“, „sekundė“ ir pan.
  • vienetasEkranas: ši ypatybė nurodo, kaip naršyklė turi rodyti vienetą. Galite nustatyti bet kurį ilgai (10 litrų), trumpas (10 l), arba siauras (10 l).

Štai pavyzdys, rodantis, kaip galite formatuoti vienetus:

konst skaičius = 123456;
konst locale = getUserLocale();
konst parinktys = {
 stilius: "vienetas",
 vienetas: "litras",
 vieneto ekranas: "ilgai",
};


konst formatuotojas = naujasTarpt.NumberFormat (lokalė, parinktys);
konsolė.log (formateris.format (skaičius)); //123 456 litrai

Aukščiau pateiktame kodo bloke skaičius 123 456 formatuojamas kaip vienetas litrais.

Intl API alternatyvos

Intl API yra galingas ir lankstus įrankių rinkinys, skirtas formatuoti datas, skaičius, valiutas ir vienetus JavaScript programose. Jis palaiko daugybę lokalių ir suteikia nuoseklų būdą formatuoti duomenis įvairiose kultūrose ir kalbomis.

Galbūt norėsite naudoti alternatyvią biblioteką, pvz., „Luxon“ arba „Day.js“, nes naršyklė palaiko ribotą „Intl. Galiausiai sprendimas tarp Intl API ar alternatyvos priklauso nuo konkrečių jūsų projekto reikalavimų ir apribojimų.