在JavaScript中，在模板字面量中将对象作为参数传递

Question

我目前拥有一个对象，我想将其作为参数传递给模板文字中的另一个函数：

    var template = `<button onclick="onclick(${object})"></button>`;

然而，这会使参数变成字符串值：[object Object]，并且不会传递参数。有没有办法将此参数传递到函数中？

非常感谢您的帮助。

- danwillm

---

这个模板字面量中没有函数，它只是一个字符串，你的对象也被字符串插值了。不要使用 onclick 事件处理程序属性，正确安装事件监听器函数！ - Bergi

你不需要处理对象序列化和反序列化，也不需要处理js转义、html转义，也不需要处理属性事件处理程序的奇怪作用域，你实际上可以使用真正的对象（相同的标识），而且它更有效率。请参见https://dev59.com/fGw05IYBdhLWcg3w6GLH。 - Bergi

Answer 1

您需要将对象表示为字符串。您可以使用 JSON.stringify 来实现此功能：

var template = `<button onclick="handleClick(${JSON.stringify(obj).split('"').join("&quot;")})"></button>`;

你需要转义双引号（这段代码已经做了），如果你在onclick事件中使用单引号，也需要进行转义（这段代码没有做）。

onclick="onclick" 实际上调用的是 window.onclick - 也就是说它会捕获任何地方的点击事件。你应该使用一个不同的名称（比如 handleClick）。

我建议尽量避免使用内联事件监听器，因为这可能会导致类似这样的问题，并且如果您需要采用内容安全策略，它们可能会导致问题。

- ecc521

---

如何将其转换回对象？ - danwillm

JavaScript 应该将字符串化的代码作为对象进行评估。JSON 是 JavaScript 对象字面量的一种更严格的形式。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#Syntax - ecc521

然而，如果您需要将JSON字符串转换为对象，则可以运行JSON.parse(string)。 - ecc521

你的警告没有抓住重点。它仍然无法处理 {example: "apostrophe: ' "}。你实际上需要做的是，在序列化对象后对字符串进行 HTML 实体转义。 - Bergi