探索JS中的类型转换

345 阅读4分钟

在上篇文章中,学习了JS中的类型判断,那么既然判断了类型,如果不是我们想要的呢,那不如我们转换一下,不改变自己,改变事实。 在JS中呢,类型转换又分为显式转换和隐式转换,相信各位心里已经有一个大概的理解吧。一种坦荡荡,一种悄眯眯。

显式类型转换

显式类型转换(Explicit Type Conversion),也称为类型强制转换,是指程序员通过调用函数或运算符,明确地将一种数据类型转换为另一种数据类型。 同时我们也知道,JS中的数据类型又分为原始类型和引用类型(也称为对象类型)

原始类型转原始类型 原始类型之间的转换就比较简单了,我们可以查阅官方文档

转换为布尔类型

使用 Boolean() 函数将其他类型的数据转换为布尔类型。这种转换常用于条件判断中,确保值被正确解析为 truefalse

Boolean(0);       // false
Boolean(1);       // true
Boolean("");      // false
Boolean("hello"); // true

转换为数字类型

使用 Number() 函数将其他类型的数据转换为数字类型。这种转换常用于数学运算或需要进行数值比较的场景。

Number("123");    // 123
Number("");       // 0
Number(true);     // 1
Number(false);    // 0

转换为字符串类型

使用 String() 函数将其他类型的数据转换为字符串类型。这种转换常用于需要字符串拼接或字符串处理的场景。


String(123);      // "123"
String(true);     // "true"
String(false);    // "false"

隐式类型转换

隐式类型转换就像魔法师的自动咒语,当你不注意的时候,它就悄悄地施展了。咱们看看这些神奇的自动转换吧!

对象转原始值

转数字类型

. 调用 ToNumber(x) 函数

这个函数用于将任何值 x 转换为数字类型。内部会调用 ToPrimitive 函数来处理对象类型的值。

ToPrimitive(input, preferredType)

这个函数用于将一个对象转换为原始类型的值。在转换为数字的过程中,preferredType 参数会被设置为 Number。这个函数的处理步骤如下:

判断接收到的值是否为原始类型

原始类型包括:undefinednullbooleannumberstringsymbol,和 bigint。如果接收到的值已经是原始类型,则直接返回该值。

调用 valueOf 方法

如果值不是原始类型(即是对象),则会首先尝试调用对象的 valueOf 方法。valueOf 方法应返回该对象的原始值。如果 valueOf 返回的是原始值,则直接返回该值。

例如,对于一个 Date 对象:

let date = new Date();
console.log(date.valueOf()); // 返回时间戳

调用 toString 方法

如果 valueOf 没有返回原始值(或没有定义),则接着会调用对象的 toString 方法。toString 方法应返回一个字符串表示。如果 toString 返回的是原始值,则直接返回该值。

例如,对于一个普通对象:

let obj = { toString: () => "hello" };
console.log(obj.toString()); // 返回 "hello"

报错

如果 valueOftoString 方法都没有返回原始值,JavaScript 会抛出一个类型错误(TypeError)。

``` javascript
    Number({})
    // 1. ToNumber({})
    // 2. let primValue =Toprimitive({},Number) 
    //      调用valueOf()得到{}
    //      调用toString()得到'[object Object]'  说明调用的是object的toString方法
    //      调用ToNumber('[object Object]')得到NaN   
    //  3. 返回NaN
    console.log(Number({}));//NaN
```
  1. 转字符串类型
    当你拿一个对象做字符串操作时,JavaScript会试图把它变成字符串。这就像让一只狮子去唱歌。

          // 对象转字符串String
        console.log(String({}));
        // ToString({})
        //ToPrimitive({},String)//得到"[object Object]"
        // ToString("[object Object]")//返回结果
    

对象转布尔类型

任何对象(包括空数组和空对象)在转换为布尔类型时,都很自信地说“我是True”。

Boolean({});    // true ({}: "我是空的,但我还是True")
Boolean([]);    // true ([]: "我是空数组,但我也是True")
Boolean(new Date()); // true (new Date(): "我是日期对象,肯定是True")

一元操作符 +

一元操作符+会偷偷地把你手上的值变成数字,就像魔法棒轻轻一挥。

+"123"; // 123 ("123": "哎呀,我变成了数字123")
+true;  // 1   (true: "我竟然变成了数字1")
+false; // 0   (false: "我默默地变成了数字0")

二元运算符 +

当使用二元运算符+进行字符串连接时,如果其中一个操作数是字符串,另一个也会乖乖地变成字符串。这就像把两个小朋友用糖果绑在一起。

1 + "2"; // "12" (1: "我和'2'在一起,成了'12'")
"hello" + 42; // "hello42" ("hello": "我和42成了'hello42'")

== vs ===

  1. ==
    使用==进行比较时,JavaScript会用魔法把不同类型的值变成同一类型再进行比较。这就像两个变形术士比谁变得更像对方。

    1 == "1"; // true (1: "嘿,'1',我们看起来一样!")
    true == 1; // true (true: "1,我们其实是一家人")
    
  2. ===
    使用===进行比较时,JavaScript不搞花里胡哨的转换,只有类型和值都一样时,才说他们是相等的。这就像两个小朋友站在一起说:“我们完全一样!”

    1 === "1"; // false (1: "你是字符串'1',我们不一样")
    true === 1; // false (true: "抱歉,1,我们不一样")