JavaScript进阶系列-类型转换、隐式类型转换

·  阅读 3302

我的博客仓库

类型转换、隐式类型转换

用来放一些我看的书籍和学习的记录,欢迎点赞和讨论。


转换为字符串

ECMAScript 的 Boolean 值、数字和字符串的原始值都是伪对象,这意味着它们可以使用原型对象上面的属性和方法。

ECMAScript 定义所有对象都有 toString() 方法,无论它是伪对象,还是真对象。

let obj = {name:'obj'};
obj.toString(); // [object Object]

let arr = [1,2];
arr.toString(); // "1,2"

function func(){}
func.toString() // "function func(){}"

false.toString() // "false"
参数结果
undefined"undefined"
null"null"
boolean"true" 或者 "false"
number数字作为字符串。比如,"1.765"
string无需转换
[]""
[5,2]"5,2"
{}"[object Object]"
Symbol()"Symbol()"

转换为数字

ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat() 。 只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。

参数结果
undefinedNaN
null+0
booleantrue被转换为1,false转换为+0
number无需转换
string由字符串解析为数字。例如,"324"被转换为324,''转为0
[]+0
[5]5
{}NaN
Symbol报错

转换为 Boolean

参数结果
undefinedfalse
nullfalse
boolean无需转换
number+0,-0转换为false,其他为true
string''为false,其他为true
[]true
{}true
Symboltrue

强制类型转换

ECMAScript 中可用的 3 种强制类型转换如下:

  • Boolean(value) - 把给定的值转换成 Boolean 型;
  • Number(value) - 把给定的值转换成数字(可以是整数或浮点数);
  • String(value) - 把给定的值转换成字符串;

Boolean() 函数

当要转换的值是至少有一个字符的字符串、非 0 数字或对象时,Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null、NaN,它将返回 false。

Number() 函数

Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。

String() 函数

String() 它可把任何值转换成字符串。

隐式类型转换

JavaScript 默认自动转换,没有任何警告 隐式类型转换常见场景

自动转换 Boolean

例如 if 语句 或者其他需要 Boolean 的地方

if (表达式){}

运算符

在非 Numeber 类型进行数学运算符 - * / 时,会先将非 Number 转换成 Number 类型。 + 运算符要考虑字符串的情况,在操作数中存在字符串时,优先转换成字符串,

+ 运算符其中一个操作数是字符串的话,会进行连接字符串的操作。

1+'2' // '12'

+ 操作符的执行顺序是:

  • 当一侧操作数为 String 类型,会优先将另一侧转换为字符串类型。
  • 当一侧操作数为 Number 类型,另一侧为原始类型,则将原始类型转换为 Number 类型。
  • 当一侧操作数为 Number 类型,另一侧为引用类型,将引用类型和 Number 类型转换成字符串后拼接。

对象

只有在 JavaScript 表达式语句中需要用到数字或字符串时,对象才被隐式转换。

当需要将对象转换为数字时,需要三个步骤

  • 调用 valueOf()。如果结果是原始值(不是一个对象),则将其转换为一个数字。
3*{valueOf:function () { return 5 }} // 15
  • 否则,调用 toString() 方法。如果结果是原始值,则将其转换为一个数字。
3*{toString:function () { return 5 }} // 15
  • 否则,抛出一个类型错误。
3*{toString:function () { return {} }} //TypeError: Cannot convert object to primitive value

参考

ECMAScript 类型转换

JavaScript 的怪癖 1:隐式类型转换

问题:可能发生隐式类型转换的场景以及转换原则,应如何避免或巧妙应用?

问题:{} + {} = ?

"[object Object][object Object]"

JavaScript中,{}+{}等于多少?

常见错误使用:false

Boolean('false') // true
Boolean('undefined') // true
// 这里他们都是字符串

问题:如何让:a == 1 && a == 2 && a == 3

const a = {
  value:[3,2,1],
  valueOf: function(){return this.value.pop()}
}
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改