JavaScript專題之七：型別轉換

目錄

• #前言
• 一、型別轉換是什麼？
• 二、原始值轉換的基本規則
• 三、物件轉字串與數字
• 四、常見的型別轉換運算子
• ##、常見的類型轉換操作

• 寫在最後

（免費學習推薦：##javascript影片教學）

前言

#在了解型別轉換之前，如果你對Js 的基本型別仍有疑惑，不妨看看JavaScript 中的基本資料類型這篇文章哦～

類型轉換常常為人詬病，但實際上很多時候它們是非常有用的，有些強制型別轉換可以明確告訴我們哪裡發生了型別轉換，有助於提高程式碼可讀性和可維護性。但有些卻發生在我們看不見的地方，所以我們今天來討論一下平常常見的型別轉換運算與運算～

一、型別轉換是什麼？

我們都知道變數的類型由它儲存的值的類型來決定，所以將值從一種類型轉換為另一種類型通常稱為類型轉換（type-casting），而它也可以根據某些特點分成兩類

顯式型別轉換
• 隱含型別轉換。

明確型別轉換

明確型別轉換主要是指透過String、Number、Boolean 等建構方法轉換對應的字串、數字、布林值

const str = String(1);const num = Number("123.3"); //number:123.3

這是顯式的情況－類型的轉換的動作是由我們主動發起的。

1.2 隱式型別轉換

const newStr1 = 1 + "str"; // '1str'const newStr2 = "hello" + [89, 150.156, "mike"]; // 'hello89,150.156,mike'

如果是做 C 、Java 以及其他強型別語言的同學寫到類似的組合，應該就會報錯了，但在 Js 中不會。

既然隱式型別轉換會一直存在下去，我們就要接受它並且去了解它的優缺點！

二、轉換的基本規則

#有些資料型別之間的轉換，會經歷“多道工序”，我們盡量先介紹「工序」少的～

2.1 原始值轉字串

我們使用String 函數將型別轉換成字串型，如果

String 函數不傳參數，傳回空字串，如果有參數，呼叫ToString(value)，而ToString 也給了一個對應的結果表。表格如下：

規則：

#參數類型傳回#Undefined「undefined」#Null「null」##BooleanNumber

如果參數是true，則回傳「true」。參數為false，回傳「false」

結果有很多種，例如NaN 和Infinity

#String

傳回與之相等的值

範例：2.2 原始值轉數字有時我們需要將非數字值當作數字來使用，例如數學運算。為此ES5 規範在9.3 節定義了抽象運算ToNumber#，類似ToString，它也有一定的轉換規則：##參數型別回傳true1false0undefinedNaN#null0

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

########################################################################## #String######傳回與之相等的值，但如果處理失敗則傳回NaN#############

console.log(Number(true)); // 1console.log(Number(false)); // 0console.log(Number(undefined)); // NaNconsole.log(Number("余光")); // NaNconsole.log(Number("1")); // 1

2.3 原始值转布尔

我们使用 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

2.4 原始值转对象

原始值到对象的转换非常简单，原始值通过调用 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 对象转布尔值

3.0 这一小节是我认为值得一提，但篇幅较少的一点：

对象到布尔值的转换非常简单：所有对象(包括数组和函数)都转换为 true。对于包装对象也是这样，举个例子：

console.log(Boolean(new Boolean(false))); // true

3.1 对象的 toString 和 valueOf

这是一个不太常见的操作，或者说现象，但我们也不能忽略它。

1. 对象=>字符串
2. 对象=>数字

转换都是通过调用待转换对象的一个方法来完成的，在 Js 中，一般待转换对象拥有两个方法：

1. toString
2. valueOf

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

3.2 对象转字符串和数字的基本规则

在我们知道了 toString()和 valueOf()这两个方法后，来看看转换的规则，即什么时候用：ES5 规范 9.8

参数类型	结果
Object	1. primValue = ToPrimitive(input, String) 2. 返回 ToString(primValue)

所谓的 ToPrimitive 方法，其实就是输入一个值，然后返回一个一定是基本类型的值。

我们总结一下，当我们用 String 方法转化一个值的时候：

1. 基本类型：参照 “原始值转字符” 的对应表
2. 引用类型：调用一个ToPrimitive方法，将其转为基本类型，然后再参照 “原始值转字符” 的对应表进行转换。

其实，从对象到数字的转换也是一样：

参数类型	结果
Object	1. primValue = ToPrimitive(input, Number) 2. 返回 ToNumber(primValue)

