Handlebars单引号问题：onclick事件传参异常求助

我太懂这种引号嵌套搞崩代码的痛苦了！像O'Neill这种带撇号的姓氏，直接塞到内联onclick里，分分钟就把字符串的闭合逻辑搞乱——之前踩过一模一样的坑，给你两个靠谱的解决方案：

方案1：自定义Handlebars Helper做JS层面的引号转义 #

三重括号{{{Surname}}}只是关闭了HTML转义，但onclick里的内容属于JS上下文，HTML转义规则不适用。我们需要一个专门处理JS字符串转义的helper：

首先注册Helper（在你的JS代码里）：

Handlebars.registerHelper('escapeJs', function(str) {
  // 转义单引号、双引号和反斜杠，适配JS字符串场景
  return str.replace(/['"\\]/g, '\\$&');
});

然后在模板里这样用：

<button onclick="myFunction('{{escapeJs Surname}}')">点击</button>

这样O'Neill会被转成O\'Neill，完美适配JS字符串的引号规则，不会再出现语法错误。

方案2：用数据属性+事件委托（更推荐） #

内联onclick本身就有维护性差、易触发XSS的问题，更优雅的方式是把数据存在元素的data-*属性里，然后通过事件监听来获取：

模板部分：

<button class="surname-btn" data-surname="{{Surname}}">点击</button>

然后在外部JS里绑定事件：

// 事件委托，监听所有.surname-btn的点击
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('surname-btn')) {
    const surname = e.target.dataset.surname;
    myFunction(surname);
  }
});

这种方式完全避开了引号嵌套的问题，不管姓氏里有什么特殊字符都能正常获取，而且代码结构更清晰，也更安全。

之前你试的各种单双引号组合之所以失效，是因为只要参数里出现和外层引号相同的字符，就会提前闭合字符串，触发JS语法错误。上面两种方法都能从根源解决这个问题，推荐优先用方案2哦！

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