Javascript：良好的人类可读列表连接答案

【问题标题】：Javascript: nice human readable join of listJavascript：良好的人类可读列表连接
【发布时间】：2019-02-24 13:54:20
【问题描述】：

有一个标签列表（数组）['tag1', 'tag2', 'tag3'] 我想生成一个不错的标题，例如：Content tagged tag1, tag2 and tag3。

目前我有：

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

结果： Content tagged tag1 and tag2 and tag3

我知道这是一个简单的问题，但我很好奇这种情况是否有很好的解决方案。

【问题讨论】：

标签的顺序是否相关？
没有。这不是……
如果需要，检查答案是否也适用于长度为 0 和 1 的数组

标签： javascript

【解决方案1】：

这样试试

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

【讨论】：

【解决方案2】：

使用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));

【讨论】：

【解决方案3】：

可以将数组视为堆栈，因此您可以弹出最后一个元素并依次写入

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

代码使用 ES6 字符串模板，我通常发现它比在代码中进行字符串连接更具可读性。它还利用了 pop 方法本质上执行操作的事实。获取数组的最后一个元素并改变数组。这消除了显式进行突变的需要（使用切片）

【讨论】：

一个元素会发生什么？
@NinaScholz 你有牛津逗号吗？ ;)
@evolutionxbox 虽然我喜欢你的评论，但实际上你会得到一个奇怪的字符串“Content tagged and tag”。
是的。实际结果不会有用。
相应更新。谢谢@ninascholtz

【解决方案4】：

我的方法是这样的

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

【讨论】：

【解决方案5】：

在我看来，这是一个简单的方法

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

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

希望对你有帮助:) JsFiddle

【讨论】：

【解决方案6】：

试试这个，

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

【讨论】：

【解决方案7】：

您可以获取最后两个元素并将它们与' and ' 连接起来，并将其作为最后一个元素放回数组中，然后将所有元素与', ' 连接起来以获得一个不错的字符串。

方法

Array#concat，连接两个数组，返回一个新数组
Array#splice，用于获取数组的最后两个元素
Array#join，用给定的间隔连接数组。

此建议适用于任何长度的数组，即使只有一两个元素。

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']));

【讨论】：

应该可以更好地处理 null/undefined array。另外，不要再写比我更好的javascript了！ ;)
@Jamiec，请随意添加一些健全性检查。
请注意：这个函数是不是纯的，并且会修改输入数组，这将导致不可避免的错误。在加入之前复制数组会更好。 array = array.slice()
@RickLancee，对，如有必要，只需使用副本。