data属性无“空”概念，仅分“存在”与“值为空字符串”；用hasattribute()判断存在性最可靠，getattribute()配合!val||val.trim()===''判实际值是否为空。
data属性本身没有“空”概念，只有“存在”和“值为空字符串”两种状态；检查是否为空，必须先明确你真正想判断的是哪一种。
用 hasAttribute() 判断 data 属性是否存在
这是最轻量、最可靠的“存在性”检查方式，不读值、不触发重排、零开销：
- el.hasAttribute('data-order-id') →
true表示 HTML 中声明了该属性，哪怕写成data-order-id=""或data-order-id="false"都返回true - 常见误写：
el.hasAttribute('DATA-ORDER-ID')（大写）永远返回false，必须全小写传参 - 别用
el.getAttribute('data-order-id') !== null：当属性存在但值为空字符串时，getAttribute()返回""，而"" !== null是true，但语义上它“存在且为空”，不是“不存在”
用 getAttribute() + 逻辑判断值是否为空字符串
当你关心的是“有没有实际值”，而不是“有没有声明”，就该读取并判断值：
-
const val = el.getAttribute('data-user-token');→ 直接拿到原始字符串，包括""、" "、"0"、"false" - 判断是否真为空：
!val || val.trim() === ''（兼顾null、undefined和纯空白） - 不要用
!el.dataset.token：如果 HTML 是data-user-token="0"，dataset.token是字符串"0"，但!"0"是false，误判为“非空” - 服务端可能输出
data-config='{"a":1}'，此时getAttribute()是唯一能拿到原始 JSON 字符串的方式，后续再JSON.parse()（记得加try/catch）
为什么 dataset.xxx 不适合做“空值”判断
dataset 是浏览器做的语义映射层，不是原始数据通道，它在空值场景下容易误导：
-
dataset自动忽略前导/尾随空格，data-id=" 123 "→dataset.id === "123"，但data-id=""→dataset.id === undefined（注意：不是""） - 属性名不规范时（如
data-user_name），dataset.user_name永远是undefined，但getAttribute('data-user_name')能取到值 -
dataset.enabled = false实际写入的是字符串"false"，后续if (el.dataset.enabled)会进分支，因为"false"是真值 - IE11 对连字符转驼峰有 bug，
data-api-key的dataset.apiKey可能返回undefined，降级用getAttribute更稳
真正容易被忽略的点：HTML 中 data- 属性一旦命名违规（比如含大写字母、下划线、点号），浏览器直接忽略解析——DevTools 的 Elements 面板里都看不到它，任何 JS 访问都会失败。所以检查“是否为空”之前，先确认它是不是根本没被 DOM 解析出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
