在前端开发场景中，通过HTML数据属性传递对象属性是非常常见的操作，很多开发者习惯直接把对象属性值写到data-*属性中，但是这种方式隐藏了不少容易忽视的问题。
常见陷阱一：数据类型丢失
HTML数据属性的值本质上都是字符串，即使你传入的是数字、布尔值或者其他类型的数据，读取时也会变成字符串，这会导致类型判断出错。
<div id="user" data-age="25" data-is-vip="true"></div>
const userEl = document.getElementById('user');
// 读取到的age是字符串"25"，不是数字25
console.log(typeof userEl.dataset.age); // string
// 读取到的isVip是字符串"true"，不是布尔值true
console.log(typeof userEl.dataset.isVip); // string常见陷阱二：复杂对象无法直接存储
如果对象属性是数组、嵌套对象这类复杂结构，直接把JSON字符串写到数据属性中，读取时如果不做解析就会得到错误的格式，要是格式有问题还会直接报错。
<div id="info" data-user='{"name":"张三","hobbies":["篮球","足球"]}'></div>const infoEl = document.getElementById('info');
// 直接读取得到的是字符串，不是对象
console.log(typeof infoEl.dataset.user); // string
// 如果JSON格式有问题，JSON.parse会直接报错
try {
const user = JSON.parse(infoEl.dataset.user);
console.log(user.name); // 张三
} catch (e) {
console.error('解析数据属性失败', e);
}常见陷阱三：属性名大小写不统一
HTML的数据属性名是不区分大小写的，但是dataset读取时会把属性名中的连字符转为驼峰命名，很多开发者会混淆命名规则，导致读取不到对应的属性值。
<div id="test" data-user-name="李四"></div>
const testEl = document.getElementById('test');
// 错误写法：dataset.userName 是undefined
console.log(testEl.dataset.userName); // undefined
// 正确写法：连字符转驼峰后是dataset.userName？不对，实际是data-user-name对应dataset.userName
// 上面错误示例是为了演示常见误区，正确读取方式是：
console.log(testEl.dataset.userName); // 李四
// 注意如果属性是data-userName，HTML不区分大小写，实际会被识别为data-username，读取时要用dataset.username常见陷阱四：特殊字符转义问题
如果对象属性值中包含引号、<、>这类特殊字符，直接写到数据属性中会导致HTML解析异常，甚至破坏页面结构。
<!-- 错误写法：属性值包含双引号，会导致HTML解析错误 --> <div data-desc="他说："今天天气好""></div> <!-- 正确写法：对特殊字符做转义 --> <div data-desc="他说："今天天气好""></div>
对应解决方案
解决类型丢失问题
读取数据属性值后，根据预期的属性类型做显式转换，或者约定数据属性的类型前缀，比如数字类型加num-前缀，布尔值加bool-前缀。
function getDataWithType(el, key) {
const value = el.dataset[key];
if (value === 'true') return true;
if (value === 'false') return false;
if (!isNaN(value) && value.trim() !== '') return Number(value);
return value;
}解决复杂对象存储问题
传递复杂对象时，先把对象转为JSON字符串，存储到数据属性中，读取时用JSON.parse解析，同时做好异常捕获。
// 存储复杂对象
const complexObj = { id: 1, tags: ['a', 'b'] };
const el = document.getElementById('target');
el.dataset.info = JSON.stringify(complexObj);
// 读取时解析
try {
const parsedInfo = JSON.parse(el.dataset.info);
console.log(parsedInfo.tags); // ["a", "b"]
} catch (e) {
console.error('数据解析失败', e);
}解决属性名大小写问题
统一数据属性的命名规范，全部使用小写字母加连字符的形式，避免混合大小写，读取时严格按照连字符转驼峰的规则获取，不要想当然使用大写字母。
解决特殊字符问题
在把属性值写入数据属性之前，对特殊字符做HTML转义，读取时如果需要还原内容再对应反转义，避免直接用未转义的字符串写入属性。
| 特殊字符 | 转义后字符 |
|---|---|
| " | " |
| < | < |
| > | > |
| & | & |
只要注意以上这些陷阱，并且按照对应的方案处理，就能更稳妥地使用HTML数据属性传递对象属性，减少不必要的调试问题。
JavaScriptHTML_data_attributes前端数据传递对象属性传递修改时间：2026-05-26 15:10:21