js——类型转换
总述
- 类型转换:显式、隐式(自动)
- 隐式转换是由编译器自动进行的,基本主要抽象操作有ToPrimitive, ToNumber, ToString, ToBoolean等
- 显式转换是通过调用Number(), String(), Boolean()等来实现,后面的操作实际是和隐式一样的原理
隐式转换
- ToPrimitive(input[, PreferredType]):根据可选的类型值,把input转换成非对象(基本类型); ToNumber和ToString转换对象时会调用该操作
| input类型 | 返回结果 |
|
Undefined/Null/Boolean /Number/String |
输入为基本类型,结果与输入的一样 |
| Object |
根据内部方法[[DefaultValue]](hint)返回结果,不同的PreferredType(hint)有不同的操作
1. 如果toString()返回基本类型,将其作为结果 2. 否则,如果valueOf()返回基本类型,将其作为结果 3. 否则,抛出TypeError异常
1. 先判断valueOf再判断toString(与上面String的相反),否则抛出TypeError异常
Date类型的会把hint默认设置为String,其它会以Number处理 |
- ToNumber
| 输入值类型 | 返回结果 |
| Undefined | NaN |
| Null | +0 |
| Boolean | 1: true, 0: false |
| Number | 与输入一致 |
| String |
个人总结:看起来像数字的字符串可以转换成相应的数字,否则返回NaN,具体例子如下 |
| Object | 返回ToPrimitive(input, Number)结果 |
String转换成Number
//空格
Number("");//
Number(" 01");//
//正负数
Number("+9");//+9
Number("-9");//-9
//指数e
Number("-9e-1");//-0.9
Number("-9E-1");//-0.9
//无穷数
Number("-Infinity");//-Infinity
//不同进制
Number("0B10");//
Number("0O10");//
Number("0X10");//
//数字
Number("100000000000000000000000000000");//1e+29
Number("0000.100");//0.1
//转换成了NaN
Number("- 0");//NaN
Number("ln10");//NaN
- ToString
| 输入的类型 | 返回值 |
| Undefined/Null/Boolean/String |
"undefined"/"null"/"true"/"false"/与输入一致 基本类型,输入和返回一样 |
| Number | 对某些输入稍处理,然后作为字符串输出 |
| Object | 使用ToPrimitive(input, String)结果 |
Number转换成String
String(NaN);//-"NaN"
String(-Infinity);//"-Infinity"
//正负数
String(-0);//"0"
String(+0);//"0"
String(-9);//"-9"
String(+9);//"9"
//指数,会自动转换,有效位数尽量少
String(0.000000009);//"9e-9"
String(1000000000000000000000000000000000);//"1e+33"
String(0.9e1);//"9"
String(0.9e-10);//"9e-11"
//会自动省去多余的0
String(0.90000000000000000);//"0.9"
//进制
String(0B10);//"2"
String(0O10);//"8"
String(0X10);//"16"
- ToBoolean
| 结果 | 输入值 |
| false | (基本类型)0, -0, +0, NaN, "", false, Null, Undefined |
| true | 基本类型中除上述的值,Object(所有Object都是!) |
- ToObject
| 输入的类型 | 返回结果 |
| Undefined/Null | TypeError异常,Object(null/undefined)结果均为{} |
| Boolean/Number/String | 对于基本类型会先创建一个对象,并把输入值作为对象的primitiveValue |
| Object | 与输入相同 |
产生隐式转换的操作
转换为数字类型:数字运算符都会尝试把变量转换为数字,如~, <<, >>, +, -, *, /, ^, %, &, |, ++等
+:如果操作数不是数字,则通过ToPrimitive(input, number)进行转换。若结果中有操作数为字符串,则执行字符串拼接,否则执行数字加法
转换为布尔类型:
if(..), while(...), for(;...;...), ?:, ||, &&(选择器运算符), !, !!
==宽松相等比较,根据操作数的不同进行不同的类型转换
| 操作数类型 | 转换方式:对象->非对象,非数字->数字 |
| string+number | string转换为number |
| boolean+其它 |
boolean先转换为number,再做比较 "42"==true;//false "42"==false;//false |
| null+undefined | null == undefined;//true |
| 对象+非对象 | 对象利用ToPrimitive拆封获得非对结果,再比较 |
显式类型转换
| 显式调用 | 隐式 |
| Number(input) | ToNumer(input) |
| String(input) | ToString(input) |
| Boolean(input) | ToBoolean(input) |
| Object(input) | ToObject(input) |
参考
《你不知道的javascript》中卷
js——类型转换的更多相关文章
- js类型转换的坑
JS的灵活 说好听是说JS灵活, 说不好听就是JS的坑太多, JS类型转换就是一个大坑, JS的类型包括了原始类型的[null, undefined, String ,Number, Boolean] ...
- js类型转换
1.js中有六种基本类型,分别是object.number.string.Boolean.null.undefined,其中number.string.Boolean为基本类型,有时使用会强制转换成对 ...
- js 类型转换学习
类型转换分为显示转换和隐式转换 参考http://www.cnblogs.com/mizzle/archive/2011/08/12/2135885.html 先事件显示的 通过手动进行类型转换,Ja ...
- JS 对象、HTML事件处理、JS 类型转换、Date
1. JS 对象 <script> var Person = new Object(); Person.id = 1; Person.name = "Hello World&qu ...
- 你可能忽略的js类型转换
前言 相信刚开始了解js的时候,都会遇到 2 == '2',但 1+2 == 1+'2'为false的情况.这时候应该会是一脸懵逼的状态,不得不感慨js弱类型的灵活让人发指,隐式类型转换就是这么猝不及 ...
- 一篇文章搞定JS类型转换
啥要说这个东西?一道面试题就给我去说它的动机.题如下: var bool = new Boolean(false); if (bool) { alert('true'); } else { alert ...
- 类型和原生函数及类型转换(三:终结js类型转换)
Number() parseInt() parseFloat() Boolean() String() toString() 一.显式类型转换 -------Number()函数把对象的值转换为数字. ...
- js类型转换比较表格
JavaScript类型转换表格 值 转换为 字符串 数字 布尔值 对象 undefined "undefined" NaN false throw TypeEr ...
- JS类型转换(强制和自动的规则)
显式转换 通过手动进行类型转换,Javascript提供了以下转型函数: 转换为数值类型:Number(mix).parseInt(string,radix).parseFloat(string) 转 ...
随机推荐
- (一)python的前世今生
一:Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum)(目前还活着),诞生于1989年,是一个脚本解释程序,由于python语言结构优美,清晰简单,随着人工智能 ...
- react编译报错:Import in body of module; reorder to top import/first
原因是这样的: 我把一个组件分为三个文件, |—Home.jsx // 业务逻辑与html Home——|—Home.css // 样式 |—index.js // 引入Home.css ,再把Hom ...
- 微信小程序 后端用Flask实现
手上有个微信小程序项目,因为对Python相对熟悉一些,打算后端用python写,具体采用python 轻量级的flask框架. 在做的过程中,有些问题需要考虑,记录在下边. 1. 开发的小程序后端怎 ...
- Coursera, Deep Learning 5, Sequence Models, week3, Sequence models & Attention mechanism
Sequence to Sequence models basic sequence-to-sequence model: basic image-to-sequence or called imag ...
- Java_常遇问题(一)
Java_常遇问题 1.100/3 保留两位小数,处理方式: 业务场景一般在金额上 int a = 100, b =3; double result = Double.valueOf(new Deci ...
- mysql 案例 ~ 常见案例汇总
一 简介:这里汇总了一些mysql常见的问题二 案例场景 问题1 mysql设置了默认慢日志记录1S,为何会记录不超过1S的sql语句 答案 mysql~log_queries_not_usi ...
- vue购物车实战项01
1. 关于挂载点 2.图片路径 这样的引入方式 是直接文件夹下myVue 3.import 不能用绝对路径 只能用相对路径 图片可以绝对路径 4.引入组件步骤 1.引入组件 @的含义在配置里面可以 ...
- Css - 字体图标
Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...
- FTP服务器的安装与配置
查看是否安装ftp: rpm -qa |grep vsftpd 1.安装vsftp 1.1.安装vsftp,测试安装的vsftpd的版本是:vsftpd.x86_64 0:3.0.2-11.el7_2 ...
- php编程 之 php基础二
1,if...else...语句 规则简介: if 语句 - 在条件成立时执行代码 if...else 语句 - 在条件成立时执行一块代码,条件不成立时执行另一块代码 if...elseif....e ...