Skip to main content

5 posts tagged with "Intl"

View All Tags

`Intl.DisplayNames`

· 4 min read
Shu-yu Guo ([@_shu](https://twitter.com/_shu)) and Frank Yung-Fong Tang

Web applications that reach a global audience need to show the display names of languages, regions, scripts, and currencies in many different languages. The translations of those names require data, which is available in the Unicode CLDR. Packaging the data as part of the application incurs a cost on developer time. Users are likely to prefer consistent translations of language and region names, and keeping that data up to date with the world's geopolitical happenings requires constant maintenance.

`Intl.NumberFormat`

· 4 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias)) and Shane F. Carr

You might already be familiar with the Intl.NumberFormat API, as it’s been supported across modern environments for a while now.

In its most basic form, Intl.NumberFormat lets you create a reusable formatter instance that supports locale-aware number formatting. Just like other Intl.*Format APIs, a formatter instance supports both a format and a formatToParts method:

`Intl.ListFormat`

· 3 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias)) and Frank Yung-Fong Tang

Modern web applications often use lists consisting of dynamic data. For example, a photo viewer app might display something like:

This photo includes Ada, Edith, and Grace.

A text-based game might have a different kind of list:

Choose your superpower: invisibility, psychokinesis, or empathy.

Since each language has different list formatting conventions and words, implementing a localized list formatter is non-trivial. Not only does this require a list of all the words (such as “and” or “or” in the above examples) for each language you want to support — in addition you need to encode the exact formatting conventions for all those languages! The Unicode CLDR provides this data, but to use it in JavaScript, it has to be embedded and shipped alongside the other library code. This unfortunately increases the bundle size for such libraries, which negatively impacts load times, parse/compile cost, and memory consumption.

`Intl.RelativeTimeFormat`

· 5 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Modern web applications often use phrases like “yesterday”, “42 seconds ago”, or “in 3 months” instead of full dates and timestamps. Such relative time-formatted values have become so common that several popular libraries implement utility functions that format them in a localized manner. (Examples include Moment.js, Globalize, and date-fns.)

`Intl.PluralRules`

· 4 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Iñtërnâtiônàlizætiøn is hard. Handling plurals is one of many problems that might seem simple, until you realize every language has its own pluralization rules.

For English pluralization, there are only two possible outcomes. Let’s use the word “cat” as an example:

  • 1 cat, i.e. the 'one' form, known as the singular in English
  • 2 cats, but also 42 cats, 0.5 cats, etc., i.e. the 'other' form (the only other), known as the plural in English.

The brand new Intl.PluralRules API tells you which form applies in a language of your choice based on a given number.

const pr = new Intl.PluralRules('en-US');
pr.select(0); // 'other' (e.g. '0 cats')
pr.select(0.5); // 'other' (e.g. '0.5 cats')
pr.select(1); // 'one' (e.g. '1 cat')
pr.select(1.5); // 'other' (e.g. '0.5 cats')
pr.select(2); // 'other' (e.g. '0.5 cats')