data属性存JSON时dataset返回字符串需JSON.parse()解析，推荐用getAttribute()避免驼峰转换问题，服务端输出要正确转义，复杂场景宜用ID查表替代直存。
data属性里存JSON，直接dataset取出来是字符串
浏览器把所有 data-* 属性值都当作纯字符串处理，哪怕你写的是 data-config='{"theme":"dark","size":12}'，用 element.dataset.config 拿到的也只是这个字符串，不是对象。不手动解析就直接用，会报 TypeError: Cannot read property 'theme' of undefined 这类错误。
常见做法是用 JSON.parse() 转换，但必须加 try-catch——因为 data 属性可能被手误改错、被其他脚本污染，或压根没设值：
try {
const config = JSON.parse(element.dataset.config);
console.log(config.theme); // ✅
} catch (e) {
console.warn('Invalid JSON in data-config:', element.dataset.config);
}用getAttribute()比dataset更可靠
dataset 会自动转换连字符命名（如 data-api-url → element.dataset.apiUrl），但对含特殊字符或大小写敏感的 key 容易出错；而 getAttribute('data-config') 直接读原始字符串，行为确定，推荐优先用它解析 JSON：
- 避免驼峰转换歧义：比如
data-JSON-string在dataset中变成jsonstring，丢失分隔信息 - 兼容服务端模板渲染：某些后端（如 Django、Rails）输出的 data 属性可能含空格或引号转义，
getAttribute原样返回，更可控 - 类型明确：你清楚自己在处理字符串，不会误以为
dataset返回的是已解析对象
服务端输出 JSON 时要注意引号和转义
如果 JSON 是由服务端模板动态注入的（比如 <div data-config="{{ config_json }}">），必须确保双引号被正确转义，否则 HTML 解析失败或 JS 报语法错误：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
data-config={"name":"Alice"}—— 缺少外层引号，HTML 解析失败 - ❌ 危险写法：
data-config='{"name":"O'Reilly"}'—— 单引号内混入未转义的单引号，JS 解析中断 - ✅ 正确做法：服务端用
JSON.stringify()生成值，并包裹在双引号中：data-config='{"name":"O'Reilly","id":42}'
前端拿到后仍需 JSON.parse()，但至少结构可预期。
复杂嵌套或大 JSON？考虑用data-* 存 ID，查表代替直存
data 属性本质是 HTML 字符串，存大段 JSON 会导致 DOM 膨胀、影响首屏解析速度，且难以调试。更健壮的做法是只存一个键名或 ID：
<button data-config-id="dashboard-v2">设置</button>
然后在 JS 里维护一个映射表：
const CONFIG_MAP = {
'dashboard-v2': { theme: 'dark', autoSave: true, columns: ['name', 'status'] }
};这样既避免 JSON 解析风险，又方便复用、测试和热更新配置。
真正要存 JSON 的场景其实不多——多数时候只是想传一两个开关或 ID，硬塞 JSON 反而增加出错面。
