最近在看冴羽的博客，發現東西太多，也難記。所以還是決定照著過一遍，加深印象，也便于以后查閱。
原文請看：冴羽的博客；
接下來進入正題，先是基本類型之間的轉換：

js數據類型可以分為兩類：
可變的引用類型: object(array ,function,正則);
不可變的原始類型: null, undefined, number, string, boolean, symbol(es6)

一、原始類型的轉換

1.1 原始值轉布爾

轉換成布爾類型，在 JavaScript 中，只有 6 種值可以被轉換成 false，其他都會被轉換成 true。

console.log(Boolean()) // false console.log(Boolean(false)) // false console.log(Boolean(undefined)) // false console.log(Boolean(null)) // false console.log(Boolean(+0)) // false console.log(Boolean(-0)) // false console.log(Boolean(NaN)) // false console.log(Boolean("")) // false

1.2 原始值轉數字

Number（）
我們可以使用 Number 函數將類型轉換成數字類型，如果參數無法被轉換為數字，則返回 NaN。

根據規范（上圖），如果 Number 函數不傳參數，返回 +0，如果有參數，調用 ToNumber(value)。
注意這個 ToNumber 表示的是一個底層規范實現上的方法，并沒有直接暴露出來。

而 ToNumber 則直接給了一個對應的結果表。表如下：

console.log(Number()) // +0console.log(Number(undefined)) // NaN console.log(Number(null)) // +0console.log(Number(false)) // +0 console.log(Number(true)) // 1console.log(Number("123")) // 123 console.log(Number("-123")) // -123 console.log(Number("1.2")) // 1.2 console.log(Number("000123")) // 123 console.log(Number("-000123")) // -123console.log(Number("0x11")) // 17console.log(Number("")) // 0 console.log(Number(" ")) // 0console.log(Number("123 123")) // NaN console.log(Number("foo")) // NaN console.log(Number("100a")) // NaN

Number傳入一個字符串，如果有一個字符不是數字，結果就會返回NaN;我們還會使用更加靈活的parseInt和parseFloat。
parseInt只解析整數，parseFloat可以解析整數和浮點數；
parseInt 和 parseFloat 都會跳過任意數量的前導空格，盡可能解析更多數值字符，并忽略后面的內容。如果第一個非空格字符是非法的數字直接量，將最終返回 NaN：

console.log(parseInt("3 abc")) // 3 console.log(parseFloat("3.14 abc")) // 3.14 console.log(parseInt("-12.34")) // -12 console.log(parseInt("0xFF")) // 255 console.log(parseFloat(".1")) // 0.1 console.log(parseInt("0.1")) // 0

1.3 原始值轉字符

我們使用 String 函數將類型轉換成字符串類型，依然先看 規范15.5.1.1中有關 String 函數的介紹：

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

console.log(String()) // 空字符串console.log(String(undefined)) // undefined console.log(String(null)) // nullconsole.log(String(false)) // false console.log(String(true)) // trueconsole.log(String(0)) // 0 console.log(String(-0)) // 0 console.log(String(NaN)) // NaN console.log(String(Infinity)) // Infinity console.log(String(-Infinity)) // -Infinity console.log(String(1)) // 1

注意這里的 ToString 和上一節的 ToNumber 都是底層規范實現的方法，并沒有直接暴露出來。

1.4 原始值轉對象

原始值到對象的轉換非常簡單，原始值通過調用 String()、Number() 或者 Boolean() 構造函數，轉換為它們各自的包裝對象。
null 和 undefined 屬于例外，當將它們用在期望是一個對象的地方都會造成一個類型錯誤 (TypeError) 異常，而不會執行正常的轉換。

var a = 1; console.log(typeof a); // number var b = new Number(a); console.log(typeof b); // object

二、引用類型的轉換

2.1 對象轉布爾值

對象到布爾值的轉換非常簡單：所有對象(包括數組和函數)都轉換為 true。對于包裝對象也是這樣，舉個例子：

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

2.2.1對象轉字符串和數字

對象到字符串和對象到數字的轉換都是通過調用待轉換對象的一個方法來完成的。而 JavaScript 對象有兩個不同的方法來執行轉換，一個是 toString，一個是 valueOf。注意這個跟上面所說的 ToString 和 ToNumber 是不同的，這兩個方法是真實暴露出來的方法。

toString():
所有的對象除了 null 和 undefined 之外的任何值都具有 toString 方法；
通常情況下，它和使用 String 方法返回的結果一致。toString 方法的作用在于返回一個反映這個對象的字符串，然而這才是情況復雜的開始。

Object.prototype.toString.call({a: 1}) // "[object Object]" ({a: 1}).toString() // "[object Object]" ({a: 1}).toString === Object.prototype.toString // true

我們可以看出當調用對象的 toString 方法時，其實調用的是 Object.prototype 上的 toString 方法。

然而 JavaScript 下的很多類根據各自的特點，定義了更多版本的 toString 方法。例如:

數組的 toString 方法將每個數組元素轉換成一個字符串，并在元素之間添加逗號后合并成結果字符串。

函數的 toString 方法返回源代碼字符串。

日期的 toString 方法返回一個可讀的日期和時間字符串。

RegExp 的 toString 方法返回一個表示正則表達式直接量的字符串。

