你应该熟练掌握的JavaScript类型转换

前言

JavaScript共有七种数据类型,Number、String、Boolean、Null、Undefined、Symbol、Object,这七种数据类型是可以相互转换的,转换方式共分为两类:显示类型转换和隐式类型转换,掌握和熟练的使用类型转换不仅能提升我们开发的效率,还能提高我们找bug的效率

显示类型转换

转换为Boolean

调用Boolean() 方法将数据转换为Boolean类型
转换为布尔值的规则很简单,除了false、undefined、null、0、NaN、"" 这六个转换之后的结果为false外,其余的全为true
值得注意的是**[]与{}**转换之后的布尔值为true!!
Boolean([]) // true

转换为Number

有 3 种方式将非数值转换为数值:Number()parseInt() parseFloat()

Number()

  • 布尔值,true 转换为 1,false 转换为 0
  • 数值,直接返回
  • null,返回 0
  • undefined,返回 NaN
  • 字符串,应用以下规则
    • 字符串最前面与最后面的空格会被忽略
    • 如果字符串包含数值字符,包括数值字符前面带加、减号的情况,则转换为一个十进制数值(会忽略数值前面的零)。
    • 如果字符串包含有效的浮点值格式如"1.1",则会转换为相应的浮点值(同样,忽略前面的零)。
    • 如果字符串包含有效的十六进制格式如"0xf",则会转换为与该十六进制值对应的十进制整数值。
    • 如果是空字符串(不包含字符),则返回 0。
    • 如果字符串包含除上述情况之外的其他字符,则返回 NaN
  • 对象,调用 valueOf()方法,并按照上述规则转换返回的值。如果转换结果是 NaN,则调用toString()方法,再按照转换字符串的规则转换

下面几个转换示例有助于理解上述规则

Number("") 						// 0
Number("   ") 						// 0
Number("     +23423   ")                                // 23423
Number("2  2") 						// NaN
Number("++2") 						// NaN
Number("+002") 						// 2
Number("3.125e7")					// 31250000

parseInt()

parseInt()函数专注于字符串是否包含数值模式,转换规则与Number转换规则相似,主要有一下不同

  • 如果第一个字符不是数值字符、加号或减号,parseInt()立即 返回 NaN。这意味着空字符串也会返回 NaN
  • 如果第一个字符是数值字符、加号或减号,则继续依次检测每个字符,直到字符串末尾,或碰到非数值字符
  • 如果是数字则返回整数部分

下面几个转换示例有助于理解上述规则

parseInt("1234blue");  // 1234
parseInt(""); 	       // NaN
parseInt(22.5);        // 22
parseInt("70");        // 70
parseInt("0xf");       // 15,解释为十六进制整数
parseInt("3.125e7");   // 3

不同的数值格式很容易混淆,因此 parseInt()也接收第二个参数,用于指定底数(进制数)。如 果知道要解析的值是十六进制,那么可以传入 16 作为第二个参数,以便正确解析:
let num = parseInt("0xAF", 16); // 175
事实上,如果提供了十六进制参数,那么字符串前面的"0x"可以省掉:
let num1 = parseInt("AF", 16);  // 175
let num2 = parseInt("AF");      // NaN
在这个例子中,第一个转换是正确的,而第二个转换失败了。区别在于第一次传入了进制数作为参 数,告诉 parseInt()要解析的是一个十六进制字符串。而第二个转换检测到第一个字符就是非数值字 符,随即自动停止并返回 NaN。
通过第二个参数,可以极大扩展转换后获得的结果类型。比如:

parseInt("10", 2); // 2,按二进制解析
parseInt("10", 8); // 8,按八进制解析

parseFloat()

parseFloat()函数的工作方式跟 parseInt()函数类似,不同之处在于

  • 第一次出现的小数点是有效的,但第二次出现的小数点无效
  • 始终忽略字符串开头的

下面几个转换示例有助于理解上述规则

parseFloat("1234blue");  // 1234
parseFloat("0xA");	 // 0
parseFloat(22.5);        // 22.5
parseFloat("22.34.5");   // 22.34
parseFloat("0908.5"); 	 // 908.5
parseFloat("3.125e7");	 // 31250000

转换为String

有三种方式将非字符串转换为字符串:toString()、String()和JSON.stringify()

toString()

toString()方法一般用于数值、布尔值、对象和字符串null和undefined没有toString()方法

String()

String()函数遵循如下规则

  • 如果值有 toString()方法,则调用该方法(不传参数)并返回结果
  • 如果值是 null,返回"null"。
  • 如果值是 undefined,返回"undefined"


想要对象和数组使用上述方法转换为字符串,达不到预期的效果

let arr = [ 1, 2 ]
let obj = { age: 18 }
arr.toString() // "1,2"
String(arr) // "1,2"
obj.toString() // "[object Object]"
String(obj) // "[object Object]"

JSON.stringify()

想要将数组和对象转换为字符串应使用JSON.stringify()方法

let obj = {
  id: 1,
  persong: { age: 18 }
};
JSON.stringify(obj) // "{\"id\":1,\"persong\":{\"age\":18}}"

隐式类型转换

有时我们遇到当运算符在运算时,如果两边数据类型不统一,CPU无法计算,这时编译器会自动将运算符两边的数据做一个数据类型转换,转换成一样的数据类型在进行运算,这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换

转换为Boolean

通过Boolean()方法将非布尔值转换为布尔值

  1. if条件判断
  2. 布尔操作符(!,&&,||)
  3. do-while条件判断
  4. 三目运算符条件判断

转换为Number

通过Number()方法将其值转换为数值

  1. ++ --
let age = "20"
age++
++age
  1. 一元加和一元减

+"2.2" // 2.2

  1. 位操作符(|,&,~,^,<<,>>,>>>)

"12.2" | 0    // 12     该方式可用于取整

  1. 乘性操作符(*,/,%) 

2 * "2"        // 4 

  1. 加性操作符(+,-)

3 - "2"    // 1

"+"在存在字符串的情形下,调用String()方法,将字符串进行拼接

  1. 指数操作符

3 ** "2"    // 9

  1. 关系操作符(>,<,>=,<=)
  • 若果有一个操作数是数值,则调用Number()将另一个操作数转换为数值
  • 若果有一个操作数是布尔值,则调用Number()将操作数转换为数值
  1. == !=
  • 如果任一操作数是布尔值,则调用Number()将操作数转换为数值,再比较是否相等。
  • 如果一个操作数是字符串,另一个操作数是数值,则调用Number()将字符串转换为数值,再比较是否相等。
  • null == undefined

转换为String

调用String()方法将非字符串转换为字符串

  1. 加性操作符(+) 

5 + "5"    // "55"

总结

暂时自己能想到的就这么多,欢迎各位大佬补充