Oslovte širší publikum přizpůsobením obsahu libovolnému jazyku nebo lokalitě pomocí rozhraní Intl API.

Intl API zjednodušuje formátování a manipulaci s internacionalizovaným textem, čísly, daty a měnami. Umožňuje vám pracovat s různými formáty dat podle národního prostředí.

Toto API řeší problém formátování dat pro různé kultury a jazyky. Usnadňuje formátování čísel s příslušným symbolem měny nebo daty pomocí vhodného formátu data pro konkrétní oblast.

Pomocí rozhraní Intl API můžete vytvářet webové aplikace, které jsou přístupné a snadno použitelné pro publikum napříč regiony a kulturami.

Získání národního prostředí uživatele

The konstruktory JavaScriptu poskytované rozhraním Intl API identifikují národní prostředí, které použijí k formátování data, textu, čísla atd., podle známého vzoru. Každý konstruktér vezme a národní prostředí a možnosti objekt jako argumenty. Pomocí těchto argumentů konstruktor porovná požadovaná národní prostředí s lokalitami, které aktuálně podporují.

Chcete-li získat národní prostředí uživatele, můžete použít

instagram viewer
navigátor.jazyk vlastnictví. Tato vlastnost vrací řetězec představující jazykovou verzi prohlížeče.

Hodnota navigátor.jazyk vlastnost je jazyková značka BCP 47, která se skládá z kódu jazyka a volitelně kódu regionu a dalších dílčích značek. Například „en-US“ představuje angličtinu, jak se mluví ve Spojených státech.

Můžete také použít navigátor.jazyky vlastnost, abyste získali pole preferovaných jazyků uživatele seřazených podle priority. První položka v poli představuje primární jazykové preference uživatele.

Jakmile získáte národní prostředí uživatele, můžete upravit zobrazení dat, časů, čísel a měn aplikace pomocí Intl API.

Můžete vytvořit jednoduchý Funkce JavaScript které vám pomohou získat národní prostředí uživatele. Zde je úryvek kódu, který může pomoci:

konst getUserLocale = () => {
-li (navigator.languages ​​&& navigator.languages.length) {
vrátit se navigator.languages[0];
 }
vrátit se navigátor.jazyk;
};
řídicí panel.log (getUserLocale());

Tento getUserLocale funkce vrátí první prvek vlastnosti navigator.languages, pokud je k dispozici. Jinak se vrátí k vlastnosti navigator.language, která představuje preferovaný jazyk uživatele ve starších prohlížečích.

Formátování dat pro různá národní prostředí

Chcete-li formátovat data pomocí Intl API, můžete použít Intl. DateTimeFormat() konstruktér. Tento konstruktor má dva argumenty: řetězec národního prostředí a objekt options.

Objekt options může obsahovat vlastnosti, které řídí formátování data.

Některé z běžně používaných možností zahrnují:

  • všední den: Tato možnost určuje formát dne v týdnu. Můžete nastavit buď dlouho (Pátek), krátký (pá), popř úzký (F).
  • rok: Tato možnost určuje formát roku. Můžete nastavit buď číselné (2023) nebo 2-místný (23).
  • Měsíc: Tato možnost určuje formát měsíce. Můžete nastavit buď číselné (3), 2-místný (03), dlouho (Březen), krátký (Mar), popř úzký (M).
  • den: Tato možnost určuje formát dne. Můžete nastavit buď číselné (2) popř 2-místný (02).

Zde je příklad, který ukazuje, jak formátovat datum pomocí Intl. DateTimeFormat() konstruktér:

konst datum = datum.Nyní()
konst locale = getUserLocale();
konst možnosti = {
 všední den: "dlouho",
 rok: "numerický",
 Měsíc: "dlouho",
 den: "numerický",
};


konst formátovač = NovýIntl.DateTimeFormat (místní nastavení, možnosti);
// den v týdnu, datum měsíce, rok (pátek, 24. března 2023)
řídicí panel.log (formatter.format (datum));

Tento kód nastaví objekt formátovače předáním národního prostředí uživatele Intl. DateTimeFormat(), spolu se sadou možností. Poté použije formátovač k transformaci aktuálního data na řetězec. The možnosti objekt obsahuje vlastnosti, které řídí formátování data.

Formátování různých typů čísel

