JavaScript parseInt()与Number()转换差异详解

作者:开源拾贝

时间:2026-10-24

浏览:508

本文详细解析JavaScript中parseInt()与Number()函数在字符串转数字时的核心差异。重点探讨parseInt的进制参数radix对解析结果的影响,以及两者在处理含字母字符串、前导零和空字符串时的不同行为。通过具体代码案例对比,帮助开发者避免类型转换陷阱,选择正确的转换方法。

文章目录

学习目标:

parseInt()与Number()这两个函数最常应用于将字符串转换为数据类型,那么它们之间存在哪些具体区别?

学习内容:

parseInt()函数的作用是将给定的字符串按照指定的基数解析为整数。其语法为parseInt(string, radix),其中第二个参数表示使用的进制数。虽然日常开发中多使用10进制,但也可能涉及8进制或16进制。为防止对以“0”或“0x”开头的字符串产生解析歧义,各类JavaScript编程规范均建议明确指定第二个参数,例如使用parseInt("123", 10)。


parseInt('16', 8)  = 14
parseInt('10', 8)  = 8

parseInt('16', 10)  = 16
parseInt('10', 10)  = 10

parseInt('16', 16)  = 22
parseInt('10', 16)  = 16

parseInt()会从字符串头部开始解析整数,一旦遇到无法解析的字符,便返回已解析的整数部分;若首个字符即无法解析,则直接返回NaN。

Number()在不使用new操作符时,可用于执行类型转换。若无法转换为数字,则返回NaN。例如对于字符串“123a”,parseInt()返回123,而Number()返回NaN。以下是不同类型字符串使用这两个函数转换时的区别对比:


// 当字符串是由数字组成的时候 他们转换的数字一样的没有差别  
let numStr = '123'
console.log(parseInt(numStr))   //123
console.log(Number(numStr))		//123

// 当字符串是由字母组成的时候 
let numStr = 'abc'
console.log(parseInt(numStr))   //NaN
console.log(Number(numStr))		//NaN

// 当字符串是由数字和字母组成的时候 
let numStr = '123a'
console.log(parseInt(numStr))   //123
console.log(Number(numStr))		//NaN

// 当字符串是由0和数字
let numStr = '0123'
console.log(parseInt(numStr))   //123
console.log(Number(numStr))		//123

// **当字符串包含小数点**
let numStr = '123.456'
console.log(parseInt(numStr))		//123
console.log(Number(numStr))			//123.456

// **当字符串为null时**
let numStr = null
console.log(parseInt(numStr))		//NaN
console.log(Number(numStr))			//0

// **当字符串为''(空)时**
let numStr = ''
console.log(parseInt(numStr))		//NaN
console.log(Number(numStr))			//0

学习总结:

1、当字符串仅由数字组成时,两者的转换结果一致,无差异;若字符串全为字母,两者均返回NaN;当字符串由0和数字组成时,两者均解析除前导零外的全部数字部分;

2、当字符串由数字和字母混合组成时:①若字母位于开头,两者均返回NaN;②若字母不在开头,Number()返回NaN,而parseInt()返回字母之前的数字部分。

3、parseInt()处理非String类型值时,需先将其转换为String类型再执行操作;4、其余细节请参考上述代码案例。

到此这篇关于JavaScript parseInt()与Number()区别案例详解的文章就介绍到这了,更多相关js parseInt()与Number()区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章