博客

记录：js拼接html时传递对象的一个坑

起因：在使用地图的popup时，动态拼接了一段html，如下

const row = {a：1}
popupHtml += `
      <div class="btns">
        <button οnclick="popupDetail(${row})">详情</button>
      </div>
      `

浏览器报错：

Uncaught SyntaxError: Unexpected identifier

点进索引看：

popupDetail([object Object])

这种错误一般是少了逗号或者分号，而我传递的对象变成[object Object]，

于是尝试用JSON.stringify去转换

结果仍然报错 输入意外结束

Uncaught SyntaxError: Unexpected end of input

点击索引看：

只剩下 popupDetail({

打印出来我传递的值是

{“a”:1}

仔细看代码

onclick="popupDetail(${JSON.stringify(row)})"
// 假如把我传递的值放进去
onclick="popupDetail({"a":1})"

很明显，这个双引号的问题

那么解决办法就出来了，

1.传递值的时候双引号转成单引号

onclick="popupDetail(${JSON.stringify(row).replace(/"/g, "'")})"

2.把方法外面包的那层双引号改成单引号

onclick='popupDetail(${JSON.stringify(row)})'