Format number and time with Intl in Javascript

We normally use library like momentjs or date-fns but it’s good to know altenative options in case we want to build something simple.

I. What is it?

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The Intl object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions.
Source: https://developer.mozilla.org/

So, in short, it’s an object that holds some ready-made functions that help format number and date with various locale options to choose.

II. What can we do with it

There are many things we can do with Intl object.
Below are the list decendending from the most frequently used, in my opinion.
- Format number (display decimal separator, display with currency unit)
- Format datetime (display date as locales selection)
- Return relative time format
- Format list
- Collator
- Segmenter
- PluralRules

III. How to use it

1. Format number

This will display the nuber with decimal separator and some extra display options.

new Intl.NumberFormat(locale, options).format(number)

• locale *(optional)*: string | string[], language code can be found here http://www.lingoes.net/en/translator/langcode.htm You can also put a fall-back locale in case the first one is not supported in an array.
• options *(optional)*: most popular options are style : to declare the foramt type, either it’s percent/currency/decimal or a unit. When use currency option, you need to provide the currency as well, like this new Intl.NumberFormat({ style: ‘unit’}).format(number)

When no locales or options were provided, default locale is your browser’s locale and the style is decimal.

2. Format datetime

new Intl.DateTimeFormat(locale, options).format(date)

• locale *(optional)*: string | string[] , language code can be found here. You can also put a fall-back locale in case the first one is not supported in an array.
• options *(optional)*: to specify how you want specify for each details like this options = {
hour: ‘numeric’, minute: ‘numeric’, second: ‘numeric’,
timeZone: ‘Australia/Sydney’,
timeZoneName: ‘short’
};

3. RelativeTimeFormat
This return the term “a day ago” ot “in a day”.

new Intl.RelativeTimeFormat(locale, options).format(timePeriod, type)

• locale *(optional)*: string | string[], language code can be found here. You can also put a fall-back locale in case the first one is not supported in an array.
• options *(optional)*: to specify how you want specify for each details like this, include:
  + localeMatcher: “best fit”, // other values: “lookup”
  + numeric: “always”, // other values: “auto”
  + style: “long”, // other values: “short” or “narrow”`
• timeDifferent: is your calculation to demonstrate the time period (start to end). Negative value will return time ‘ago’, positive value will return “in” time.
• type: unit of time, it should match how you calculate the time period

4. Others
The remaining function are just returning the value in literal form.
- ListFormat: if you have an array of string [“a”, “b”, “c”], using this function will return `”a, b and c”` or `”a,b or c”`
- Collator: this is used to compare the string, for some languages the alphabet order is different, so you can use this to compare the string before sort
- Segmenter: return a grapheme/word/sentence from a string.
- PluralRules: return relative quantity (few, many, one, zero,…) according to locale.

Check out mozilla site for more details. See you in another post 🤟
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl