Oslovte širšie publikum prispôsobením svojho obsahu akémukoľvek jazyku alebo miestu pomocou rozhrania Intl API.

Intl API zjednodušuje formátovanie a manipuláciu s internacionalizovaným textom, číslami, dátumami a menami. Umožňuje vám pracovať s rôznymi formátmi údajov podľa miestneho nastavenia.

Toto API rieši problém formátovania údajov pre rôzne kultúry a jazyky. Uľahčuje formátovanie čísel s príslušným symbolom meny alebo dátumami pomocou vhodného formátu dátumu pre konkrétny región.

Pomocou rozhrania Intl API môžete vytvárať webové aplikácie, ktoré sú prístupné a ľahko použiteľné pre publikum v rôznych regiónoch a kultúrach.

Získanie miestneho nastavenia používateľa

The Konštruktory JavaScriptu poskytnuté rozhraním Intl API identifikujú miestne nastavenie, ktoré použijú na formátovanie dátumu, textu, čísla atď., podľa známeho vzoru. Každý konštruktér vezme a locale a možnosti objekt ako argumenty. Pomocou týchto argumentov konštruktor porovná požadované miestne nastavenia s miestnymi nastaveniami, ktoré momentálne podporujú.

instagram viewer

Ak chcete získať miestne nastavenie používateľa, môžete použiť navigátor.jazyk nehnuteľnosť. Táto vlastnosť vracia reťazec reprezentujúci jazykovú verziu prehliadača.

Hodnota navigátor.jazyk vlastnosť je značka jazyka BCP 47, ktorá pozostáva z kódu jazyka a voliteľne z kódu regiónu a ďalších podznačiek. Napríklad „en-US“ predstavuje angličtinu tak, ako sa hovorí v Spojených štátoch.

Môžete tiež použiť navigátor.jazyky vlastnosť na získanie poľa preferovaných jazykov používateľa zoradených podľa priority. Prvá položka v poli predstavuje preferenciu primárneho jazyka používateľa.

Po získaní miestneho nastavenia používateľa môžete prispôsobiť zobrazenie dátumov, časov, čísel a mien vašej aplikácii pomocou Intl API.

Môžete vytvoriť jednoduchý Funkcia JavaScript ktoré vám pomôžu získať miestne nastavenie používateľa. Tu je útržok kódu, ktorý vám môže pomôcť:

konšt getUserLocale = () => {
ak (navigator.languages ​​&& navigator.languages.length) {
vrátiť navigator.languages[0];
 }
vrátiť navigátor.jazyk;
};
konzoly.log (getUserLocale());

Toto getUserLocale funkcia vráti prvý prvok vlastnosti navigator.languages, ak je k dispozícii. V opačnom prípade sa vráti k vlastnosti navigator.language, ktorá predstavuje preferovaný jazyk používateľa v starších prehliadačoch.

Formátovanie dátumov pre rôzne miestne nastavenia

Ak chcete formátovať dátumy pomocou Intl API, môžete použiť Intl. DateTimeFormat() konštruktér. Tento konštruktor má dva argumenty: reťazec miestneho nastavenia a objekt options.

Objekt volieb môže obsahovať vlastnosti, ktoré riadia formátovanie dátumu.

Niektoré z bežne používaných možností zahŕňajú:

  • pracovný deň: Táto možnosť určuje formát dňa v týždni. Môžete to nastaviť na obe dlhý (piatok), krátky (piatok), príp úzky (F).
  • rok: Táto možnosť určuje formát roka. Môžete to nastaviť na obe číselné (2023) resp 2-miestne (23).
  • mesiac: Táto možnosť určuje formát mesiaca. Môžete to nastaviť na obe číselné (3), 2-miestne (03), dlhý (marec), krátky (Mar), príp úzky (M).
  • deň: Táto možnosť určuje formát dňa. Môžete to nastaviť na obe číselné (2) alebo 2-miestne (02).

Tu je príklad, ktorý ukazuje, ako formátovať dátum pomocou Intl. DateTimeFormat() konštruktér:

konšt dátum = Dátum.teraz()
konšt locale = getUserLocale();
konšt možnosti = {
 pracovný deň: "dlhá",
 rok: "numerický",
 mesiac: "dlhá",
 deň: "numerický",
};


konšt formátovač = NovýIntl.DateTimeFormat (miestne nastavenie, možnosti);
// deň v týždni, dátum mesiaca, rok (piatok, 24. marca 2023)
konzoly.log (formátor.formát (dátum));

Tento kód nastaví objekt formátovača odovzdaním miestneho nastavenia používateľa Intl. DateTimeFormat()spolu so sadou možností. Potom použije formátovač na transformáciu aktuálneho dátumu na reťazec. The možnosti objekt obsahuje vlastnosti, ktoré riadia formátovanie dátumu.

