前言
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()方法将非布尔值转换为布尔值
转换为Number
通过Number()方法将其值转换为数值
- ++ --
let age = "20"
age++
++age
- 一元加和一元减
+"2.2" // 2.2
- 位操作符(|,&,~,^,<<,>>,>>>)
"12.2" | 0 // 12
该方式可用于取整
- 乘性操作符(*,/,%)
2 * "2" // 4
- 加性操作符(+,-)
3 - "2" // 1
"+"在存在字符串的情形下,调用String()方法,将字符串进行拼接
- 指数操作符
3 ** "2" // 9
- 关系操作符(>,<,>=,<=)
- 若果有一个操作数是数值,则调用Number()将另一个操作数转换为数值
- 若果有一个操作数是布尔值,则调用Number()将操作数转换为数值
- == !=
- 如果任一操作数是布尔值,则调用Number()将操作数转换为数值,再比较是否相等。
- 如果一个操作数是字符串,另一个操作数是数值,则调用Number()将字符串转换为数值,再比较是否相等。
- null == undefined
转换为String
调用String()方法将非字符串转换为字符串
- 加性操作符(+)
总结
暂时自己能想到的就这么多,欢迎各位大佬补充