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

如果解析属性并检查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 3

使用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 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

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

5 个答案: