The Intl.ListFormat object is a constructor for objects that enable language-sensitive list formatting.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
new Intl.ListFormat([locales[, options]])
Parameters
locales-
Optional. A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the
localesargument, 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 theIntlpage.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).style
The length of the formated message. Possible values are:"long"(default, e.g.,A, B, and C);"short"(e.g.,A, B, C), or"narrow"(e.g.,A B C). Whenstyleisshortornarrow,unitis the only allowed value for the type option.
Description
Properties
Intl.ListFormat.prototype- Allows the addition of properties to all objects.
Methods
Intl.ListFormat.supportedLocalesOf()- Returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.
Intl.ListFormat instances
All Intl.ListFormat instances inherit from Intl.Listformat.prototype
Properties
Intl.ListFormat.prototype.constructor- Specifies the function that creates an object's prototype.
Methods
Intl.ListFormat.prototype.format()- Returns a language-specific formatted string representing the elements of the list.
Examples
Using format
The following example shows how to create a List formatter using the English language.
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
Using formatToParts
The following example shows how to create a List formatter returning formatted parts
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": "Bus" }, { "type": "literal", "value": ", and " }, { "type": "element", "value": "Car" } ];
Specifications
| Specification | Status | Comment |
|---|---|---|
| Intl.ListFormat proposal | Stage 3 |
Browser compatibility
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ListFormat | Chrome Full support 72 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 60 | Safari No support No | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No | nodejs No support No |
format | Chrome Full support 72 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 60 | Safari No support No | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No | nodejs No support No |
formatToParts | Chrome Full support 72 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 60 | Safari No support No | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No | nodejs No support No |
prototype | Chrome Full support 72 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 60 | Safari No support No | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No | nodejs No support No |
resolvedOptions | Chrome Full support 72 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 60 | Safari No support No | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No | nodejs No support No |
supportedLocalesOf | Chrome Full support 72 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 60 | Safari No support No | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No | nodejs No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
See also
- Introduction: The ECMAScript Internationalization API
- Constructors
- Methods