Nå en bredare publik genom att skräddarsy ditt innehåll till valfritt språk eller språk med Intl API.

Intl API förenklar formateringen och manipuleringen av internationaliserad text, siffror, datum och valutor. Det låter dig hantera olika dataformat beroende på plats.

Detta API löser utmaningen att formatera data för olika kulturer och språk. Det gör det enkelt att formatera siffror med lämplig valutasymbol eller datum med lämpligt datumformat för en specifik region.

Med hjälp av Intl API kan du skapa webbapplikationer som är tillgängliga och lätta att använda för publik över regioner och kulturer.

Få en användares lokalitet

De JavaScript-konstruktörer tillhandahålls av Intl API identifiera den plats som de kommer att använda för att formatera datum, text, nummer, etc., enligt ett välbekant mönster. Varje konstruktör tar en plats och en alternativ objekt som argument. Med hjälp av dessa argument matchar konstruktorn de begärda lokalerna mot de språk som de för närvarande stöder.

För att få en användares lokalitet kan du använda

instagram viewer
navigator.språk fast egendom. Den här egenskapen returnerar en sträng som representerar webbläsarens språkversion.

Värdet av navigator.språk egenskapen är en BCP 47-språktagg, som består av en språkkod och, valfritt, en regionkod och andra undertaggar. Till exempel representerar "en-US" engelska som talas i USA.

Du kan också använda navigator.språk egenskap för att få en uppsättning av användarens föredragna språk, sorterade efter prioritet. Det första objektet i arrayen representerar användarens primära språkpreferens.

När du har fått användarens språk kan du anpassa programmets visning av datum, tider, siffror och valutor med hjälp av Intl API.

Du kan skapa en enkel JavaScript-funktion för att hjälpa dig att få en användares språk. Här är ett kodavsnitt som kan hjälpa:

konst getUserLocale = () => {
om (navigator.languages ​​&& navigator.languages.length) {
lämna tillbaka navigator.languages[0];
 }
lämna tillbaka navigator.language;
};
trösta.log (getUserLocale());

Detta getUserLocale funktion returnerar det första elementet i egenskapen navigator.languages ​​om det är tillgängligt. Annars faller den tillbaka till egenskapen navigator.language, som representerar användarens föredragna språk i äldre webbläsare.

Formatera datum för olika platser

För att formatera datum med hjälp av Intl API kan du använda Intl. DateTimeFormat() konstruktör. Denna konstruktor tar två argument: en språksträng och ett optionsobjekt.

Alternativsobjektet kan innehålla egenskaper som styr formateringen av datumet.

Några av de vanligaste alternativen inkluderar:

  • veckodag: Det här alternativet anger formatet för veckodagen. Du kan ställa in den på antingen lång (Fredag), kort (fre), eller smal (F).
  • år: Det här alternativet anger årets format. Du kan ställa in den på antingen numerisk (2023) eller 2-siffrig (23).
  • månad: Det här alternativet anger månadens format. Du kan ställa in den på antingen numerisk (3), 2-siffrig (03), lång (Mars), kort (Mar), eller smal (M).
  • dag: Det här alternativet anger dagens format. Du kan ställa in den på antingen numerisk (2) eller 2-siffrig (02).

Här är ett exempel som visar hur man formaterar ett datum med hjälp av Intl. DateTimeFormat() konstruktör:

konst datum = Datum.nu()
konst locale = getUserLocale();
konst alternativ = {
 veckodag: "lång",
 år: "numerisk",
 månad: "lång",
 dag: "numerisk",
};


konst formatterare = nyIntl.DateTimeFormat (lokal, alternativ);
// veckodag, månad datum, år (fredag ​​24 mars 2023)
trösta.log (formatter.format (datum));

Den här koden ställer in ett formateringsobjekt genom att skicka användarens språk till Intl. DateTimeFormat(), tillsammans med en uppsättning alternativ. Den använder sedan formateraren för att omvandla det aktuella datumet till en sträng. De alternativ objektet innehåller egenskaper som styr formateringen av datumet.

Formatera olika typer av nummer

