在上篇文章中,学习了JS中的类型判断,那么既然判断了类型,如果不是我们想要的呢,那不如我们转换一下,不改变自己,改变事实。 在JS中呢,类型转换又分为显式转换和隐式转换,相信各位心里已经有一个大概的理解吧。一种坦荡荡,一种悄眯眯。
显式类型转换
显式类型转换(Explicit Type Conversion),也称为类型强制转换,是指程序员通过调用函数或运算符,明确地将一种数据类型转换为另一种数据类型。 同时我们也知道,JS中的数据类型又分为原始类型和引用类型(也称为对象类型)
原始类型转原始类型 原始类型之间的转换就比较简单了,我们可以查阅官方文档
转换为布尔类型
使用 Boolean() 函数将其他类型的数据转换为布尔类型。这种转换常用于条件判断中,确保值被正确解析为 true 或 false。
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。这个函数的处理步骤如下:
判断接收到的值是否为原始类型
原始类型包括:undefined,null,boolean,number,string,symbol,和 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"
报错
如果 valueOf 和 toString 方法都没有返回原始值,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
```
-
转字符串类型
当你拿一个对象做字符串操作时,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 ===
-
==
使用==进行比较时,JavaScript会用魔法把不同类型的值变成同一类型再进行比较。这就像两个变形术士比谁变得更像对方。1 == "1"; // true (1: "嘿,'1',我们看起来一样!") true == 1; // true (true: "1,我们其实是一家人") -
===
使用===进行比较时,JavaScript不搞花里胡哨的转换,只有类型和值都一样时,才说他们是相等的。这就像两个小朋友站在一起说:“我们完全一样!”1 === "1"; // false (1: "你是字符串'1',我们不一样") true === 1; // false (true: "抱歉,1,我们不一样")