Javascript:missing ) 在返回按钮时出现参数错误答案

【问题标题】：Javascript:missing ) after argument error on returning a buttonJavascript:missing ) 在返回按钮时出现参数错误
【发布时间】：2017-06-24 04:11:27
【问题描述】：

我试图在 UI 上的某些功能中返回一个按钮并得到一个奇怪的错误。有人可以帮忙吗？

var div = "<button onclick='javascript:displayDetails('+value1+','+value2+');'>View</button>"

我得到的错误是：

参数列表后缺少 )。

【问题讨论】：

什么时候出现错误？
试试这个：var div = "<button onclick=\"javascript:displayDetails('"+value1+"','"+value2+"');\">View</button>"
你想做什么？是否真的要将字符串 '+value1+' 和 '+value2+' 传递给 displayDetails(…)？
根本不要使用内联事件处理程序属性，而是使用适当的 DOM 侦听器
感谢@mrlew 成功了。

标签： javascript virtual-dom

【解决方案1】：

你应该逃跑：

var div = "<button onclick=\"javascript:displayDetails('+value1+','+value2+');\">View</button>"

【讨论】：

在此之后我得到： Uncaught SyntaxError: Unexpected token } 在第 2 行，这是一个空行

【解决方案2】：

 onclick="javascript:displayDetails('+value1+','+value2+');"

不是

 onclick='javascript:displayDetails('+value1+','+value2+');'

使用支持多行的``代替''并避免嵌套的""：

const div = `
   <button onclick="javascript:displayDetails('+value1+','+value2+');">
       View
   </button>`;

不是

const div = "<button onclick='javascript:displayDetails('+value1+','+value2+');'>View</button>"

那么你就不需要espace了

【讨论】：

【解决方案3】：

最新版本的 JavaScript（ES2015，以前/也称为 ES6）现在支持“模板字符串”，可以帮助避免这种引用/转义的噩梦。使用字符串周围的“反引号”（又名重音符号）来表示模板字符串，并为您想要“插入”（包含）到字符串中的每个值使用 ${value} 的模板语法：

var div = `<button onclick="javascript:displayDetails(${value1},${value2});">View</button>`;

一般来说，最好选择一个标准，以便在何时使用引号。许多现代 JavaScript 样式指南更喜欢用单引号 (') 表示普通字符串，而用双引号 (") 表示周围的 HTML（或 XML）属性。现在有了第三种引号机制，意味着您不必经常用反斜杠转义引号——这很好，因为转义很烦人、容易出错且不清晰。

【讨论】：