如何在JavaScript模板字面量中用三元运算符生成多行文本？

你可以通过两种方式实现按需生成多行文本：

方式一：将换行符纳入三元判断逻辑 #

把换行符（\n）和文本一起作为三元运算符的返回值，最后用trimEnd()去除可能的末尾多余换行：

const toolTipText = `${2 * 5 === 10 ? "The value is same\n" : ""}${"a" !== "b" ? "Different letters" : ""}`.trimEnd();

console.log(toolTipText);

这样当第一个条件满足时，会输出文本加换行，第二个条件满足时输出文本；如果第一个条件满足但第二个不满足，trimEnd()会删掉末尾的换行，避免空行。

方式二：用数组收集符合条件的行（更易读） #

如果条件较多，推荐把所有符合条件的文本存入数组，再用换行符拼接，这种方式逻辑更清晰，也不用手动处理换行：

const lines = [];
if (2 * 5 === 10) lines.push("The value is same");
if ("a" !== "b") lines.push("Different letters");
const toolTipText = lines.join('\n');

console.log(toolTipText);

原代码问题说明 #

你原来的模板里换行是固定写死的，不管第一个条件是否成立，那个换行都会存在。如果第一个条件不满足，就会出现空行；而如果输出环境对空格敏感，还会带多余缩进。上面的两种方法都能避免这类问题，实现只有条件满足时才生成对应行，且每行内容独立显示。

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