js中的隐式转换与强制转换

js中的隐式转换与强制转换

JavaScript 是一种动态类型的语言，在执行运算操作的过程中，有时需要转换操作数的类型。在 JavaScript 中，数据类型的转换有：隐式类型转换和强制类型转换（也叫显式类型转换）两种方式。

1. 隐式类型转换

隐式类型转换会自动根据运算符进行类型转换。隐式类型转换的情况主要有以下几种。
(1) 如果表达式中同时存在字符串类型和数字类型的操作数，而运算符使用加号+，此时 JavaScript 会自动将数字转换成字符串。例如：

	// 加号一边为字符串，起到拼接的作用
    console.log("今年是" + "2021年"); // 结果为：今年是2021年
    console.log("今年是" + 2021); // 结果为：今年是2021
    console.log("2021" + true); // 结果为：2021true
    console.log("2021" + undefined); // 结果为：2021undefined
    console.log("2021" + null); // 结果为：2021null
    
    // 加号两边都不是字符串，,将不是数字的另一边先转为数字再进行计算
    console.log(2021 + 1); // 结果为：2022
    console.log(2021 + true); // 结果为：2022
    console.log(2021 + undefined); // 结果为：NaN
    console.log(2021 + null); // 结果为：2021
    console.log(true + true); // 结果为：2
    console.log(true + false); // 结果为：1
    console.log(true + undefined); // 结果为：NaN
    console.log(true + null); // 结果为：1
    console.log(123 + []); //  '123'
    console.log(123 + {}); // '123[object Object]'

加号运算符规律：

• 一方为String，另一方也会被转为String
• 一方为Number，另一方为原始值类型，则将原始值类型转换为Number
• 一方为Number，另一方为引用类型，双方都转为String

(2) 如果表达式运算符为-、*、/、%中的任意一个，此时 JavaScript 会自动将字符串转换成数字，对无法转换为数字的则转换为 NaN。例如：

	console.log("30" / 5); // 除运算，结果为：6
    console.log("15" - 5); // 减运算，结果为：10
    console.log("20" * "a"); // 乘运算，结果为：NaN
    console.log("20" % "3"); // 取模运算，结果为：2

-、*、/、%运算符规律：

• 当表达式中包含-、*、/、%中的任意一个运算符时，会将运算符两边转换为数字，再进行计算，对无法转换为数字的则转换为 NaN

(3) 运算符为++或–时，JavaScript 会自动将字符串转换成数字，对无法转换为数字的则转换为 NaN。例如：

	var num1 = "6";
    var num2 = "6";
    var num3 = "a";
    console.log(++num1); // 将字符串转换为数字再进行++运算，结果为：7
    console.log(--num2); // 将字符串转换为数字再进行--运算，结果为：5
    console.log(++num3); // 字符串无法转换为数字，结果为：NaN

++、–运算符规律：

• 当表达式中包含++、–中的任意一个运算符时，会将运算符两边转换为数字，再进行计算，对无法转换为数字的则转换为 NaN

(4) 运算符为>或<时，当两个操作数一个为字符串，一个为数字时，JavaScript 会自动将字符串转换成数字。例如：

	console.log('10' > 9); // 将字符串转换为数字，按值进行比较，结果为：true
    console.log('10' < 9); // 将字符串转换为数字，按值进行比较，结果为：false

大于、小于（>、<）运算符规律：

• 当表达式中包含>、<中的任意一个运算符时，会将运算符两边转换为数字，再进行比较，比较的结果为true或者false

(5) !运算符将其操作数转换为布尔值并取反。例如：

	console.log(!0); // 对0取反，结果为：true
    console.log(!100); // 对非0数字取反，结果为：false
    console.log(!"ok"); // 对非空字符串取反，结果为：false
    console.log(!""); // 对空字符串取反，结果为：true

!运算符规律：

• 当表达式中包含!运算符时，会将操作数转为布尔值，然后再进行取反

(6) 运算符为 == 或 === 时，== 先转换类型再比较，=== 先判断类型，如果不是同一类型直接为false。

=== ：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；
== ：称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；

