如何在含换行的JS模板插值字符串中保留\n转义字符字面量

JS中const foo = "test\ntest"定义的字符串里，\n在代码解析阶段就已经被转换成了真实的换行控制符，直接把这个值插值到模板字符串中时，插入的就是实际的换行，最终生成的字符串里字段值会被拆成两行，自然会触发语法错误。

在把目标字符串插入mutation模板前，先对其中的特殊控制字符做转义：把真实的换行符替换成字面量形式的\n。要注意在JS字符串里要写出字面量\n，需要写\\n——第一个反斜杠是转义符，用来输出第二个反斜杠本身，最终拼接后得到的就是\+n两个字符。

修正后的代码：

const foo = "test\ntest";
// 全局替换字符串里的所有换行符为转义后的字面量\n
const escapedFoo = foo.replace(/\n/g, '\\n');
const string = `mutation {
   some_field: "${escapedFoo}"
}`;

运行后输出结果完全符合预期：

mutation {
   some_field: "test\ntest"
}

如果你的原字符串里还包含其他可能破坏GraphQL语法的特殊字符（比如原有反斜杠、回车符、制表符、双引号），可以补全转义规则，注意反斜杠的替换必须放在最前面，避免后续转义生成的反斜杠被重复处理：

const escapedFoo = foo
  .replace(/\\/g, '\\\\') // 先转义原字符串里自带的反斜杠
  .replace(/\n/g, '\\n')  // 转义换行
  .replace(/\r/g, '\\r')  // 转义回车
  .replace(/\t/g, '\\t')  // 转义制表符
  .replace(/"/g, '\\"');  // 转义双引号，避免意外闭合字段值的引号

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