Nå ud til et bredere publikum ved at skræddersy dit indhold til ethvert sprog eller lokalitet med Intl API.

Intl API forenkler formatering og manipulation af internationaliseret tekst, tal, datoer og valutaer. Det lader dig håndtere forskellige dataformater i henhold til lokalitet.

Denne API løser udfordringen med at formatere data til forskellige kulturer og sprog. Det gør det nemt at formatere tal med det eller de relevante valutasymboler ved hjælp af det passende datoformat for en bestemt region.

Ved hjælp af Intl API kan du oprette webapplikationer, der er tilgængelige og nemme at bruge for publikum på tværs af regioner og kulturer.

Få en brugers lokalitet

Det JavaScript konstruktører leveret af Intl API identificere den lokalitet, de vil bruge til at formatere dato, tekst, nummer osv. efter et velkendt mønster. Hver konstruktør tager en lokalitet og en muligheder objekt som argumenter. Ved at bruge disse argumenter matcher konstruktøren de(n) anmodede lokalitet(er) med de lokaliteter, de i øjeblikket understøtter.

instagram viewer

For at få en brugers landestandard kan du bruge navigator.sprog ejendom. Denne egenskab returnerer en streng, der repræsenterer sprogversionen af ​​browseren.

Værdien af navigator.sprog egenskaben er et BCP 47 sprogtag, som består af en sprogkode og eventuelt en regionskode og andre undertags. For eksempel repræsenterer "en-US" engelsk, som det tales i USA.

Du kan også bruge navigator.sprog egenskab for at få en række af brugerens foretrukne sprog, sorteret efter prioritet. Det første element i arrayet repræsenterer brugerens primære sprogpræference.

Når du har fået brugerens lokalitet, kan du tilpasse din applikations visning af datoer, klokkeslæt, tal og valutaer ved hjælp af Intl API.

Du kan oprette en simpel JavaScript funktion for at hjælpe dig med at få en brugers lokalitet. Her er et kodestykke, der kan hjælpe:

konst getUserLocale = () => {
hvis (navigator.languages ​​&& navigator.languages.length) {
Vend tilbage navigator.languages[0];
 }
Vend tilbage navigator.sprog;
};
konsol.log (getUserLocale());

Det her getUserLocale funktion returnerer det første element i egenskaben navigator.languages, hvis det er tilgængeligt. Ellers falder det tilbage til egenskaben navigator.language, som repræsenterer brugerens foretrukne sprog i ældre browsere.

Formatering af datoer for forskellige lokaliteter

For at formatere datoer ved hjælp af Intl API, kan du bruge Intl. DatoTimeFormat() konstruktør. Denne konstruktør tager to argumenter: en lokalitetsstreng og et optionsobjekt.

Indstillingsobjektet kan indeholde egenskaber, der styrer formateringen af ​​datoen.

Nogle af de almindeligt anvendte muligheder inkluderer:

  • hverdag: Denne indstilling angiver formatet på ugedagen. Du kan indstille det til enten lang (Fredag), kort (fre) eller smal (F).
  • år: Denne indstilling angiver årets format. Du kan indstille det til enten numerisk (2023) eller 2-cifret (23).
  • måned: Denne indstilling angiver månedens format. Du kan indstille det til enten numerisk (3), 2-cifret (03), lang (Marts), kort (Mar), eller smal (M).
  • dag: Denne indstilling angiver dagens format. Du kan indstille det til enten numerisk (2) eller 2-cifret (02).

Her er et eksempel, der viser, hvordan man formaterer en dato ved hjælp af Intl. DatoTimeFormat() konstruktør:

konst dato = Dato.nu()
konst locale = getUserLocale();
konst muligheder = {
 hverdag: "lang",
 år: "numerisk",
 måned: "lang",
 dag: "numerisk",
};


konst formater = nyIntl.DateTimeFormat (lokalitet, muligheder);
// ugedag, månedsdato, år (fredag ​​den 24. marts 2023)
konsol.log (formatter.format (dato));

Denne kode opsætter et formateringsobjekt ved at videregive brugerens lokalitet til Intl. DatoTimeFormat(), sammen med et sæt muligheder. Den bruger derefter formateringsværktøjet til at omdanne den aktuelle dato til en streng. Det muligheder objektet indeholder egenskaber, der styrer formateringen af ​​datoen.

Formatering af forskellige typer tal

