#Intl.ListFormat S4

#Intl.ListFormat API Specification

#Overview

The Intl.ListFormat object is a constructor for objects that enable language-sensitive list formatting.

#Usage example

The following example shows how to create a formatted list using the English language.

// Create a list formatter in your locale
// with default values explicitly passed in.
const lf = new Intl.ListFormat("en", {
    localeMatcher: "best fit", // other values: "lookup"
    type: "conjunction", // "conjunction", "disjunction" or "unit"
    style: "long", // other values: "short" or "narrow"
});

lf.format(['Motorcycle', 'Truck' , 'Car']);
// > "Motorcycle, Truck, and Car"

#Implementation Status

Stage 4

Implementation Progress

• Shipped in Chrome 72
• Shipped behind the flag in Firefox 71
• Polyfill: https://github.com/zbraniecki/IntlListFormat ,
• Polyfill: https://github.com/wessberg/intl-list-format
• Browser Compatibility

Backpointers

• https://github.com/tc39/ecma402/issues/33
• http://cldr.unicode.org/translation/lists
• https://unicode.org/reports/tr35/tr35-general.html#ListPatterns

#Authors

• Zibi Braniecki (@zbraniecki)

#Reviewers

• Jamund Ferguson (@xjamundx)
• Daniel Ehrenberg (@littledan)

#Informative

This proposal is based on the LDML spec, List Patterns:

#Proposal

#Spec

You can view the spec text.

#API

#Intl.ListFormat([locales[, options]])

The Intl.ListFormat object is a constructor for objects that enable language-sensitive list formatting.

#locales

Optional. A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see the Intl page.

#options

Optional. An object with some or all of the following properties:

• #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 the Intl page.

• #style

The length of the formated message. Possible values are: "long" (default, e.g., A, B, and C); "short" or "narrow" (e.g., A, B,C). when style is narrow, unit is the only allowed value for the type option.

• #type

The format of output message. Possible values are "conjunction" that stands for "and"-based lists (default, e.g., A, B, and C), or "disjunction" that stands for "or"-based lists (e.g., A, B, or C). "unit" stands for lists of values with units (e.g., 5 pounds, 12 ounces).

#Intl.ListFormat.prototype.format(list)

The Intl.ListFormat.prototype.format method formats a list according to the locale and formatting options of this Intl.ListFormat object.

#Example

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: 'short', type: 'disjunction' }).format(list));
// > Motorcycle, Bus or Car

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

#Intl.ListFormat.prototype.formatToParts(list)

The Intl.ListFormat.prototype.formatToParts() method is a version of the format method which it returns an array of objects which represent "parts" of the object, separating the formatted list into its constituent parts and separating it from other surrounding text.

#Example

const list = ['Motorcycle', 'Bus', 'Car'];
console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));
 
[ { "type": "element", "value": "Motorcycle" }, { "type": "literal", "value": ", " }, { "type": "element", "value": "Truck" }, { "type": "literal", "value": ", and " }, { "type": "element", "value": "Car" } ]

#Development

#Render Spec

npm install
npm run build
open out/index.html

#Links

• MDN Documentation link