Join An Array By Commas And "and"

I want to convert the array ['one', 'two', 'three', 'four'] into one, two, three and four Note that the first items have a comma, and but there is the word and between the second-l

Solution 1:

One option would be to pop the last item, then join all the rest by commas, and concatenate with and plus the last item:

const input = ['one', 'two', 'three', 'four'];
const last = input.pop();
const result = input.join(', ') + ' and ' + last;
console.log(result);

If you can't mutate the input array, use slice instead, and if there might only be one item in the input array, check the length of the array first:

functionmakeString(arr) {
  if (arr.length === 1) return arr[0];
  const firsts = arr.slice(0, arr.length - 1);
  const last = arr[arr.length - 1];
  return firsts.join(', ') + ' and ' + last;
}

console.log(makeString(['one', 'two', 'three', 'four']));
console.log(makeString(['one']));

Solution 2:

Starting in V8 v7.2 and Chrome 72, you can use the sweet Intl.ListFormat API. It will also take care of localizing your list when requested, which might be of great help if you need it.

const lf = newIntl.ListFormat('en');

console.log(lf.format(['Frank']));
// → 'Frank'console.log(lf.format(['Frank', 'Christine']));
// → 'Frank and Christine'console.log(lf.format(['Frank', 'Christine', 'Flora']));
// → 'Frank, Christine, and Flora'console.log(lf.format(['Frank', 'Christine', 'Flora', 'Harrison']));
// → 'Frank, Christine, Flora, and Harrison'// You can use it with other localesconst frlf = newIntl.ListFormat('fr');

console.log(frlf.format(['Frank', 'Christine', 'Flora', 'Harrison']));
// → 'Frank, Christine, Flora et Harrison'

You can even specify options to make it a disruption and use "or" instead of "and", or to format units such as "3 ft, 7 in".

It's not very widely supported as of writing, so you might not want to use it everywhere.

ReferencesThe Intl.ListFormat API - Google DevelopersV8 release v7.2

Solution 3:

I like Mark Meyer's approach as it doesn't alter the input. Here's my spin:

constmakeCommaSeparatedString = (arr, useOxfordComma) => {
  const listStart = arr.slice(0, -1).join(', ')
  const listEnd = arr.slice(-1)
  const conjunction = arr.length <= 1 
    ? '' 
    : useOxfordComma && arr.length > 2 
      ? ', and ' 
      : ' and 'return [listStart, listEnd].join(conjunction)
}

console.log(makeCommaSeparatedString(['one', 'two', 'three', 'four']))
// one, two, three and fourconsole.log(makeCommaSeparatedString(['one', 'two', 'three', 'four'], true))
// one, two, three, and fourconsole.log(makeCommaSeparatedString(['one', 'two'], true))
// one and twoconsole.log(makeCommaSeparatedString(['one']))
// oneconsole.log(makeCommaSeparatedString([]))
//

Solution 4:

You can use Array.prototype.slice() when array.length is bigger than 1 and exclude the rest of the cases:

constresult = a => a.length > 1 
  ? `${a.slice(0, -1).join(', ')} and ${a.slice(-1)}` 
  : {0: '', 1: a[0]}[a.length];

Code example:

const input1 = ['one', 'two', 'three', 'four'];
const input2 = ['A Tale of Two Cities', 'Harry Potter and the smth', 'One Fish, Two Fish, Red Fish, Blue Fish'];
const input3 = ['one', 'two'];
const input4 = ['one'];
const input5 = [];

constresult = a => a.length > 1 
  ? `${a.slice(0, -1).join(', ')} and ${a.slice(-1)}` 
  : {0: '', 1: a[0]}[a.length];

console.log(result(input1));
console.log(result(input2));
console.log(result(input3));
console.log(result(input4));
console.log(result(input5));

Solution 5:

Using Array#reduce:

['one', 'two', 'three', 'four'].reduce( (a, b, i, array) => a + (i < array.length - 1 ? ', ' : ' and ') + b)