JavaScript动态生成按钮时如何正确传入JSON对象作为函数参数？

• 最初直接传对象得到[object Object]的原因：HTML中onclick属性的本质是字符串，动态拼接时，非字符串类型的对象会被JS隐式转换为字符串，对象默认的字符串转换结果就是[object Object]，根本不会保留原对象的键值内容。
• 改用JSON.stringify拼接后点击报错的原因：HTML的onclick属性本身是用外层双引号包裹的，而序列化后的JSON字符串内部全是双引号，直接嵌进去后，HTML解析器会在遇到JSON内第一个双引号的位置，提前截断onclick的属性值，最终生成的HTML结构就是onclick="showEditModalCode('{"random":"xxx"}')"，语句被引号拆得七零八落，自然无法正常执行。

• 方案1：转义特殊字符，解决拼接时的引号冲突
  核心逻辑是把JSON字符串里的双引号替换为HTML可识别的转义实体，让HTML解析器不会把它和外层包裹属性的双引号混淆。
  实际代码写法：

  // 序列化对象后，将双引号转为HTML转义实体
  const serializedItem = JSON.stringify(text.items[i]).replace(/"/g, '"');
  collections += `<button 
    type="button" 
    class="btn btn-primary" 
    data-toggle="modal" 
    data-target="#editModal" 
    style="background: #cccccc; border: 0; color: black;"
    onclick="showEditModalCode('${serializedItem}')"
  >EDIT CARD</button>`;
  

  转义后生成的HTML会变成onclick="showEditModalCode('{"random":"xxx"}')"，浏览器解析HTML时会自动把"还原为双引号，传给函数的就是完整合法的JSON字符串，原函数里的JSON.parse(item)可以正常拿到对象。
  额外注意：如果对象内容里包含单引号，还需要把单引号替换为'，不然会和onclick里包裹JSON的单引号冲突，同样会截断字符串。

• 方案2：用事件委托绑定事件（更推荐，无转义坑）
  完全不要把JSON字符串硬拼到onclick属性里，给动态按钮存数据索引，通过事件委托绑定点击行为，从根源上避免引号解析问题，代码更整洁：
  实际代码写法：

  // 拼接按钮时只存数组项的索引，不硬塞序列化对象
  collections += `<button 
    type="button" 
    class="btn btn-primary edit-card-btn" 
    data-item-index="${i}"
    data-toggle="modal" 
    data-target="#editModal" 
    style="background: #cccccc; border: 0; color: black;"
  >EDIT CARD</button>`;
  
  // 给按钮的父容器绑定点击事件，做事件委托
  document.querySelector('.cards-container').addEventListener('click', (e) => {
    // 判断当前点击的是否为编辑按钮
    if (e.target.classList.contains('edit-card-btn')) {
      const targetIndex = Number(e.target.dataset.itemIndex);
      // 直接从原数组拿完整对象传入，不需要额外做序列化和反序列化
      showEditModalCode(text.items[targetIndex]);
    }
  })
  
  // 处理函数直接接收原对象即可，不需要JSON.parse
  function showEditModalCode(item) {
    console.log(item);
  }
  

  这种写法不管对象里存了什么特殊字符、单双引号，都不会出现解析错误，也不会因为大量拼接转义让代码变得杂乱，符合前端内容与行为分离的开发规范。

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