Anyone who’s ever written anything substantial in JavaScript knows this story: in order to connect text strings, we need to use a sort of spaghetti code. There are a few libraries that do templating, but there is nothing inherent in JavaScript. That is to say, there wasn't, until ECMAScript 6 walked into our lives. Check this out:

Notice the quotation marks. We’re not talking about regular ol’ single or double quotation marks—this is the backtick (it’s on the same key as the tilda). Between them, we can put anything including complex objects.

So what do we have here? We have a special function that I called stringManipulation, but it could be called anything. I pass my expression to it (in this case foo\n${ 42 }bar), and notice that it’s inside of those backticks. Also notice that I’m passing that text string in not the prettiest manner, but it’s necessary for functions that handle text strings. I print the result that I get from the function. In this case since the function returns someResult, that’s exactly what I’ll receive.

What’s interesting here is what’s happening inside the function, which uses the ES6 argument syntax that we covered earlier. We have access to everything inside the expression. From the simple text that’s passed that comes inside the array, to the values inside the braces that also come in an array. In the example I’m just printing them, but in reality I can do whatever I want and return whatever I want.

Now, isn’t it true that compared to generators, breaking down arrays, and for in loop, this is really easy and something we can use right away?

Well if you thought it can’t get any better, say hello to the i18n function. For those of you not familiar with this, we’re talking about a nickname for internationalization—between the i and the n there are 18 letters. An example of this internationalization is how in the USA the date is written with the month first, as opposed to the day first in most of the world. So in the US September first is written 09/01, where in the rest of the world it would be 01/09. Or regarding the order of alphabets, the Teutonic Germans put the ä right after the a, but the viking Swedes put it after the z. And there are a host of other little things like that which have been making people lose sleep for many a generation.

ECMAScript 6 helps us with this madness by way of the intl object. For those of you who want to take a peek at MDN, you’ll find there are a few interesting plans that can help with internationalization issues.

Let’s check out sorting order.

Using Intl.Collator we can set a different sort order for lists. This is more or less a sorting function customized to a langage. So let’s take a scene from real life. Let’s say we have an array with members in Hebrew and in English and we need to sort them. Obviously we’ll use sort on the array. But unfortunately it will put the Hebrew values first. But we can use collator and get result like these:

This is really more relevant to other languages where the same letters appear in different orders. Remember the difference between German and Swedish? Here the Intl.Collator solves the problem with elegance:

Another cool example is with numbers. In most places it customary to write numbers with a comma, as in 1000 is show 1,000. But not everywhere—in Germany for example they use a dot instead of a comma. Before ES6 we had to sweat blood with this one, but now it’s super easy. We just need to use the country and language codes according to the ISO and use the Intl object. We create a NumberFormat with the appropriate country code and then we can format any number according to our needs. Don’t believe me?

We’ll finish up with dates. Some countries put... OK well, the USA puts the month first and then the date. Why? WHY?? God and the Americans alone know, and I’m not entirely sure that God really gets it. But that’s just how it is and we’ve got to just deal with it. So what do we do? Here too Intl gives us plenty of good options to change the date format in the same manner. Note that the format here takes the Date object and not the text string or the number.