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 原始类型转换表(包括复合类型向原始类型转换的范例):
js中的隐式转换与强制转换_第1张图片

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

你可能感兴趣的:(前端,js,javascript,前端)