How does internationalization work in JavaScript?

javascript internationalization
rajakvk picture rajakvk · Jun 21, 2010 · Viewed 111.9k times · Source

I'm wondering how to deal internationalization in JavaScript. I googled but I'm not getting convincing answers for:

  • Does JavaScript have native support for internationalization?
  • What is i18n in JavaScript?
  • How to deal with calendars, currencies, dates, etc.?

I've already read Internationalization inside JavaScript.

Answer

Andy E picture Andy E · Jun 21, 2010

Localization support in legacy browsers is poor. Originally, this was due to phrases in the ECMAScript language spec that look like this:

Number.prototype.toLocaleString()
Produces a string value that represents the value of the Number formatted according to the conventions of the host environment’s current locale. This function is implementation-dependent, and it is permissible, but not encouraged, for it to return the same thing as toString.

Every localization method defined in the spec is defined as "implementation-dependent", which results in a lot of inconsistencies. In this instance, Chrome Opera and Safari would return the same thing as .toString(). Firefox and IE will return locale formatted strings, and IE even includes a thousand separator (perfect for currency strings). Chrome was recently updated to return a thousands-separated string, though with no fixed decimal.

For modern environments, the ECMAScript Internationalization API spec, a new standard that complements the ECMAScript Language spec, provides much better support for string comparison, number formatting, and the date and time formatting; it also fixes the corresponding functions in the Language Spec. An introduction can be found here. Implementations are available in:

  • Chrome 24
  • Firefox 29
  • Internet Explorer 11
  • Opera 15

There is also a compatibility implementation, Intl.js, which will provide the API in environments where it doesn't already exist.

Determining the user's preferred language remains a problem since there's no specification for obtaining the current language. Each browser implements a method to obtain a language string, but this could be based on the user's operating system language or just the language of the browser:

// navigator.userLanguage for IE, navigator.language for others
var lang = navigator.language || navigator.userLanguage;

A good workaround for this is to dump the Accept-Language header from the server to the client. If formatted as a JavaScript, it can be passed to the Internationalization API constructors, which will automatically pick the best (or first-supported) locale.

In short, you have to put in a lot of the work yourself, or use a framework/library, because you cannot rely on the browser to do it for you.

Various libraries and plugins for localization:

  • Others:

Feel free to add/edit.

Related questions

JavaScript for detecting browser language preference

I have been trying to detect the browser language preference using JavaScript. If I set the browser language in IE in Tools>Internet Options>General>Languages, how do I read this value using JavaScript? Same problem for …

Read More
jQuery Datepicker localization

I need a french calendar and I can't understand the problem. I guess I'm not using the regional options like it should be. But... Here is my code : $(function() { $('#Date').datepicker({ showMonthAfterYear: false, showOn: 'both', buttonImage: 'media/img/calendar.…

Read More
Best practice javascript and multilanguage

what is the best practice for multilanguage website using DOM Manipulating with javascript? I build some dynamic parts of the website using javascript. My first thought was using an array with the text strings and the language code as index. …

Read More