注意：转字符和数字的时候处理略有不同～

3.3 ToPrimitive

那接下来就要看看 ToPrimitive 了，ES5 规范 9.1

这个返回原始值的方法接受一个输入参数 和一个可选的参数来表示转换类型：

1. input，表示要处理的输入值
   • 如果传入的 input 是 Undefined、Null、Boolean、Number、String 类型，直接返回该值。
2. PreferredType，非必填，表示希望转换成的类型，有两个值可以选，Number 或者 String。
   • 当不传入 PreferredType 时，如果 input 是日期类型，相当于传入 String，否则，都相当于传入 Number。

如果是 ToPrimitive(obj, Number)，处理步骤如下：

• 如果 obj 为 基本类型，直接返回
• 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
• 否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。
• 否则，JavaScript 抛出一个类型错误异常。

如果是 ToPrimitive(obj, String)，处理步骤如下：

• 如果 obj 为 基本类型，直接返回
• 否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。
• 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
• 否则，JavaScript 抛出一个类型错误异常。

所以总结下，对象转字符串(就是 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；

四、涉及到类型转换的运算符

读到这里我们对类型转换有了一定的概念，现在我们再来看看在运算中常见的类型转换问题。

4.1 一元操作符 +

+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 方法我们在之前的小节中提到过

• 如果 obj 为基本类型，直接返回
• 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
• 否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。
• 否则，JavaScript 抛出一个类型错误异常。
• 以 +[] 为例，[] 调用 valueOf 方法，返回一个空数组，因为不是原始值，调用 toString 方法，返回 ""。
• 得到返回值后，然后再调用 ToNumber 方法，"" 对应的返回值是 0，所以最终返回 0。

4.2 一元操作符 ！

一元运算符!显式地将值强制类型转换为布尔值。但是它同时还将真值反转为假值（或者将假值反转为真值）。

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 值

！和 + 运算符是我们最常用的两种显式类型转换运算符，之后我们再看看那些不经意间就被转换类型的操作～

五、常见的类型转换操作

5.1 字符串和数字之间

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操作（第三小节有提）

总结

简单来说就是，如果+的其中一个操作数是字符串（或者通过以上步骤可以得到字符串），则执行字符串拼接；否则执行数字加法。

5.2 被转换成布尔值的操作

现在我们来看看到布尔值的隐式强制类型转换，它最为常见也最容易搞错。相对布尔值，数字和字符串操作中的隐式强制类型转换还算比较明显。

下面的情况会发生布尔值隐式强制类型转换。

• if (…)语句
  • 括号内的条件为true时执行操作；
• for ( let i = 0; i
• 语句中的条件判断表达式即 i true

while (…)和 do…while(…)

• 循环中的条件判断表达式为true;

三目运算 ? ：；

逻辑运算符 ||（逻辑或）和 &&（逻辑与）左边的操作数；

5.3 == 和 ===

谈到类型转换，一定绕不开 == 和 ===。

==用于比较两个值是否相等，当要比较的两个值类型不一样的时候，就会发生类型的转换。

在ES5 规范 11.9.5 中简述了它的规则：

当执行 x == y 时：

• 如果 x 与 y 是同一类型：
  • x 是 Undefined，返回 true
  • x 是 Null，返回 true
  • x 是数字：
    • x 是 NaN，返回 false
    • y 是 NaN，返回 false
    • x 与 y 相等，返回 true
    • x 是+0，y 是-0，返回 true
    • x 是-0，y 是+0，返回 true
  • x 是字符串，完全相等返回 true,否则返回 false
  • x 是布尔值，x 和 y 都是 true 或者 false，返回 true，否则返回 false
  • x 和 y 指向同一个对象，返回 true，否则返回 false
• x 是 null 并且 y 是 undefined，返回 true
• x 是 undefined 并且 y 是 null，返回 true
• x 是数字，y 是字符串，判断 x == ToNumber(y)
• x 是字符串，y 是数字，判断 ToNumber(x) == y
• x 是布尔值，判断 ToNumber(x) == y
• y 是布尔值，判断 x ==ToNumber(y)
• x 不是字符串或者数字，y 是对象，判断 x == ToPrimitive(y)
• x 是对象，y 不是字符串或者数字，判断 ToPrimitive(x) == y

相关免费学习推荐：javascript（视频）

以上是JavaScript專題之七：型別轉換的詳細內容。更多資訊請關注PHP中文網其他相關文章！