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.