老生常谈javascript的类型转换


Posted in Javascript onOctober 12, 2016

目录:

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

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

5 : 转换为Boolean

使用内置函数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

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

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的类型转换全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 #Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 #Javascript
深入理解Node.js的HTTP模块
Oct 12 #Javascript
纯js实现手风琴效果代码
Apr 17 #Javascript
JavaScript 继承详解(六)
Oct 11 #Javascript
JavaScript 继承详解(五)
Oct 11 #Javascript
Javascript动画效果(4)
Oct 11 #Javascript
You might like
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
上海方立数码笔试题
2013/10/18 面试题
员工自我鉴定
2013/10/09 职场文书
综合内勤岗位职责
2014/04/14 职场文书
物流管理专业自荐信
2014/06/23 职场文书
政府个人对照检查材料
2014/08/28 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
年会邀请函范文
2015/01/30 职场文书
停电调休通知
2015/04/16 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技