如何使用Javascript/Jquery将HTML的data属性值读取为数组对象

首先你通过attributes['data-spec']取到的是属性节点对象，而非属性本身的字符串值，需要先取值再做序列化转换即可得到目标数组，无需手动拆分拼接。

方案1：原生JS实现（推荐，无依赖） #

// 取对应DOM节点
const elem = document.querySelector('.something');
// 直接通过dataset取data-*属性的字符串值
const specStr = elem.dataset.spec;
// 将单引号替换为标准JSON要求的双引号后反序列化为数组
const specArr = JSON.parse(specStr.replace(/'/g, '"'));

console.log(specArr); // 输出：['thing', 'another-thing', 'one-more-thing'] 数组对象

方案2：基于你现有jQuery写法实现 #

let elem = $('.something')
// 用jQuery的data方法直接取data-spec属性值
let specStr = elem.data('spec')
// 替换引号后反序列化
let specArr = JSON.parse(specStr.replace(/'/g, '"'))

console.log(specArr);

补充说明：所有HTML的data-*自定义属性默认存储的都是字符串类型，没有原生API可以直接读取为数组/对象等复杂类型，必须做一次序列化转换。如果后续可以修改HTML生成逻辑，建议把data-spec的值改为标准JSON格式（用双引号包裹字符串），就可以省去替换引号的步骤，直接JSON.parse即可。

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