How to convert arrays to human-readable lists in JavaScript

July 11, 2021 · JavaScript

Oftentimes, you might end up in situations where you have an array and you just want to deflate the entire array content in a human-readable form. Or more specifically in a list-like format.

For instance, let’s say we have the following array for example.

const books = [
    'Harry Potter',
    'Bhagavad Gita',
    'The Alchemist',
    'Birthday Girl'
]

Now, I want to deflate this array in the following form.

…Harry Potter, Bhagavad Gita, The Alchemist, and Birthday Girl.

How would you achieve this? Well, at first you might want to reach to use loops to do so but there’s a better way to accomplish this in JavaScript.

The Intl.ListFormat object

There’s this ListFormat object which falls under the Intl internationalization API which can be used to do just what I explained above.

So, if we want the desired output from our example array, we can do it like so.

const books = [
    'Harry Potter',
    'Bhagavad Gita',
    'The Alchemist',
    'Birthday Girl'
]

const listFormatter = new Intl.ListFormat('en', {
    style: 'long',
    type: 'conjunction'
})

console.log(listFormatter.format(books));
// Harry Potter, Bhagavad Gita, The Alchemist, and Birthday Girl

As you can tell, we can achieve this in two parts.

The first part is to create the formatter using the Intl.ListFormat method. This method accepts two optional parameters.

• locales - A string with a BCP 47 language tag, or an array of such strings.
• options - 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.
  • type - The format of the 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 formatted 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”). When style is short or narrow, unit is the only allowed value for the type option.

Once the formatter is created, we can now simply wrap up the array using the format method further to format the array to the specified format.

Here are few more examples of using Intl.ListFormat.

const books = [
    'Harry Potter',
    'Bhagavad Gita',
    'The Alchemist',
    'Birthday Girl'
]

const listFormatter = new Intl.ListFormat('en-GB', {
    style: 'short',
    type: 'disjunction'
})

console.log(listFormatter.format(books));
// Harry Potter, Bhagavad Gita, The Alchemist, or Birthday Girl

const listFormatter = new Intl.ListFormat('en-GB', {
    style: 'narrow',
    type: 'unit'
})

console.log(listFormatter.format(books));
// Harry Potter Bhagavad Gita The Alchemist Birthday Girl

The Intl.ListFormat object is supported in all major browsers currently. So, it’s pretty safe to use it in production!

Previous: Checking if array keys are out of order using array_is_list() in PHP 8.1 Next: How to represent the number of days in natural language in JavaScript

» Share: Twitter, Facebook, Hacker News

Like this article?

Buy me a coffee

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Become a Sponsor Join my newsletter

Comments?

More on similar topics

Browse articles by category

Popover API 101

A JavaScript snippet that sets all Lighthouse scores to 100%

A little DevTools snippet to check broken links on a webpage

All the ways to turn an array into an object in JavaScript