关于js中类型转换的问题

bingo 发布于2019-08-20 16:35 / 1904人阅读

摘要：把一个值从一个类型转换成其他的类型的做法叫做类型转换。抽象值操作类型的转换涉及到了转换的基本规则，这里介绍，，，。默认情况下为，内部先执行得到的值如为基本类型则输出结果，否则再执行得到的值如为则输出结果，否则报错。都转换为数字相加后返回。

先来看一个栗子：

if("0.00"){
  console.log("0.00")
}
var obj = {
    valueOf: function(){ return {} }, 
    toString: function(){ return {} }
}
console.log(obj == 0)

知道上面的栗子输出上面吗？

首先，JavaScript的内置类型有：null，undefined，number，string，boolean，object，symbol(ES6)。除去object，其他算是基本类型（primitives）。把一个值从一个类型转换成其他的类型的做法叫做类型转换。可以是显示的，也可以是隐式的。

抽象值操作

类型的转换涉及到了转换的基本规则，这里介绍ToString，ToNumber，ToBoolean，ToPrimitive。

ToString

参数	结果
undefined	"undefined"
null	"null"
Boolean	"false" or "true"
Number	将数字转化成字符串，如"1.1"
String	不变
Object	ToPrimitive后ToString

ToNumber

参数	结果
undefined	NaN
null	+0
Boolean	false->0, true->1
Number	不变
String	转换规则间下面*
Object	ToPrimitive后ToNumber

String 的ToNumber规则。字符串和数字的字面量差不多（其他情况转化为NaN），即：

允许字符串前后有空白符

允许前面是0而不会被转化为8进制

允许用+/-代表符号位

只有空白符的情况下，转化为0

ToBoolean

参数	结果
undefined	false
null	false
Boolean	不变
Number	0,NaN->false; other->true
String	length等于0->false; other->true
Object	true

ToPrimitive

参数	结果
undefined	不变
null	不变
Boolean	不变
Number	不变
String	不变
Object	转化规则见下面*

这里涉及到了ToPrimitive ( input [, PreferredType] )，input为输入的值， PreferredType为可选项（默认情况下是Number。另一个是String，作用和Number相反，先执行toString()，在执行valueOf()）。

默认情况下（PreferredType为Number），内部先执行valueOf()得到的值如为primitive（基本类型）则输出结果，否则再执行toString()得到的值如为primitive则输出结果，否则报错。

两种转换

理解了上面的抽象值操作，就可以来看一下下面两种不同的转换。

显式转换

String()：满足ToString转换规则

String(null) //"null"

Number()：满足ToNumber转换规则

Number(" 010 ") //10

Boolean：满足ToBoolean转换规则

Boolean([1, 2, 3]) //true

parseInt(string, radix)：满足ToString转换规则

var a = {
  //先执行toString
  toString: function () {
    return {}
  },
  //再执行valueOf
  valueOf: function () {
    return 0x10
  }
}
parseInt(a) //16

需要注意的是，由于a是对象，需要通过ToPrimitive得到Primitive（此时ToPrimitive ( input [, PreferredType] )的PreferredType为String），再将ToString(Primitive)得到"0x10"

隐式转换

一元操作符+：满足ToNumber转换规则

var a = "6";
+a + 6 //12

二元操作符 +：

分别计算左右操作数，得到lval,rval。（有步骤合并省略）

lprim = ToPrimitive(lval)。

rprim = ToPrimitive(rval)。

如果lprim或rprim是字符串，都转换为字符串然后相加返回。

都转换为数字相加后返回。

[1, 2] + 1 //"1,21"

二元操作符 -：

分别计算左右操作数，得到lval,rval。（有步骤合并省略）

lnum = ToNumber(lval)。

rnum = ToNumber(rval)。

相减后返回。

[1, 2] - 1 //NaN

条件 if（express）（||、&&、三元...）：满足ToBoolean转换规则

if (" ") {
  console.log("blank")
} 
//blank

==运算：

