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脚本编程解决考试分数统计问题
Oct 18 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
python使用turtle绘制分形树
2018/06/22 Python
kafka-python批量发送数据的实例
2018/12/27 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
事务机电主管工作职责
2014/02/25 职场文书
说明书范文
2014/05/07 职场文书
护理专科学生自荐书
2014/07/05 职场文书
违纪检讨书范文
2015/01/27 职场文书
三峡人家导游词
2015/01/31 职场文书
在人间读书笔记
2015/06/30 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题