未捕获的 SyntaxError：模板字符串中的意外标识符答案

【问题标题】：Uncaught SyntaxError: Unexpected identifier in template string未捕获的 SyntaxError：模板字符串中的意外标识符
【发布时间】：2021-06-09 21:30:49
【问题描述】：

我有一些 html 转换为模板字符串，当我选中复选框时出现上述错误，我知道它与 ${currentRow} 有关，只是不知道为什么它会这样做

function RowChecked(row) {
    ...
}

const currentRow = ds.find(f => f.ItemID === itemId);
return `<input id='${currentRow.Area}_${currentRow.ItemKey}' type='checkbox' class='checkbox' onChange='RowChecked(${currentRow})' />`;

【问题讨论】：

onChange='RowChecked(${currentRow})' 所以你想传入对象？？
@epascarello，是的，对不起，我应该将其添加到我的问题中
将整个对象放入其中是一个非常糟糕的主意。那里可能有更好的解决方案，但如果不知道所有代码就很难说。
过去你必须使用className 而不仅仅是class，但这可能已经改变了
@Pointy 您可以在将 html 构建为字符串时使用类....

标签： javascript html jquery template-strings

【解决方案1】：

我不会这样做，但你需要使用 JSON.stringify

return `<input id='${currentRow.Area}_${currentRow.ItemKey}' type='checkbox' class='checkbox' onChange='RowChecked(${JSON.stringify(currentRow)})' />`;

但如果其中一个值包含'，这将失败。

更好的解决方案是生成 DOM 元素并将它们添加到 DOM。您可以添加引用该对象的事件处理程序。

下一个最好的办法是建立一个 id 的映射/对象并通过 id 引用记录。

查看您的代码，您正在执行大量循环来查找记录。

ds.find(f => f.ItemID)

所以如果你只是把它变成一个对象，它就会变成一个简单的查找

const lookup = ds.reduce((acc, f) => { acc[f.ItemID] = f; return acc; }, {});

现在在您的代码中，您可以传递 id 并获取它。查找代码消失了，您只需通过 id 引用对象。

【讨论】：

啊，我明白你的意思了。
复选框在一个网格中，每一行都有一个，我本可以使用网格中的数据绑定事件，我现在也在使用它，我想了更多
我在答案中添加了一些关于我会做什么的内容。以 id 作为键创建一个对象，一切都是简单的查找而不是循环。你会受到一次reduce的惩罚，不需要到处循环。