JavaScript中類型轉換的示例

小編給大家分享一下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 也給了一個對應的結果表。表如下：

規則：

舉例：

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

2.2 原始值轉數字

有時我們需要將非數字值當作數字來使用，比如數學運算。為此 ES5 規范在 9.3 節定義了抽象操作ToNumber，類似 ToString，它也有一定的轉換規則：

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

所謂的 ToPrimitive 方法，其實就是輸入一個值，然后返回一個一定是基本類型的值。

我們總結一下，當我們用 String 方法轉化一個值的時候：

1. 基本類型：參照 “原始值轉字符” 的對應表

2. 引用類型：調用一個ToPrimitive方法，將其轉為基本類型，然后再參照 “原始值轉字符” 的對應表進行轉換。

其實，從對象到數字的轉換也是一樣：

注意：轉字符和數字的時候處理略有不同～

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 < 10; i++ )

• 語句中的條件判斷表達式即 i < 10 為true

• while (…)和 do…while(…)

• 循環中的條件判斷表達式為true;

• 三目運算 ? ：；

• 邏輯運算符 ||（邏輯或）和 &&（邏輯與）左邊的操作數；

5.3 == 和 ===

談到類型轉換，一定繞不開 == 和 ===。

==用于比較兩個值是否相等，當要比較的兩個值類型不一樣的時候，就會發生類型的轉換。

在ES5 規范 11.9.5 中簡述了它的規則：

當執行 x == y 時：

• 如果 x 與 y 是同一類型：

• x 是 NaN，返回 false

• y 是 NaN，返回 false

• x 與 y 相等，返回 true

• x 是+0，y 是-0，返回 true

• x 是-0，y 是+0，返回 true

• x 是 Undefined，返回 true

• x 是 Null，返回 true

• x 是數字：

• 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中類型轉換的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！