Implement Internationalization in Javascript (A Headache For Developers)

by Janeth Kent Date: 12-07-2019 javascript coding ECMAScript API


Definitely, programmers living in the U.S. (and few additional locations in Mexico and Canada) are luckier than us about the age-old problem of internationalizing methods.

This makes their life so much easier because they don't have to think about internationalization: not about converting to distinct date formats, not about the idiosyncrasies occurring from language translations, and definitely not about the odds about other countries ' lists and currencies.

These issues for other professionals are extremely difficult. For instance, the absence of international standardization (and the failure to convert numbers) happened in a mismatch of metric units versus English units, causing NASA's Mars Orbiter to miss orbit around Mars in 1999.

While the numbers with which our business operates are not quite as big, and our mistakes result in bugs in the code that we can generally solve in a couple of hours or days, we can definitely sympathize with NASA technicians, and we cann't stop thinking about how a easy error like not double checking that everybody was using the same readings in the code of Orbiter caused such a loss.

That's why, when we heard the recent release of the ECMAScript Internationalization API, we were pleased to see what sorts of changes would make JavaScript better and more standardized for everyone using it around the globe.

 

International Date Time

 

Mozilla’s MDN Web Docs, provides the best description of the latest international API and the characteristics that come with it:

The INTL object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions.-MDN Web Docs

There are six properties that come with the new Intl object, but in our perspective, only five of them deserve our attention:

 

 

  • Intl.DateTimeFormat
  • Intl.RelativeTimeFormat
  • Intl.ListFormat
  • Intl.NumberFormat
  • Intl.PluralRules


Well, let's talk about the International Date Time Format.

The Intl.DateTimeFormat object is a constructor for objects that allows the formatting of date and time.

At its core, the date time format outputs formatted time stamps based on local and options objects.

Here is an overview using locales :

//Date.UTC(year, month, day, hours, minutes, seconds, millisec)
var date = new Date(Date.UTC(2019, 6, 8, 3, 0, 0));
// using US date time formatting
console.log(new Intl.DateTimeFormat('en-US').format(date));
// expected output: "7/8/2019" // using Great Britain date time formatting
console.log(new Intl.DateTimeFormat('en-GB').format(date));
// expected output: "8/7/2019"


Users can also provide extra parameters, such as:

  • nu - the number systems used in different countries,
  • ca - the calendar to use,
  • hc - hour cycle ( h12, h24, etc.).

After entering locales , we can switch to the the optional options object which can include properties such as:

  • timezone: "UTC” or something like"America/New_York",
  • hourCycle  : for example "h12" or "h23",
  • formatMatcher :  This algorithm can retrieve the properties used to describe the date and time and format the outputs to match.

formatMatcher  subsets like:

  • weekday, year, month, day, hour, minute, second
  • hour, minute, second

Additionally subset properties have different options. Here arethe options for weekday:

  • "long" (e.g., Monday),
  • "short" (e.g., Mon),
  • "narrow" (e.g., M).

Example:

var date = new Date(Date.UTC(2019, 6, 11, 3, 0, 0));
// calculate a weekday along with a long date in Japanese
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(new Intl.DateTimeFormat('ja-JP', options).format(date));
// expected output: "2019年11月7日水曜日"
// an application may want to use UTC and make that visible in German
options.timeZone = 'UTC';
options.timeZoneName = 'short';
console.log(new Intl.DateTimeFormat('es-ES', options).format(date));
// expected output: "Jueves, 11 Julio 2019, UTC"
// sometimes you want to be more precise in Australian English
options = {
hour: 'numeric', minute: 'numeric', second: 'numeric', 
timeZone: 'Australia/Sydney',
timeZoneName: 'short'
};
console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
// expected output: "2:00:00 pm AEDT"
// even the US needs 24-hour time for some occasions
options = {
year: 'numeric', month: 'numeric', day: 'numeric',
hour: 'numeric', minute: 'numeric', second: 'numeric',
hour12: false,
timeZone: 'America/Los_Angeles' 
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// expected output: "11/7/2019, 16:00:00"
// to specify options but use the browser's default locale, use 'default'
console.log(new Intl.DateTimeFormat('default', options).format(date));
// expected output: "11/7/2019, 16:00:00"

 

This is a fantastic feature. It will allow you to correctly translate dates and times and format them in so many specific ways that packages like moment.js, created specifically for the analysis, validation and manipulation of JavaScript dates and times, will become useless.

 

The International Relative Time Format

 

The Intl.RelativeTimeFormat object is a constructor for objects that enable language-sensitive relative time formatting.

Like the Intl.DateTimeFormat , this object accepts a locales parameter and an options object.

Like for  options , has a variety properties such as:

  • localeMatcher ---> a locale matching algorithm, with the options "best fit" or "lookup",
  • numeric ---> the format of the output message,
  • style ---> the length of the internationalized message.

style follows the same lines as weekday, in that it has three different values:

  • "long" (default, ex. 5 months),
  • "short" (ex in 5 mo.),
  • or "narrow" (ex, in 5 mo.).

narrow  and  short  could be the same depending on the country.
 

International List Format

 

The Intl.ListFormat object is a constructor for objects that enable language-sensitive list formatting.

It's hard enough to turn an array in a language into something that looks like a list understandable to people with the addition of ands or ors, so...try to do it in multiple languages.

the first optional parameter accepted by ListFormat is a locales specification.

The second object consists of options with parameters like:

  • localeMatcher — same options as with Intl.RelativeTimeFormat,
  • type - the format of the output message. Possible values are "conjunction", which stands for "and"-based lists ( 1, 2, and 3) or ( 1, 2, or 3). 
  • style - the length of the formatted message. Values include "long", "short", or "narrow".

Example

const vehicles = ['Motorcycle', 'Bus', 'Car'];
const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
console.log(formatter.format(vehicles));
// expected output: "Motorcycle, Bus, and Car"
const formatter2 = new Intl.ListFormat('de', { style: 'short', type: 'disjunction' });
console.log(formatter2.format(vehicles));
// expected output: "Motorcycle, Bus oder Car"
const formatter3 = new Intl.ListFormat('en', { style: 'narrow', type: 'unit' });
console.log(formatter3.format(vehicles));
// expected output: "Motorcycle Bus Car"


The International Number Format

 

The Intl.NumberFormat object is a constructor for objects that enable language sensitive number formatting.

Although the Intl.NumberFormat definition may seem complicated, the implications are considerable. It is an object builder that allows the formatting of language-sensitive numbers. And do you know what that means? Formatting for international currencies is greatly simplified.

As well as the locales and nu - the numbering system to be used, the Intl.NumberFormat object can accept the following options parameters:

  • localeMatcher,
  • style - Possible values are "decimal" for plain number formatting, "currency" for currency formatting, and "percent" for percent formatting; "decimal” is the default style.
  • currency - The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. The options are "symbol" like €, "code" to use the ISO currency code, or "name" such as "dollar".
  • useGrouping - Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. Possible values are true and false; the default is true.

We believe that the options minimumIntegerDigits and maximumSignificantDigits, have a limited utility, for now

 

var number = 123456.789;
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"
// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "¥123,457"
// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"


The International Plural Rules

 

The Intl.PluralRules object is a constructor for objects that enable plural sensitive formatting and plural language rules.

When you think about the rules for plurals in English, you will surely come to the conclusion that this is quite complicated: "a dog" becomes "two dogs" but "a goose" becomes "two geese", "one" becomes "two" but beyond "two" becomes "few" or "many" or "others" when describing a vague and larger number of objects, and so on, and so on - do you understand where we want to go?

Now imagine you have to know unwritten rules like this in more than one language..... like us writing in English, Italian and spanol :-).

