翻译自:https://gomakethings.com/converting-strings-to-numbers-with-vanilla-javascript/

在 JavaScript 中,你可以用数字来表示实际数字(例如 42),或用字符串来表示(例如 '42')。 如果你使用严格的比较来比较两者(===),它将返回 false,因为它们是两种不同类型的对象。

var num1 = 42;
var num2 = '42';
if (num1 === num2) {
console.log(true);
} else {
console.log(false);
}
// 将打印 log `false`

今天,让我们看看将字符串转换为数字的三种不同方法。

parseInt()

parseInt() 方法将字符串转换为整数。 它接受两个参数。 第一个参数是要转换的字符串。 第二个参数是一个介于 2 和 36 之间的整数 (数学系统的基础),表示上述字符串的基数。比如参数 “10” 表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时,不同的实现会产生不同的结果,通常将值默认为 10

var text = '42px';
var integer = parseInt(text, 10);
// 返回 42

parseFloat()

parseFloat() 方法将字符串转换为一个浮点数(带小数点的数字)。 你甚至可以传入包含随机文本的字符串。

var text = '3.14someRandomStuff';
var pointNum = parseFloat(text);
// 返回 3.14

Number()

Number() 方法将字符串转换为数字。 有时它是一个整数。 其他时候它是一个浮点数。 如果你传入一个包含随机文本的字符串,你将获得 NaN,这是“Not a Number”(非数字)的首字母缩写。

由于这种不一致,它是一个比 parseInt()parseFloat() 更不安全的选择。如果你希望字符串如果它有其他字符就让它返回 NaN 使其失败,则 Number() 实际上可能是更好的选择。

// 转换字符串
Number('123'); // 返回 123
Number('12.3'); // 返回 12.3
Number('3.14someRandomStuff'); // 返回 NaN
Number('42px'); // 返回 NaN

浏览器兼容性

这三种方法适用于所有现代浏览器,IE6 及更高版本。