likes
comments
collection
share

js中的类型转换

作者站长头像
站长
· 阅读数 127

原始值转换概述

原始值转布尔

Boolean()函数的应用：

let s='s'
let n=123
let f=false
let u=undefined
let nu=null

console.log(Boolean(s));         // true
console.log(Boolean(''));        // false 
console.log(Boolean(n));         // true
console.log(Boolean(0));         // false
console.log(Boolean(-1));        // true
console.log(Boolean(Infinity));  // true
console.log(Boolean(-Infinity)); // true
console.log(Boolean(NaN));       // false
console.log(Boolean(undefined)); // false 
console.log(Boolean(null));      // false
console.log(Boolean());          // false

总结number、string、null、undefined类型转换为boolean类型的规则如以下：

  1. number：

    • 0 和 -0 转换为 false
    • 所有非零数字（包括Infinity和-Infinity）转换为 true
    • NaN 在布尔上下文中也被视为 false（尽管在严格等于（===）比较中，NaN 不等于任何东西，包括它自己）

  2. string：

    • 空字符串 '' 转换为 false
    • 所有非空字符串转换为 true

  3. null：

    • 转换为 false

  4. undefined：

    • 转换为 false

原始值转Number

Number()函数的应用：

console.log(Number('123'));  // 123
console.log(Number('abc'));  // NaN
console.log(Number(''));   // 0
console.log(Number('0x00'));  // 0
console.log(Number(true));  // 1
console.log(Number(null));  // 0
console.log(Number());   // 0

这里要提一嘴0x00在js中开头为0x、0X都会被解释成一个16进制数

总结一下各原始类型转换为Number类型的规则：

  1. string：

    • 如果字符串可以被解析为一个有效的数字序列（包括整数、浮点数、科学计数法表示的数等），那么该字符串将被转换为对应的数字。
    • 如果字符串不能被解析为一个有效的数字序列（例如，包含非数字字符或格式不正确），那么转换结果将是NaN（Not a Number）。
    • 空字符串''会被转换为0。

  2. boolean：

    • true被转换为1。
    • false被转换为0。

  3. null：

    • 转换为0（使用Number()函数或一元加号+运算符时）。

  4. undefined：

    • 转换为NaN（使用Number()函数或一元加号+运算符时）

原始值转String

String()函数的应用：

console.log(String(123));         // '123'
console.log(String(NaN));         // 'NaN'
console.log(String(true));        // 'true' 
console.log(String(false));       // 'false'
console.log(String(undefined));   // 'undefined'
console.log(String(null));        // 'null'

总结原始值转string都是直接将内容加上引号。 以上三种转换方法都称之为显示类型转换

对象转原始值：

首先给出一段这样的代码：

if({}){
    console.log('ok')    //'ok'
}

这里我们运行会打印出'ok'

那么这里就提出了我们这一段的主题对象转原始值，也称隐式类型转换。而上面要想成功打印就得将{}转换成true，而在JavaScript引擎自动执行中就会通过ToPrimitive函数将其转换。这里我们就来讲解一下ToPrimitive它内部操作：

转换对象为Number

  1. JavaScript引擎会调用Number()函数来处理这个对象。

  2. Number()函数内部会尝试将参数转换为一个数字。

  3. 调用ToNumber(x)内部函数，其中x是待转换的对象（{}）。

  4. 在ToNumber(x)内部，会先调用ToPrimitive(obj, "Number")尝试将对象转换为原始值：

    a. 检查obj是否为原始类型（Number, String, Boolean, Symbol, null, undefined）。如果是，则直接返回该值。

    b. 如果obj不是原始类型，则尝试调用obj的valueOf()方法。

    • 如果valueOf()返回原始值，则返回该原始值。
    • 如果valueOf()返回的不是原始值（比如返回了另一个对象），则继续下一步。

    c. 如果valueOf()没有返回原始值，则尝试调用obj的toString()方法。

    • 如果toString()返回原始值，则返回该原始值。
    • 如果toString()返回的不是原始值（理论上，toString()应该返回一个字符串，但这里我们为了完整性考虑所有可能性），则抛出TypeError异常。

    d. 如果valueOf()和toString()都没有返回原始值，则抛出TypeError异常。

console.log(Number({}))       // NaN

转换对象为String

  1. JavaScript引擎会调用String()函数来处理这个对象。

  2. String()函数内部会尝试将参数转换为一个字符串。

  3. 调用ToString(x)内部函数，其中x是待转换的对象（{}）。

  4. 在ToString(x)内部，会先调用ToPrimitive(obj, "String")尝试将对象转换为原始值：

    a. 检查obj是否为原始类型（String, Number, Boolean, Symbol, null, undefined）。如果是，则直接返回该值的字符串表示。

    b. 如果obj不是原始类型，则尝试调用obj的toString()方法。

    • 如果toString()返回原始值（通常是字符串），则返回该原始值。
    • 如果toString()返回的不是原始值（理论上，toString()应该返回一个字符串），则继续下一步。

    c. 如果toString()没有返回原始值，则尝试调用obj的valueOf()方法。

    • 如果valueOf()返回原始值（例如数字、布尔值或字符串），则JavaScript引擎会尝试将该原始值转换为字符串（如果它不是字符串的话）。
    • 如果valueOf()返回的不是原始值（理论上，这种情况不常见，因为valueOf()通常返回原始值或对象本身），则继续下一步。

    d. 如果valueOf()也没有返回原始值，则抛出TypeError异常。

console.log(String({}))       // '[object Object]'

转换对象为Boolean

将对象转换为Boolean总结就是一句话：任何对象转布尔都是true

总结

将对象转换为几种常用的原始类型，通过ToPrimitive()函数的内部操作中的toString方法将对象转换为字符串再通过显示转换转换成需要的类型。

最后一个面试题

console.log([]==![]);

来分析一下这给会打印出什么？答案是true

console.log([]===![])；

在分析一下这个呢？答案是false，

网上有很多这样的答案来解释==和===的区别，而在这就总结成==会触发隐式类型转换，===则不会。 将[]==![]的转换规则手撕出来就是：

// []==![]
// []==!true
// []==false
// []==0
// Number([])==0
// ''==0
// 0==0
转载自:https://juejin.cn/post/7377683176229175323
评论
请登录