Du kan använda Intl API för att formatera siffror med hjälp av Intl. NumberFormat() konstruktör. Tycka om Intl. DateTimeFormat(), tar denna konstruktor en språksträng och ett optionsobjekt som argument.

Alternativsobjektet innehåller egenskaper som styr formateringen av numret. Dessa egenskaper varierar beroende på den specificerade stil av numret.

Formatera decimaler och procent

Du kan formatera siffror som decimaler och procenttal med Intl. NumberFormat() konstruktör genom att ställa in stilegenskapen till decimal för decimaler och procent för procentsatser.

Här är ett exempel som visar hur man formaterar en decimal:

konst num = 123456;
konst locale = getUserLocale(); // sv-US
konst alternativ = {
 stil: "decimal",
 minimumFraction Digits: 2,
 maximumFraction Digits: 2,
 useGrouping: Sann,
};


konst formatterare = nyIntl.NumberFormat (lokal, alternativ);
trösta.log (formatter.format (num)); // 123,456.00

Kodblocket ovan formaterar 123 456 som en decimal med grupperingsavgränsare (,) och två decimaler.

Här är ett exempel som visar hur man formaterar en procentsats:

konst num = 123456;
konst locale = getUserLocale();
konst alternativ = {
 stil: "procent",
 useGrouping: Sann,
};


konst formatterare = nyIntl.NumberFormat (lokal, alternativ);
trösta.log (formatter.format (num)); // 12,345,600%

Kodblocket ovan uttrycker 123 456 i procent med grupperingsavgränsare.

Formatera valutor

Du kan formatera siffror som valutor genom att ställa in stilegenskapen till valuta. Du bör ställa in andra alternativ bredvid den, till exempel:

  • valuta: En sträng som representerar ISO 4217-valutakoden (som "USD", "EUR" eller "JPY") som ska användas för formatering. Om du inte tillhandahåller det här alternativet kommer formateraren att välja en valutakod baserat på användarens språk.
  • valutadisplay: Den här egenskapen anger hur webbläsaren ska visa valutan. Det kan vara antingen symbol (75 USD), kod (75 USD), eller namn (75 US-dollar).

Här är ett exempel som visar hur du kan formatera valuta:

konst num = 123456;
konst locale = getUserLocale(); // sv-US
konst alternativ = {
 stil: "valuta",
 valuta: "USD",
 valutavisning: "koda",
};


konst formatterare = nyIntl.NumberFormat (lokal, alternativ);
trösta.log (formatter.format (num)); // USD 123 456,00

Kodblocket ovan formaterar 123 456 som en valuta (USD).

Formatera enheter

Du kan använda Intl. NumberFormat() konstruktor för att formatera tal med enheter, såsom längd, volym och massa. Du kan göra detta genom att ställa in stil till enhet. När du ställer in stilen till enhet måste du ange dessa alternativ:

  • enhet: Den här egenskapen anger enheten som ska användas för formatering, som "meter", "kilogram", "liter", "sekund" och så vidare.
  • enhetsdisplay: Den här egenskapen anger hur webbläsaren ska visa enheten. Du kan ställa in den på antingen lång (10 liter), kort (10 L), eller smal (10 1).

Här är ett exempel som visar hur du kan formatera enheter:

konst num = 123456;
konst locale = getUserLocale();
konst alternativ = {
 stil: "enhet",
 enhet: "liter",
 enhetsdisplay: "lång",
};


konst formatterare = nyIntl.NumberFormat (lokal, alternativ);
trösta.log (formatter.format (num)); //123 456 liter

Kodblocket ovan formaterar talet 123 456 som en enhet i liter.

Alternativ till Intl API

Intl API tillhandahåller en kraftfull och flexibel uppsättning verktyg för att formatera datum, siffror, valutor och enheter i JavaScript-applikationer. Det stöder många platser och ger ett konsekvent sätt att formatera data över olika kulturer och språk.

Du kanske vill använda ett alternativt bibliotek, som Luxon eller Day.js, på grund av begränsat webbläsarstöd för Intl. I slutändan beror valet mellan Intl API eller ett alternativ på ditt projekts specifika krav och begränsningar.