πŸŽ„ Get 20% off from our JavaScript course for the holidays! πŸŽ„
How to Format Lists in JavaScript based on Languages

How to Format Lists in JavaScript based on Languages

Ferenc Almasi β€’ 2021 April 26 β€’ Read time 3 min read
  • twitter
  • facebook
JavaScript

Do you want to concatenate an array of strings in JavaScript and format them based on different languages? You can use the ListFormat method of an Intl object with various options to get different results. Take the following as the most basic example:

Copied to clipboard! Playground
const language = ['HTML', 'CSS', 'JS'];
const options = {
    style: 'short',
    type: 'unit'
};
const formatter = new Intl.ListFormat('en', options);

formatter.format(language); // Will return "HTML, CSS, JS"

You can create a new ListFormat using the new keyword, passing in a locale (BCP 47 language tag) and an optional object of options. Calling formatter.format on the array will format it according to the passed options.


Available Options

You can also customize the way the string is translated. The method accepts the following properties inside the options object:

  • localeMatcher: The matching algorithm to use for locales. It can be one of lookup, or best fit. The default value is best fit. You can learn more about the matching algorithm on MDN.
  • style: This option decides the length of the formatted text. It can be either long (the default value), or short, meaning you either get "HTML, CSS, and JS" for long, or "HTML, CSS, JS" for short.
  • type: The type of the list. It can be one of conjunction ("and-based" list), disjunction ("or-based" list), or unit for using a list of units. Note that when short is used as a style, the type must be a unit.

Using Conjunction

To use conjunctions, you want to use a long style with the type of conjunction, passed as options to ListFormat. This produces an "and-based" list:

Copied to clipboard!
const options = { style: 'long', type: 'conjunction' };
const formatter = new Intl.ListFormat('en', options);

formatter.format(language); // Will return "HTML, CSS, and JS"
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript Remove ads

Using Disjunction

For using disjunctions, you want to use a long style with the type of disjunction, passed as options to ListFormat. This produces an "or-based" list:

Copied to clipboard! Playground
const options = { style: 'long', type: 'disjunction' };
const formatter = new Intl.ListFormat('en', options);

formatter.format(language); // Will return "HTML, CSS, or JS"

const formatter = new Intl.ListFormat('hu', options);
formatter.format(language); // Will return "HTML, CSS, vagy JS"

Support

It's important to also talk about support. Even though most major browsers do have support, there are exceptions. At the writing of this, it has a global support of around ~71%. For example, it is unsupported both in IE and Safari. For polyfilling, you can use Format.js.

How to Format Lists in JavaScript by Language
If you would like to see more Webtips, follow @flowforfrank

50 JavaScript Interview Questions

Resources:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Recommended