JavaScript多行模板字符串如何实现单行输出？

有几种实用的方法可以做到代码多行编写，但最终输出单行字符串：

方法1：正则替换空白字符 #

利用正则把模板字符串里的换行、多余空格统一替换，再去掉首尾空白：

let condition1 = true, condition2 = false, condition3 = true;
let a = `
    ${condition1 ? 'text1' : ""}
    ${condition2 ? 'text2' : ""}
    ${condition3 ? 'text3' : ""}
`.replace(/\s+/g, ' ').trim();
// 输出："text1 text3"

• /\s+/g 会匹配所有连续的空白字符（包括换行、制表符、空格），替换成单个空格；如果不需要分隔空格，直接把替换目标改成''即可。
• trim() 用来去掉字符串首尾的多余空格。

方法2：用反斜杠消除换行 #

在模板字符串的每行末尾加反斜杠，让JavaScript忽略换行，但要手动处理掉缩进的空格：

let condition1 = true, condition2 = false, condition3 = true;
let a = `\
${condition1 ? 'text1' : ""}\
${condition2 ? 'text2' : ""}\
${condition3 ? 'text3' : ""}\
`;
// 输出："text1text3"

注意这种方法要把每行的缩进去掉，否则缩进的空格会被保留在结果里。

方法3：数组拼接（更清晰） #

把需要渲染的内容放到数组里，最后用join()拼接成单行字符串，这种方式不需要处理模板字符串的空白问题，逻辑更直观：

let condition1 = true, condition2 = false, condition3 = true;
let parts = [];
if (condition1) parts.push('text1');
if (condition2) parts.push('text2');
if (condition3) parts.push('text3');
let a = parts.join(' '); // 用空格分隔，或者join('')无分隔
// 输出："text1 text3"

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