如何在Mustache模板中嵌套区块时避免生成空行？

已知foo = false且bar = true，使用以下Mustache模板：

{{#foo}}{{#bar}} Both foo and bar are true {{/bar}}{{/foo}}
{{^foo}}{{#bar}} foo is false, bar is true {{/bar}}{{/foo}}
{{#foo}}{{^bar}} foo is true, bar is false {{/bar}}{{/foo}}

预期输出为：

foo is false, bar is true

但实际渲染后出现了多余空行：

// 此处为空行
foo is false, bar is true
// 此处为空行

以下是几种解决方法：

方法1：利用空白修剪语法（推荐，需实现支持） #

多数主流Mustache衍生实现（如Handlebars、新版Mustache.js）支持在标签前后添加~来自动修剪标签周围的空白与换行。修改模板如下：

{{#foo~}}{{#bar}} Both foo and bar are true {{/bar}}{{~/foo}}
{{^foo~}}{{#bar}} foo is false, bar is true {{/bar}}{{~/foo}}
{{#foo~}}{{^bar}} foo is true, bar is false {{/bar}}{{~/foo}}

~会将未触发区块对应的换行和空白直接移除，不会生成空行。

方法2：调整模板换行位置 #

把模板中未触发区块的换行去掉，将所有标签连写，只在需要输出的内容前后保留换行：

{{#foo}}{{#bar}} Both foo and bar are true {{/bar}}{{/foo}}{{^foo}}{{#bar}} foo is false, bar is true {{/bar}}{{/foo}}{{#foo}}{{^bar}} foo is true, bar is false {{/bar}}{{/foo}}

这种方法能解决空行问题，但模板可读性会下降，适合简单场景。

方法3：重构模板结构 #

将互斥的逻辑合并，减少冗余区块，同时控制换行只出现在需要渲染的内容里：

{{#foo}}{{#bar}}Both foo and bar are true{{/bar}}{{^bar}}foo is true, bar is false{{/bar}}{{/foo}}
{{^foo}}{{#bar}}foo is false, bar is true{{/bar}}{{^bar}}Both foo and bar are false{{/bar}}{{/foo}}

如果需要保留模板可读性，可以结合空白修剪语法，在区块标签前后加~来处理换行。

方法4：渲染后后置处理 #

如果你的Mustache实现不支持空白修剪，可以在渲染完成后用正则清理多余空行：

// 示例：JavaScript环境下的处理代码
const renderedContent = mustache.render(yourTemplate, yourData);
const cleanedContent = renderedContent.replace(/^\n+|\n+$/g, '').replace(/\n{2,}/g, '\n');

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