Bereik een breder publiek door uw inhoud aan te passen aan elke taal of landinstelling met de Intl API.
De Intl API vereenvoudigt de opmaak en manipulatie van geïnternationaliseerde tekst, getallen, datums en valuta's. Hiermee kunt u verschillende gegevensindelingen verwerken, afhankelijk van de landinstelling.
Deze API lost de uitdaging op van het opmaken van gegevens voor verschillende culturen en talen. Het maakt het gemakkelijk om getallen op te maken met het juiste valutasymbool of datums met behulp van het juiste datumformaat voor een specifieke regio.
Met de Intl API kunt u webapplicaties maken die toegankelijk en gebruiksvriendelijk zijn voor doelgroepen in verschillende regio's en culturen.
De landinstelling van een gebruiker verkrijgen
De JavaScript-constructeurs die door de Intl API wordt geleverd, identificeert de landinstelling die ze zullen gebruiken om de datum, tekst, nummer, enz. op te maken, volgens een bekend patroon. Elke constructeur neemt een plaats en een opties bezwaar als argumenten. Met behulp van deze argumenten vergelijkt de constructor de aangevraagde locale(s) met de locales die ze momenteel ondersteunen.
Om de landinstelling van een gebruiker te krijgen, kunt u de navigator.taal eigendom. Deze eigenschap retourneert een tekenreeks die de taalversie van de browser vertegenwoordigt.
De waarde van de navigator.taal eigenschap is een BCP 47-taaltag, die bestaat uit een taalcode en, optioneel, een regiocode en andere subtags. 'en-US' staat bijvoorbeeld voor Engels zoals dat wordt gesproken in de Verenigde Staten.
U kunt ook de navigator.talen eigenschap om een reeks voorkeurstalen van de gebruiker te krijgen, gesorteerd op prioriteit. Het eerste item in de array vertegenwoordigt de primaire taalvoorkeur van de gebruiker.
Zodra u de landinstelling van de gebruiker hebt verkregen, kunt u de weergave van datums, tijden, getallen en valuta's in uw toepassing aanpassen met behulp van de Int API.
U kunt een eenvoudig maken JavaScript-functie om u te helpen de locale van een gebruiker te vinden. Hier is een codefragment dat kan helpen:
const getUserLokale = () => {
als (navigator.talen && navigator.talen.lengte) {
opbrengst navigator.talen[0];
}
opbrengst navigator.taal;
};
troosten.log (getUserLokale());
Dit getUserLokale functie retourneert het eerste element van de eigenschap navigator.languages, indien beschikbaar. Anders valt het terug op de eigenschap navigator.language, die de voorkeurstaal van de gebruiker in oudere browsers vertegenwoordigt.
Datums opmaken voor verschillende locales
Datums opmaken met behulp van de Int API, kunt u de Int. DateTimeFormat() constructeur. Deze constructor heeft twee argumenten: een locale-tekenreeks en een optie-object.
Het object options kan eigenschappen bevatten die de opmaak van de datum bepalen.
Enkele veelgebruikte opties zijn:
- weekdag: Deze optie specificeert het formaat van de dag van de week. Je kunt het op beide instellen lang (Vrijdag), kort (vr), of smal (F).
- jaar: Deze optie specificeert het formaat van het jaar. Je kunt het op beide instellen numeriek (2023) of 2-cijferig (23).
- maand: Deze optie specificeert het formaat van de maand. Je kunt het op beide instellen numeriek (3), 2-cijferig (03), lang (Maart), kort (maart), of smal (M).
- dag: Deze optie specificeert het formaat van de dag. Je kunt het op beide instellen numeriek (2) of 2-cijferig (02).
Hier is een voorbeeld dat laat zien hoe een datum moet worden opgemaakt met behulp van de Int. DateTimeFormat() constructeur:
const datum = Datum.nu()
const landinstelling = getUserLocale();const opties = {
weekdag: "lang",
jaar: "numeriek",
maand: "lang",
dag: "numeriek",
};const opmaak = nieuwInt.DateTimeFormat (locale, opties);
// weekdag, maanddatum, jaar (vrijdag 24 maart 2023)
troosten.log (formatter.format (datum));
Deze code stelt een formatter-object in door de locale van de gebruiker door te geven aan Int. DateTimeFormat(), samen met een reeks opties. Vervolgens gebruikt het de formatter om de huidige datum om te zetten in een string. De opties object bevat eigenschappen die de opmaak van de datum bepalen.
Verschillende soorten getallen opmaken
U kunt de Int API om getallen op te maken met behulp van de Int. Nummer formaat() constructeur. Leuk vinden Int. DateTimeFormat(), neemt deze constructor een locale string en een options object als argumenten.
Het object options bevat eigenschappen die de opmaak van het getal bepalen. Deze eigenschappen variëren afhankelijk van de opgegeven stijl van het nummer.
Decimalen en percentages opmaken
U kunt getallen opmaken als decimalen en percentages met behulp van Int. Nummer formaat() constructor door de eigenschap style in te stellen op decimale voor decimalen en procent voor percentages.
Hier is een voorbeeld dat laat zien hoe een decimaal getal moet worden opgemaakt:
const aantal = 123456;
const landinstelling = getUserLocale(); // nl-VSconst opties = {
stijl: "decimale",
minimumFractionCijfers: 2,
maximumFractionCijfers: 2,
gebruik Groeperen: WAAR,
};const opmaak = nieuwInt.NumberFormat (locale, opties);
troosten.log (formatter.format (aantal)); // 123,456.00
Het bovenstaande codeblok formatteert 123.456 als een decimaal getal met groeperingsscheidingstekens (,) en twee decimalen.
Hier is een voorbeeld dat laat zien hoe een percentage moet worden opgemaakt:
const aantal = 123456;
const landinstelling = getUserLocale();const opties = {
stijl: "procent",
gebruik Groeperen: WAAR,
};const opmaak = nieuwInt.NumberFormat (locale, opties);
troosten.log (formatter.format (aantal)); // 12,345,600%
Het codeblok hierboven drukt 123.456 uit als een percentage met scheidingstekens voor groepen.
Valuta's opmaken
U kunt getallen opmaken als valuta door de stijleigenschap in te stellen op munteenheid. Je moet er andere opties naast instellen, zoals:
- munteenheid: Een tekenreeks die de ISO 4217-valutacode vertegenwoordigt (zoals "USD", "EUR" of "JPY") om te gebruiken voor opmaak. Als u deze optie niet verstrekt, kiest de formatter een valutacode op basis van de landinstelling van de gebruiker.
- valutaweergeven: Deze eigenschap geeft aan hoe de browser de valuta moet weergeven. Het kan of zijn symbool (US$ 75), code (USD 75), of naam (75 Amerikaanse dollars).
Hier is een voorbeeld dat laat zien hoe u valuta kunt opmaken:
const aantal = 123456;
const landinstelling = getUserLocale(); // nl-VSconst opties = {
stijl: "munteenheid",
munteenheid: "AMERIKAANSE DOLLAR",
valutaweergeven: "code",
};const opmaak = nieuwInt.NumberFormat (locale, opties);
troosten.log (formatter.format (aantal)); // USD 123.456,00
Het codeblok hierboven formatteert 123.456 als een valuta (USD).
Eenheden formatteren
U kunt de Int. Nummer formaat() constructor om getallen op te maken met eenheden, zoals lengte, volume en massa. Dit doe je door de instelling stijl naar eenheid. Wanneer u de stijl instelt op eenheid, moet u deze opties specificeren:
- eenheid: Deze eigenschap specificeert de eenheid die moet worden gebruikt voor opmaak, zoals "meter", "kilogram", "liter", "seconde", enzovoort.
- eenheidWeergave: Deze eigenschap specificeert hoe de browser het apparaat moet weergeven. Je kunt het op beide instellen lang (10 liter), kort (10 L), of smal (10l).
Hier is een voorbeeld dat laat zien hoe u eenheden kunt opmaken:
const aantal = 123456;
const landinstelling = getUserLocale();const opties = {
stijl: "eenheid",
eenheid: "liter",
eenheidDisplay: "lang",
};const opmaak = nieuwInt.NumberFormat (locale, opties);
troosten.log (formatter.format (aantal)); // 123.456 liter
Het codeblok hierboven formatteert het getal 123.456 als een eenheid in liters.
Alternatieven voor de Intl API
De Intl API biedt een krachtige en flexibele set tools voor het opmaken van datums, getallen, valuta's en eenheden in JavaScript-toepassingen. Het ondersteunt veel landinstellingen en biedt een consistente manier om gegevens in verschillende culturen en talen op te maken.
Mogelijk wilt u een alternatieve bibliotheek gebruiken, zoals Luxon of Day.js, vanwege beperkte browserondersteuning voor Intl. Uiteindelijk hangt de beslissing tussen de Intl API of een alternatief af van de specifieke vereisten en beperkingen van uw project.
