How to format date, currency or time period?

Yo!

Today I have a very interesting way for you to format most of your data (date, currencies, time to a particular moment, etc) without having to download external packages and rely on the solutions of others. Probably most people (from my observation), when they need to reformat some dates install a given package (I’m looking at you dayjs 👀), but this in most cases is not necessary, and only increases the final size of our application!

In this post, I’ll describe the workings of the built-in object in JS “Intl “, which allows us to format our data to a specific format in most everyday 😉

It’s an object that extends the Internationalization API from ECMAScript, which provides case-sensitive string comparison, number, date and time formatting and more (definition from MDN)

Its declaration looks roughly like this:
const formatter = new Intl.<name_method>(<locale (e.g. 'en-PL')>, <optional object with options>)

Without dwelling too long, I will proceed to show the operation with examples:

Formatting numbers

As you can see in the examples, we initialize an instance of our formatter by passing localeString and an optional configuration object, where we can pass what we want to format and how.

As you can see in the screenshot below by passing
style=`currency we tell our formatter to return values to match the currency format in the given country (the passed localeString). As you know, the US generally uses periods instead of commas (as in Poland, for example), and ‘dollar’ comes before a number. Fortunately, we don’t have to worry about these issues, because Intl takes care of it for us! 😉

With the “NumberFormat” instance we format everything related to numbers, so currencies, but also phone numbers, percentages and the like.

The examples below will explain the most:

Formatting currencies

Mostly already shown in the section above on formatting numbers, while here are some complementary examples:

Formatting dates

By creating an Intl instance with DateTimeFormat we can also easily format the date to meet our needs, need the name of the month in a particular language? Myk and you have the month name written in words in the current site language.

Formatting the time relatively to the date

With the RelativeTimeFormat instance, we can display that something happened “X time ago” or “in X time” relative to the current moment. Incredibly useful in chat rooms, for example, where we know that someone was available “X minutes ago” (known even from Messenger 😉 ).

The usage is incredibly simple as you can see below, to our RelativeTimeFormat instance we give a numeric value of “time” and then the unit in which we want to count it (for example, hours, minutes).

Formatting elements in lists

We can format our arrays of data into text that “enumerates” those elements. Instead of using join on the array and adding a hyphen (for example, “if”) we can simply use Intl!
This way from the array ["Samsung", "Apple", "Nokia"] we will get

Samsung, Apple and Nokia

( in case of conjuction option).

Collator

A super interesting case that allows us to compare elements taking into account their letter size and language-specific characters (e.g. ą, ę, ó for Polish) depending on the configuration.

As we can see below collatorPL compares Polish characters when sorting, so “ą” is further away than “a”. On the other hand, collatorUS does not distinguish between these characters and treats “ą” as “a” etc. (due to the fact that they do not occur in the English alphabet) and sorts them that way. The screen below will show the most!

Summary

That’s it for today! Did you know this object, use/use it on a daily basis?

~ Bartek

My website: https://bstefaniak.pl (currently only polish)
Linkedin: https://www.linkedin.com/in/bartosz-stefaniak-a82727222/

Source material.
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#examples