浅谈隐式类型转换与显示类型转换的那些事

隐式类型转换

number类型转string类型

//先定义一个number类型的变量
//只要string类型跟boolean类型还是number类型用+号，其他类型都会被转为字符串
var num=100;
var resu=''+num;
console.log(resu);//输出结果：字符串'100'

string类型转number类型或者boolean类型

//定义string类型的变量与number类型的变量
var str='100';
var str1='前端';
var str2='abc';
var num=5;
//从测试结果可以看出，string类型在跟数字类型做乘除减%运算时，得到的是数字类型的值，但是string类型必须是非英文，中文，否则得出的结果就是NaN，NaN也属于数字类型
console.log(str*num);//500
console.log(str-num);//95
console.log(str/num);//20
console.log(str%num);//0
console.log(str1-num);//NaN
console.log(str2-num);//NaN
//从测试结果可以看出，string类型在与其他类型做比较的时候，可以得到一个boolean值
console.log(str>num);//true

boolean类型转换number类型或者string类型

//定义boolean类型的变量，string类型变量，number类型变量
var boo=true;
var boo1=false;
var num=100;
var str='hello';
//从测试看出：Boolean类型的值跟number类型做加减乘除运算时，会自动转换为number类型进行算数计算，然而在与string类型用加号得出的是字符串拼接效果
console.log(boo+num);//101
console.log(boo+str);//truehello

显示类型转换

转换为string类型：

1.String();

//定义一个number类型，然后通过String()进行显示转换
var num=2020;
var res=String(num);
console.log(typeof res);//输出结果：string

2.toString();

//定义一个number类型，然后通过toString();方法进行转换
var str=1991;
var res=str.toString();
console.log(typeof res);//输出结果：string

转换为number类型

1.Number();

//测试看出：Number();只能转换字符串为数字，如果要转换的字符串里包含数字以外的，结果都是NaN
var str='100';
var str1='100Hello';
console.log(typeof Number(str));//输出结果：number
console.log(Number(str1));//输出结果：NaN

2.parseInt();

/*测试中看出：parseInt();不但可以转换只有数字的字符串类型，
还可以转换同时包含数字与英文的字符串类型，它会把前面的数字留下，
后面的英文去掉，但是如果前面的是英文，那么转换之后会出现NaN*/
var str='100';
var str1='100Hello';
var str2='Hello100';
console.log(typeof parseInt(str));//输出结果：number
console.log(parseInt(str1));//输出结果：100
console.log(praseInt(str2));//NaN

3.parseFloat();

/*从测试可以看出：parseFloat();除了可以转换整数还可以转换小数，
最好的一点是不管你再小数后面出现多少个点，它只认小数第一个点*/
var str='100.2px';
var str1='100.9.9.9';
var str3='200';
var boo=true;
console.log(parseFloat(str));//100.2
console.log(parseFloat(str1));//100.9
console.log(parseFloat(boo));//NaN
console.log(praseFloat(str3));//200

隐式类型转换和显式类型转换的区别：
隐式类型转换：
优点：性能好
缺点：可读性差
显式类型转换：
优点：可读性高
缺点：性能差