Geekly Articles each Day
📜 ⬆️ ⬇️

Intl comes to us!

datemap No, not Intel. Intl is a JavaScript object containing the functions of formatting numbers, dates and string comparisons. It comes because on April 29, Firefox, the last of the popular browsers that does not support Intl, is updated to version 29, in which internationalization support will be enabled.

Of course, those who have the will of fate to support the old browsers are again unlucky. But progress does not stand still and, starting from the end of April, the lucky ones will be able to slowly introduce Intl into their projects.

What does Intl JS give to the programmer?



An Intl object contains three properties:

')
All constructors take two parameters - locale and options .
The first argument is a string specifying the locale, for example, “hi”, “ru-RU”, “de-DE-u-co-phonebk”, the second is an object, depending on the designer, containing a set of necessary settings. Actually, objects can be created using
 new Intl.Collator([locales [, options]])
but functions can also be applied to existing objects using
 Intl.Collator.call(this [, locales [, options]])
Now in order

Collator


Have you ever compare strings? Ah ah ah, no need to throw tomatoes, but of course yes! A line with uh ... krakozablami? We look:
 console.log(new Intl.Collator("de", {sensitivity: "base"}).compare("ä", "a")); // 0 console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a")); // 1
Yes, Swedish and German have a different alphabet. The sensitivity option is just responsible for understanding and can take the following values:
 "base" // a ≠ b, a = á, a = A. "accent" // a ≠ b, a ≠ á, a = A. "case" // a ≠ b, a = á, a ≠ A. "variant" // a ≠ b, a ≠ á, a ≠ A.


Rows can be sorted based on numeric values:
 console.log(new Intl.Collator("ru", {numeric: true}).compare("3", "21")); // -1 console.log(new Intl.Collator("ru", {numeric: false}).compare("3", "21")); // 1

By the way, in the options there is also the usage parameter, with the possible values ​​of sort and search , which also affects the comparison, but I don’t set the goal of this article to fully describe the Intl object, it’s still better than in the documentation - it will not work.

A very convenient option is ignorePunctuation . The name speaks for itself and needs only an illustrative example:
 console.log(new Intl.Collator("ru", {ignorePunctuation: true}).compare("!", "")); // 0 console.log(new Intl.Collator("ru", {ignorePunctuation: false}).compare("!", "")); // 1


Further in the program:

Datetimeformat


I do not know how for you, but for me the formatting of dates is a real headache. If you are lucky to avoid such a task, open, for example, Excel and in the cell formatting settings, count the number of predefined formats. Add to this the dependence on the locale from the image at the beginning of the post, and you will be happy. Of course, up to a certain point it saves something like moment.js or XDate. But how nice it is to have such a property in a facility! Let's take a closer look:

timeZone Browsers are required to understand only UTC, but they can support other time zones. Unfortunately, this remains on the conscience of developers.

hour12 Explanations, I think, does not require. I can only say that the default value depends on the locale. Nice how!

Instead of describing the remaining options, which can be found in the documentation, here are some examples:
 var date = new Date(); console.log(new Intl.DateTimeFormat("de-DE", { weekday: "long", year: "numeric", month: "long", day: "numeric"}).format(date)); // Samstag, 5. April 2014 console.log(new Intl.DateTimeFormat("ru", { weekday: "short", year: "2-digit", month: "long", day: "numeric"}).format(date)); // , 5  14 . console.log(new Intl.DateTimeFormat("ar-EG", { weekday: "narrow", year: "numeric", month: "long", day: "numeric"}).format(date)); // ٢٠١٤      ,


NumberFormat


Well, it's just a holiday of some kind!
For example, you want to display a number with insignificant zeros in front. The usual practice is to convert a number to a string and assign the required number of zeros to its beginning. A dance with a tambourine adds the need to display negative numbers in this form. Everything. You can forget about it.
 console.log(new Intl.NumberFormat("ru-RU",{minimumIntegerDigits: 7}).format(-123)); // -0 000 123


The situation is the same with decimals, but there are two parameters:
 console.log(new Intl.NumberFormat("ru-RU",{minimumIntegerDigits: 7, minimumFractionDigits: 5, maximumFractionDigits: 7}).format(-12.345)); // -0 000 012,34500
By default, maximumFractionDigits is set to 3 and therefore you should not forget about it.

By the way, noticed? The numbers are grouped into bits. You can disable this behavior by setting the useGrouping option to false.
 console.log(new Intl.NumberFormat("ru-RU",{minimumIntegerDigits: 7, useGrouping: false}).format(-12.345)); // -0000012,345


And finally, quite an incredible thing. Money!
Want to Euro?
 console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(12.345)); // 12,345 €

Or maybe in yen?
 console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(12.345)); //￥12.345

Or maybe in euros, but in Japanese style?
 console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "EUR"}).format(12.345)); // €12.345

There are other options, but again, the documentation will say better than me.

Conclusion


I hope you are impressed by the demonstration. As for me, I am absolutely delighted and am looking forward to the release of the 29th Ognelis. I can no longer support older browsers. The soul of antiques and so did not lie, but after the introduction of Intl everywhere, it would be a shame not to use it just because someone is too lazy to click the button "refresh browser".
The article was written based on the documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

Source: https://habr.com/ru/post/218481/

More articles:


All Articles