How does internationalization work in JavaScript?

Last Updated : 12 Sep, 2019

Internationalization (also referred to as i18n) is that the method of making or reworking product and services so they’ll simply be tailored to specific native languages and cultures. Localization (also referred to as L10n) is that the method of adapting internationalized computer code for a particular region or language. In alternative words, internationalization is that the method of adapting your computer code to support multiple cultures (currency format, date format, and so on), whereas localization is that the method of implementing one or additional culture.

These 2 processes are sometimes adopted by firms that have interests in numerous countries, but they may additionally are available handy for one developer performing on their own web site. as an example, as you may recognize, I’m Italian and that I own a web site. My web site is presented in English however I would arrange to internationalize it then localize it into Italian. this is often useful for people who are native Italian speakers and aren’t well aware of English people language.

Developers suppose i18n is regarding translations to non-English languages. That i18n is simply required for increasing the present application to multiple countries or markets. I continuously try and make a case for that i18n is regarding “talking” normally. each application, at some purpose, needs to “talk” to its users. to speak with the users, the applying might need pluralization support, gender inflection, date information, variety information, and currency information. Even in English, it’d be tough to induce this done properly.

Globalize and the JavaScript Internationalization API
To a number of you, this could come back to a surprise, however, JavaScript has native support for group action within the sort of the group action API (also referred to as ECMA-402).
The Intl object is an object available on the window object which acts as a namespace for the Internationalization API.
This API presently provides ways to format numbers and dates and to compare strings in a specific language.

Now that you know of the existence of the Internationalization API, you could be led into thinking that Globalize uses it behind the scenes.
This approach would sure cause a higher date and variety format performance.
However, as a result of the support is low and really inconsistent among browsers, the library doesn’t use it.

Now I want to give you a taste of the Internationalization API.

Formatting a Date

var date = new Date(2019, 2, 22); 
  
// "22/02/2019" 
console.log(new Intl.DateTimeFormat('it-IT').format(date)); 
  
// "02/22/2019" 
console.log(new Intl.DateTimeFormat('en-US').format(date)); 
  
// "22/02/2019" 
console.log(new Intl.DateTimeFormat('en-GB').format(date)); 

Output:

22/3/2019
3/22/2019
22/03/2019

In this example, I use the DateTimeFormat builder to make a replacement date formatter mistreatment the required venue (“it-IT”, “en-US”, and “en-GB”).
Then, I invoke the format methodology to format the date object.

Formatting a Number

var number = 2153.93; 
  
// "2.153, 88" 
console.log(new Intl.NumberFormat('it-IT').format(number)); 
  
// "2, 153.88" 
console.log(new Intl.NumberFormat('us-US').format(number)); 
  
// "2, 153.88" 
console.log(new Intl.NumberFormat('en-GB').format(number)); 

Output:

2.153,93
2,153.93
2,153.93

Conclusion

In this article, I discussed what internationalization is and why they are important to expand a product’s market. I briefly introduced you to the Internationalization API by mentioning some supported features and then, I showed some examples of their use.

Supported Browsers: The browsers supported by internationalization API are listed below: