將 element.dataset （一個 DOMStringMap 對象）轉換為“真實的” JSON object in vanilla JavaScript？

Question

就像在類似的 StackOverflow 問題中解釋的那樣，在 vanilla JavaScript 中，我可以執行以下操作：

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

...為了將所有data-*屬性作為 object 獲取。

但是，生成的 object 不是“真正的” JSON object，布爾值和數字都用引號括起來。

<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.js 中的getData() function 中完成

這是 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;
}

您可以使用此 function 並更新您的數據。