小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」，赢取创作大礼包，挑战创作激励金
开发过程中，我们常常会遇到当前获取到的值并不是我们期望的类型，这个时候我们就需要将手动的去做一个类型转换。转换的方法不止一种，所以你一般用的都是哪种？为什么？
提问
PS：答案都在文中
👉 String(null) 和 (null).toString() 的结果？
👉 1.toSting()和(1).toString()结果为什么不一样？
👉 parseFloat("123.45.67") 和 Number("123.45.67")的结果？
👉 相关内容：JavaScript的7大类型补缺补漏
JS其他类型转为字符串
显示转化String(value)
String(value)函数可以将任何类型的数值转换为字符串，包括null和undefined
let value = true;
console.log(typeof value); // boolean
value = String(value); // 现在，值是一个字符串形式的 "true"
console.log(typeof value); // string
toString()方法
toString()方法返回的是相应值的字符串表现
let value = true;
value = value.toString(); // 字符串 "true"
数值、布尔值、对象和字符串值都有toString()方法，但是null和undefined值没有这个方法，会直接报错
PS：如果是数值，直接点toString()方法会报错！
原因：JavaScript的解释器把数字后的"."偷走了（作为前面数字的小数点）, 类似于下面的操作：
利用+“”
把转换的值与一个字符串 “” 加在一起
JS其他类型转为数字类型
显示转化Number(value)
可以用于任何数据类型转换成数值
let str = "123";
console.log(typeof str); // string
let num = Number(str); // 变成 number 类型 123
console.log(typeof num); // number
number 类型转换规则:
| 值 | 转换为number类型的结果 |
|---|---|
| undefined | NaN |
| null | 0 |
| true 和 false | 1和0 |
| string | 去掉首尾空格后的纯数字字符串中含有的数字。 👉 如果剩余字符串为空，则转换结果为 0。👉否则，将会从剩余字符串中“读取”数字。 👉当类型转换出现 error 时返回 NaN。 |
// 123
console.log( Number(" 123 ") );
// NaN（从字符串“读取”数字，读到 "z" 时出现错误）
console.log( Number("123z") );
转换函数parseInt()和parseFloat()
js提供了parseInt()和parseFloat()两个转换函数。专门用于把字符串转换成数值。
-
parseInt() 把值转换成整数
console.log(parseInt("Axjy01")) //NaN console.log(parseInt("01Axjy")) //1 -
parseFloat() 把值转换成浮点数
parseFloat("123.4567") //123.4567
parseFloat("123..4567") //123
parseFloat("qwer123.4567") //NaN
parseFloat("123.45.67") //123.45
🍒从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字 符之前的字符串转换成数字;
🍍第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的
利用js变量弱类型转换(不推荐)
在算术函数和表达式中，会自动进行 number 类型转换。
比如，当把除法 / 用于非 number 类型
// 3, string 类型的值被自动转换成 number 类型后进行计算
console.log( "6" / "2" );
有人会利用这个特性来做转数字的操作，比如减0（不推荐）
var str= '012.345 ';
console.log(typeof str); // string
str = str-0; // 变成 number 类型了
console.log(typeof str); // number
布尔型转换
显示转换Boolean(value)
boolean类型转换规则：
| 值 | 转换为boolean类型的结果 |
|---|---|
| 0, null, undefined, NaN, "" | false |
| 其他值 | true |
注：
console.log( Boolean(0) ); // false
console.log( Boolean("0") ); // true
console.log( Boolean("") ); // false
console.log( Boolean(" ") ); // 空白，也是 true（任何非空字符串都是 true）
结语
文章会持续更新，优化，以及重构！
参考资料：Type Conversions
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
