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 相关文章推荐
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
Vue动态实现评分效果
May 24 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JavaScript数组push方法使用注意事项
Oct 30 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
简单了解three.js 着色器材质
Aug 03 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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中使用gettext来支持多语言的方法
2011/05/02 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python自动生产表情包
2017/03/17 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
艺术系应届生的自我评价
2013/10/19 职场文书
初中校园广播稿
2014/02/02 职场文书
火车来了教学反思
2014/02/11 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
法语专业求职信
2014/07/20 职场文书
公司踏青活动方案
2014/08/16 职场文书
新员工入职感想
2015/08/07 职场文书