在HTML标签中添加HTML数据属性的标准方法是什么？

Question

我正在添加一个HTML数据属性，但我不确定在数据属性名称方面的标准约定是什么。我理解单词数据属性（data-name=""或data-id=""）等，但如果我在数据属性名称中使用超过一个单词，应该遵循什么约定？我是否要分隔这两个单词（data-product_id=""或data-product-id=""），还是采用驼峰式大小写，如：data-productID=""？

- junaid TK

---

如果有疑问，请参考规范 - 有时，尽管不总是如此，规范将包含一个或多个命名约定。如果它包含多个，则需要自己做出决定并坚持下去：https://html.spec.whatwg.org/multipage/dom.html#custom-data-attribute - BoltClock

Answer 1

数据属性应该使用连字符分隔的单词，例如data-product-id。这样当通过dataset在Javascript中访问它们时，它们可以自动转换为camelCase（因为大多数Javascript变量通常都是camelCase）：

const div = document.querySelector('div');
console.log(div.dataset.productId);

<div data-product-id=5></div>

使用大写字母来表示单词间的分隔并不是一个好主意，因为在检查 dataset 时会丢失，当属性很长并且包含多个单词时，这将极大损害可读性。

const div = document.querySelector('div');
console.log(div.dataset);

<div data-productID=5></div>

在数据属性中使用下划线会导致数据集属性也带有下划线，这有点奇怪，因为您可能需要在之后将其转换为驼峰命名以保持与变量命名约定一致：

const [div1, div2] = document.querySelectorAll('div');

(() => {
  // a bit verbose:
  const productId = div1.dataset.product_id;
  console.log(productId);
})();
(() => {
  // more consise and consistent
  // when the variable name is the same as the property name:
  const { productId } = div2.dataset;
  console.log(productId);
})();

<div data-product_id=5></div>
<div data-product-id=6></div>

- CertainPerformance

---

感谢您的时间，那么使用 - 是最好的选择吗？您能给我简要介绍一下数据集吗？我正在使用 jQuery 的 .data() 方法。 - junaid TK

jQuery试图做同样的事情，请参见https://api.jquery.com/data/#data2-大小写被忽略，破折号分隔的名称变成camelCase。因此，无论您是使用`.dataset`还是jQuery，使用破折号作为分隔符似乎是最好的选择。 - CertainPerformance

这个问题不应该因为主要产生基于观点的答案而被关闭吗？数据属性名称的大小写可以是 OP 的任何一个示例。只要它们与格式一致，使用什么格式并不重要。 - M. Eriksson

@Magnus Eriksson：这个答案指出了使用每种选项的一些实际影响，因此在某种程度上可能不管他们使用什么格式。话虽如此，它并没有直接回答主要问题，但确实增加了重要信息，有助于他们得出结论。如果问者拒绝接受除基于观点以外的任何答案（不是通过拒绝接受此答案来拒绝，而是在评论中争论），那么我会同意关闭他们的问题。 - BoltClock