data属性值默认是字符串，不是对象；即使data-config='{"theme":"dark"}'，dataset.config返回的仍是字符串，需用JSON.parse()手动解析，且必须加try/catch处理非法JSON。
data属性值默认是字符串，不是对象
HTML 中的 data- 属性（比如 data-config='{"theme":"dark"}'）在 DOM 中读取时，dataset 返回的始终是字符串——哪怕你写了 JSON 格式，JavaScript 也不会自动解析。这是最常被忽略的前提。
直接访问 element.dataset.config 得到的是字符串 '{"theme":"dark"}'，不是对象。想当对象用，必须手动解析。
JSON.parse() 是最常用且安全的转换方式
只要你的 data- 值是合法 JSON 字符串（双引号、无尾逗号、不包含未转义换行等），就可用 JSON.parse() 转换：
const el = document.querySelector('[data-config]');
const config = JSON.parse(el.dataset.config); // → { theme: "dark" }
注意这些细节：
立即学习“Java免费学习笔记（深入）”；
-
data-属性名会自动驼峰化：data-api-url→dataset.apiUrl - 如果值为空或非法 JSON，
JSON.parse()会抛出SyntaxError，建议加try/catch - 不要用
eval()或Function()解析，有 XSS 风险
非 JSON 场景：用 split() 或正则提取简单键值对
如果 data 值是类似 data-params="size=large,color=blue" 这种类 query string 格式，JSON.parse() 会失败。此时可手写解析：
const params = Object.fromEntries(
el.dataset.params.split(',').map(pair => pair.split('=').map(decodeURIComponent))
); // → { size: "large", color: "blue" }
更稳妥的做法是限制使用场景：这类格式易出错，建议优先改用 JSON 字符串，比如 data-params='{"size":"large","color":"blue"}'。
Vue/React 等框架里别直接操作 dataset
在响应式框架中，dataset 是只读的 DOM 接口。如果你看到 data-config 在组件 props 或 state 里没更新，不是解析问题，而是你试图绕过框架的数据流机制。
正确做法：
- Vue：用
:config="configObj"传对象，而非依赖data-config - React：用
data-config仅作初始值，后续走useState+useEffect同步 - 避免在 mounted/useEffect 里反复读
dataset并JSON.parse，容易触发重复解析或内存泄漏
真正难的不是怎么转，是怎么确保 HTML 里写的字符串始终合法、可维护，以及在框架上下文中不和数据流打架。
