如何使用Mustache结合函数将数组渲染为口语化格式列表？

需要把数组["foo", "bar", "baz"]通过Mustache结合函数渲染成"foo, bar, and baz"格式的字符串，但之前尝试的代码无法正常工作——传入函数的section参数是模板字面量"{{list}}"，根本拿不到实际的数组数据。

原错误代码 #

数据结构：

{
    list: ['foo', 'bar', 'baz'],
    render_list: function(section) {
        return section[1] + ',' + section[2] + ', and ' + section[3];
    },
}

Mustache模板：

{{#render_list}}{{list}}{{/render_list}}

正确解决方案 #

Mustache里，section函数的this会指向当前的数据上下文，所以可以直接通过this.list获取目标数组，再编写逻辑处理不同长度数组的格式化（兼容空数组、单元素、双元素等场景）：

修正后的数据结构

{
    list: ['foo', 'bar', 'baz'],
    render_list: function() {
        const arr = this.list;
        if (arr.length === 0) return '';
        if (arr.length === 1) return arr[0];
        if (arr.length === 2) return `${arr[0]} and ${arr[1]}`;
        // 处理长度≥3的情况，添加牛津逗号
        return `${arr.slice(0, -1).join(', ')}, and ${arr[arr.length - 1]}`;
    }
}

对应模板

直接调用函数即可，不需要在section内嵌套数组变量：

{{#render_list}}{{/render_list}}

为什么原代码无效 #

原模板{{#render_list}}{{list}}{{/render_list}}的执行逻辑是：先渲染section内部的{{list}}（Mustache默认会把数组渲染为所有元素无分隔符拼接的字符串，这里就是"foobarbaz"），然后把这个渲染结果作为参数传给render_list函数，所以你拿到的section是拼接后的字符串，不是数组，自然没法通过索引取到正确元素。

内容的提问来源于stack exchange，提问作者Jonas Wechsler