Érjen el szélesebb közönséget azáltal, hogy tartalmait bármilyen nyelvre vagy területre szabja az Intl API-val.

Az Intl API leegyszerűsíti a nemzetköziesített szövegek, számok, dátumok és pénznemek formázását és kezelését. Lehetővé teszi a különböző adatformátumok kezelését a területi beállítások szerint.

Ez az API megoldja az adatok formázásának kihívását a különböző kultúrákhoz és nyelvekhez. Ez megkönnyíti a számok formázását a megfelelő pénznem szimbólummal vagy dátumokkal, az adott régióhoz tartozó dátumformátum használatával.

Az Intl API segítségével olyan webalkalmazásokat hozhat létre, amelyek elérhetőek és könnyen használhatók a különböző régiók és kultúrák közönsége számára.

Felhasználói nyelv beszerzése

A JavaScript konstruktorok Az Intl API által biztosított területi beállítás azonosítja a dátum, szöveg, szám stb. formázásához használt területet, egy ismert mintát követve. Minden konstruktor egy locale és egy lehetőségek objektum érvként. Ezekkel az argumentumokkal a konstruktor a kért területi beállításokat az általa jelenleg támogatott területi beállításokkal egyezteti.

instagram viewer

A felhasználó területi beállításához használhatja a navigátor.nyelv ingatlan. Ez a tulajdonság a böngésző nyelvi verzióját képviselő karakterláncot ad vissza.

Az értéke a navigátor.nyelv A tulajdonság egy BCP 47 nyelvi címke, amely egy nyelvi kódból és opcionálisan egy régiókódból és egyéb alcímkékből áll. Például az „en-US” az Egyesült Államokban beszélt angol nyelvet jelöli.

Használhatja a navigátor.nyelvek tulajdonság, hogy megkapja a felhasználó által preferált nyelvek tömbjét, prioritás szerint rendezve. A tömb első eleme a felhasználó elsődleges nyelvi preferenciáját jelenti.

Miután megszerezte a felhasználó nyelvi beállítását, testreszabhatja az alkalmazás dátumok, időpontok, számok és pénznemek megjelenítését a Intl API.

Létrehozhat egy egyszerű JavaScript függvény hogy segítsen megtalálni a felhasználó területi beállításait. Íme egy kódrészlet, amely segíthet:

const getUserLocale = () => {
ha (navigator.languages ​​&& navigator.languages.length) {
Visszatérés navigator.languages[0];
 }
Visszatérés navigator.language;
};
konzol.log (getUserLocale());

Ez getUserLocale függvény visszaadja a navigator.languages ​​tulajdonság első elemét, ha az elérhető. Ellenkező esetben visszakerül a navigator.language tulajdonsághoz, amely a felhasználó által preferált nyelvet képviseli a régebbi böngészőkben.

Dátumok formázása különböző nyelvekhez

A dátumok formázásához a Intl API, használhatja a Intl. DateTimeFormat() konstruktőr. Ez a konstruktor két argumentumot vesz fel: egy területi karakterláncot és egy opciós objektumot.

A beállítások objektum tartalmazhat tulajdonságokat, amelyek szabályozzák a dátum formázását.

A leggyakrabban használt opciók közé tartozik:

  • hétköznap: Ez az opció a hét napjának formátumát adja meg. Bármelyikre beállíthatja hosszú (Péntek), rövid (Péntek), ill keskeny (F).
  • év: Ez az opció az év formátumát határozza meg. Bármelyikre beállíthatja numerikus (2023) ill 2 számjegyű (23).
  • hónap: Ez az opció a hónap formátumát adja meg. Bármelyikre beállíthatja numerikus (3), 2 számjegyű (03), hosszú (Március), rövid (március), ill keskeny (M).
  • nap: Ez az opció a nap formátumát határozza meg. Bármelyikre beállíthatja numerikus (2) vagy 2 számjegyű (02).

Íme egy példa, amely bemutatja, hogyan kell formázni egy dátumot a Intl. DateTimeFormat() konstruktőr:

const dátum = Dátum.Most()
const locale = getUserLocale();
const opciók = {
 hétköznap: "hosszú",
 év: "numerikus",
 hónap: "hosszú",
 nap: "numerikus",
};


const formázó = újIntl.DateTimeFormat (helyszín, beállítások);
// hétköznap, hónap dátuma, év (2023. március 24., péntek)
konzol.log (formatter.format (dátum));

Ez a kód beállít egy formázó objektumot a felhasználó területi beállításának átadásával Intl. DateTimeFormat(), valamint egy sor opciót. Ezután a formázó segítségével alakítja át az aktuális dátumot karakterláncsá. A lehetőségek Az objektum olyan tulajdonságokat tartalmaz, amelyek szabályozzák a dátum formázását.

