调用函数时传入数据显示[object Object]，使用JSON.stringify仍未解决求原因

AI 小北

2026-7-24

排查思路

检查JSON.stringify的实际输出
先在控制台单独打印JSON.stringify(options)的结果，确认它是否真的生成了合法的JSON字符串。如果输出是[object Object]，说明options不是可正常序列化的对象——比如它是DOM元素、存在循环引用的对象，或是自定义类的实例，这类对象无法被JSON.stringify正确转换。
查看拼接后的最终HTML代码
打印拼接完成的the_data，检查生成的onclick属性内容。如果看到的是popup_manager.getFormPopUp([object Object])，说明JSON.stringify未正常工作；如果是popup_manager.getFormPopUp({"key":"value"})这类格式，问题大概率是引号冲突：你用双引号包裹onclick内容，而JSON.stringify生成的字符串默认也是双引号，浏览器解析时会提前截断属性值，导致函数接收到的参数异常。
解决引号冲突问题
有两种可行的处理方式：
1. 转义JSON字符串中的双引号：用JSON.stringify(options).replace(/"/g, '"')，将JSON里的双引号替换为HTML实体，避免和onclick的外层双引号冲突。
2. 改用单引号包裹onclick内容：修改代码为the_data ='<a onclick=\'popup_manager.getFormPopUp('+JSON.stringify(options)+')\'>'+the_data+'</a>';，JSON的双引号不会和外层单引号冲突。
验证options对象的类型
通过console.log(typeof options)和console.log(options instanceof Object)确认options是纯JS对象。如果它是null、函数、Symbol或宿主对象，JSON.stringify无法正确序列化，会导致输出异常。
改用事件监听替代内联绑定
内联onclick容易引发字符串拼接问题，推荐用事件监听的方式直接传递对象：
```
const link = document.createElement('a');
link.textContent = the_data;
link.addEventListener('click', () => {
  popup_manager.getFormPopUp(options);
});
// 将link插入到DOM对应位置，替换原有内容
```
这种方式不需要序列化对象，直接传递原对象，彻底避免字符串拼接的问题。