console.log(({}).toString()) // [object Object]console.log([].toString()) // "" console.log([0].toString()) // 0 console.log([1, 2, 3].toString()) // 1,2,3 console.log((function(){var a = 1;}).toString()) // function (){var a = 1;} console.log((/\d+/g).toString()) // /\d+/g console.log((new Date(2010, 0, 1)).toString()) // Fri Jan 01 2010 00:00:00 GMT+0800 (CST)

valueOf():
而另一個轉換對象的函數是 valueOf，表示對象的原始值。
默認的 valueOf 方法返回這個對象本身，數組、函數、正則簡單的繼承了這個默認方法，也會返回對象本身。
日期是一個例外，它會返回它的一個內容表示: 1970 年 1 月 1 日以來的毫秒數。

var arr = [1,2,3] console.log(arr.valueOf()) //[1, 2, 3] var date = new Date(2017, 4, 21); console.log(date.valueOf()) // 1495296000000

2.2.2對象接著轉字符串和數字

了解了 toString 方法和 valueOf 方法，我們分析下從對象到字符串是如何轉換的。看規范 ES5 9.8，其實就是 ToString (value)方法的對應表，只是這次我們加上 Object 的轉換規則：


所謂的 ToPrimitive 方法，其實就是輸入一個值，然后返回一個一定是基本類型的值。我們總結一下，當我們用 String 方法轉化一個值的時候:

如果是基本類型，就參照 “原始值轉字符” 這一節的對應表;

如果不是基本類型，我們會將調用一個 ToPrimitive 方法，將其(對象)轉為基本類型，然后再參照“原始值轉字符” 這一節的對應表進行轉換。

雖然轉換成基本值都會使用 ToPrimitive 方法，但傳參有不同，最后的處理也有不同，轉字符串調用的是 ToString，轉數字調用 ToNumber。

接下來讓我看一下，ToPrimitive（）是如何將對象轉化為基本值類型的！

2.2.3 ToPrimitive

讓我們看規范 9.1，函數語法表示如下：

//input 表示要處理的輸入值 //PrefefrredType, 非必填，表示希望轉換成的類型，有兩個值可以選擇， Number和String. ToPrimitive(input[, PreferredType])

1.當不傳入 PreferredType 指定裝換類型時：
如果 input 是日期類型，相當于傳入 String，否則，都相當于傳入 Number；如果傳入的 input 是 Undefined、Null、Boolean、Number、String 基本類型，直接返回該值。

2.ToPrimitive(obj, Number)時：

1.如果 obj 為 基本類型，直接返回
2.否則，調用 valueOf 方法，如果返回一個原始值，則 JavaScript 將其返回。
3.否則，調用 toString 方法，如果返回一個原始值，則 JavaScript 將其返回。
4.否則，JavaScript 拋出一個類型錯誤異常。

3.ToPrimitive(obj, String)時：
1.如果 obj為 基本類型，直接返回
2.否則，調用 toString 方法，如果返回一個原始值，則 JavaScript 將其返回。
3.否則，調用 valueOf 方法，如果返回一個原始值，則 JavaScript 將其返回。
4.否則，JavaScript 拋出一個類型錯誤異常。

2.2.4 對象轉字符串

所以總結下，對象轉字符串可以概括為：

如果對象具有 toString 方法，則調用這個方法。如果他返回一個原始值，JavaScript 將這個值轉換為字符串，并返回這個字符串結果。
如果對象沒有 toString 方法，或者這個方法并不返回一個原始值，那么 JavaScript 會調用 valueOf 方法。如果存在這個方法，則 JavaScript 調用它。如果返回值是原始值，JavaScript 將這個值轉換為字符串，并返回這個字符串的結果。
否則，JavaScript 無法從 toString 或者 valueOf 獲得一個原始值，這時它將拋出一個類型錯誤異常。

2.2.5 對象轉數字

對象轉數字的過程中，JavaScript 做了同樣的事情，只是它會首先嘗試 valueOf 方法

如果對象具有 valueOf 方法，且返回一個原始值，則 JavaScript 將這個原始值轉換為數字并返回這個數字
否則，如果對象具有 toString 方法，且返回一個原始值，則 JavaScript 將其轉換并返回。
否則，JavaScript 拋出一個類型錯誤異常。

console.log(Number({})) // NaN console.log(Number({a : 1})) // NaNconsole.log(Number([])) // 0 console.log(Number([0])) // 0 console.log(Number([1, 2, 3])) // NaN console.log(Number(function(){var a = 1;})) // NaN console.log(Number(/\d+/g)) // NaN console.log(Number(new Date(2010, 0, 1))) // 1262275200000 console.log(Number(new Error('a'))) // NaN

注意，在這個例子中，[] 和 [0] 都返回了 0，而 [1, 2, 3] 卻返回了一個 NaN。我們分析一下原因：

當我們 Number([]) 的時候，先調用 [] 的 valueOf 方法，此時返回 []，因為返回了一個對象而不是原始值，所以又調用了 toString 方法，此時返回一個空字符串，接下來調用 ToNumber 這個規范上的方法，參照對應表，轉換為 0, 所以最后的結果為 0。

而當我們 Number([1, 2, 3]) 的時候，先調用 [1, 2, 3] 的 valueOf 方法，此時返回 [1, 2, 3]，再調用 toString 方法，此時返回 1,2,3，接下來調用 ToNumber，參照對應表，因為無法轉換為數字，所以最后的結果為 NaN。

總結

以上是生活随笔為你收集整理的Js之类型转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。