javascript - 如何将 DOM 节点数据集中的所有数字转换为 JavaScript 数字

Question

我使用该data属性将字符串和数字存储在 DOM 节点中，并使用 JavaScript 读取它们。不幸的是，所有值dataset都保存为字符串。那么什么是将它们转换为数字但保留字符串的最佳方法。

html:

<input data-minvalue="10" data-startcolor="#00ee00"/>

预期结果：

{
  minvalue: 10,
  startcolor:'#00ee00'
}

编辑：

• 它必须与 int 和 float 一起使用
• 不应转换“12_test”
• 应该转换'.3'

Answer 1

在值之前加上+，这会将其转换为本地数字并保留类似 的内容12_test，而parseFloat不会。如果结果isNaN，则改为安全字符串。

function kittenBaloon(str) {
    var num = +str;

    if(isNaN(num)) {
        return str;
    } else {
        return num;
    }
}

console.log(kittenBaloon('12_test'));
console.log(kittenBaloon('.3'));
console.log(kittenBaloon('#00ee00'));

Answer 2

使用该Number函数解析数值。如果它不是数字，你会得到一个NaN.

var dataset = el.dataset;
var data = {};
Object.keys(dataset).forEach(function (key) {
  var num = Number(dataset[key]);
  data[key] = isNaN(num) ? dataset[key] : num;
})

Answer 3

如果解析属性和检查isFinite还不够，您将不得不通过正则表达式测试是否要将其解析为数字：

var obj = {};
for (var i=0; i<node.attributes.length; i++) {
    var attr = node.attributes.length;
    if (attr.name.substr(0, 5) == "data-")
        obj[attr.name.substr(5)] = /^[+-]?(\d*\.)?\d+(e[+-]?\d+)?$/i.test(attr.value)
          ? parseFloat(attr.value)
          : attr.value;
    }
}

此正则表达式以EcmaScript §9.3.1中的数字字符串语法为导向；但是它例如不允许空格。

Answer 4

您将使用 parseInt() 方法。

从 html 中提取 data-minvalue 的 attr 值后，您会将其传递给 parseInt() 并将其用作对象中的值。

假设使用jquery

var obj = {};
var strNum = $('selector').attr('data-minvalue);
var intNum = parseInt(strNum);
obj.minvalue = intNum;

Answer 5

var string1 = "#456456";
var string2 = "546.789";

var filterString = function (string) {
    var temp = string;
        regex1 = /\./;
        regex2 = /\D/g;

    temp = temp.replace(regex1, '');

    if (!regex2.test(temp)) {
        return parseFloat(string);

    }

    return string;

}

string1 = filterString(string1);
string2 = filterString(string2);

console.log(typeof string1); //returns string
console.log(typeof string2); //returns number