目录
写在最后
（免费学习推荐：javascript视频教程）
前言
在了解类型转换之前，如果你对 Js 的基本类型仍存在疑惑，不妨看看JavaScript 中的基本数据类型这篇文章哦～
类型转换常常为人诟病，但实际上很多时候它们是非常有用的，有些强制类型转换可以明确告诉我们哪里发生了类型转换，有助于提高代码可读性和可维护性。但有些却发生在我们看不见的地方，所以我们今天来讨论一下平时常见的类型转换运算和操作～
一、类型转换是什么？
我们都知道变量的类型由它存储的值的类型来决定，所以将值从一种类型转换为另一种类型通常称为类型转换（type-casting），而它也可以根据某些特点分成两类
显式类型转换
显式类型转换主要是指通过 String、Number、Boolean 等构造方法转换相应的字符串、数字、布尔值
const str = String(1);const num = Number("123.3"); //number:123.3
这是显式的情况——类型的转换的动作是由我们主动发起的。
const newStr1 = 1 + "str"; // '1str'const newStr2 = "hello" + [89, 150.156, "mike"]; // 'hello89,150.156,mike'
如果是做 C++、Java 以及其他强类型语言的同学写到类似的组合，应该就会报错了，但在 Js 中不会。
既然隐式类型转换会一直存在下去，我们就要接受它并去了解它的优缺点！
二、转换的基本规则
有些数据类型之间的转换，会经历“多道工序”，我们尽量先介绍“工序”少的～
我们使用 String 函数将类型转换成字符串类型，如果String函数不传参数，返回空字符串，如果有参数，调用ToString(value)，而ToString也给了一个对应的结果表。表如下：
规则：
| 参数类型 | 返回 |
|---|---|
| Undefined | “undefined” |
| Null | “null” |
| Boolean | 如果参数是 true，返回 “true”。参数为 false，返回 “false” |
| Number | 结果有很多种，例如 NaN 和 Infinity |
| String | 返回与之相等的值 |
举例：
console.log(String()); // 空字符串console.log(String(undefined)); // undefinedconsole.log(String(null)); // nullconsole.log(String(false)); // falseconsole.log(String(true)); // true// Numberconsole.log(String(0)); // 0console.log(String(-0)); // 0console.log(String(NaN)); // NaNconsole.log(String(Infinity)); // Infinityconsole.log(String(-Infinity)); // -Infinityconsole.log(String(1)); // 1
有时我们需要将非数字值当作数字来使用，比如数学运算。为此 ES5 规范在 9.3 节定义了抽象操作ToNumber，类似 ToString，它也有一定的转换规则：
| 参数类型 | 返回 |
|---|---|
| true | 1 |
| false | 0 |
| undefined | NaN |
| null | 0 |
| String | 返回与之相等的值，但如果处理失败则返回 NaN |
console.log(Number(true)); // 1console.log(Number(false)); // 0console.log(Number(undefined)); // NaNconsole.log(Number("余光")); // NaNconsole.log(Number("1")); // 1
我们使用Boolean 函数将类型转换成布尔类型，在 JavaScript 中，只有6 种值可以被转换成false，其他都会被转换成true。
console.log(Boolean()); // falseconsole.log(Boolean(false)); // falseconsole.log(Boolean(undefined)); // falseconsole.log(Boolean(null)); // falseconsole.log(Boolean(+0)); // falseconsole.log(Boolean(-0)); // falseconsole.log(Boolean(NaN)); // falseconsole.log(Boolean("")); // false
原始值到对象的转换非常简单，原始值通过调用 String()、Number() 或者 Boolean() 构造函数，转换为它们各自的包装对象。
null和undefined属于例外，当将它们用在期望是一个对象的地方都会造成一个类型错误 (TypeError) 异常，而不会执行正常的转换。
var a = 1;console.log(typeof a); // numbervar b = new Number(a);console.log(typeof b); // object
三、对象转字符串和数字
3.0 这一小节是我认为值得一提，但篇幅较少的一点：
对象到布尔值的转换非常简单：所有对象(包括数组和函数)都转换为true。对于包装对象也是这样，举个例子：
console.log(Boolean(new Boolean(false))); // true
这是一个不太常见的操作，或者说现象，但我们也不能忽略它。
转换都是通过调用待转换对象的一个方法来完成的，在 Js 中，一般待转换对象拥有两个方法：
toString
所有的对象除了null和undefined之外的任何值都具有toString方法，通常情况下，它和使用String方法返回的结果一致。
在JavaSciprt 专题之类型检测中我们提到过Object.prototype.toString方法会根据这个对象的[[class]]内部属性，返回由 "[object " 和 class 和 “]” 三个部分组成的字符串。举个例子：
const obj = { name: "余光" };obj.toString(); // "[object Object]"obj.toString === Object.prototype.toString; // true
我们已经验证了 => 对象调用 toString 方法是调用其构造函数原型上的方法
其他数据类型的 toString 方法也都有自己的特点：
[1, 2, 3, 4].toString(); // "1,2,3,4"[].toString(); // ""function func() { console.log();}func.toString(); // "function func () { console.log() }"
valueOf
valueOf 方法返回这个对象本身，数组、函数、正则简单的继承了这个默认方法，也会返回对象本身。日期是一个例外，它会返回它的一个内容表示: 1970 年 1 月 1 日以来的毫秒数。
var date = new Date(2017, 4, 21);console.log(date.valueOf()); // 1495296000000
在我们知道了 toString()和 valueOf()这两个方法后，来看看转换的规则，即什么时候用：ES5 规范 9.8
| 参数类型 | 结果 |
|---|---|
| Object | 1. primValue = ToPrimitive(input, String) 2. 返回 ToString(primValue) |
所谓的 ToPrimitive 方法，其实就是输入一个值，然后返回一个一定是基本类型的值。
我们总结一下，当我们用 String 方法转化一个值的时候：
ToPrimitive方法，将其转为基本类型，然后再参照 “原始值转字符” 的对应表进行转换。其实，从对象到数字的转换也是一样：
| 参数类型 | 结果 |
|---|---|
| Object | 1. primValue = ToPrimitive(input, Number) 2. 返回 ToNumber(primValue) |
注意：转字符和数字的时候处理略有不同～
那接下来就要看看 ToPrimitive 了，ES5 规范 9.1
这个返回原始值的方法接受一个输入参数 和一个可选的参数来表示转换类型：
所以总结下，对象转字符串(就是 Number() 函数)可以概括为：
举个例子：
console.log(Number({})); // NaNconsole.log(Number({ a: 1 })); // NaNconsole.log(Number([])); // 0console.log(Number([0])); // 0console.log(Number([1, 2, 3])); // NaNconsole.log( Number(function() { var a = 1; })); // NaNconsole.log(Number(/\d+/g)); // NaNconsole.log(Number(new Date(2010, 0, 1))); // 1262275200000console.log(Number(new Error("a"))); // NaN
注意：
转换对象时，你会发现它变成了 NaN，所以
在这个例子中，[]和[0]都返回了 0
Number([])的时候，先调用[]的valueOf方法，此时返回[]；toString方法；ToNumber这个规范上的方法；Number([].valueOf().toString())，结果为 0；[1, 2, 3]却返回了一个 NaN：
Number([])的时候，先调用[1,2,3]的valueOf方法，此时返回 [1,2,3]；toString方法；1,2,3，接下来调用 ToNumber 这个规范上的方法；Number([1,2,3].valueOf().toString())，结果为 NaN；
四、涉及到类型转换的运算符
读到这里我们对类型转换有了一定的概念，现在我们再来看看在运算中常见的类型转换问题。
+a运算符显式地将后面的变量 a 保存的数据转换为数字，不是字符串拼接。
查看 ES5 规范 11.4.6，会调用 ToNumber 处理该值，相当于 Number(‘1’)，最终结果返回数字 1。
const a = "1.1";const b = 5 + +a;console.log(b); // 6.6
上面的代码应该是我们经常用到的，当我们知道一个字段是字符串但希望它是数字时，一般会这么做～
我们一起验证下下面这些类型
console.log(+[]); // 0console.log(+["1"]); // 1console.log(+["1", "2", "3"]); // NaNconsole.log(+{}); // NaN
既然是调用 ToNumber 方法我们在之前的小节中提到过
valueOf方法，如果返回一个原始值，则 JavaScript 将其返回。toString方法，如果返回一个原始值，则 JavaScript 将其返回。+[]为例，[]调用valueOf方法，返回一个空数组，因为不是原始值，调用toString方法，返回""。ToNumber方法，""对应的返回值是 0，所以最终返回 0。一元运算符!显式地将值强制类型转换为布尔值。但是它同时还将真值反转为假值（或者将假值反转为真值）。
const a = 1;const b = "str";const c = [1, 2, 3];console.log(!a); // falseconsole.log(!b); // falseconsole.log(!c); // falseconsole.log(!0); // trueconsole.log(!""); // trueconsole.log(![]); //falseconsole.log(![]); //falseconsole.log(!undefined); // trueconsole.log(!null); // true
同样的!!会讲其他类型转成对应的 bool 值
！和 + 运算符是我们最常用的两种显式类型转换运算符，之后我们再看看那些不经意间就被转换类型的操作～
五、常见的类型转换操作
const num = 1;const str = "200";console.log(num + str); // '1200'
这段代码大家应该都知道结果，但是其中的原理是否和大家想的一样呢？
const arr1 = [1, 2];const arr2 = [3, 4];console.log(arr1 + arr2); // 1,23,4
两个数组的结果为什么也是个字符串？
原因
ES5 规范 11.6.1 中提到，如果某个操作数是字符串或者能通过以下步骤转换为字符串，+将进行拼接操作
如果其中的一个操作数是引用类型，则首先对其进行ToPrimitive操作（第三小节有提）
总结
简单来说就是，如果+的其中一个操作数是字符串（或者通过以上步骤可以得到字符串），则执行字符串拼接；否则执行数字加法。
现在我们来看看到布尔值的隐式强制类型转换，它最为常见也最容易搞错。相对布尔值，数字和字符串操作中的隐式强制类型转换还算比较明显。
下面的情况会发生布尔值隐式强制类型转换。
true时执行操作；truetrue;? ：；谈到类型转换，一定绕不开==和===。
==用于比较两个值是否相等，当要比较的两个值类型不一样的时候，就会发生类型的转换。
在ES5 规范 11.9.5 中简述了它的规则：
当执行 x == y 时：
相关免费学习推荐：javascript（视频）
Das obige ist der detaillierte Inhalt vonJavaScript专题之七：类型转换. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
