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

隐式类型转换

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
  1. 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
  1. 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
  1. 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

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

原文链接:segmentfault.com

上一篇:overflow hidden 遇上absolute失效
下一篇:JS面试准备二

相关推荐

  • 隐式转换实质

    ToPrimitive():将值转换为原始值 JavaScript 引擎内部的抽象操作 ToPrimitive()有着这样的签名: ToPrimitive (input,PreferredTyp...

    2 年前
  • 重学JS:显示强制类型转换

    ToString ToString负责处理非字符串到字符串的强制类型转换,常用的字符串化方法String()、toString()。 基本类型值的字符串化规则: null转换为'null'...

    1 年前
  • 重学JS: 隐式强制类型转换

    隐式强制类型转换指的是那些隐藏的强制类型转换,副作用也不是很明显,事实上,只要自己觉得不够明显的强制类型转换都可以算作隐式强制类型转换,接下来,此文将会介绍几种常见的隐式类型转换。

    1 年前
  • 那些年,面试遇到的关于JavaScript隐式转换的题

    前言 不知道大家有没有见过这样的一张图? JS搞笑图(/public/upload/b27a990083b3e95608ea64d49889153d) 我当时看见这张图的时候,表情和他几乎一样,内...

    17 天前
  • 转行学前端的第 45 天 : 了解 ECMAScript 显式原型与隐式原型

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索基础学习了js类型转换,然后今天就是准备学习一下显式原型和隐式原型,同时了解一下new关键词构造对...

    13 天前
  • 转行学前端的第 44 天 : 了解 ECMAScript 数据类型转换(二)

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索基础学习了对象解构,然后今天就是准备学习一下之后在很多对象中提到的proto和prototype,...

    14 天前
  • 转行学前端的第 43 天 : 了解 ECMAScript 数据类型转换(一)

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索基础学习了对象解构,然后今天就是准备学习之前一个小伙伴提到的拆箱和装箱,所以今天基础学习js类型转...

    15 天前
  • 笔记:隐式转换规则

    要求:学习,并背诵全文 原始值 | 类型 | Undefined | Null | String | Boolean | Number | | :: | :: | :: | :: | :: | ...

    2 年前
  • 盘点一下Javascript的那些隐式转换

    产生于1992年 设计者 如果不是公司的决策, 称绝不可能把 作为 设计的原型。 作为设计者,他一点也不喜欢自己的这个作品: "与其说我爱 ,不如说我恨它。

    1 年前
  • 深入理解JavaScript的类型转换

    clipboard.png(https://img.javascriptcn.com/902a315fb028086329c2077612a0dfac "clipboard.png") 前言 ...

    1 年前

官方社区

扫码加入 JavaScript 社区