Formátovanie rôznych typov čísel

Môžete použiť Intl API na formátovanie čísel pomocou Intl. NumberFormat() konštruktér. Páči sa mi to Intl. DateTimeFormat(), tento konštruktor berie ako argumenty reťazec miestneho nastavenia a objekt options.

Objekt options obsahuje vlastnosti, ktoré riadia formátovanie čísla. Tieto vlastnosti sa líšia v závislosti od špecifikácie štýl čísla.

Formátovanie desatinných miest a percent

Čísla môžete formátovať ako desatinné miesta a percentá pomocou Intl. NumberFormat() konštruktor nastavením vlastnosti style na desiatkový pre desatinné miesta a percent pre percentá.

Tu je príklad, ktorý ukazuje, ako formátovať desatinné číslo:

konšt číslo = 123456;
konšt locale = getUserLocale(); // en-US
konšt možnosti = {
 štýl: "desiatkové",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 useGrouping: pravda,
};


konšt formátovač = NovýIntl.NumberFormat (miestne nastavenie, možnosti);
konzoly.log (formatter.format (num)); // 123,456.00

Vyššie uvedený blok kódu má formát 123 456 ako desatinné číslo s oddeľovačmi zoskupení (,) a dve desatinné miesta.

Tu je príklad, ktorý ukazuje, ako formátovať percento:

konšt číslo = 123456;
konšt locale = getUserLocale();
konšt možnosti = {
 štýl: "percentá",
 useGrouping: pravda,
};


konšt formátovač = NovýIntl.NumberFormat (miestne nastavenie, možnosti);
konzoly.log (formatter.format (num)); // 12,345,600%

Vyššie uvedený blok kódu vyjadruje 123 456 v percentách s oddeľovačmi skupín.

Formátovanie mien

Čísla môžete formátovať ako meny nastavením vlastnosti style na mena. Okrem toho by ste mali nastaviť ďalšie možnosti, ako napríklad:

  • mena: Reťazec predstavujúci kód meny ISO 4217 (napríklad „USD“, „EUR“ alebo „JPY“), ktorý sa má použiť na formátovanie. Ak túto možnosť nezadáte, formátovač vyberie kód meny na základe miestneho nastavenia používateľa.
  • zobrazenie meny: Táto vlastnosť určuje, ako má prehliadač zobrazovať menu. Môže byť buď symbol (75 USD), kód (75 USD), príp názov (75 amerických dolárov).

Tu je príklad, ktorý ukazuje, ako môžete formátovať menu:

konšt číslo = 123456;
konšt locale = getUserLocale(); // en-US
konšt možnosti = {
 štýl: "mena",
 mena: "AMERICKÝ DOLÁR",
 zobrazenie meny: "kód",
};


konšt formátovač = NovýIntl.NumberFormat (miestne nastavenie, možnosti);
konzoly.log (formatter.format (num)); // 123 456,00 USD

Blok kódu uvedený vyššie má formát 123 456 ako menu (USD).

Formátovanie jednotiek

Môžete použiť Intl. NumberFormat() konštruktor na formátovanie čísel pomocou jednotiek, ako je dĺžka, objem a hmotnosť. Môžete to urobiť nastavením štýl do jednotka. Keď nastavíte štýl na jednotku, musíte zadať tieto možnosti:

  • jednotka: Táto vlastnosť určuje jednotku, ktorá sa má použiť na formátovanie, ako napríklad „meter“, „kilogram“, „liter“, „sekunda“ atď.
  • unitDisplay: Táto vlastnosť určuje, ako má prehliadač zobraziť jednotku. Môžete to nastaviť na obe dlhý (10 litrov), krátky (10 l), príp úzky (10 l).

Tu je príklad, ktorý ukazuje, ako môžete formátovať jednotky:

konšt číslo = 123456;
konšt locale = getUserLocale();
konšt možnosti = {
 štýl: "jednotka",
 jednotka: "liter",
 unitDisplay: "dlhá",
};


konšt formátovač = NovýIntl.NumberFormat (miestne nastavenie, možnosti);
konzoly.log (formatter.format (num)); //123 456 litrov

Blok kódu vyššie naformátuje číslo 123 456 ako jednotku v litroch.

Alternatívy k Intl API

Intl API poskytuje výkonnú a flexibilnú sadu nástrojov na formátovanie dátumov, čísel, mien a jednotiek v aplikáciách JavaScript. Podporuje mnoho miestnych nastavení a poskytuje konzistentný spôsob formátovania údajov v rôznych kultúrach a jazykoch.

Možno budete chcieť použiť alternatívnu knižnicu, napríklad Luxon alebo Day.js, kvôli obmedzenej podpore prehliadača pre Intl. Nakoniec, rozhodnutie medzi Intl API alebo alternatívou závisí od špecifických požiadaviek a obmedzení vášho projektu.