Intl.ListFormat() constructor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

The Intl.ListFormat() constructor creates Intl.ListFormat objects.

Try it

Syntax

js
new Intl.ListFormat()
new Intl.ListFormat(locales)
new Intl.ListFormat(locales, options)

Note: Intl.ListFormat() can only be constructed with new. Attempting to call it without new throws a TypeError.

Parameters

locales Optional

A string with a BCP 47 language tag or an Intl.Locale instance, or an array of such locale identifiers. The runtime's default locale is used when undefined is passed or when none of the specified locale identifiers is supported. For the general form and interpretation of the locales argument, see the parameter description on the Intl main page.

options Optional

An object containing the following properties, in the order they are retrieved (all of them are optional):

localeMatcher

The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". For information about this option, see Locale identification and negotiation.

type

Indicates the type of grouping. Possible values are:

"conjunction" (default)

For "and"-based grouping of the list items: "A, B, and C"

"disjunction"

For "or"-based grouping of the list items: "A, B, or C"

"unit"

For grouping the list items as a unit (neither "and"-based nor "or"-based): "A, B, C"

style

The grouping style (for example, whether list separators and conjunctions are included). Possible values are:

"long" (default)

E.g. "A, B, and C"

"short"

E.g. "A, B, C"

"narrow"

E.g. "A B C"

Exceptions

RangeError

Thrown if locales or options contain invalid values.

Examples

Using format

The following example shows how to create a List formatter using the English language.

js
const list = ["Motorcycle", "Bus", "Car"];

console.log(
  new Intl.ListFormat("en-GB", { style: "long", type: "conjunction" }).format(
    list,
  ),
);
// Motorcycle, Bus and Car

console.log(new Intl.ListFormat("en-GB", { style: "long" }).format(list));
// Motorcycle, Bus and Car

console.log(new Intl.ListFormat("en-US", { style: "long" }).format(list));
// Motorcycle, Bus, and Car

console.log(
  new Intl.ListFormat("en-GB", { style: "short", type: "conjunction" }).format(
    list,
  ),
);
// Motorcycle, Bus and Car

console.log(
  new Intl.ListFormat("en-US", { style: "short", type: "conjunction" }).format(
    list,
  ),
);
// Motorcycle, Bus, & Car

console.log(
  new Intl.ListFormat("en-GB", { style: "narrow", type: "conjunction" }).format(
    list,
  ),
);
// Motorcycle, Bus, Car

console.log(
  new Intl.ListFormat("en-GB", { style: "long", type: "disjunction" }).format(
    list,
  ),
);
// Motorcycle, Bus or Car

console.log(
  new Intl.ListFormat("en-GB", { style: "short", type: "disjunction" }).format(
    list,
  ),
);
// Motorcycle, Bus or Car

console.log(
  new Intl.ListFormat("en-GB", { style: "narrow", type: "disjunction" }).format(
    list,
  ),
);
// Motorcycle, Bus or Car

console.log(new Intl.ListFormat("en-US", { style: "narrow" }).format(list));
// Motorcycle, Bus, Car

console.log(
  new Intl.ListFormat("en-GB", { style: "narrow", type: "unit" }).format(list),
);
// Motorcycle Bus Car

console.log(
  new Intl.ListFormat("en-US", { style: "long" }).format([
    "30 degrees",
    "15 minutes",
    "50 seconds",
  ]),
);
// 30 degrees, 15 minutes, and 50 seconds

console.log(
  new Intl.ListFormat("en-US", { style: "narrow" }).format([
    "30 degrees",
    "15 minutes",
    "50 seconds",
  ]),
);
// 30 degrees, 15 minutes, 50 seconds

console.log(
  new Intl.ListFormat("en-US", { style: "narrow", type: "unit" }).format([
    "30°",
    "15′",
    "50″",
  ]),
);
// 30° 15′ 50″

Specifications

Specification
ECMAScript Internationalization API Specification
# sec-intl-listformat-constructor

Browser compatibility

BCD tables only load in the browser

See also