JavaScript模板字符串如何实现多值间文本的条件性拼接

你当前的写法存在冗余问题，且当末尾字段无值时会出现多余的尾部分隔符，更推荐用数组过滤+拼接的方案实现，逻辑简洁且不会产生多余分隔符：

推荐实现（易维护、无多余分隔符） #

核心思路是先把所有待拼接字段统一放入数组，过滤掉无有效值的项，再直接调用数组的join方法插入分隔符——join只会在数组相邻的两个元素之间插入分隔符，天然不会出现首尾多余分隔符的问题。

// 默认过滤规则：自动剔除null、undefined、空字符串、false、0等所有假值
// 如果需要保留0、false这类有效值，可以替换成自定义过滤逻辑
const validFields = [a, b, c].filter(Boolean);
const yay = validFields.join(' | ');

如果你的业务场景需要保留0、false这类假值的渲染，只需要调整过滤规则即可：

// 仅过滤null、undefined、空字符串，保留0、false的输出
const validFields = [a, b, c].filter(item => {
  return item !== null && item !== undefined && item !== '';
});
const yay = validFields.join(' | ');

这种方案后续新增、删减拼接字段时，只需要修改数组内的字段列表即可，不需要重复写三元判断，可维护性远高于逐字段拼接的写法。

逐字段三元写法的修正方案 #

如果受场景限制必须用逐段三元拼接的写法，需要修正分隔符的判断逻辑：仅当当前字段有值、且后续还存在其他有效值时，才在当前字段后插入分隔符，修正后代码如下：

const yay = `${a ? a + (b || c ? ' | ' : '') : ''}${b ? b + (c ? ' | ' : '') : ''}${c ?? ''}`

这种写法仅适合字段数量固定且极少的场景，字段数量超过3个后判断逻辑会快速变得臃肿难维护，不推荐使用。

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