使用Lodash模板生成HTML时，如何安全转义字符串避免JS语法错误？

你遇到的这个问题很典型——当模板变量里包含单引号时，会直接闭合onclick事件里的单引号字符串，导致JS语法错误。encodeURI确实帮不上忙，因为它是用来处理URL编码的，和JS字符串的语法转义完全是两回事。下面给你两个更靠谱的解决方案，比手动替换兜底要优雅得多：

方案1：利用原生JSON.stringify（推荐） #

这是最省心的方法，JSON.stringify会自动转义所有JS字符串里的特殊字符（包括单引号、双引号、换行符等），而且不需要额外自定义函数。你只需要调整一下模板里的引号嵌套方式：

<button onclick='somemethod(<%= JSON.stringify(pruefobjekt.Name) %>)'></button>

这里把onclick的外层引号改成单引号，然后直接把JSON.stringify的结果作为参数传入——它会生成一个标准的双引号包裹的JS字符串，完全不会和外层的单引号冲突，而且所有特殊字符都被正确转义了。

方案2：自定义JS字符串转义函数 #

如果你更倾向于保持原来的引号嵌套方式，可以自定义一个专门转义单引号的函数，在Lodash模板里调用：

首先定义转义函数：

function escapeJsSingleQuote(str) {
  // 先转义反斜杠，避免反斜杠和单引号组合出问题
  return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
}

然后在模板中使用：

<button onclick="somemethod('<%= escapeJsSingleQuote(pruefobjekt.Name) %>')"></button>

这个函数会把字符串里的单引号转成\'，同时处理反斜杠的转义，确保生成的JS代码语法完全正确。

这两个方案都比手动替换还原的方式更可靠，尤其是JSON.stringify的方法，能覆盖更多边缘情况，推荐优先使用。

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