=== 规律：
1、如果类型不同，就 [不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；如果其中至少一个是NaN，那么[不相等]，。（判断一个值是否是NaN，只能用isNaN()来判断，NaN不等于任何其它类型相等）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。

转换示例：

    console.log("123" === 123); // 如果类型不同,直接返回false 结果为：false
    console.log(123 === 123); // 如果两个都是数值，并且是同一个值,相等 结果为：true
    console.log(NaN === 123); // 如果其中至少一个是NaN，不相等 结果为：false
    console.log("123" === "123"); // 如果两个都是字符串，每个位置的字符都一样,相等 结果为：true
    console.log(true === true); // 如果两个值都是true，或者都是false，相等 结果为：true
    console.log(false === false); // 结果为：true
    var obj = {
      name: "张三",
    };
    var newObj = obj;
    console.log(obj.name === newObj.name); // 如果两个值都引用同一个对象,相等 结果为：true
    console.log(null === null); // 如果两个值都是null，或者都是undefined，相等 结果为：true
    console.log(undefined === undefined); // 结果为：true

== 规律：
1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
a、如果一个是null、一个是undefined，那么[相等]。
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。（引用类型与值类型进行比较,引用类型先转换为值类型；引用类型与引用类型，直接判断是否指向同一对象）
e、任何其他组合，都[不相等]。

转换示例：

    // 如果两个值类型相同，值也相同，则返回true；类型相同，值不相同，返回false
    console.log("123" == "123", "123" == "12"); // 结果为：true false
    console.log(123 == 123); // 结果为：true

    // 如果两个值类型不同
    // a.如果一个是null、一个是undefined，相等
    console.log(null == null); // 结果为：true
    console.log(null == undefined); // 结果为：true
    console.log(undefined == undefined); // 结果为：true

    // b.如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
    console.log(123 == '123'); // 结果为：true

    // c.如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
    console.log(true == 1); // 结果为：true
    console.log(true == "123"); // 结果为：false

    // d.如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。
    var obj = {
      age: "18"
    };
    console.log(obj.age == 18); // 结果为：true
    
    // e.任何其他组合，都[不相等]。
    console.log(null == 0); // 结果为：false
    console.log(undefined == 0); // 结果为：false

(7) JavaScript 原始类型转换表（包括复合类型向原始类型转换的范例）：

2. 强制类型转换

从上面的介绍我们可以看到，JavaScript 可以自动根据运算的需要进行类型的转换。强制类型转换主要针对功能的需要或为了使代码变得清晰易读，人为地进行类型的转换。在 JavaScript 中，强制类型转换主要是通过调用全局函数 Number()、parseInt() 和 parseFloat() 来实现。
(1) 使用Number()函数将参数转换为一个数字
使用格式如下：

Number(value)

Number() 对参数 value 进行整体转换，当参数值中任何地方包含了无法转换为数字的符号时，转换失败，此时将返回 NaN，否则返回转换后的数字。

Number() 对参数进行数字转换时，遵循以下一些规则：

• 如果参数中只包含数字时，将转换为十进制数字，忽略前导 0以及前导空格；如果数字前面为-，-会保留在转换结果中；如果数字前面为+，转换后将删掉+号；
• 如果参数中包含有效浮点数字，将转换为对应的浮点数字，忽略前导 0以及前导空格；如果数字前面为-，-会保留在转换结果中；如果数字前面为+，转换后将删掉+号；
• 如果参数中包含有效的十六进制数字，将转换为对应大小的十进制数字；
• 如果参数为空字符串，将转换为 0；
• 如果参数为布尔值，则将 true转换为 1，将 false 转换为 0；
• 如果参数为 null，将转换为 0；
• 如果参数为 undefined，将转换为 NaN；
• 如果参数为 Date 对象，将转换为从 1970 年 1 月 1 日到执行转换时的毫秒数；
• 如果参数为函数、包含两个元素以上的数组对象以及除 Date 对象以外的其他对象，将转换为 NaN；
• 如果在参数前面包含了除空格、+和-以外的其他特殊符号或非数字字符，或在参数中间包含了包括空格、+和-的特殊符号或非数字字符，将转换为NaN。

转换示例：

    console.log(Number("0010"));    // 去掉两个前导0，结果为：10
    console.log(Number("+010"));    // 去掉前导0和+，结果为：10
    console.log(Number("-10"));     // 转换后保留“-”号，结果为：-10
    console.log(Number(''));        // 空字符串的转换结果为：0
    console.log(Number(true));      // 布尔值true的转换结果为：1
    console.log(Number(null));      // null值的转换结果为：0
    var d = new Date();             // 创建一个Date对象
    console.log(Number(d));         // 转换Date对象，结果为1970.1.1至执行转换时的毫秒数：1638285352718
    console.log(Number("100px"));   // 参数中包含了不能转换为数字的字符px，结果为：NaN
    console.log(Number("100 01"));  // 参数中包含了空格，导致整个参数不能转换，结果为：NaN
    console.log(Number("100-123")); // 参数中包含了“-”，导致整个参数不能转换，结果为：NaN
    var a; // 声明变量
    console.log(Number(a));         // 变量a没有赋值，因而a的值为undefined,转换undefined的结果为：NaN
    var fn = function() {
        console.log(1);
    };  // 创建一个函数对象
    console.log(Number(fn));        // 转换函数，结果为:NaN
    console.log(Number(window));    // 转换window对象，结果为:NaN

从上述示例中，我们也可以看到，Number() 是从整体上进行转换的，任何一个地方含有非法字符，都将导致转换无法成功。接下来将介绍的两个函数与 Number() 不同的是，转换是从左到右逐位进行转换，任何一位无法转换时立即停止转换，同时返回已成功转换的值。

(2) 使用parseInt()函数将参数转换为一个整数
使用格式如下：

parseInt(stringNum,[radix])

stringNum 参数为需要转换为整数的字符串；radix 参数为 2～36 之间的数字，表示 stringNum 参数的进制数，取值为 10 时可省略。

parseInt() 的作用是将以 radix 为基数的 stringNum 字符串参数解析成十进制数。若 stringNum 字符串不是以合法的字符开头，则返回 NaN；解析过程中如果遇到不合法的字符，将马上停止解析，并返回已经解析的值。

parseInt() 在解析字符串为整数时，遵循以下规则：

• 解析字符串时，会忽略字符串前后的空格；如果字符串前面为-，-会保留在转换结果中；如果数字前面为+，转换后将删掉+号；
• 如果字符串前面为除空格、+和-以外的特殊符号或除 a～f（或 A～F）之外的非数字字符，字符串将不会被解析，返回结果为 NaN；
• 在字符串中包含了空格、+、-和小数点“。”等特殊符号或非数字的字符时，解析将在遇到这些字符时停止，并返回已解析的结果；
• 如果字符串是空字符串，返回结果为 NaN。

转换示例：

    console.log(parseInt("1101", 2));   // 以2为基数的1101字符串解析后的结果为：13
    console.log(parseInt("a37f", 16));  // 以16为基数的a37f字符串解析后的结果为：41855
    console.log(parseInt("123"));       // 以10为基数的123字符串解析后的结果为：123
    console.log(parseInt("  123"));     // 字符串前面的空格会被忽略，结果为：123
    console.log(parseInt("12 3"));      // 字符串中包含了空格，解析到空格时停止，结果为12
    console.log(parseInt("12.345"));    // 字符串中包含了小数点，解析到小数点时停止，结果为12
    console.log(parseInt("xy123"));     // 字符串前面包含了非数字字符“x”，无法解析，返回结果为：NaN
    console.log(parseInt("123xy4"));    // 字符串中包含了非数字字符“xy”，解析到“x”时停止，结果为：123

从上述示例我们可以看到，parseInt() 解析浮点数时，小数部分数据会被截掉，此时需要使用下面将介绍的 parseFloat()，而不能使用 parseInt()。

(3) 使用parseFloat()函数将参数转换为一个浮点数
使用格式如下：

parseFloat(stringNum)

stringNum 参数为需要解析为浮点型的字符串。

parseFloat() 的作用是将首位为数字的字符串转解析成浮点型数。若 stringNum 字符串不是以合法的字符开头，则返回 NaN；解析过程中如果遇到不合法的字符，将马上停止解析，并返回已经解析的值。

parseFloat() 在解析字符串为整数时，遵循以下规则：

• 解析字符串时，会忽略字符串前后的空格；如果字符串前面为-，-会保留在转换结果中；如果数字前面为+，转换后将删掉+号；如果字符串前面为小数点.转换结果会在小数点前面添加0；
• 如果字符串前面为除空格、+、-和。以外的特殊符号，字符串将不会被解析，返回结果为 NaN；
• 在字符串中包含了空格、+和-等特殊符号或非数字的字符时，解析将在遇到这些字符时停止，并返回已解析的结果；
• 在字符串中包含两个以上为小数点时，解析到第二个小数点时将停止解析，并返回已解析的结果； 如果字符串是空字符串，返回结果为 NaN。

转换示例：

    console.log(parseFloat("312.456"));     // 结果为：312.456
    console.log(parseFloat("-3.12"));       // 字符串前面的“-”将保留，结果为：-3.12
    console.log(parseFloat("+3.12"));       // 字符串前面的“-”将保留，结果为：3.12
    console.log(parseFloat(".12"));         // 在小数点前面添加0，结果为：0.12
    console.log(parseFloat("  3.12"));      // 截掉字符串前面的空格，结果为：3.12
    console.log(parseFloat("312.4A56"));    // 字符串中包含非数字字符A，解析到A时停止，结果为：312.4
    console.log(parseFloat("31 2.4A56"));   // 字符串中包含空格，解析到空格时停止，结果为：31
    console.log(parseFloat("31.2.5"));      // 字符串中包含两个小数点，解析到第二个小数点时停止，结果为：31.2
    console.log(parseFloat("a312.456"));    // 字符串前面为非数字字符a，解析无法进行，结果为：NaN

3. 思考

大家可以先思考一下，下面这几个问题：
1、undefined >= undefined 为什么是 false
2、null >= null 为什么是 true
3、[] == ![] 为什么是 true

解析：
1、undefined >= undefined 为什么是 false
按照隐式转换规则，可转换成NaN >= NaN，NaN 不等于 NaN，也不大于，所以是false

2、null >= null 为什么是 true
按照隐式转换规则，可转换成0 >= 0，0 等于 0，所以是true

3、[] == ![] 为什么是 true
按照双等号左右两边的转换规则

• ! 优先级高于 ==，[]不是假值，所以先转换成 [] == false
• 右边为布尔值，false先转数字0，所以可转换为[] == 0
• 左边为对象，[]调用toString转为 ‘’，转换为’’ == 0
• 左边为字符串，’'转换为0，最终为 0 == 0