2 min read

Intl.ListFormat

The Intl.ListFormat object enables language-sensitive list formatting. It allows you to join arrays of strings with localized separators (like ", ", " and ", " or ").

1. Basic Usage

The constructor takes two optional arguments: locales and options.

const vehicles = ['Motorcycle', 'Bus', 'Car'];

const formatter = new Intl.ListFormat('en-US', { style: 'long', type: 'conjunction' });
console.log(formatter.format(vehicles));
// "Motorcycle, Bus, and Car"

const germanFormatter = new Intl.ListFormat('de-DE', { style: 'long', type: 'conjunction' });
console.log(germanFormatter.format(vehicles));
// "Motorcycle, Bus und Car"

2. Types of Lists

The type option controls the logical meaning of the list.

  • conjunction: The "and" based list (default).
  • disjunction: The "or" based list.
  • unit: A list of values (usually with units).
const list = ['A', 'B', 'C'];

// Conjunction (AND)
console.log(new Intl.ListFormat('en-US', { type: 'conjunction' }).format(list));
// "A, B, and C"

// Disjunction (OR)
console.log(new Intl.ListFormat('en-US', { type: 'disjunction' }).format(list));
// "A, B, or C"

// Unit
console.log(new Intl.ListFormat('en-US', { type: 'unit' }).format(list));
// "A, B, C"

3. Styles

The style option controls the length of the formatted string.

  • long: "A, B, and C" (default)
  • short: "A, B, & C"
  • narrow: "A, B, C"

4. formatToParts

Like other Intl objects, formatToParts returns an array of objects representing the different components of the formatted string.

const formatter = new Intl.ListFormat('en-US', { type: 'conjunction' });
const parts = formatter.formatToParts(['A', 'B']);

console.log(parts);
// [{ type: "element", value: "A" }, { type: "literal", value: " and " }, { type: "element", value: "B" }]

programming/javascript/vanilla/javascript programming/javascript/vanilla/intl-numberformat programming/javascript/vanilla/intl-collator