JavaScript字符串转数字方法总结

本文总结了JavaScript中将字符串转换为数字的7种方法：Number()、parseInt()、parseFloat()、一元加号、按位非双反、乘以1和位或0。

详细对比了各方法的转换规则、返回值类型和适用场景，特别说明了处理特殊值(如空字符串、非数字字符)时的行为差异。

建议根据需求选择：严格转换用Number()，提取数字用parseInt/parseFloat，简洁代码用一元加号，性能优先用位运算。

同时提醒注意不同方法对空字符串的处理差异，并权衡隐式转换方法的可读性问题。

JavaScript字符串转数字方法总结

方法	语法示例	返回值类型	特点	适用场景
Number()	`Number("123")`	number	严格转换，无法转换返回NaN	需要严格类型转换时
parseInt()	`parseInt("123")`	number	解析整数，可指定进制	提取字符串开头的整数部分
parseFloat()	`parseFloat("12.34")`	number	解析浮点数	提取字符串开头的浮点数
一元加号	`+"123"`	number	隐式转换，简洁快速	代码简洁性要求高时
按位非双反	`~~"123"`	number	快速转换为32位整数	快速整数转换，性能敏感场景
Math.floor()	`Math.floor("123.7")`	number	向下取整转换	需要向下取整时
乘以1	`"123" * 1`	number	隐式转换	简单隐式转换场景
位或0	`"123"	0`	number	转换为32位整数

详细说明与示例

1. Number() - 严格转换

复制代码

Number("123")      // 123
Number("12.34")    // 12.34
Number("123abc")   // NaN
Number("")         // 0
Number("  ")       // 0

2. parseInt() - 解析整数

复制代码

parseInt("123")        // 123
parseInt("123.45")     // 123
parseInt("10px")       // 10
parseInt("ff", 16)     // 255 (十六进制转换)
parseInt("abc")        // NaN

3. parseFloat() - 解析浮点数

复制代码

parseFloat("12.34")    // 12.34
parseFloat("12.34.56") // 12.34
parseFloat("12px")     // 12

4. 一元加号运算符 - 隐式转换

复制代码

+"123"      // 123
+"12.34"    // 12.34
+"abc"      // NaN
+""         // 0

5. 按位非双反 - 快速整数转换

复制代码

~~"123"     // 123
~~"12.99"   // 12 (截断小数)
~~"abc"     // 0 (注意：NaN会转为0)

6. 乘以1 - 隐式转换

复制代码

"123" * 1   // 123
"12.34" * 1 // 12.34
"abc" * 1   // NaN

特殊行为对比

输入值	Number()	parseInt()	parseFloat()	一元加号
"123"	123	123	123	123
"123.45"	123.45	123	123.45	123.45
"123abc"	NaN	123	123	NaN
"abc123"	NaN	NaN	NaN	NaN
""	0	NaN	NaN	0
" "	0	NaN	NaN	0
null	0	NaN	NaN	0

选择建议

需要严格转换 → 使用 Number()
提取字符串中的数字 → 使用 parseInt() 或 parseFloat()
代码简洁性优先 → 使用一元加号 +
性能敏感场景 → 使用按位运算符 ~~ 或 | 0
需要处理空字符串 → 注意不同方法的差异

注意：隐式转换方法（如+、*1）可能使代码可读性降低，建议在团队有共识的情况下使用。