Du kan bruge Intl API til at formatere tal ved hjælp af Intl. NumberFormat() konstruktør. Synes godt om Intl. DatoTimeFormat(), tager denne konstruktør en lokalitetsstreng og et optionsobjekt som argumenter.

Indstillingsobjektet indeholder egenskaber, der styrer formateringen af ​​tallet. Disse egenskaber varierer afhængigt af de specificerede stil af nummeret.

Formatering af decimaler og procenter

Du kan formatere tal som decimaler og procenter vha Intl. NumberFormat() konstruktør ved at sætte egenskaben stil til decimal for decimaler og procent for procenter.

Her er et eksempel, der viser, hvordan man formaterer en decimal:

konst antal = 123456;
konst locale = getUserLocale(); // da-US
konst muligheder = {
 stil: "decimal",
 minimumFraction Digits: 2,
 maximumFraction Digits: 2,
 brug gruppering: rigtigt,
};


konst formater = nyIntl.NumberFormat (lokalitet, muligheder);
konsol.log (formatter.format (antal)); // 123,456.00

Kodeblokken ovenfor formaterer 123.456 som en decimal med grupperingsadskillere (,) og to decimaler.

Her er et eksempel, der viser, hvordan man formaterer en procentdel:

konst antal = 123456;
konst locale = getUserLocale();
konst muligheder = {
 stil: "procent",
 brug gruppering: rigtigt,
};


konst formater = nyIntl.NumberFormat (lokalitet, muligheder);
konsol.log (formatter.format (antal)); // 12,345,600%

Kodeblokken ovenfor udtrykker 123.456 i procent med grupperingsseparatorer.

Formatering af valutaer

Du kan formatere tal som valutaer ved at indstille stilegenskaben til betalingsmiddel. Du bør indstille andre muligheder ved siden af ​​det, såsom:

  • betalingsmiddel: En streng, der repræsenterer ISO 4217-valutakoden (såsom "USD", "EUR" eller "JPY") til brug til formatering. Hvis du ikke angiver denne mulighed, vil formateringsværktøjet vælge en valutakode baseret på brugerens lokalitet.
  • valutavisning: Denne egenskab angiver, hvordan browseren skal vise valutaen. Det kan enten være symbol (75 USD), kode (75 USD), eller navn (75 amerikanske dollars).

Her er et eksempel, der viser, hvordan du kan formatere valuta:

konst antal = 123456;
konst locale = getUserLocale(); // da-US
konst muligheder = {
 stil: "betalingsmiddel",
 betalingsmiddel: "USD",
 valutavisning: "kode",
};


konst formater = nyIntl.NumberFormat (lokalitet, muligheder);
konsol.log (formatter.format (antal)); // USD 123.456,00

Kodeblokken ovenfor formaterer 123.456 som en valuta (USD).

Formatering af enheder

Du kan bruge Intl. NumberFormat() konstruktør til at formatere tal med enheder, såsom længde, volumen og masse. Du kan gøre dette ved at indstille stil til enhed. Når du indstiller stilen til enhed, skal du angive disse muligheder:

  • enhed: Denne egenskab angiver den enhed, der skal bruges til formatering, såsom "meter", "kilogram", "liter", "sekund" og så videre.
  • enhed Display: Denne egenskab angiver, hvordan browseren skal vise enheden. Du kan indstille det til enten lang (10 liter), kort (10 L), eller smal (10 l).

Her er et eksempel, der viser, hvordan du kan formatere enheder:

konst antal = 123456;
konst locale = getUserLocale();
konst muligheder = {
 stil: "enhed",
 enhed: "liter",
 enhed Display: "lang",
};


konst formater = nyIntl.NumberFormat (lokalitet, muligheder);
konsol.log (formatter.format (antal)); //123.456 liter

Kodeblokken ovenfor formaterer tallet 123.456 som en enhed i liter.

Alternativer til Intl API

Intl API giver et kraftfuldt og fleksibelt sæt værktøjer til formatering af datoer, tal, valutaer og enheder i JavaScript-applikationer. Det understøtter mange lokaliteter og giver en ensartet måde at formatere data på tværs af forskellige kulturer og sprog.

Du vil måske bruge et alternativt bibliotek, såsom Luxon eller Day.js, på grund af begrænset browserunderstøttelse for Intl. I sidste ende afhænger beslutningen mellem Intl API eller et alternativ af dit projekts specifikke krav og begrænsninger.