Különböző típusú számok formázása

Használhatja a Intl API a számok formázásához a Intl. Számformátum() konstruktőr. Mint Intl. DateTimeFormat(), ez a konstruktor egy területi karakterláncot és egy opciós objektumot vesz argumentumként.

Az opciók objektum olyan tulajdonságokat tartalmaz, amelyek szabályozzák a szám formázását. Ezek a tulajdonságok a megadottaktól függően változnak stílus a számról.

Tizedesjegyek és százalékok formázása

A számokat tizedesjegyekként és százalékokként formázhatja a használatával Intl. Számformátum() konstruktor a style tulajdonság beállításával decimális tizedesjegyekhez és százalék százalékokhoz.

Íme egy példa, amely bemutatja a tizedesjegy formázását:

const szám = 123456;
const locale = getUserLocale(); // hu-US
const opciók = {
 stílus: "decimális",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 Use Grouping: igaz,
};


const formázó = újIntl.NumberFormat (helyszín, beállítások);
konzol.log (formázó.formátum (szám)); // 123,456.00

A fenti kódblokk a 123 456-ot tizedesjegyként formázza csoportosító elválasztókkal (,) és két tizedesjegyet.

Íme egy példa, amely bemutatja, hogyan kell formázni egy százalékot:

const szám = 123456;
const locale = getUserLocale();
const opciók = {
 stílus: "százalék",
 Use Grouping: igaz,
};


const formázó = újIntl.NumberFormat (helyszín, beállítások);
konzol.log (formázó.formátum (szám)); // 12,345,600%

A fenti kódblokk 123 456-ot fejez ki százalékban csoportosítási elválasztókkal.

Pénznemek formázása

A számokat pénznemként formázhatja, ha a style tulajdonságot a következőre állítja valuta. Más beállításokat is be kell állítania mellé, például:

  • valuta: Az ISO 4217 pénznemkódot (például "USD", "EUR" vagy "JPY") képviselő karakterlánc a formázáshoz. Ha nem adja meg ezt a lehetőséget, a formázó a felhasználó nyelv- és országkódja alapján választ ki egy pénznemkódot.
  • valutaKijelző: Ez a tulajdonság megadja, hogy a böngésző hogyan jelenítse meg a pénznemet. Az is lehet szimbólum (75 USD), kód (75 USD), vagy név (75 amerikai dollár).

Íme egy példa a pénznem formázására:

const szám = 123456;
const locale = getUserLocale(); // hu-US
const opciók = {
 stílus: "valuta",
 valuta: "USADOLLÁR",
 valutamegjelenítés: "kód",
};


const formázó = újIntl.NumberFormat (helyszín, beállítások);
konzol.log (formázó.formátum (szám)); 123 456,00 USD

A fenti kódblokk 123 456-ot formáz pénznemként (USD).

Formázási egységek

Használhatja a Intl. Számformátum() konstruktor a számok egységekkel, például hosszúsággal, térfogattal és tömeggel történő formázásához. Ezt úgy teheti meg, hogy beállítja a stílus nak nek Mértékegység. Amikor a stílust egységre állítja, a következő beállításokat kell megadnia:

  • Mértékegység: Ez a tulajdonság határozza meg a formázáshoz használandó mértékegységet, például "méter", "kilogramm", "liter", "másodperc" stb.
  • egységKijelző: Ez a tulajdonság meghatározza, hogy a böngésző hogyan jelenítse meg az egységet. Bármelyikre beállíthatja hosszú (10 liter), rövid (10 l), ill keskeny (10 liter).

Íme egy példa az egységek formázására:

const szám = 123456;
const locale = getUserLocale();
const opciók = {
 stílus: "Mértékegység",
 Mértékegység: "liter",
 egységmegjelenítés: "hosszú",
};


const formázó = újIntl.NumberFormat (helyszín, beállítások);
konzol.log (formázó.formátum (szám)); //123 456 liter

A fenti kódblokk a 123 456-os számot egységnyi literben formázza.

Az Intl API alternatívái

Az Intl API hatékony és rugalmas eszközkészletet biztosít a dátumok, számok, pénznemek és mértékegységek formázásához JavaScript-alkalmazásokban. Számos területet támogat, és konzisztens módot biztosít az adatok különböző kultúrákban és nyelveken történő formázására.

Használhat alternatív könyvtárat, például a Luxont vagy a Day.js-t, mivel az Intl. korlátozott böngészőtámogatja. Végső soron az Intl API vagy az alternatíva közötti döntés a projekt konkrét követelményeitől és korlátaitól függ.