在HTML data属性中传递哈希数组，推荐使用何种格式？

在HTML的data属性里传递哈希数组，推荐用标准JSON格式，这是业界通用的做法，原因如下：

• 兼容性拉满：所有现代浏览器都支持通过JSON.parse解析标准JSON，不会出现莫名其妙的解析失败问题。
• 规范清晰：JSON是结构化数据的通用标准，其他开发者一眼就能看懂，也方便各类工具处理。
• 规避风险：你示例里用的单引号键值对不是标准JSON，要是用eval去解析还会有安全隐患，完全没必要。

正确写法示例 #

方式1：用单引号包裹整个data属性值（更简洁，推荐）

<button data-products='[{
  "id": "1",
  "name": "A Product Name",
  "value": "1000"
}, {
  "id": "2",
  "name": "A Second Product Name",
  "value": "2000"
}]'>

如果追求紧凑，也可以写成一行：

<button data-products='[{"id":"1","name":"A Product Name","value":"1000"},{"id":"2","name":"A Second Product Name","value":"2000"}]'>

方式2：用双引号包裹data属性值（内部双引号需转义）

<button data-products="[{
  &quot;id&quot;: &quot;1&quot;,
  &quot;name&quot;: &quot;A Product Name&quot;,
  &quot;value&quot;: &quot;1000&quot;
}, {
  &quot;id&quot;: &quot;2&quot;,
  &quot;name&quot;: &quot;A Second Product Name&quot;,
  &quot;value&quot;: &quot;2000&quot;
}]">

前端解析代码 #

拿到data属性值后，直接用JSON.parse解析成JS数组对象：

const btn = document.querySelector('button');
const products = JSON.parse(btn.dataset.products);
console.log(products); // 得到包含两个产品对象的数组

内容的提问来源于stack exchange，提问作者Benjamin J. B.