Intl.ListFormat
Learn to join a list with locale-appropriate conjunctions with Intl.ListFormat.
Intl.ListFormat
Intl.ListFormat joins an array with locale-appropriate conjunctions. In English ['Mara', 'Alex', 'Sam'] becomes 'Mara, Alex and Sam'; in Turkish it becomes 'Mara, Alex ve Sam'. Pass a locale string to the constructor; the format method takes an array and returns the joined string. The type option picks the conjunction: 'conjunction' means 'and', 'disjunction' means 'or'. The style option sets length: 'long', 'short', 'narrow'.
Exercise Join an English list
Create an Intl.ListFormat for the 'en' locale. Set type to 'conjunction'. Call format with the array ['sun', 'moon', 'stars'] and assign the result to the sky variable.
Show example solution
1. Create with new Intl.ListFormat('en', { type: 'conjunction' }).
2. Join with .format(['sun', 'moon', 'stars']).
3. Assign to the sky variable.
Example solution:
const sky = new Intl.ListFormat('en', { type: 'conjunction' }).format(['sun', 'moon', 'stars']);The style option
The style option sets the output length. The default 'long' gives the full conjunction: 'A, B and C'. 'short' produces a shorter version; in some languages the conjunction shortens. 'narrow' is the shortest form, useful when space is tight. For example, English may show 'sun, moon, and stars' (long) versus 'sun, moon & stars' (short) like differences. The choice depends on the UI: short on mobile, long on desktop.
Test yourself
-
Which type value gives the output 'apple, pear or banana'?
- conjunction
- unit
- disjunction
- cardinal
Show answer
disjunction — Correct. disjunction uses the 'or' conjunction; conjunction uses 'and'.
-
Call the format method
const lf = new Intl.ListFormat('en'); const text = lf.____(['apple', 'pear', 'banana']);Show answer
const lf = new Intl.ListFormat('en'); const text = lf.format(['apple', 'pear', 'banana']); -
Match ListFormat parts to their meaning
- type
- Conjunction type
- style
- Output length
- conjunction
- And meaning
- disjunction
- Or meaning