ua9msn April 7, 2014 at 12:36

Intl comes to us!

From the sandbox

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

Of course, those who have the will of fate to support old browsers are again out of luck. 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 gives Intl JS to the programmer?

An Intl object contains three properties:

Intl.Collator - The constructor of the class that allows comparisons of strings based on the locale.
Intl.DateTimeFormat - A class constructor that allows you to format the date and time based on the locale
Intl.NumberFormat- The constructor of the class containing the number formatting functions. According to the locale, of course.

All constructors accept two parameters - localeand options.
The first argument is a line specifying the locale, for example, “hi”, “ru-RU”, “de-DE-u-co-phonebk”, the second is an object, depending on the constructor, containing a set of necessary settings. Actually, objects can be created using

new Intl.Collator([locales [, options]])

but functions can be applied to existing objects using

Intl.Collator.call(this [, locales [, options]])

Now in order

Collator

Have you ever compared strings? Ah ah ah, no need to throw tomatoes, but of course yes! And the lines with uh ... crooks? 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 option sensitivityis just responsible for mutual understanding and can take the following values:

"base" // a ≠ b, a = á, a = A.
"accent" // a ≠ b, a ≠ á, a = A.
"case" // a ≠ b, a = á, a ≠ A.
"variant" // a ≠ b, a ≠ á, a ≠ A.

Sorting strings can be carried out taking into account numerical 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, there is also a parameter in the options usage, with possible values sortand searchwhich also affects the comparison, but I do not set the task of this article to fully describe the Intl object, it is 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 don’t know how for you, but for me, date formatting is a real headache. If you are fortunate enough 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 picture at the beginning of the post, and you will be happy. Of course, up to a certain point it saves that either be like moment.js or XDate. But how nice it is to have one in a native object! Let's take a closer look:

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

hour12Explanation, 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, I will give a few 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 some kind of holiday!
For example, you want to display a number with insignificant zeros in front. It is common practice 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 output negative numbers in this form. All. You can forget about it.

console.log(new Intl.NumberFormat("ru-RU",{minimumIntegerDigits: 7}).format(-123)); // -0 000 123

The same is true for decimal places, 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

The default maximumFractionDigitsvalue is 3 and therefore you should not forget about it.

By the way, did you notice? The numbers are grouped into digits. You can disable this behavior by setting the option useGroupingto false

console.log(new Intl.NumberFormat("ru-RU",{minimumIntegerDigits: 7, useGrouping: false}).format(-12.345));
// -0000012,345

And finally, an absolutely incredible thing. Money!
Do you want in euros?

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 the Japanese manner?

console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "EUR"}).format(12.345)); // €12.345

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

Conclusion

Hope you are impressed with the demo. As for me, I am absolutely delighted and looking forward to the release of the 29th Ognelis. I can no longer support older browsers. My soul for antiques didn’t lie anyway, but after Intl was introduced everywhere, it would be very disappointing not to use it just because someone is too lazy to click the "refresh browser" button.
The article was written based on the documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

Tags: