Javascript类型转换的规则实例解析


Posted in Javascript onFebruary 23, 2016

类型转换可以分为隐式转换和显式转换,所谓隐式转换即程序在运行时进行的自动转换,显式转换则是人为的对类型进行强制转换。Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改变。请看示

例:

var n = 10;
n = "hello CSSer!";
n = {};

上面的示例中,首先声明n变量并初始化其值为10(整数类型),接着将字符串“hello CSSer!”赋值给n,接着再赋一个对象给它,最后n的类型是对象类型。可以看出变量n的类型具有动态性,实际编程中,我们建议不要频繁改变变量的类型,因为这对调试没有好处。

正因为Javascript中变量类型具有动态性,在程序实际执行的过程中就需要用到类型转换的概念。类型转换可以分为隐式转换和显式转换,所谓隐 式转换即程序在运行时进行的自动转换,显式转换则是人为的对类型进行强制转换。本文将对Javascript的类型转换进行总结。

显式转换

通过手动进行类型转换,Javascript提供了以下转型函数:

转换为数值类型:Number(mix)、parseInt(string,radix)、parseFloat(string)
转换为字符串类型:toString(radix)、String(mix)
转换为布尔类型:Boolean(mix)

1、Number(mix)函数,可以将任意类型的参数mix转换为数值类型。其规则为:

1.如果是布尔值,true和false分别被转换为1和0

2.如果是数字值,返回本身。

3.如果是null,返回0.

4.如果是undefined,返回NaN。

5.如果是字符串,遵循以下规则:

6.

1.如果字符串中只包含数字,则将其转换为十进制(忽略前导0)

2.如果字符串中包含有效的浮点格式,将其转换为浮点数值(忽略前导0)

3.如果是空字符串,将其转换为0

4.如果字符串中包含非以上格式,则将其转换为NaN

7.如果是对象,则调用对象的valueOf()方法,然后依据前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,再次依照前面的规则转换返回的字符串值。

下表列出了对象的valueOf()的返回值:

对象 返回值
Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起。其操作与 Array.toString 和 Array.join 方法相同。
Boolean Boolean 值。
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function 函数本身。
Number 数字值。
Object 对象本身。这是默认情况。
String 字符串值。

下面提供几个例子,你能写出它的正确结果吗:

Number("hello CSSer!");//NaN
Number("0x8");//8
Number("");//0
Number("020dd");//NaN
Number("070");//70
Number(true);//1

2、parseInt(string, radix)函数,将字符串转换为整数类型的数值。它也有一定的规则:

1.忽略字符串前面的空格,直至找到第一个非空字符

2.如果第一个字符不是数字符号或者负号,返回NaN

3.如果第一个字符是数字,则继续解析直至字符串解析完毕或者遇到一个非数字符号为止

4.如果上步解析的结果以0开头,则将其当作八进制来解析;如果以0x开头,则将其当作十六进制来解析

对象 操作
Array 将 Array 的元素转换为字符串。结果字符串由逗号分隔,且连接起来。
Boolean 如果 Boolean 值是 true,则返回 “true”。否则,返回 “false”。
Date 返回日期的文字表示法。
Error 返回一个包含相关错误信息的字符串。
Function 返回如下格式的字符串,其中 functionname 是被调用 toString 方法函数的名称: function functionname( ) { [native code] }
Number 返回数字的文字表示。
String 返回 String 对象的值。
默认 返回 “[object objectname]”,其中 objectname 是对象类型的名称。

5.如果指定radix参数,则以radix为基数进行解析

小测验:

parseInt("hello CSSer!");//NaN
parseInt("0x8");//8
parseInt("");//NaN
parseInt("020dd");//20
parseInt("070");//70
parseInt("22.5");//22

3、parseFloat(string)函数,将字符串转换为浮点数类型的数值。

它的规则与parseInt基本相同,但也有点区别:字符串中第一个小数点符号是有效的,另外parseFloat会忽略所有前导0,如果字符串包含一个可解析为整数的数,则返回整数值而不是浮点数值。

4、toString(radix)方法。除undefined和null之外的所有类型的值都具有toString()方法,其作用是返回对象的字符串表示。

5、String(mix)函数,将任何类型的值转换为字符串,其规则为:

1.如果有toString()方法,则调用该方法(不传递radix参数)并返回结果

2.如果是null,返回”null”

3.如果是undefined,返回”undefined”

6、Boolean(mix)函数,将任何类型的值转换为布尔值。

以下值会被转换为false:false、”"、0、NaN、null、undefined,其余任何值都会被转换为true。

隐式转换

在某些情况下,即使我们不提供显示转换,Javascript也会进行自动类型转换,主要情况有:

1. 用于检测是否为非数值的函数:isNaN(mix)

isNaN()函数,经测试发现,该函数会尝试将参数值用Number()进行转换,如果结果为“非数值”则返回true,否则返回false。

2. 递增递减操作符(包括前置和后置)、一元正负符号操作符

这些操作符适用于任何数据类型的值,针对不同类型的值,该操作符遵循以下规则(经过对比发现,其规则与Number()规则基本相同):

1.如果是包含有效数字字符的字符串,先将其转换为数字值(转换规则同Number()),在执行加减1的操作,字符串变量变为数值变量。

2.如果是不包含有效数字字符的字符串,将变量的值设置为NaN,字符串变量变成数值变量。

3.如果是布尔值false,先将其转换为0再执行加减1的操作,布尔值变量编程数值变量。

4.如果是布尔值true,先将其转换为1再执行加减1的操作,布尔值变量变成数值变量。

5.如果是浮点数值,执行加减1的操作。

6.如果是对象,先调用对象的valueOf()方法,然后对该返回值应用前面的规则。如果结果是NaN,则调用toString()方法后再应用前面的规则。对象变量变成数值变量。

小测验:

分别对以下类型的值执行后置递增操作,结果是什么?

“2″, ”02dd”, ”", false, 22.5, +”", -false, +new Date()

3. 加法运算操作符

加号运算操作符在Javascript也用于字符串连接符,所以加号操作符的规则分两种情况:

•如果两个操作值都是数值,其规则为:

1.如果一个操作数为NaN,则结果为NaN

2.如果是Infinity+Infinity,结果是Infinity

3.如果是-Infinity+(-Infinity),结果是-Infinity

4.如果是Infinity+(-Infinity),结果是NaN

5.如果是+0+(+0),结果为+0

6.如果是(-0)+(-0),结果为-0

7.如果是(+0)+(-0),结果为+0

•如果有一个操作值为字符串,则:

1.如果两个操作值都是字符串,则将它们拼接起来

2.如果只有一个操作值为字符串,则将另外操作值转换为字符串,然后拼接起来

3.如果一个操作数是对象、数值或者布尔值,则调用toString()方法取得字符串值,然后再应用前面的字符串规则。对于

undefined和null,分别调用String()显式转换为字符串。

可以看出,加法运算中,如果有一个操作值为字符串类型,则将另一个操作值转换为字符串,最后连接起来。

4. 乘除、减号运算符、取模运算符

这些操作符针对的是运算,所以他们具有共同性:如果操作值之一不是数值,则被隐式调用Number()函数进行转换。具体每一种运算的详细规则请参考ECMAScript中的定义。

5. 逻辑操作符(!、&&、||)

逻辑非(!)操作符首先通过Boolean()函数将它的操作值转换为布尔值,然后求反。

逻辑与(&&)操作符,如果一个操作值不是布尔值时,遵循以下规则进行转换:

1.如果第一个操作数经Boolean()转换后为true,则返回第二个操作值,否则返回第一个值(不是Boolean()转换后的值)

2.如果有一个操作值为null,返回null

3.如果有一个操作值为NaN,返回NaN

4.如果有一个操作值为undefined,返回undefined

逻辑或(||)操作符,如果一个操作值不是布尔值,遵循以下规则:

1.如果第一个操作值经Boolean()转换后为false,则返回第二个操作值,否则返回第一个操作值(不是Boolean()转换后的值)

2.对于undefined、null和NaN的处理规则与逻辑与(&&)相同

6. 关系操作符(<, >, <=, >=)

与上述操作符一样,关系操作符的操作值也可以是任意类型的,所以使用非数值类型参与比较时也需要系统进行隐式类型转换:

1.如果两个操作值都是数值,则进行数值比较

2.如果两个操作值都是字符串,则比较字符串对应的字符编码值

3.如果只有一个操作值是数值,则将另一个操作值转换为数值,进行数值比较

4.如果一个操作数是对象,则调用valueOf()方法(如果对象没有valueOf()方法则调用toString()方法),得到的结果按照前面的

规则执行比较

5.如果一个操作值是布尔值,则将其转换为数值,再进行比较

注:NaN是非常特殊的值,它不和任何类型的值相等,包括它自己,同时它与任何类型的值比较大小时都返回false。

7. 相等操作符(==)

相等操作符会对操作值进行隐式转换后进行比较:

1.如果一个操作值为布尔值,则在比较之前先将其转换为数值

2.如果一个操作值为字符串,另一个操作值为数值,则通过Number()函数将字符串转换为数值

3.如果一个操作值是对象,另一个不是,则调用对象的valueOf()方法,得到的结果按照前面的规则进行比较

4.null与undefined是相等的

5.如果一个操作值为NaN,则相等比较返回false

6.如果两个操作值都是对象,则比较它们是不是指向同一个对象

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
理解Javascript图片预加载
Feb 23 #Javascript
Bootstarp风格的toggle效果分享
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例
Jun 28 #Javascript
Bootstrap创建可折叠的组件
Feb 23 #Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 #Javascript
Web开发必知Javascript技巧大全
Feb 23 #Javascript
You might like
php操作excel文件 基于phpexcel
2010/07/02 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
utf8的编码算法 转载
2006/12/27 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
python实现中文输出的两种方法
2015/05/09 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python实现的科学计算器功能示例
2017/08/04 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
大学优秀班主任事迹材料
2014/05/02 职场文书
大学生实训报告总结
2014/11/05 职场文书
2014年文员工作总结
2014/11/18 职场文书
云台山导游词
2015/02/03 职场文书
项目负责人岗位职责
2015/02/15 职场文书