如何将字符串安全序列化为JavaScript反引号字符串？

我们需要实现一个函数，将任意字符串安全转换为JavaScript的反引号模板字符串，要求保留原字符串的格式（比如换行），同时正确处理特殊字符，避免生成的代码出现语法错误。对比JSON.stringify（用于生成双引号字符串），我们需要对应的反引号版本。

示例代码 #

function stringToDoubleQuote(str: string) {
  return JSON.stringify(str)
}

function stringToBackQuote(str: string) {
  // 需要实现的逻辑
}

测试用例 #

const quotelist = `- 'singlequote'
- "doublequote"
- \`backquote\`
- template: ...\${0}...$\{1}...`
console.log('(A)', stringToDoubleQuote(quotelist))
console.log('(B)', stringToBackQuote(quotelist))

预期输出 #

(A) "- 'singlequote'\n- \"doublequote\"\n- `backquote`\n- template: ...${0}...${1}..."
(B) `- 'singlequote'
- "doublequote"
- \`backquote\`
- template: ...\${0}...\${1}...`

实现方案 #

核心是转义两个关键字符/序列：

• 反引号（）：必须转义为`，否则会提前结束模板字符串
• 模板表达式起始符（${）：必须转义为\${，否则会被当作JS表达式解析

对应的函数实现：

function stringToBackQuote(str: string) {
  // 先转义反引号，再转义${
  const escapedStr = str.replace(/`/g, '\\`').replace(/\${/g, '\\${');
  return `\`${escapedStr}\``;
}

使用场景 #

这个需求常见于将CSS文件转换为JS模块的场景：为了保持输出代码的可读性，避免生成满是\n转义的长双引号字符串，使用反引号模板字符串可以保留原CSS的换行和格式，大幅提升代码的可维护性。

内容的提问来源于stack exchange，提问作者Yukulélél