Dosezite širšo publiko tako, da svojo vsebino prilagodite kateremu koli jeziku ali jeziku z Intl API.

Intl API poenostavlja oblikovanje in manipulacijo internacionaliziranega besedila, številk, datumov in valut. Omogoča vam obdelavo različnih formatov podatkov glede na lokalne nastavitve.

Ta API rešuje izziv oblikovanja podatkov za različne kulture in jezike. Omogoča enostavno oblikovanje števil z ustreznim simbolom valute ali datumov z uporabo ustrezne oblike datuma za določeno regijo.

Z API-jem Intl lahko ustvarite spletne aplikacije, ki so dostopne in enostavne za uporabo za občinstvo v različnih regijah in kulturah.

Pridobivanje uporabniškega jezika

The JavaScript konstruktorji ki jih zagotavlja Intl API, identificirajo jezik, ki ga bodo uporabili za oblikovanje datuma, besedila, številke itd., po znanem vzorcu. Vsak konstruktor vzame a locale in an opcije objekt kot argumenti. Z uporabo teh argumentov konstruktor primerja zahtevane področne nastavitve s področnimi nastavitvami, ki jih trenutno podpirajo.

Če želite pridobiti področne nastavitve uporabnika, lahko uporabite navigator.jezik premoženje. Ta lastnost vrne niz, ki predstavlja jezikovno različico brskalnika.

Vrednost navigator.jezik Lastnost je jezikovna oznaka BCP 47, ki je sestavljena iz jezikovne kode in po izbiri regionalne kode ter drugih podoznak. Na primer, "en-US" predstavlja angleščino, kot se govori v Združenih državah.

Uporabite lahko tudi navigator.jeziki lastnost za pridobitev niza uporabnikovih želenih jezikov, razvrščenih po prioriteti. Prvi element v matriki predstavlja primarni jezik uporabnika.

Ko pridobite področne nastavitve uporabnika, lahko prilagodite prikaz datumov, ur, števil in valut v aplikaciji z uporabo medn API.

Ustvarite lahko preprosto funkcija JavaScript da vam pomaga pridobiti uporabnikovo lokalno nastavitev. Tukaj je delček kode, ki vam lahko pomaga:

konst getUserLocale = () => {
če (navigator.languages ​​&& navigator.languages.length) {
vrnitev navigator.languages[0];
 }
vrnitev navigator.language;
};
konzola.log (getUserLocale());

to getUserLocale funkcija vrne prvi element lastnosti navigator.languages, če je na voljo. V nasprotnem primeru se vrne na lastnost navigator.language, ki predstavlja uporabnikov želeni jezik v starejših brskalnikih.

Oblikovanje datumov za različne jezike

Za formatiranje datumov z uporabo medn API, lahko uporabite medn. DateTimeFormat() konstruktor. Ta konstruktor sprejme dva argumenta: področni niz in objekt možnosti.

Objekt možnosti lahko vsebuje lastnosti, ki nadzirajo oblikovanje datuma.

Nekatere pogosto uporabljene možnosti vključujejo:

  • delovni dan: Ta možnost določa obliko dneva v tednu. Lahko ga nastavite na bodisi dolga (petek), kratek (pet), oz ozek (F).
  • leto: Ta možnost določa obliko leta. Lahko ga nastavite na bodisi številčno (2023) oz 2-mestno (23).
  • mesec: Ta možnost določa obliko meseca. Lahko ga nastavite na bodisi številčno (3), 2-mestno (03), dolga (marec), kratek (mar), oz ozek (M).
  • dan: Ta možnost določa obliko dneva. Lahko ga nastavite na bodisi številčno (2) oz 2-mestno (02).

Tukaj je primer, ki prikazuje, kako oblikovati datum z uporabo medn. DateTimeFormat() konstruktor:

konst datum = Datum.zdaj()
konst locale = getUserLocale();
konst možnosti = {
 dan v tednu: "dolga",
 leto: "številčno",
 mesec: "dolga",
 dan: "številčno",
};


konst formater = novomedn.DateTimeFormat (lokalne nastavitve, možnosti);
// delovni dan, mesec, datum, leto (petek, 24. marec 2023)
konzola.log (formatter.format (datum));

Ta koda nastavi objekt oblikovalca tako, da mu posreduje področne nastavitve uporabnika medn. DateTimeFormat(), skupaj z nizom možnosti. Nato uporabi oblikovalnik za pretvorbo trenutnega datuma v niz. The opcije objekt vsebuje lastnosti, ki nadzorujejo oblikovanje datuma.

