如何将含字面量\n的ES6模板字符串按实际换行分割？

首先明确：你的需求是可以实现的，但你确实搞错了ES6模板字符串中\n的处理逻辑，我们来一步步理清楚：

核心误解：模板字符串里的\n不是字面量 #

ES6模板字符串和普通字符串遵循相同的转义规则：你在模板里写的\n会被转换成换行符，而不是保留成\和n两个字符。如果想在模板的某一行里保留字面量的\n（也就是让字符串内容里包含这两个字符），你需要把反斜杠转义，写成\\n。

举个例子，你想要的数组元素same\nline2（字面量字符串），在模板里得这么写：

const str = `line1
same\\nline2
line3`;

此时解析后的字符串是"line1\nsame\\nline2\nline3"，用split(/\n/)分割后，就能得到你预期的["line1", "same\\nline2", "line3"]。

两种场景的解决方案 #

场景1：行内的\n是字面量（\+n） #

这是最直接的情况，修正模板里的转义写法即可：

const str = `line1
same\\nline2
line3`;
const lines = str.split(/\n/);
document.getElementById('out').textContent = JSON.stringify(lines);

<pre id="out"></pre>

运行后会输出["line1","same\\nline2","line3"]，完全符合你的预期。

场景2：行内的\n是换行符，但只想按模板手动回车分割 #

如果你的需求是：模板的某一行里本身就包含换行符（\n），但你只想把模板中手动敲回车的地方作为分割点——这时候问题就来了：因为模板的手动回车和行内的\n在解析后的字符串里都是换行符，无法直接区分。

这种情况下，你需要用一个自定义的分割标记来代替模板里的手动回车，比如@@SPLIT@@：

const str = `line1@@SPLIT@@same\nline2@@SPLIT@@line3`;
const lines = str.split(/@@SPLIT@@/);
document.getElementById('out').textContent = JSON.stringify(lines);

<pre id="out"></pre>

这样就能得到["line1","same\nline2","line3"]，完美避开行内换行符的干扰。

为什么你的原始代码不对？ #

你的原始代码里：

const lines = `line1 same\nline2 line3`.split(/\n/);

这个模板字符串会被解析成"line1 same\nline2 line3"——也就是line1 same后面跟着一个换行，然后是line2 line3。所以split(/\n/)自然会得到["line1 same","line2 line3"]，和你的预期不符，本质就是你把模板里的\n当成了字面量，但它实际被解析成了换行符。

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