JavaScript类型转换详解:String、Number与Boolean转换规则

作者:开源拾贝

时间:2026-10-31

浏览:610

本文详细解析JavaScript中的类型转换机制,涵盖String、Number和Boolean三大类型的转换规则。重点讲解toString()与String()、Number()与parseInt()的区别,以及伪对象概念。通过具体代码示例说明各种转换函数的行为及边界情况,帮助开发者准确掌握类型转换技巧。

文章目录

目录:

1 : 伪对象 2 : 转换为字符串 3 : 数字转字符串 4 : 转换为数字 5 : 转换为Boolean 6 : Number()和parseInt()的区别 7 : String()和toString()的区别

JavaScript伪对象概念

1 : 伪对象

JavaScript是一门颇具特色的语言,即使是基本数据类型,也被视为伪对象,因此它们都具备相应的属性和方法。

变量a的类型为字符串,可以通过调用其作为伪对象的属性length来获取该字符串的长度。


<script>
 var a="hello javascript"; 
 document.write("变量a的类型是:"+(typeof a));
 document.write("<br>");
 document.write("变量a的长度是:"+a.length);
</script>

运行效果: 变量a的类型是:string 变量a的长度是:16

转换为字符串的方法

2 : 转换为字符串

无论是Number、Boolean还是String类型,都拥有toString方法,用于将值转换为字符串。


<script>
 var a=10; 
 document.write("数字 "+a+" 转换为字符串"+a.toString());
 document.write("<br>");

 var b=true; 
 document.write("布尔 "+b+" 转换为字符串"+b.toString());
 document.write("<br>");

 var c="hello javascript"; 
 document.write("字符串 "+c+" 转换为字符串 "+c.toString());
 document.write("<br>");

</script>

运行效果: 数字 10 转换为字符串10 布尔 true 转换为字符串true 字符串 hello javascript 转换为字符串 hello javascript

数字转字符串的两种模式

3 : 数字转字符串

将Number转换为字符串时,存在默认模式和基模式两种情况。


<script>
 var a=10; 
 document.write('默认模式下,数字10转换为十进制的'+a.toString()); //默认模式,即十进制
 document.write("<br>"); 

 document.write('基模式下,数字10转换为二进制的'+a.toString(2)); //基模式,二进制
 document.write("<br>"); 
 
 document.write('基模式下,数字10转换为八进制的'+a.toString(8)); //基模式,八进制
 document.write("<br>"); 

 document.write('基模式下,数字10转换为十六进制的'+a.toString(16)); //基模式,十六进制
 document.write("<br>"); 

</script>

运行效果: 默认模式下,数字10转换为十进制的10 基模式下,数字10转换为二进制的1010 基模式下,数字10转换为八进制的12 基模式下,数字10转换为十六进制的a

转换为数字的规则

4 : 转换为数字

JavaScript提供了内置函数parseInt()和parseFloat(),用于将值转换为数字。

注意:如果被转换的字符串同时包含数字和字符,parseInt()会持续解析数字部分,直到遇到非数字字符为止。因此,字符串"10abc"会被转换为数字10。

思考题: 字符串"10abc8" 又会被转换为多少呢?


<script>
 document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
 document.write("<br>");
 document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("444 3.14"));//转换浮点数
 document.write("<br>");
 document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位,直到发现不是数字的那一位
 document.write("<br>");

 document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("h5555ello javascript")); //如果完全不包含数字,则返

回NaN - Not a Number
 document.write("<br>");

</script>

运行效果: 字符串的"10"转换为数字的:10 字符串的"3.14"转换为数字的:444 字符串的"10abc"转换为数字的:10 字符串的"hello javascript"转换为数字的:NaN

转换为Boolean值的规则

5 : 转换为Boolean

使用内置函数Boolean()可以将值转换为布尔值。 当转换字符串时: 非空即为true 当转换数字时: 非0即为true 当转换对象时: 非null即为true


<script>
 document.write("空字符串''转换为布尔后的值:"+Boolean("")); //空字符串
 document.write("<br>");
 document.write("非空字符'hello javascript '串转换为布尔后的值:"+Boolean("hello javascript")); //非空字符串
 document.write("<br>");
 document.write("数字 0 转换为布尔后的值:"+Boolean(0)); //0
 document.write("<br>");
 document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0 
 document.write("<br>");
 document.write("空对象 null 转换为布尔后的值:"+Boolean(null)); //null
 document.write("<br>");
 document.write("非对象 new Object() 转换为布尔后的值:"+Boolean(new Object())); //对象存在
 document.write("<br>");
</script>

运行效果: 空字符串''转换为布尔后的值:false 非空字符'hello javascript '串转换为布尔后的值:true 数字 0 转换为布尔后的值:false 数字 3.14 转换为布尔后的值:true 空对象 null 转换为布尔后的值:false 非对象 new Object() 转换为布尔后的值:true

Number()与parseInt()的区别

6 : Number()和parseInt()的区别

Number()和parseInt()均可用于进行数字转换。

两者的区别在于,当转换内容包含非数字字符时,Number()会返回NaN(Not a Number)。

parseInt()则视情况而定:如果字符串以数字开头,它将返回开头的合法数字部分;如果以非数字字符开头,则返回NaN。


<script>
 document.write("通过Number() 函数转换字符串'123' 后得到的数字:"+Number("123"));  //正常的
 document.write("<br>");
 document.write("通过Number() 函数转换字符串'123abc' 后得到的数字:"+Number("123abc"));  //包含非数字
 document.write("<br>");
 document.write("通过Number() 函数转换字符串'abc123' 后得到的数字:"+Number("abc123"));  //包含非数字
 document.write("<br>");

 document.write("通过parseInt() 函数转换字符串'123' 后得到的数字:"+parseInt("123"));  //正常的
 document.write("<br>");
 document.write("通过parseInt() 函数转换字符串'123abc' 后得到的数字:"+parseInt("123abc"));  //包含非数字,返回开头的合法

数字部分
 document.write("<br>");
 document.write("通过parseInt() 函数转换字符串'abc123' 后得到的数字:"+parseInt("abc123"));  //包含非数字,以非数字开头,

返回NaN
 document.write("<br>");

</script>

运行效果:

通过Number() 函数转换字符串'123' 后得到的数字:123 通过Number() 函数转换字符串'123abc' 后得到的数字:NaN 通过Number() 函数转换字符串'abc123' 后得到的数字:NaN 通过parseInt() 函数转换字符串'123' 后得到的数字:123 通过parseInt() 函数转换字符串'123abc' 后得到的数字:123 通过parseInt() 函数转换字符串'abc123' 后得到的数字:NaN

String()与toString()的区别

7 : String()和toString()的区别

String()和toString()都会返回字符串,主要区别在于对null值的处理。 String()会返回字符串"null" toString() 则会报错,无法执行。


<script>
 var a = null;
 document.write('String(null) 把空对象转换为字符串:'+String(a)); 
 document.write("<br>"); 
 document.write('null.toString() 就会报错,所以后面的代码不能执行'); 
 document.write(a.toString()); 
 document.write("因为第5行报错,所以这一段文字不会显示"); 
</script>

运行效果: String(null) 把空对象转换为字符串:null null.toString() 就会报错,所以后面的代码不能执行

以上就是小编为大家带来的老生常谈javascript的类型转换全部内容了,希望大家多多支持本站~

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章