JavaScript中Data属性值的命名规范：连字符还是驼峰式？

嘿，这个问题其实挺常见的——很多人会把data属性的名称规范和值的规范搞混，我来给你理清楚：

首先得明确：HTML官方规范只对data属性的名称有要求（必须用连字符，比如data-target，不能写dataTarget），但对属性的值，并没有强制的命名规则，因为它本质就是一个字符串。不过在JavaScript场景下，我们可以根据使用场景和团队习惯来选择风格：

两种风格的适用场景 #

1. 连字符风格（kebab-case） #

如果你的data属性值只是用来做简单标识（比如和后端接口字段对应、作为状态标记，或者团队习惯HTML层面统一用连字符风格），那连字符是个不错的选择：

• 符合HTML的书写习惯，可读性强，比如data-status="pending-approval"一眼就能看懂意思
• 不需要额外转换，直接在JS里做字符串匹配就行

示例：

<div data-user-role="content-editor">编辑区域</div>

const editor = document.querySelector('[data-user-role="content-editor"]');
if (editor.dataset.userRole === 'content-editor') {
  // 给编辑者开放权限
}

2. 驼峰风格（camelCase） #

如果这个data值会直接在JavaScript里当作变量名、对象属性名或者函数名来使用，那驼峰式更贴合JS的命名习惯：

• 拿到值之后可以直接使用，不用额外做字符串转驼峰的处理
• 和JS代码的风格保持一致，看起来更协调

示例：

<button data-handler="showUserProfile">查看用户资料</button>

const btn = document.querySelector('button');
// 直接把data值作为对象的key调用对应函数
const actionMap = {
  showUserProfile: () => {
    // 渲染用户资料弹窗
  }
};
actionMap[btn.dataset.handler]();

核心原则 #

其实没有“正确”的选择，团队内部保持命名风格一致才是最重要的。如果团队已经有HTML/JS的编码规范，跟着走就行；如果没有，就根据具体使用场景选：

• 偏HTML标识用连字符
• 偏JS逻辑用驼峰

内容的提问来源于stack exchange，提问作者Neil