Преобразование element.dataset (объект DOMStringMap) в «настоящий» JSON объект в vanilla JavaScript?

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>

Вот сравнение между vanilla JavaScript и jQuery:

Я предполагал, что в jQuery , jQuery('#my-element').data() выполняет тяжелую работу по «снятию» данных перед возвратом фактического JSON.

Поскольку я хотел бы использовать ES6, а не jQuery, и я не хочу изобретать колесо (анализировать эти значения с помощью регулярного выражения / условий), Я спрашиваю, есть ли быстрый способ выполнить эту работу .

Answer 1

Обработка данных в jquery выполняется в функции getData() в data. 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;
}

вы можете использовать эту функцию и обновлять свои данные.