Internationalization & Localization using ECMASCRIPT 6
Internationalization (i18n) is the process of creating or transforming products and services so that they can easily be adapted to specific local languages and cultures. Localization (L10n) is the process of adapting internationalized software for a specific region or language. In other words, internationalization is the process of adapting your software to support multiple cultures (currency format, date format, etc), while localization is the process of implementing one or more culture.
These two processes are usually used by companies that have users in different countries. For example, I’m Indian and I own a website. My website is currently in English but I might decide to internationalize it and then localize it into Hindi. This is beneficial for those that are native Hindi speakers and aren’t well accustomed to the English language. (Hindi, widely used language in India).
Before the standardization of API in ES6, we were using various libraries to format the data , Like we were using https://github.com/globalizejs/globalize lib for achieving the Internationalization & Localization. Here in this article we will be discussing some cool features which ES6 added in version.
Number Formatting
The Intl.NumberFormat object is a constructor for objects that enable language sensitive number formatting.
var numEng = new Intl.NumberFormat("en-US")
var numDe = new Intl.NumberFormat("de-DE")
numEng.format(1234567.89) === "1,234,567.89"
numDe.format(1234567.89) === "1.234.567,89"Currency Formatting
Format numbers with digit grouping, localized separators and attached currency symbol.
var numUSD = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
varnumGBP = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" })
var numEUR = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
numUSD.format(100200300.40) === "$100,200,300.40"
numGBP.format(100200300.40) === "£100,200,300.40"
numEUR.format(100200300.40) === "100.200.300,40 €"
Date/Time Formatting
Format date/time with localized ordering and separators.
var numEN = new Intl.DateTimeFormat("en-US")
var numDE = new Intl.DateTimeFormat("de-DE")
numEN.format(new Date("2015-01-02")) === "1/2/2015"
numDE.format(new Date("2015-01-02")) === "2.1.2015"Collation
Sorting a set of strings and searching within a set of strings. Collation is parameterized by locale and aware of Unicode.
// in German, "ä" sorts with "a"
// in Swedish, "ä" sorts after "z"
var list = [ "ä", "a", "z" ]
var numDE = new Intl.Collator("de")
var numSV = new Intl.Collator("sv")
numDE.compare("ä", "z") === -1
numSV.compare("ä", "z") === +1
console.log(list.sort(numDE.compare)) // [ "a", "ä", "z" ]
console.log(list.sort(numSV.compare)) // [ "a", "z", "ä" ]Conclusion
In this article, I discussed what internationalization and localization are and why they are important to expand a product’s market. I briefly introduced you to the Internationalization API. We can use them in day to day development since all major browsers support them.
Note:
In HYR Global Source, We have dedicated mentorship programs for students and software professionals to get into the world of web development. If it is something which interests you please connect us here – https://www.hyrglobalsource.com/contact.html
If you already well versed in technology, then we are always looking for bright minds like you, Please check out career page here – https://www.hyrglobalsource.com/careers.html
