JavaScript heeft lang de naam gehad weliswaar een krachtige taal te zijn, maar waarbij voor het serieuze werk toch aanvullende gereedschappen nodig zijn. Voor het manipuleren van webpagina’s was jQuery jarenlang de aangewezen tool. Voor het rekenen met datums en tijden en het omzetten van het lastige datumformaat van JavaScript naar leesbare tekst werd veelal de bibliotheek moment.js gebruikt. Dat is handig, maar betekent ook dat potentieel tientallen extra kilobytes voor het ondersteunen van allerlei talen wordt meegebundeld met uw applicatie. Maar dat hoeft nu niet meer dankzij de API Intl.

Er was al de website You might not need jQuery, de nieuwe specificaties van JavaScript voorzien tevens in een API die Intl heet (een afkorting voor ‘internationalization’), waarin de meest voorkomende handelingen voor het werken met datums, tijden, getallen en valuta zijn gebundeld.

De API Intl

In de nieuwste versies van Internet Explorer, Edge, Chrome en Firefox is de API Intl ingebakken en kan hij rechtstreeks vanuit JavaScript-code worden aangeroepen. Tip: wilt u weten of een bepaalde feature door uw favoriete browser wordt ondersteund, bezoek dan caniuse.com en typ de naam van de eigenschap. De website laat zien welke versies van de browser de gevraagde eigenschap ondersteunen (of niet).

De API Intl biedt tal van mogelijkheden, waarvan we er in dit artikel twee bespreken. De opties zijn echter eenvoudig te controleren in de console van de Developer Tools in Chrome. Typ daarin de naam van de API (‘Intl’, zonder de aanhalingstekens) en druk op Enter. Zoals de afbeelding laat zien beschikt Intl momenteel over negen opties, waarvan de volgende het meest gebruikt worden:

• DateTimeFormat – noteer datums en tijden volgens het gebruikelijke formaat van de locale. In Nederland dus bijvoorbeeld dd-mm-jjjj, in de Verenigde Staten mm-dd-jjjj.
• NumberFormat – noteer getallen in duizendtallen met punten en komma’s zoals in de aangegeven taal gebruikelijk is. In Nederland noteren we een miljoen bijvoorbeeld als 1.000.000, maar in de Verenigde staten als 1,000,000. Optioneel kan een valutasymbool (zoals EUR, USD of JPY) worden aangegeven.
• PluralRules – noteer getallen volgens een woord of meervoud dat in de aangegeven taal gebruikelijk is.
• RelativeTimeFormat – noteer datums in woorden zoals in de aangegeven taal gebruikelijk is. Bijvoorbeeld ‘een week geleden’ of ‘over twee maanden’.

Een aantal mogelijkheden (getCanonicalLocales en v8BreakIterator) zijn nog in het teststadium en maken nog geen deel uit van de officiële JavaScript-specificaties. Ze zullen pas later in andere browsers worden toegevoegd. De opties die we hieronder bespreken zijn echter algemeen toepasbaar. Ze werken ook in Edge, Firefox en Safari.

Intl.RelativeTimeFormat

De optie Intl.RelativeTimeFormat wordt gebruikt om moeilijk leesbare datum- en tijdcodes weer te geven in een voor mensen vriendelijk leesbaar formaat, zodat direct duidelijk is wat er wordt bedoeld. Hierbij worden Engelstalige termen gebruikt voor datumaanduidingen (zoals dag, maand, jaar en kwartaal) en getallen als offset. Negatieve getallen liggen in het verleden, positieve getallen in de toekomst. Uw code kan er bijvoorbeeld uitzien als:

const rtf = new Intl.RelativeTimeFormat('en-US', {numeric: 'auto'});
rtf.format(-1, 'month'); // 'last month'
rtf.format(0, 'month'); // 'this month'
rtf.format(2, 'week'); // 'in 2 weeks'

Maar wanneer we de locale wijzigen van en-US naar bijvoorbeeld nl-NL, wordt de uitvoer van dezelfde code als volgt:

rtf.format(-1, 'month')); // 'vorige maand'
rtf.format(0, 'month'); // 'deze maand'
rtf.format(2, 'week')); // 'over twee weken'

Op die manier kun je elke locale (taalcode) gebruiken en zal de browser automatisch de correcte notatie weergeven, desgewenst zelfs in het Chinees, Hebreeuws of Tamil.

Intl.NumberFormat

Met Intl.NumberFormat kun je eenvoudig valuta formatteren. De aanroep naar deze functie accepteert een aantal opties die als object kunnen worden meegegeven. Om 1000 dollar of 1000 euro te tonen, moet u bijvoorbeeld letten op de spatie tussen het valutasymbool en de punten en komma’s. Intl.NumberFormat doet dat automatisch correct:

console.log(new Intl.NumberFormat('en-US', {
currency:'USD',
style: 'currency',
maximumFractionDigits:2
}).format(1000)); // $1,000.00
console.log(new Intl.NumberFormat('nl-NL', {
currency:'EUR',
style: 'currency',
maximumFractionDigits:2
}).format(1000)); // € 1.000,00

Conclusie

Zo bevat de API Intl nog veel meer handige extraatjes die het overbodig maken externe bibliotheken toe te voegen aan uw JavaScript-applicaties. De overhead van uw applicatie wordt hiermee een stuk minder, de browser kan steeds meer zelf. Maak hier gebruik van. Tot slot enkele handige links waar u meer informatie kunt vinden over de API Intl.

• https://youtu.be/c0oy0vQKEZE?t=1319 – What’s new in JavaScript, door Google Chrome Developers op Google I/O 2019.
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl – documentatie van de API Intl.
• https://www.science.co.il/language/Locale-codes.php – Lijst met mogelijke locale- en landcodes.

Peter Kassenaar schrijft maandelijks over web development op dit blog. Al zijn blogposts over dit onderwerp kun je HIER vinden. Vorige maand was er een podcast over zijn nieuwe boek Vue.js.

Het boek kun je HIER bestellen bij de uitgever.

Peter Kassenaar

Peter Kassenaar is auteur van vele boeken over algemeen pc-gebruik, programmeertalen en internettechnieken. Hij is gespecialiseerd in frond-endtools, -frameworks en -toepassingen. Via zijn eigen bedrijf verzorgt hij trainingen op deze gebieden voor bedrijven en organisaties. De boeken van Peter vind je hier.