javascript - 在没有 jQuery 的情况下从数据属性中获取数组

Question

我想使用一个数组来使用数据属性传递。 在我的 HTML 标签中我有这个属性:

data-toshow='["tblp"]'

我在使用的时候可以通过jQuery访问和使用

$().data('toshow')

但是当使用 dataset.toshow 时，我没有得到相同的结果。我实际上没有得到数组。

有人能给我解释一下吗？并告诉我如何在不使用 jQuery 的情况下做同样的事情？

Answer 1

jQuery 的 .data() 方法会自动尝试将自定义数据属性中的字符串转换为它看起来的任何类型(在本例中为数组)。 JavaScript 只是将其视为一个字符串，因此您需要解析该字符串以获得与 jQuery 相同的数组输出。例如:

// jQuery approach
const jqtest = $('div').data('toshow');
console.log(jqtest);

// Plain JavaScript approach
const jstest = JSON.parse(document.querySelector('div').dataset.toshow);
console.log(jstest);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-toshow='["tblp"]'></div>