Handlebars模板中是否可对内部字符转义以实现按需渲染逗号？

你需要实现的效果是仅当对应字段有值时才渲染尾随逗号，避免出现无意义的冗余标点，以下是两种可直接落地的实现方式：

方案1：使用原生条件判断（无需自定义辅助函数） #

直接用Handlebars自带的{{#if}}判断包裹需要加逗号的字段即可，改造后的模板代码如下：

{{#each items}}
<button class="accordion-button">
    {{#if (equals type "article")}}
        {{AUTHOR}} {{TITLE}}
        {{#if JOURNAL}}{{JOURNAL}}, {{/if}}
        {{#if VOLUME}}{{VOLUME}}{{#if NUMBER}}({{NUMBER}}){{/if}} {{/if}}
        {{MONTH}} {{YEAR}}
    {{/if}}
</button>
{{/each}}

上述逻辑只有对应字段存在且非空时，才会输出「字段内容+逗号」的组合，同时也兼容VOLUME、NUMBER为空时避免渲染空括号的需求。

方案2：封装自定义辅助函数（复用性更高） #

如果多处模板都需要用到类似逻辑，可以封装通用辅助函数减少重复代码，注册代码如下：

// 注册Handlebars辅助函数
Handlebars.registerHelper('addCommaIfExists', function(value) {
  return value ? value + ', ' : '';
});

模板中直接调用即可，代码更简洁：

{{#each items}}
<button class="accordion-button">
    {{#if (equals type "article")}}
        {{AUTHOR}} {{TITLE}}
        {{addCommaIfExists JOURNAL}}
        {{#if VOLUME}}{{VOLUME}}{{#if NUMBER}}({{NUMBER}}){{/if}} {{/if}}
        {{MONTH}} {{YEAR}}
    {{/if}}
</button>
{{/each}}

内容的提问来源于stack exchange，提问作者Alexandru Filipescu