Having a list (array) of tags ['tag1', 'tag2', 'tag3'] I want to generate a nice title like: Content tagged tag1, tag2 and tag3.

For the moment I have:

"Content tagged " + tags_titles.join(" and ");

with the result: Content tagged tag1 and tag2 and tag3

I know it's a simple question, but I am curious if there is a nice solution for this case.

Having a list (array) of tags ['tag1', 'tag2', 'tag3'] I want to generate a nice title like: Content tagged tag1, tag2 and tag3.

For the moment I have:

"Content tagged " + tags_titles.join(" and ");

with the result: Content tagged tag1 and tag2 and tag3

I know it's a simple question, but I am curious if there is a nice solution for this case.

• javascript

Share Improve this question Follow asked Jun 8, 2017 at 8:58 GhitaBGhitaB 3,43755 gold badges3636 silver badges6464 bronze badges 3

• is the order of the tags relevant? – Rune FS Commented Jun 8, 2017 at 9:01
• No. It is not... – GhitaB Commented Jun 8, 2017 at 9:02
• If needed check if the answers also work with arrays of length 0 and 1 – ikkuh Commented Jun 8, 2017 at 9:08

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 9

You could get the two last elements and join them with ' and ' and put it as last element back into the array and later join all elements with ', ' for getting a nice string.

Methods

• Array#concat, joins two arrays and returns a new array

• Array#splice, for getting the last two elemensts of the array

• Array#join, joins an array with the given spacer.

This proposal works for any length of an array, even with one or two elements.

function nice([...array]) {
    return array.concat(array.splice(-2, 2).join(' and ')).join(', ');
}

console.log("Content tagged " + nice(['tag1']));
console.log("Content tagged " + nice(['tag1', 'tag2']));
console.log("Content tagged " + nice(['tag1', 'tag2', 'tag3']));

A bit of slicing and dicing using Array.prototype.slice:

function naturalLanguageJoin(arr){
    if(!arr)
       return '';
    if(arr.length<2)
       return (arr.length>0) ? arr[0] : '';
    return arr.slice(0,arr.length-1).join(", ") + " and " + arr[arr.length-1];
}

console.log(naturalLanguageJoin(['tag1', 'tag2', 'tag3']));
console.log(naturalLanguageJoin(['tag1', 'tag2']));
console.log(naturalLanguageJoin(['tag1']));
console.log(naturalLanguageJoin([]));
console.log(naturalLanguageJoin(null));

An array can be treated as a stack so you can pop the last element and in turn write this

var last = tags_titles.pop();
last = tags_titles.length ? ` and ${last}` : last;
`Content tagged ${tags_titles.join(", ")} ${last}`

The code uses ES6 string templates, which I generally find to be more readable than doing string concatenation in the code. It also utilizes the fact that the pop method essentially performs to operations. Gets the lasst element of the array and mutate the array. That eliminate the need to do the mutation explicitly (using slice)

Try like this

var g = ['tag1', 'tag2', 'tag3'];
var title = g.slice(0, g.length-1).join(',').concat(' and ').concat(g[g.length-1]);

From my view, This is an simple approach

var tags = ['tag1', 'tag2', 'tag3'];

console.log("Content tagged " + tags.slice(0, -1).join(', ')+' and '+tags.slice(-1));

Hope it helps you :) JsFiddle

Try this,

var arr = ['tag1', 'tag2', 'tag3']; 
var lastStr = arr.pop();
var str = "Content tagged " + arr.join(", ") + " and " + lastStr;

Something like this would be my approach

function arrayFormat(arr) {
    var output = arr.splice(0, arr.length - 1).join(", ");
    output += " and " + arr[0];
    return output;
}
console.log(arrayFormat(["a", "b", "c"]));