将字符串转换为JavaScript中的数字：新手完全指南

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

引言：为什么这很重要？

想象一下这个场景：你正在用JavaScript编写一个小费计算器。用户在输入框中输入账单金额，点击按钮——然后得到... undefined，或者更糟，得到字符串 "10010" 而不是数字 110。熟悉吗？如果你刚刚开始编程之旅，在JavaScript中将字符串转换为数字 这个问题是绝对所有人都会踩到的“坑”之一。

在Stack Overflow上，问题 "How can I convert a string to an integer in JavaScript?" 获得了数千次浏览和数百个回答。这意味着即使是经验丰富的开发者有时也会在细节上感到困惑。今天，我们将一劳永逸地弄清楚如何正确在JavaScript中将字符串转换为数字，哪些方法有效，哪些无效，以及为什么结果有时会出乎意料。

准备好了吗？那我们开始吧！

为什么需要将字符串转换为数字？

JavaScript是一种动态类型语言。这很酷，因为你可以不用考虑数据类型……直到你遇到一个bug。问题在于，来自 prompt()、表单 input 字段、URL参数或API的数据总是以字符串形式出现。即使用户输入了 "42"，JavaScript看到的也不是数字，而是一组字符。

尝试将两个字符串相加：

let a = "10";let b = "20";console.log(a + b); // "1020"

看到了吗？你得到的是拼接结果，而不是总和 30。为了避免这种情况，你需要明确告诉JavaScript：“嘿，这些是数字，把它们当作数字来处理！”

方法一：parseInt() —— 经典之选

最流行的在JavaScript中将字符串转换为整数的方法是 parseInt() 函数。它接受一个字符串并从中“提取”出整数，忽略数字之后的所有内容。

语法和示例

let str = "42";let num = parseInt(str);console.log(num); // 42 (数字)

// 即使数字后面有“垃圾”字符也能工作console.log(parseInt("123px"));    // 123console.log(parseInt("10.99"));    // 10 (舍弃小数部分)

// 但如果字符串不是以数字开头...console.log(parseInt("abc123"));   // NaNconsole.log(parseInt("  7"));      // 7 (忽略开头的空格)

重要提示： parseInt() 在遇到第一个非数字字符时停止。如果字符串以字母开头，你会得到 NaN（非数字）。

第二个参数 —— 进制

很少有人知道，parseInt() 有第二个参数 —— radix（进制）。这可以避免八进制数字相关的bug：

// 没有radix可能会引起混淆console.log(parseInt("010")); // 10 (在旧版IE中可能是8)

// 对于十进制，始终指定10console.log(parseInt("010", 10)); // 10console.log(parseInt("FF", 16));  // 255 (十六进制)

专家建议：在处理十进制数字时，始终传递第二个参数 10。这会使代码更清晰、更安全。

方法二：Number() —— 严格但诚实

Number() 函数是一种更严格的在JavaScript中将字符串转换为数字的方法。与 parseInt() 不同，它不允许任何额外的字符。

console.log(Number("42"));     // 42console.log(Number("10.99"));  // 10.99 (保留小数部分)console.log(Number("123px"));  // NaN (字符串包含多余字符)console.log(Number(""));       // 0 (空字符串 = 0)console.log(Number(" "));      // 0

何时使用：如果你100%确定字符串只包含数字（例如，在表单验证之后）。对于用户输入，parseInt() 或