在vanilla JavaScript中把element.dataset（一个DOMStringMap对象）转换成一个 "真正的 "JSON对象？

Posted 2023-02-25

就像在一篇文章中解释的那样 类似的StackOverflow问题在vanilla javascript中，我可以做到以下几点。

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

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

然而，生成的对象并不是一个 "真正的 "JSON对象，booleans和数字都被引号包围。

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

这里是vanilla JavaScript和jQuery的对比。

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

由于我想使用ES6而不是jQuery，而且我不想重新发明轮子（使用regexconditions解析该值）。我想问一下，有没有快速完成这项工作的方法？.

答案

在jquery中的数据处理是在下面完成的 getData() 作用于 数据.js

这里是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;

你可以用这个函数来更新你的数据。