In this case the International Plural Rules become a lifesaver.

Here's the parameters accepted:

International Plural Ruler accepts locales, and its options object takes in the following parameters:

  • localeMatcher — The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit".
  • type — the type to use. Possible values are: "cardinal" for cardinal numbers (referring to the quantity of things). This is the default value. Or "ordinal" for ordinal number (referring to the ordering or ranking of things, e.g. "1st", "2nd", "3rd" in English).

 

You can use Intl.PluralRules in several ways:

1. Without specifying a locale: a string formatted in the default locale and with the default options is returned. This meyhod is useful for distinguishing between singular and plural forms such as "cats" and "cats".

2. Use locales, in order to get the format of the language used in the user interface of your application.

3. Plural results can be customized using the options argument with the property type that you can set to ordinal.
 

Conclusions

 

Translating websites and applications is quite challenging, but learning how to correctly manage date and time formats, currencies and item lists with their numerous specific language rules is a real challenge.

The latest version of ECMAScript Internationalization API aims to make some of these difficult tasks smoother by letting its formatting methods, based on locales and any other option you want to specify.

For JavaScript developers working with international requirements, like us, this is a huge step forward.

 
by Janeth Kent Date: 12-07-2019 javascript coding ECMAScript API hits : 3145  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

A Java approach: The Cycles - Introduction

Hello everyone and welcome back! Until now, we have been talking about variables and selection structures, going to consider some of the fundamental aspects of these two concepts. Theoretically, to…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

Javascript: what are callbacks and how to use them.

Today we are going to learn about a concept that is widely used in javascript and that is used quite a lot by today's frameworks, libraries, especially NodeJS. This is…

A Java approach: variables - use case

Hello all friends and welcome back! After the introduction made on the variables, we try to analyse some critical issues that may arise in quite common situations. Let's start by analysing…

HTTP Cookies: how they work and how to use them

Today we are going to write about the way to store data in a browser, why websites use cookies and how they work in detail. Continue reading to find out how…

The package managers npm and yarn: main differences

Npm and yarn are package managers that help to manage a project’s dependencies. A dependency is, as it sounds, something that a project depends on, a piece of code that…

The Javascript asign() method to merge and clone objects

In this article, we will be covering Object.assign()method in javascript in detail with examples. A javascript object is a collection of key-value pairs. Keys are also known as properties of object. Keys…

All the javascript functions and methods to manipulate arrays

This article will show that the prominent JavaScript array functions are .map(), .filter(), and .reduce(), and will then go through examples of instances in which .every() and .some() would save…

TypeScript: The evolution of JavaScript

When you're involved in the development of a large project, programming languages like JavaScript don't seem to be the best solution. Their lack of elements such as Language Aids has…

Awesome JavaScript Games and Js Software to create Games

Best sites js13kGames 2019 - Highlights from the js13kGames 2019 competition. js13kGames 2018 - 13 Games in ≤ 13kB of JavaScript. js13kGames 2017 - Build a game in 13kB or less with js13kGames. Adventure Triangle:…

Is JavaScript good for machine learning?

One of the things you always hear when you are talking to someone related to the M.L. world is that, one must learn Python because the vast majority of the…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration