前言

从原始类型到对象，从隐式转换到显式转型，JavaScript的类型转换不仅关乎变量值如何在字符串、数字、布尔值乃至特殊值如null和undefined间自如跳转，更直接影响到逻辑判断的准确性、运算结果的有效性乃至整个程序的行为逻辑。我们将在文章中层层剥茧，

总之，无论是为了编写更健壮的代码，还是为了深入理解JavaScript的运行机制，掌握类型转换的艺术都是必经之路。让我们一同踏上这段探索之旅，揭开JavaScript类型转换的神秘面纱，让数据的舞步更加精准和谐，为你的编程技能库增添一枚宝贵的钥匙。

正文

原始值转原始值 -- 显示类型转换

原始值转布尔 Boolean(xx)

javascript

复制代码
console.log(Boolean(1));// true
console.log(Boolean(0));// false
console.log(Boolean(-1));// true
console.log(Boolean(NaN)); // NaN为number类型 --> not a number
console.log(Boolean('abc'));// true
console.log(Boolean(''));// false
console.log(Boolean(false));// false
console.log(Boolean(undefined));// false
console.log(Boolean(null// false

原始值转数字 Number(xx)

javascript

复制代码
console.log(Number('123')); // +'123' --> 123
console.log(Number('hello'));// NaN
console.log(Number(true));// 1
console.log(Number(false));// 0
console.log(Number(''));// 0
console.log(Number(' '));// 0
console.log(Number(undefined));// NaN
console.log(Number(null));// 0

原始值转字符串 String(xx)

javascript

复制代码
console.log(String(123));//'123'
console.log(String(true));//'true'
console.log(String(false));//'false'
console.log(String(undefined));//'undefined'
console.log(String(null));//'null'
console.log(String(NaN));//'NaN'

原始值转对象 new Xxx(xx)

javascript

复制代码
let a = 123;

console.log(new Number(a));
console.log(new String(a));

ToPrimitive() 实现对象 --> 原始值

ToPrimitive(obj, String) ==> String(obj)

1. 如果接收到的是原始值，直接返回值
2. 否则，调用toString方法，如果得到原始值，返回
3. 否则，调用valueOf方法，如果得到原始值，返回
4. 否则，报错

ToPrimitive(obj, Number) ==> Number(obj)

1. 如果接收到的是原始值，直接返回值
2. 否则，调用valueOf方法，如果得到原始值，返回
3. 否则，调用toString方法，如果得到原始值，返回
4. 否则，报错

对象转原始值 -- 通常发生隐式类型转换

任何对象转布尔，都是true

ini

复制代码
let a = {};
let b = [];

if (a) { //Boolean()
    console.log('hello');
}

if (b) {
    console.log('hello');
}

分析：

if (a)会将a转换为布尔值，Boolean(a)，同时b也是，所以对象转布尔值都为true。

所以对象转原始值都会调用toString()

1. {}.toString() 得到由"[object 和 class 和 ]"组成的字符串
2. [].toString() 返回由数组内部元素以逗号拼接的字符串
3. xx.toString() 返回字符串面量

valueOf()

1. 包装类对象 ==> string number boolean

一元操作符 +

实例一：

分析+'123'的结果

1. 因为前面有个运算符+，所以先执行ToNumber('123')
2. 结果为+123 -->123

实例二：

分析+[]的结果

1. 因为前面有个运算符+，所以先执行ToNumber([]) 接下来我们来看js官方文档关于ToNumber()的说明：

2. 根据官方文档说明当传入的参数为对象时，执行ToPerimitive([], Number) 3. 根据上面给出的关于ToPerimitive([], Number)的执行步骤，先执行[].valueOf() ，但是valueOf只能只能转换包装类对象(上面给出，即string、number、boolean)，所以执行结果为[] 4. 接着执行[].toString()，根据上述给出的结论([].toString() 返回由数组内部元素以逗号拼接的字符串)，所以结果为'' 5. +''就是将''转换为number类型，即Number('')，结果为0

二元操作符 +

v1 + v2:

1. lprim = ToPrimitive(v1)
2. rprim = ToPrimitive(v2)
3. 如果lprim 或者 rprim 是字符串，那么就ToString(rprim) 或者 ToString(lprim) 再拼接
4. 否则，ToNmuber(lprim) + ToNumber(rprim)

实例一:

分析1 + '1'的结果

1. lprim = ToPrimitive(1) rprim = ToPrimitive('1')
2. ToPrimitive(1):传入的参数为number类型,先调用1.valuoOf(),结果为1(1为number类型,为包装类),所以lprim = 1
3. ToPrimitive('1'):传入的参数为string类型,先调用'1'.toString(),结果为'1',所以rprim = '1'
4. 因为rprim 是字符串，所以执行ToString(1) + '1'
5. '1' + '1' ==> '11',所以结果为'11'

实例二:

分析null + 1的结果:

1. lprim = ToPrimitive(null) rprim = ToPrimitive(1)
2. ToPrimitive(null),根据上面给出的关于ToPrimitive()的js官方文档,结果为null,所以lprim = null
3. ToPrimitive(1):传入的参数为number类型,先调用1.valuoOf(),结果为1(1为number类型,为包装类),所以rprim = 1
4. 因为lprim 和 rprim 都不是字符串 ，所以执行ToNumber(null) + ToNumber(1) ,结果为0+1=1

实例三:

分析 [] + {}的结果:

1. lprim = ToPrimitive([]) rprim = ToPrimitive({})
2. 因为此时在两个对象中间有个运算符+,所以执行number类型的步骤,即先执行[].valueOf() + {}.valueOf(),结果为[]和{}
3. 接着执行[].toString() + {}.toString,[].toString()的结果为'', {}.toString的结果为[object Object]
4. '' + '[object Object]' ==> '[object Object]',所以结果为'[object Object]'

关于==

首先给出js的官方文档:

实例一:

分析1 == {}的结果:

1. 根据给出的js官方文档,如果一个数为对象,另外一个数为number类型,执行1 == ToPrimitive({})(根据第八点和第九点)
2. ToPrimitive({}):有个运算符==,所以执行number类型的步骤,即先执行{}.valueOf() ,结果为{},然后执行{}.toString(),结果为'[object Object]'
3. 根据给出的js官方文档,如果一个数为字符串,另外一个数为number类型,执行1 == ToNumber('[object Object]')(根据第四点和第五点)
4. ToNumber('[object Object]')的结果为NaN,即结果为 1 == NaN-->false

实例一:

分析[] == ![]的结果:

1. 感叹号的优先级大于==，所以先执行感叹号
2. !的执行步骤是先转换为布尔值再取反,Boolean([])为true,所以![]的结果为false
3. 即[] == false,执行[] == ToNumbar(false)(根据第六点和第七点),即[] == 0
4. 接着执行ToPrimitive([]) == 0(根据第八点和第九点)
5. ToPrimitive([]) :有个运算符==,所以执行number类型的步骤,即先执行[].valueOf() ,结果为[],然后执行[].toString(),结果为''
6. 即'' == 0,接着执行ToNumber('') == 0(根据第四点和第五点)
7. 即 0 == 0 --> tru,所以结果为true

结语

可能看完会觉得有点绕,自己去梳理总结一下应该就会更好接受哦~

希望能给大家带来帮助哦~

源文：JS面试常考点:原始值和对象怎么相互转换？

如有侵权请联系站点删除！