javascript - 将 element.dataset（一个 DOMStringMap 对象）转换为 vanilla JavaScript 中的“真实”JSON 对象？

Question

就像在类似的 StackOverflow 问题中解释的那样，在 vanilla JavaScript 中，我可以执行以下操作：

var data = Object.assign({}, element.dataset);

...为了将所有data-*属性作为一个对象。

但是，生成的对象不是“真正的”JSON 对象，布尔值和数字被引号包围。

<div id="my-element"
    data-string="It's OK."
    data-bool="true"
    data-number="10">
</div>

下面是原生 JavaScript 和 jQuery 的比较：

我认为在 jQuery 中，jQuery('#my-element').data()在返回实际的 JSON 之前正在做“提升”数据的繁重工作。

由于我想使用 ES6 而不是 jQuery，并且我不想重新发明轮子（使用正则表达式/条件解析该值），我想问是否有一种快速的方法来完成这项工作。

Answer 1

jquery 中的数据处理在data.jsgetData()中的函数中完成

这是来自 JQuery 库的代码：

function getData( data ) {
    if ( data === "true" ) {
        return true;
    }

    if ( data === "false" ) {
        return false;
    }

    if ( data === "null" ) {
        return null;
    }

    // Only convert to a number if it doesn't change the string
    if ( data === +data + "" ) {
        return +data;
    }
    //Replaced rbrace with regex value.
    if ( /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/.test( data ) ) {
        return JSON.parse( data );
    }

    return data;
}

您可以使用此功能并更新您的数据。