如何将es6字符串转为数字

# 如何将ES6字符串转为数字

## 引言

在JavaScript开发中，数据类型转换是常见的操作。特别是从字符串(String)到数字(Number)的转换，这在处理表单输入、API响应或任何需要数学计算的场景中尤为重要。ES6（ECMAScript 2015）引入了新的特性和方法，使得字符串到数字的转换更加灵活和可靠。本文将详细介绍在ES6及之后版本中，将字符串转换为数字的各种方法，包括它们的优缺点和适用场景。

## 1. 使用`Number()`构造函数

`Number()`是JavaScript中最直接的字符串转数字方法。

```javascript
let str = "123";
let num = Number(str);
console.log(num); // 123
console.log(typeof num); // "number"

特点：

• 如果字符串包含非数字字符（如”123abc”），会返回NaN。
• 空字符串或仅包含空格的字符串会转换为0。
• 支持十六进制（如”0xFF”）和科学计数法（如”1e3”）的字符串。

适用场景：

• 需要严格转换，确保字符串完全符合数字格式时使用。

2. 使用parseInt()和parseFloat()

这两个函数是传统的字符串转数字方法，ES6中仍然适用。

let str1 = "123.45";
let str2 = "123abc";

console.log(parseInt(str1)); // 123
console.log(parseFloat(str1)); // 123.45
console.log(parseInt(str2)); // 123

特点：

• parseInt解析整数，parseFloat解析浮点数。
• 会忽略字符串开头的空格，直到找到第一个非空格字符。
• 如果第一个非空格字符不是数字或正负号，返回NaN。
• 支持指定进制（如parseInt("FF", 16)）。

适用场景：

• 需要从字符串中提取数字部分时（如”123px”）。
• 需要明确指定进制时。

3. 使用一元加号运算符(+)

ES6中可以使用一元加号运算符快速转换。

let str = "123";
let num = +str;
console.log(num); // 123

特点：

• 简洁，但可读性可能较差。
• 行为与Number()相同，非数字字符串会返回NaN。

适用场景：

• 需要简洁语法且确定字符串是有效数字时。

4. 使用Math.floor()、Math.ceil()和Math.round()

这些方法可以将字符串转换为整数，同时进行舍入。

let str = "123.7";
console.log(Math.floor(+str)); // 123
console.log(Math.ceil(+str)); // 124
console.log(Math.round(+str)); // 124

特点：

• 需要先通过其他方法（如+或Number()）将字符串转为数字。
• 适用于需要特定舍入方式的场景。

适用场景：

• 需要向下、向上或四舍五入取整时。

5. 使用ES6的Number.parseInt()和Number.parseFloat()

ES6将parseInt和parseFloat移植到了Number对象上，功能相同。

let str = "123.45";
console.log(Number.parseInt(str)); // 123
console.log(Number.parseFloat(str)); // 123.45

特点：

• 与全局的parseInt和parseFloat功能一致。
• 更符合模块化编程风格。

适用场景：

• 希望避免使用全局函数时。

6. 使用模板字符串和Number()

虽然模板字符串通常用于字符串插值，但可以结合Number()使用。

let str = `123`;
let num = Number(str);
console.log(num); // 123

特点：

• 与其他方法相比没有明显优势。
• 适用于模板字符串生成的字符串。

7. 使用位运算符（如~~或|0）

位运算符可以将字符串快速转换为整数，但有一些限制。

let str = "123.45";
console.log(~~str); // 123
console.log(str | 0); // 123

特点：

• 只能处理32位整数，范围在-2147483648到2147483647之间。
• 会丢弃小数部分。
• 非数字字符串会转换为0。

适用场景：

• 需要高性能且确定字符串是有效整数时。

8. 使用BigInt()（ES2020）

对于大整数，可以使用BigInt。

let str = "12345678901234567890";
let bigNum = BigInt(str);
console.log(bigNum); // 12345678901234567890n

特点：

• 用于超出Number安全范围的整数。
• 数字末尾会添加n表示BigInt类型。

适用场景：

• 处理非常大的整数时。

9. 性能比较

不同方法的性能可能有差异，但通常可以忽略。以下是一个简单比较：

let str = "123";

console.time("Number");
Number(str);
console.timeEnd("Number"); // ~0.01ms

console.time("parseInt");
parseInt(str);
console.timeEnd("parseInt"); // ~0.01ms

console.time("Unary +");
+str;
console.timeEnd("Unary +"); // ~0.005ms

10. 错误处理

在实际开发中，可能需要处理转换失败的情况。

function safeConvert(str) {
  let num = Number(str);
  if (isNaN(num)) {
    throw new Error("Invalid number string");
  }
  return num;
}

try {
  console.log(safeConvert("123")); // 123
  console.log(safeConvert("abc")); // Error
} catch (e) {
  console.error(e.message);
}

11. 实际应用示例

示例1：表单输入验证

let ageInput = document.getElementById("age");
let age = Number(ageInput.value);
if (isNaN(age)) {
  alert("Please enter a valid number");
}

示例2：API响应处理

fetch("/api/data")
  .then(response => response.json())
  .then(data => {
    let price = parseFloat(data.price);
    console.log(price);
  });

12. 总结

方法	特点	适用场景
Number()	严格转换，非数字返回NaN	需要严格验证字符串是否为数字时
parseInt()	提取整数部分，支持进制	从字符串中提取整数或指定进制时
parseFloat()	提取浮点数部分	从字符串中提取浮点数时
一元加号(+)	简洁，行为同Number()	简洁语法且确定字符串有效时
位运算符	快速转换为32位整数	高性能需求且确定字符串为有效整数时
BigInt()	处理大整数	超出Number范围的整数时

选择合适的方法取决于具体需求，如是否需要严格验证、是否需要处理浮点数或大整数等。

13. 参考资料

• MDN: Number
• MDN: parseInt
• ECMAScript 6 入门

”`