JavaScript 字符串转数字

在 JavaScript 中，如果想要将字符串转换为数字，常用的有以下 3 种方式。

使用 “+” 运算符。
使用 Number()。
使用 parseInt() 和 parseFloat()。

使用 “+” 运算符

在 JavaScript 中，我们可以在字符串的前面使用一个 “+” 号，这样可以将字符串快速转换为数字。这种方式最简洁，也是性能最好的。

示例 1：使用 “+” 将字符串转数字

const stringA = "666";
const stringB = "3.14";
const stringC = "  -50  ";    // 包含空格的字符串

const numberA = +stringA;
const numberB = +stringB;
const numberC = +stringC;

console.log(numberA);
console.log(typeof numberA);
console.log(numberB);
console.log(typeof numberB);
console.log(numberC);
console.log(typeof numberC);

运行结果如下。

666
number
3.14
number
-50
number

分析：

需要注意的是，如果字符串本身包含非数字字符，此时使用 “+” 运算符会返回 NaN 值，比如：

console.log(+"123px");    // NaN
console.log(+"hello");    // NaN

为什么在字符串前面使用一个 “+”，就能将字符串转换为数字呢？这是因为当 “+” 被应用于非数字值（例如字符串、布尔值或日期对象）时，它会执行以下操作：

它会调用内部的 ToNumber 抽象操作。
对于字符串，ToNumber 会尝试将其解析为数字（整数或浮点数）。
它会忽略字符串开头和结尾的空白字符。
如果字符串不能被解析为有效的数字（例如 "hello"），则会返回 NaN（Not a Number）。

使用 Number() 函数

在 JavaScript 中，Number() 函数是将任何其他类型转换为数字的最通用方法，Number 会进行以下步骤：

如果是空字符串，则转换为 0。
如果字符串是纯数字（可以是整数，也可以是小数），则返回对应的数字。
如果字符串中包含任何非数字字符（除了开头和末尾的空格、+、-、E 等），则返回 NaN 值。

示例 2：Number() 的基本用法

运行代码

// 整数型字符串
const strInt = "123";
const numInt = Number(strInt);
console.log(numInt);
console.log(typeof numInt);

// 浮点型字符串
const strFloat = "3.1415";
const numFloat = Number(strFloat);
console.log(numFloat);
console.log(typeof numFloat);

// 空字符串
const strEmpty = "";
const numEmpty = Number(strEmpty);
console.log(numEmpty);
console.log(typeof numEmpty);

运行结果如下。

123
number
3.1415
number
0
number

分析：

对于 “数字 + 符号（+、-、E等）” 构成的字符串，Number() 函数可以准确地将其转换为对应的数字类型。

示例 3：Number() 转换失败的情况

运行代码

const strA = "100px";
const numA = Number(strA);
console.log(numA);

const strB = "hi666";
const numB = Number(strB);
console.log(numB);

运行结果如下。

NaN
NaN

分析：

由于 "100px" 和 "hi666" 并非纯数字，Number() 无法将其完整转换为数字，因此会返回 NaN 值。

使用 parseInt() 和 parseFloat()

在 JavaScript 中，我们可以使用 parseInt() 来将字符串转换为一个整数。它从字符串的第一个字符开始，依次向右解析数字字符，直到遇到第一个非数字字符为止（正负号除外），然后返回已解析的整数部分。

parseFloat() 函数与 parseInt() 类似，但它会解析出浮点数（即带小数的数字）。它也会从字符串的第一个字符开始解析，直到遇到第二个小数点或第一个非数字字符为止。

示例 4：parseInt() 转换为整数

运行代码

// 转换成功
console.log(parseInt("100px"));
console.log(parseInt("+666"));
console.log(parseInt("-666"));
console.log(parseInt("3.14"));
console.log(parseInt("  123  "));

// 转换失败
console.log(parseInt("hao123"));
console.log(parseInt("lvyenet"));

运行结果如下。

100
666
-666
3
123
NaN
NaN

提示: 关于 parseInt() 函数的更详细用法，另请参阅：JavaScript parseInt() 函数。

示例 5：parseFloat() 转换为浮点数

运行代码

// 转换成功
console.log(parseFloat("100px"));
console.log(parseFloat("+666"));
console.log(parseFloat("-666"));
console.log(parseFloat("3.14"));
console.log(parseFloat("  123  "));

// 转换失败
console.log(parseFloat("hao123"));
console.log(parseFloat("lvyenet"));

运行结果如下。

100
666
-666
3.14
123
NaN
NaN

提示: 关于 parseFloat() 函数的更详细用法，另请参阅：JavaScript parseFloat() 函数。