文章导航

JavaScript 隐式数据类型转换

2018-12-19 18:11| 作者: admin| 查看: 517| 评论: 0|来自: 蚂蚁部落

隐式数据类型转换,就是代码可以根据上下文自动进行数据类型转换。

更多数据类型转换内容参阅JavaScript 数据类型转换一章节。

看如下代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let str="8";
console.log(typeof str);
console.log(typeof +str);
console.log(typeof Number(str));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/181147r86f53603x1iwazf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).声明一个变量并赋值为"8",变量值是一个字符串。

(2).typeof str返回值为字符串,这个没有任何问题。

(3).typeof +str返回numer,这是因为+str可以执行隐式数据类型转换,我们并没有刻意去转换数据类型,但是JavaScript内部在遇到此运算上下文时,会自动尝试将字符串转换为数值类型。

(4).最后一个则是显式数据类型转换,Number就是用来将参数转换为数值类型的。

隐式数据类型转换规则:

下面是比较常见的隐式数据类型转换,当然更多的规则需要自己不断的积累。

1.加号用作二元运算符:

加号(+)是一个多面手,可以用于算数计算,也可以进行字符串连接。

如果两个操作数中有一个是引用类型数据,也就是对象,那么首先会将对象转换为值类型数据。

如果操作数中,有一个是字符串,那么会将另一个操作转换为字符串,执行字符串连接操作。代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
console.log("8"+1);
console.log([8]+1);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/181328pg5bc440bm64zbuk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1)."8"是字符串,那么会隐式将1也转换为字符串,然后执行字符串连接操作。

(2).[8]是引用类型数据,那么首先会将其转换为值类型,首先尝试调用valueOf方法,转换失败,然后再调用toString方法,转换为字符串"8",然后再将数字1转换为字符串,最后执行字符串连接操作。

2.加号作为一元运算符:

如果操作数是对象,首先将其转换为值类型数据,然后再将其转换为数字,转换失败返回NaN。

[JavaScript] 纯文本查看 复制代码运行代码
console.log(typeof +[8]

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/181400a67fz8cdqrhx6znu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

首先将数组转换为字符串"8",然后再将其转换为数字。

3.等号运算符(==):

是两个等号,不是三个等号,三个等号是全等运算符,不执行数据类型转换。

关于全等运算符相关内容可以参阅如下两篇文章:

(1).JavaScript 三个等号 === 全等运算符一章节。

(2).JavaScript == 等号运算符一章节。

转换规则如下:

(1).如果是数字和字符串之间的比较,则将字符串转换为数字。

(2).如果是布尔值之间的比较true转换为1,false转换为0。

(3).如果操作数中存在对象,则先将对象转换为值类型数据,再进行比较。

4.减号作为二元运算符:

如果操作数是对象,首先将其转换为值类型数据,然后再将其转换为数字,转换失败返回NaN。

[JavaScript] 纯文本查看 复制代码运行代码
console.log([8]-5);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/181450dmpttpzdmpmnmxdn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

首先将数组转换为值类型数据"8",然后再将其转换为数字。

5.减号作为一元运算符:

如果操作数是对象,首先将其转换为值类型数据,然后再将其转换为数字,转换失败返回NaN。

最后会改变数字的符号,代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
console.log(-[8]);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/181526jolhmiqfprjmzl46.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

6.>、>=、<、<=:

能够利上述运算符的操作数只能是数字或者字符串是。

所以如有需要,就要进行隐式数据类型转换,转换规则如下:

(1).如果操作数具有对象,那么首先将其转换为值类型数据。

(2).转换后,如果两个操作数都是字符串,那么进行码值比较,参阅JavaScript 字符串比较大小一文。

(3).如果操作数中存在非字符串数据,那么首先将它们转换为数值,再比较,如果有操作数转换失败,此操作数返回NaN,最终结果返回false。

仅以大于号为例子做一下演示:

[JavaScript] 纯文本查看 复制代码运行代码
console.log(new Date >5);
console.log([6]>5);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/19/181559uzw9t839pll5ptlc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).首先将Date对象转换为值类型,会调用valueOf方法,返回值是时间戳,很明显大于5。

(2).数字会首先被转换为字符串"6",然后将其转换为6,再比较大小。

7.*、/、%、!:

*、/与%运算符首先会将操作数转换为数值,再进行运算。

如果操作数转换为数值失败,那么操作数返回NaN。

对于!运算符,会将操作数转换为布尔值,具体转换规则参阅JavaScript 数据类型转换一文。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部