JavaScript Intl Methods
Intl Method: The Intl() method is used to format strings, numbers, dates, and times in local format with the help of constructors.
Syntax:
new Intl.constructors(locales, options);
Parameters:
- locales argument: locales argument is used to determine the locale used in operation. locales may be :
- undefined: default locales are used.
- A locale: A locale is an identifier for the constructor to identify language or tags.
- A list of locales: It is a collection of a locale.
- locales are divided by hyphens. Locales can be consists of :
- A language sub-tag.
- A region sub-tag.
- A subscript sub-tag.
- A private use extension syntax.
- One or more BCP 47 extension sequences.
- One or more variant sub-tag.
- Example :
- “hi”: It is a language sub-tag for Hindi.
- “de-AT”: The language tag for German and AT for the region tag for Austria.
- “zh-Hans-CN”: Hans is the region tag for the china region.
- “en-emodeng”: en-emodeng is early modern English variant tag.
- Options arguments: The option’s argument is an object with properties that vary with different constructors and functions. If the options’ argument is the undefined default value for all properties is used.
Return type: It returns the date in specified format.
Below are examples of the Intl method.
Example 1 :
Javascript
<script> function func(){ // Original Array var arr = ['z', 's', 'l', 'm', 'c', 'a', 'b']; // Sorting Array var arr_sort = arr.sort(new Intl.Collator('en').compare) console.log(arr_sort); } func(); </script> |
Output:
['a', 'b', 'c', 'l', 'm', 's', 'z']
Example 2: Examples for a different constructor are provided below. In this example, Intl.Collator() create Intl.Collator object that helps to sort in language-sensitive sorting of any collection. Since we are sorting the array with the English language, so it is sorted in alphabetical order.
var l = new Intl.Collator('en').compare
console.log(['z', 'b', 'e', 'o', 'a'].sort(l));
Javascript
<script> // Javascript to illustrate Intl.Collator constructor function func() { // Creating object for which help in sorting var l = new Intl.Collator("en"); // Sorting array var array = ["z", "b", "e", "o", "a"]; var arr = array.sort(l.compare); console.log(arr); } func(); </script> |
Output:
['a', 'b', 'e', 'o', 'z']
Example 3: In this example, Intl.DateTimeFormat() constructor create an Intl.DateTimeFormat object that helps language-sensitive date-time formatting. Here sub-tag is ‘en-US’ so the date variable is the format in United State’s English.
const date = new Date(Date.UTC(2021, 06, 10, 10, 20, 30, 40));
console.log(new Intl.DateTimeFormat('en-US').format(date));
Javascript
<script> // Javascript to illustrate Intl.DateTimeFormat constructor function func() { // Creating Time variable const date = new Date(Date.UTC(2021, 06, 10, 10, 20, 30, 40)); // Creating object for which help in Formatting const ti = new Intl.DateTimeFormat("en-US"); // Formatting date const time = ti.format(date); console.log(time); } func(); </script> |
Output:
7/10/2021
Example 4: In this example, Intl.DisplayNames() constructor create an Intl.DisplayNames object that helps constructor in the translation of any language, region, and script display names. Here Intl translates ‘UN’ according to region based in English.
const rNames = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(rNames.of('UN'));
Javascript
<script> // Javascript to illustrate Intl.DisplayNames constructor function func() { // Creating object for translation const rNames = new Intl.DisplayNames(["en"], { type: "region" }); // Translating into region language const a = rNames.of("UN"); console.log(a); } func(); </script> |
Output:
United Nations
Example 5: In this example, Intl.ListFormat() creates an intl.ListFormat object that help in list formatting. Here sub-tag is ‘en’ so it is in the English language and the style is long and the type in conjunction so the formatted list has some joining word.
const Names = ['Jack', 'Rahul', 'Bob'];
const format = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
console.log(format.format(Names));
Javascript
<script> // Javascript to illustrate Intl.ListFormat constructor function func(){ // Original list const Names = ['Jack', 'Rahul', 'Bob']; // Creating object for list formatting const format = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }); // Formatting list const list = format.format(Names); console.log(list); } func(); </script> |
Output:
Jack, Rahul, and Bob
Example 6: In this example, Intl.Locale() constructor creates a Locale identifier for region, language, and script. Here sub-tags are ‘en-US’ so it creates US English region language Locale identifier.
let us = new Intl.Locale('en-US');
console.log(us.baseName)
Javascript
<script> // Javascript to illustrate Intl.Locale // constructor function func() { // Creating locale Object identifier let us = new Intl.Locale("en-US"); // Printing baseName of identifier console.log(us.baseName); } func(); </script> |
Output:
en-US
Example 7: In this example, Intl.NumberFormat() constructor create Intl.NumberFormat object which helps in the formatting of numbers. The style is decimal, so the number is the format in decimal format.
let amount = 6000000;
let k = new Intl.NumberFormat('en-US', {style: 'decimal'});
console.log(k.format(amount))
Javascript
<script> // Javascript to illustrate Intl.NumberFormat constructor function func() { // Original Number let amount = 6000000; // Creating object to format Number let k = new Intl.NumberFormat("en-US", { style: "decimal" }); // Formatting Number let l = k.format(amount); console.log(l); } func(); </script> |
Output:
6,000,000
Example 8: In this example, the Intl.PluralRules() constructor creates an object that helps in plural sensitive formatting. It returns a string that indicates the plural rule used for number.
let l = new Intl.PluralRules().select(18); console.log(l)
Javascript
<script> // Javascript to illustrate // Intl.PluralRules constructor function func() { // Creating object for plural-sensitive // formatting of Number let l = new Intl.PluralRules(); // selecting formatting for 18 let k = l.select(18); console.log(k); } func(); </script> |
Output:
other
Example 9: In this example, Intl.RelativeTimeFormat() constructor create an object Intl.RelativeTimeFormat helps relative time formatting. It is formatted according to the sub-tag provided to the constructor.
const relative = new Intl.RelativeTimeFormat('en', { style: 'narrow' });
console.log(relative.format(5, 'hours'));
Javascript
<script> // Javascript to illustrate Intl.RelativeTimeFormat constructor function func(){ // Creating object for formatting relative time const relative = new Intl.RelativeTimeFormat('en', { style: 'narrow' }); // Formatting relative time for 5 value and hours unit let l =relative.format(5, 'hours'); console.log(l) } func(); </script> |
Output:
in 5 hr.
