Nå ut til et bredere publikum ved å skreddersy innholdet ditt til et hvilket som helst språk eller lokalitet med Intl API.

Intl API forenkler formatering og manipulering av internasjonalisert tekst, tall, datoer og valutaer. Den lar deg håndtere ulike dataformater i henhold til lokalitet.

Denne API-en løser utfordringen med å formatere data for ulike kulturer og språk. Det gjør det enkelt å formatere tall med riktig valutasymbol eller datoer ved å bruke riktig datoformat for en bestemt region.

Ved å bruke Intl API kan du lage nettapplikasjoner som er tilgjengelige og enkle å bruke for publikum på tvers av regioner og kulturer.

Få en brukers lokalitet

De JavaScript-konstruktører levert av Intl API identifiserer lokaliteten de vil bruke til å formatere dato, tekst, tall osv., etter et kjent mønster. Hver konstruktør tar en lokalitet og en alternativer objekt som argumenter. Ved å bruke disse argumentene, matcher konstruktøren de forespurte lokalitetene mot lokalitetene de støtter for øyeblikket.

instagram viewer

For å få en brukers lokalitet, kan du bruke navigator.språk eiendom. Denne egenskapen returnerer en streng som representerer språkversjonen av nettleseren.

Verdien av navigator.språk egenskapen er en BCP 47-språkkode, som består av en språkkode og eventuelt en regionkode og andre underkoder. For eksempel, "en-US" representerer engelsk slik det snakkes i USA.

Du kan også bruke navigator.språk egenskap for å få en rekke av brukerens foretrukne språk, sortert etter prioritet. Det første elementet i matrisen representerer brukerens primære språkpreferanse.

Når du har fått brukerens lokalitet, kan du tilpasse programmets visning av datoer, klokkeslett, tall og valutaer ved å bruke Intl API.

Du kan lage en enkel JavaScript-funksjon for å hjelpe deg med å finne en brukers lokalitet. Her er en kodebit som kan hjelpe:

konst getUserLocale = () => {
hvis (navigator.languages ​​&& navigator.languages.length) {
komme tilbake navigator.languages[0];
 }
komme tilbake navigator.language;
};
konsoll.log (getUserLocale());

Dette getUserLocale funksjonen returnerer det første elementet i egenskapen navigator.languages ​​hvis den er tilgjengelig. Ellers faller den tilbake til egenskapen navigator.language, som representerer brukerens foretrukne språk i eldre nettlesere.

Formatering av datoer for forskjellige steder

For å formatere datoer ved hjelp av Intl API, kan du bruke Intl. DateTimeFormat() konstruktør. Denne konstruktøren tar to argumenter: en lokalstreng og et alternativobjekt.

Alternativer-objektet kan inneholde egenskaper som styrer formateringen av datoen.

Noen av de vanligste alternativene inkluderer:

  • ukedag: Dette alternativet spesifiserer formatet for ukedagen. Du kan sette den til enten lang (Fredag), kort (fre), eller smal (F).
  • år: Dette alternativet spesifiserer formatet for året. Du kan sette den til enten numerisk (2023) eller 2-sifret (23).
  • måned: Dette alternativet spesifiserer formatet for måneden. Du kan sette den til enten numerisk (3), 2-sifret (03), lang (Mars), kort (mars), eller smal (M).
  • dag: Dette alternativet spesifiserer formatet for dagen. Du kan sette den til enten numerisk (2) eller 2-sifret (02).

Her er et eksempel som viser hvordan du formaterer en dato ved hjelp av Intl. DateTimeFormat() konstruktør:

konst dato = Dato.nå()
konst locale = getUserLocale();
konst alternativer = {
 ukedag: "lang",
 år: "numerisk",
 måned: "lang",
 dag: "numerisk",
};


konst formatter = nyIntl.DateTimeFormat (lokalitet, alternativer);
// ukedag, månedsdato, år (fredag ​​24. mars 2023)
konsoll.log (formatter.format (dato));

Denne koden setter opp et formateringsobjekt ved å sende brukerens lokalitet til Intl. DateTimeFormat(), sammen med et sett med alternativer. Den bruker deretter formateringsverktøyet til å transformere gjeldende dato til en streng. De alternativer objektet inneholder egenskaper som styrer formateringen av datoen.

Formatere forskjellige typer tall

Du kan bruke Intl API for å formatere tall ved hjelp av Intl. NumberFormat() konstruktør. Som Intl. DateTimeFormat(), tar denne konstruktøren en lokalstreng og et alternativobjekt som argumenter.

Alternativer-objektet inneholder egenskaper som styrer formateringen av tallet. Disse egenskapene varierer avhengig av spesifisert stil av nummeret.

Formatering av desimaler og prosenter

Du kan formatere tall som desimaler og prosenter ved å bruke Intl. NumberFormat() konstruktør ved å sette stilegenskapen til desimal for desimaler og prosent for prosenter.

Her er et eksempel som viser hvordan du formaterer en desimal:

konst num = 123456;
konst locale = getUserLocale(); // no-US
konst alternativer = {
 stil: "desimal",
 minimumFraction Digits: 2,
 maximumFraction Digits: 2,
 bruksgruppering: ekte,
};


konst formatter = nyIntl.TallFormat (lokalitet, alternativer);
konsoll.log (formater.format (antall)); // 123,456.00

Kodeblokken ovenfor formaterer 123 456 som en desimal med grupperingsskilletegn (,) og to desimaler.

Her er et eksempel som viser hvordan du formaterer en prosentandel:

konst num = 123456;
konst locale = getUserLocale();
konst alternativer = {
 stil: "prosent",
 bruksgruppering: ekte,
};


konst formatter = nyIntl.TallFormat (lokalitet, alternativer);
konsoll.log (formater.format (antall)); // 12,345,600%

Kodeblokken ovenfor uttrykker 123 456 i prosent med grupperingsskilletegn.

Formatering av valutaer

Du kan formatere tall som valutaer ved å sette stilegenskapen til valuta. Du bør angi andre alternativer ved siden av, for eksempel:

  • valuta: En streng som representerer ISO 4217-valutakoden (som "USD", "EUR" eller "JPY") som skal brukes til formatering. Hvis du ikke oppgir dette alternativet, vil formateren velge en valutakode basert på brukerens lokalitet.
  • valutavisning: Denne egenskapen spesifiserer hvordan nettleseren skal vise valutaen. Det kan enten være symbol (USD 75), kode (USD 75), eller Navn (75 amerikanske dollar).

Her er et eksempel som viser hvordan du kan formatere valuta:

konst num = 123456;
konst locale = getUserLocale(); // no-US
konst alternativer = {
 stil: "valuta",
 valuta: "USD",
 valutavisning: "kode",
};


konst formatter = nyIntl.TallFormat (lokalitet, alternativer);
konsoll.log (formater.format (antall)); // USD 123 456,00

Kodeblokken ovenfor formaterer 123 456 som en valuta (USD).

Formatering av enheter

Du kan bruke Intl. NumberFormat() konstruktør for å formatere tall med enheter, for eksempel lengde, volum og masse. Du kan gjøre dette ved å stille inn stil til enhet. Når du setter stilen til enhet, må du spesifisere disse alternativene:

  • enhet: Denne egenskapen spesifiserer enheten som skal brukes for formatering, for eksempel "meter", "kilogram", "liter", "sekund" og så videre.
  • enhetsskjerm: Denne egenskapen spesifiserer hvordan nettleseren skal vise enheten. Du kan sette den til enten lang (10 liter), kort (10 L), eller smal (10 l).

Her er et eksempel som viser hvordan du kan formatere enheter:

konst num = 123456;
konst locale = getUserLocale();
konst alternativer = {
 stil: "enhet",
 enhet: "liter",
 enhetsvisning: "lang",
};


konst formatter = nyIntl.TallFormat (lokalitet, alternativer);
konsoll.log (formater.format (antall)); //123.456 liter

Kodeblokken ovenfor formaterer tallet 123.456 som en enhet i liter.

Alternativer til Intl API

Intl API gir et kraftig og fleksibelt sett med verktøy for formatering av datoer, tall, valutaer og enheter i JavaScript-applikasjoner. Den støtter mange steder og gir en konsistent måte å formatere data på tvers av ulike kulturer og språk.

Det kan være lurt å bruke et alternativt bibliotek, som Luxon eller Day.js, på grunn av begrenset nettleserstøtte for Intl. Til syvende og sist avhenger avgjørelsen mellom Intl API eller et alternativ av prosjektets spesifikke krav og begrensninger.