老生常谈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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
玩转Koa之核心原理分析
Dec 29 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
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
php依赖注入知识点详解
2019/09/23 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
园艺师求职信
2014/04/27 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS