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 JavaScriptinfo 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:

  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.