Getting To Know The JavaScript Internationalization API

Let me start by boring you with the official definition from Wikipedia:

In computing, Internationalization and Localization are means of adapting computer software to different languages, regional differences and technical requirements of a target locale.

As application owners/developers, we desire to produce a good user experience and adjust the user interface of our applications based on the location and the language of the user. For example, a person from the US will see a different date format than a person from the UK.

To achieve this, most of us use today third-party libraries like globalize or rely on our built-in framework support, such as Angular.

However, JavaScript has native support for Internationalization. Yes, I know what you are thinking to yourself:

The support is low and very inconsistent among browsers.

But let me surprise you.

As you can see, all of the major browsers support it. Now that you are more carefree, let’s explore the basics.

Note: The Internationalization API is not a full Internationalization framework; it can be useful for common localization tasks involving dates, numbers, and currencies.

The Intl object

The Intl object is an object that acts as a namespace for the Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.

Formatting Numbers

The Intl.NumberFormat API allows you to format a number. Let’s consider a few examples.

Formatting Numbers

And of course, we can abstract it to our framework of choice. For example, if you work with VueJS, you can create a custom number filter.

VueJS number filter

You can find the full documentation on the MDN website.

Formatting Dates

The Intl.DateTimeFormat API enables language sensitive date and time formatting.

Formatting Dates

VueJS date filter

You can find the full documentation on the MDN website.

String Comparison

The Intl.Collator API allows enables language sensitive string comparison.

Collator example

You can find the full documentation on the MDN website.

Follow me on Medium or Twitter to read more about Angular, Vue and JS!