Type(x)	Type(y)	Result
两者类型相同		遵循===运算
null	Undefined	true
Undefined	null	true
Number	String	x == toNumber(y)
String	Number	toNumber(x) == y
Boolean	(any)	toNumber(x) == y
(any)	Boolean	x == toNumber(y)
String or Number	Object	x == toPrimitive(y)
Object	String or Number	toPrimitive(x) == y
otherwise…		false

var a = {
  toString () {
    console.log("toString");
    return "1"
  },
  valueOf () {
    console.log("valueOf");
    return 1
  }
}
console.log("1" == a) // true

===运算：

Type(x)	Values	Result
两者类型不一样		false
Undefined or Null		true
Number	两者数值一样(非NaN)	true
String	两者完全一样	true
Boolean	两者一样	true
Object	两者指向同一个对象	true
otherwise…		false

关系比较（如<）

主要步骤：首先都转换为基础类型，如果都是字符串，按字符串比较;否则都转数字比较。

下面借用网上的图

==运算

===运算

参考

Truth, Equality and JavaScript
You-Dont-Know-JS笔记之类型和语法

私有云 GPU服务器 js中数据类型转换 js的数据类型转换 js 数据类型的自动转换 js 中各种数据类型的比较

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83023.html

关于js类型转换骚操作

摘要：原文来源于我的前言身为一种弱类型的语言，不用像语言那样要定义等等数据类型，因为允许变量类型的隐式转换和允许强制类型转换。原文来源于我的github 0.前言 js身为一种弱类型的语言，不用像c语言那样要定义int、float、double、string等等数据类型，因为允许变量类型的隐式转换和允许强制类型转换。我们在定义一个变量的时候，就一个var、let、const搞定，不用担心...

zhangwang 2019-08-22 16:26 评论0 收藏0
【JS】关于JS的一些知识点（JS基础，纯记录）

摘要：如何让根据拆箱转换，以及的隐式转换，可以如下写为什么计算机中所有的数据都是以二进制存储的，所以在计算机计算时要把数据先转换成二进制进行计算，然后把计算结果转换成十进制。会存在精度丢失问题和的二进制都是以无线循环的小数的二进制的二进制本想着记笔记里，但是笔记里没有分类，还是以文章的形式，当个人总结吧，这一篇就当作JS基础篇的记录吧，有修改的和新增的持续更新～关于JS的一些小技巧 1:...

SwordFly 2019-08-23 18:11 评论0 收藏0
JavaScript类型转换的迷糊事儿

摘要：下面分几步来简单的探探不同类型的转换吧以下的内容，都可以从权威指南中找到。其他值转换成在编写代码的过程中，几乎不用考虑它的取值类型。核心内置类，会尝试先于可以理解为对象优先转换成数字例外的是，利用的是转换。最近在写公司的登录注册模块，遇到类型不同相比较的时候，就心惊胆战，每次都要用浏览器来验证一下，决定乱七八糟的随便写一下，方便日后自己回顾知识~ 弱类型带来的那些让人迷糊的事弱类型...

harriszh 2019-08-22 10:58 评论0 收藏0
分析 JavaScript 的数据类型与变量

摘要：基本数据类型在中，基本数据类型有种，即数值字符串布尔值。两个布尔值转为数值进行比较。对于对象和布尔值，调用它们的方法得到对应的字符串值，然后进行字符串相加。减法对于字符串布尔值或者，自动调用，转换结果若为，那么最终结果为。这篇文章，来聊聊 JS 中的数据类型与变量。这是在学习 JS 时最基础的一类问题，但却很重要。希望我的分享有帮助到你。文章开头，我先提几个面试中遇到的问题：比如...

Mike617 2019-08-23 13:13 评论0 收藏0
大规模应用TypeScript「2019 JSConf -Brie Bunge」

摘要：众所周知，在大公司中进行大的改革很难。目前公司有超过名开发人员，其中有个以上是前端。从年起，已经在一些小规模团队中探索使用。在年的前端调查中，静态类型系统呼声最高。在我们的主仓库中，绝大多数的公共依赖都已经由做到了类型声明。特别说明这是一个由simviso团队进行的关于Airbnb大规模应用TypeScript分享的翻译文档，分享者是Airbnb的高级前端开发Brie Bunge ...

qpal 2019-08-26 14:04 评论0 收藏0