JavaScript之隐式类型转换

JS作为一种弱类型的语言,在执行运算阶段,如果发现二者数据类型不一致,js会对我们输入的数据类型进行类型的转换,这种转换不被开发人员所见,所以被称作隐式类型转换,但是对于开发人员来说如果利用好js的这种语言特性,对于将来的开发有着很大的帮助,接下来我们来聊聊关于js里面隐式类型转换的那些事。

数据类型

在讲述隐式类型转换之前我认为有必要先了解一下js里面的那些数据类型,数据类型可分为两大类,即基本类型和引用类型,此处我们只对基本类型进行展开性的阐述。

字符串类型:String -> 所有使用引号包裹的数据
数值类型:Number -> 0~9,NaN
布尔类型:Boolean -> true,false
Undenfined: undenfined 表示没有值或者未赋值
Null:null 表示为空,是一种状态
此处我们用 typeof 关键字去分别检测几种数据的数据类型

<script>
        var str = "str123";
        var num = 123;
        var bool = true;
        var udf;
        var n = null;
        console.log(typeof str);
        console.log(typeof num);
        console.log(typeof bool);
        console.log(typeof udf);
        console.log(typeof n);
    </script>

java中的隐式类型转换 隐式类型转换js_数据类型


我们可以根据运行结果得知该几个变量的数据类型,此处有必要强调一下 null 数据的小BUG——浏览器在识别该数据时反馈结果为object,而非null。

转换

转换即数据类型的转换,分为强制转换和隐式转换,接下来我们主要来谈谈隐式类型转换,我们将js的这种转换理解为一种智能化的识别,js里的变量在声明之时不会关注类型,在执行时才会关注类型,所以在我们使用某个参数去做某些运算时(即在执行之时),js如果发现运算类型不同,就会自发的去进行转换。

1.字符串拼接

A.直接上代码

<script>
        var str = "a";
        var num = 1;
        var res = "a" + 1;
        console.log(res);
    </script>

java中的隐式类型转换 隐式类型转换js_字符串_02


然后我们吧”+”换成”-”

<script>
        var str = "a";
        var num = 1;
        var res = "a" - 1;
        console.log(res);
    </script>

java中的隐式类型转换 隐式类型转换js_javascript_03


分析:"+“在js中除了作为我们日常生活中“加”的功能之外,还有连接字符串的功能,此外在+号运算时,只要有字符串存在,那么就会变为字符串的拼接,所以在运算执行时,数字1被隐式转换为字符串类型进行运算。那么为什么在做减法时,结果是NaN呢?这是因为”-"并没有连接字符串的功能,只是我们单纯理解的减法,所以在运算时,字符串”a”会被隐式转换为数字类型,但我们知道”a”在转数字时,默认的Number()会将其转成NaN(也属于数字数据类型),当然NaN在与任何数字计算的时候,其结果都为NaN。

B.再来一串代码

如果你仔理解了了上面的代码之后,那么下面这两种情况就不难理解了。

<script>
        var str = "1";
        var num = 1;
        var res = "1" + 1;
        console.log(res);
    </script>

java中的隐式类型转换 隐式类型转换js_隐式类型转换_04

<script>
        var str = "1";
        var num = 1;
        var res = "1" - 1;
        console.log(res);
    </script>

java中的隐式类型转换 隐式类型转换js_隐式类型转换_05


C.最后再看两种

<script>
        var str = "a";
        var num = "b";
        console.log(str - num);
    </script>

java中的隐式类型转换 隐式类型转换js_java中的隐式类型转换_06


补充:添加一种特殊情况

<script>
        var str = "1";
        var num = "2";
        console.log(str - num);
    </script>

java中的隐式类型转换 隐式类型转换js_数据类型_07


我们可能会想两个字符串做运算会怎么样呢?是用ASCII码进行计算吗?答案是否定的,经上述运算我们会发现,js会继续将其转换成数字进行计算。那如果我的字符串内容是纯数字呢?如果字符串内容是纯数字计算机会将其转成纯数字参与计算。

2.大小比较

直接上代码

<script>
        var str1 = "a";
        console.log(str1 > 100);
        var str2 = true;
        console.log(str2 > 100);
        var str3 = "b";
        var num3 = "a";
        console.log(str3 > num3);
    </script>

java中的隐式类型转换 隐式类型转换js_数据类型_08


结果一:”>”没有连接字符串的作用,所以直接将字符串”a”转换成数字进行计算,因为NaN与任何数字比较的结果都为false,所以输出了false。

结果二:布尔值在比较大小或者参与计算时,计算机将其隐式转换为0或1进行计算,所以运算结果为false。

情况三:如果是两个字符串进行比较,比较的是二者的ACSII码,b的ACSII码更大,所以输出为true。

所以我们总结这样的规律:

主要通过判断左右两侧是否存在NaN,”+”!
一、运算中有加号且有字符串,结果必定是字符串的连接。
二、运算中有加号且没有字符串,只是单纯的相加。
三、运算中没有加号且有比较符号,如果全是字符串(内容不为纯数字)那么比较其ASCII码,如果字符串内容是纯数字那么将其转成数字进行比较。若不全为字符串(内容不为纯数字),结果通常为NaN。
四、运算中没有加号且没有比较符号,有字符串(内容不为纯数字),字符串会转成数字进行计算,计算结果通常为NaN,如果字符串内容是纯数字那么将其转成数字进行比较。
五、如果有布尔值参与运算(前提是”+”和字符串不同时存在),true转为1,fasle转为0参与计算。