Oblikovanje različnih vrst števil

Lahko uporabite medn API za oblikovanje števil z uporabo medn. NumberFormat() konstruktor. Všeč mi je medn. DateTimeFormat(), ta konstruktor vzame področni niz in objekt možnosti kot argumenta.

Objekt možnosti vsebuje lastnosti, ki nadzorujejo oblikovanje številke. Te lastnosti se razlikujejo glede na navedeno stil števila.

Oblikovanje decimalk in odstotkov

Številke lahko oblikujete kot decimalke in odstotke z uporabo medn. NumberFormat() konstruktor tako, da nastavite lastnost style na decimalno za decimalke in odstotkov za odstotke.

Tukaj je primer, ki prikazuje, kako oblikovati decimalko:

konst št = 123456;
konst locale = getUserLocale(); // en-US
konst možnosti = {
 slog: "decimalno",
 minimumFractionDigits: 2,
 največFractionDigits: 2,
 useGrouping: prav,
};


konst formater = novomedn.NumberFormat (lokacija, možnosti);
konzola.log (formatter.format (num)); // 123,456.00

Zgornji blok kode oblikuje 123.456 kot decimalko z ločili za združevanje (,) in dve decimalni mesti.

Tukaj je primer, ki prikazuje, kako oblikovati odstotek:

konst št = 123456;
konst locale = getUserLocale();
konst možnosti = {
 slog: "odstotek",
 useGrouping: prav,
};


konst formater = novomedn.NumberFormat (lokacija, možnosti);
konzola.log (formatter.format (num)); // 12,345,600%

Zgornji blok kode izraža 123.456 kot odstotek z ločili za združevanje.

Oblikovanje valut

Številke lahko oblikujete kot valute tako, da lastnost style nastavite na valuta. Poleg tega bi morali nastaviti druge možnosti, kot so:

  • valuta: Niz, ki predstavlja kodo valute ISO 4217 (kot je "USD", "EUR" ali "JPY"), ki se uporablja za oblikovanje. Če te možnosti ne omogočite, bo formater izbral kodo valute na podlagi uporabnikovih področnih nastavitev.
  • CurrencyDisplay: Ta lastnost določa, kako naj brskalnik prikaže valuto. Lahko je bodisi simbol (75 USD), koda (75 USD), oz ime (75 ameriških dolarjev).

Tukaj je primer, ki prikazuje, kako lahko oblikujete valuto:

konst št = 123456;
konst locale = getUserLocale(); // en-US
konst možnosti = {
 slog: "valuta",
 valuta: "AMERIŠKI DOLAR",
 prikaz valute: "Koda",
};


konst formater = novomedn.NumberFormat (lokacija, možnosti);
konzola.log (formatter.format (num)); // 123.456,00 USD

Zgornji blok kode oblikuje 123.456 kot valuto (USD).

Oblikovanje enot

Lahko uporabite medn. NumberFormat() konstruktor za oblikovanje števil z enotami, kot so dolžina, prostornina in masa. To lahko storite tako, da nastavite stil do enota. Ko nastavite slog na enoto, morate določiti te možnosti:

  • enota: Ta lastnost določa enoto za oblikovanje, kot je "meter", "kilogram", "liter", "sekunda" itd.
  • unitDisplay: Ta lastnost določa, kako naj brskalnik prikaže enoto. Lahko ga nastavite na bodisi dolga (10 litrov), kratek (10 L), oz ozek (10l).

Tukaj je primer, ki prikazuje, kako lahko formatirate enote:

konst št = 123456;
konst locale = getUserLocale();
konst možnosti = {
 slog: "enota",
 enota: "liter",
 enotaDisplay: "dolga",
};


konst formater = novomedn.NumberFormat (lokacija, možnosti);
konzola.log (formatter.format (num)); //123.456 litrov

Zgornji kodni blok oblikuje število 123.456 kot enoto v litrih.

Alternative za Intl API

Intl API ponuja močan in prilagodljiv nabor orodij za oblikovanje datumov, števil, valut in enot v aplikacijah JavaScript. Podpira številne lokalne nastavitve in zagotavlja dosleden način za oblikovanje podatkov v različnih kulturah in jezikih.

Morda boste želeli uporabiti alternativno knjižnico, na primer Luxon ali Day.js, zaradi omejene podpore brskalnika za Intl. Končno je odločitev med Intl API ali alternativo odvisna od posebnih zahtev in omejitev vašega projekta.