Můžete použít Intl API pro formátování čísel pomocí Intl. NumberFormat() konstruktér. Jako Intl. DateTimeFormat(), tento konstruktor bere jako argumenty řetězec národního prostředí a objekt options.

Objekt options obsahuje vlastnosti, které řídí formátování čísla. Tyto vlastnosti se liší v závislosti na specifikovaném styl čísla.

Formátování desetinných míst a procent

Čísla můžete formátovat jako desetinná místa a procenta pomocí Intl. NumberFormat() konstruktoru nastavením vlastnosti style na desetinný pro desetinná místa a procent pro procenta.

Zde je příklad, který ukazuje, jak formátovat desetinné číslo:

konst číslo = 123456;
konst locale = getUserLocale(); // en-US
konst možnosti = {
 styl: "desetinný",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 useGrouping: skutečný,
};


konst formátovač = NovýIntl.NumberFormat (místní nastavení, možnosti);
řídicí panel.log (formatter.format (num)); // 123,456.00

Blok kódu výše má formát 123 456 jako desetinné číslo s oddělovači seskupení (,) a dvě desetinná místa.

Zde je příklad, který ukazuje, jak formátovat procento:

konst číslo = 123456;
konst locale = getUserLocale();
konst možnosti = {
 styl: "procent",
 useGrouping: skutečný,
};


konst formátovač = NovýIntl.NumberFormat (místní nastavení, možnosti);
řídicí panel.log (formatter.format (num)); // 12,345,600%

Výše uvedený blok kódu vyjadřuje 123 456 v procentech s oddělovači seskupení.

Formátování měn

Čísla můžete formátovat jako měny nastavením vlastnosti style na měna. Vedle toho byste měli nastavit další možnosti, jako například:

  • měna: Řetězec představující kód měny ISO 4217 (např. „USD“, „EUR“ nebo „JPY“), který se má použít pro formátování. Pokud tuto možnost nezadáte, formátovač vybere kód měny na základě národního prostředí uživatele.
  • zobrazení měny: Tato vlastnost určuje, jak má prohlížeč zobrazovat měnu. Buď to může být symbol (75 USD), kód (75 USD), popř název (75 amerických dolarů).

Zde je příklad ukazující, jak můžete formátovat měnu:

konst číslo = 123456;
konst locale = getUserLocale(); // en-US
konst možnosti = {
 styl: "měna",
 měna: "AMERICKÝ DOLAR",
 zobrazení měny: "kód",
};


konst formátovač = NovýIntl.NumberFormat (místní nastavení, možnosti);
řídicí panel.log (formatter.format (num)); // 123 456,00 USD

Blok kódu výše má formát 123 456 jako měnu (USD).

Formátování jednotek

Můžete použít Intl. NumberFormat() konstruktor pro formátování čísel pomocí jednotek, jako je délka, objem a hmotnost. Můžete to udělat nastavením styl na jednotka. Když nastavíte styl na jednotku, musíte zadat tyto možnosti:

  • jednotka: Tato vlastnost určuje jednotku, která se má použít pro formátování, například "metr", "kilogram", "litr", "sekunda" atd.
  • unitDisplay: Tato vlastnost určuje, jak má prohlížeč jednotku zobrazit. Můžete nastavit buď dlouho (10 litrů), krátký (10 l), popř úzký (10 l).

Zde je příklad ukazující, jak můžete formátovat jednotky:

konst číslo = 123456;
konst locale = getUserLocale();
konst možnosti = {
 styl: "jednotka",
 jednotka: "litr",
 jednotkový displej: "dlouho",
};


konst formátovač = NovýIntl.NumberFormat (místní nastavení, možnosti);
řídicí panel.log (formatter.format (num)); //123 456 litrů

Blok kódu výše formátuje číslo 123 456 jako jednotku v litrech.

Alternativy k Intl API

Intl API poskytuje výkonnou a flexibilní sadu nástrojů pro formátování dat, čísel, měn a jednotek v aplikacích JavaScript. Podporuje mnoho národních prostředí a poskytuje konzistentní způsob formátování dat napříč různými kulturami a jazyky.

Možná budete chtít použít alternativní knihovnu, jako je Luxon nebo Day.js, kvůli omezené podpoře prohlížeče pro Intl. Rozhodování mezi Intl API nebo alternativou nakonec závisí na konkrétních požadavcích a omezeních vašeho projektu.