現代 JavaScript 原始類型轉換你真的學會了嗎？

類型轉換

大多數狀況下，運算符和函數會自動將賦予他們的值轉換爲正確的類型。

好比，alert 會自動將任何值都轉換爲字符串以進行顯示。算術運算符會將值轉換爲數字。

在某些狀況下，咱們須要將值顯式地轉換爲咱們指望的類型。

對象還未歸入討論中

本章不會討論 object 類型。先學習原始類型，以後咱們會學習 object 類型。咱們會在 info:object-toprimitive 一節中學習對象的類型轉換。

字符串轉換

當咱們須要一個字符串形式的值時，就會進行字符串轉換。

好比，alert(value) 將 value 轉換爲字符串類型，而後顯示這個值。

咱們也能夠顯式地調用 String(value) 來將 value 轉換爲字符串類型：

let value = true;
alert(typeof value); // boolean

value = String(value); // 如今，值是一個字符串形式的 "true"
alert(typeof value); // string
複製代碼

字符串轉換最明顯。false 變成 "false"，null 變成 "null" 等。

數字型轉換

在算術函數和表達式中，會自動進行 number 類型轉換。

好比，當把除法 / 用於非 number 類型：

alert( "6" / "2" ); // 3, string 類型的值被自動轉換成 number 類型後進行計算
複製代碼

咱們也可使用 Number(value) 顯式地將這個 value 轉換爲 number 類型。

let str = "123";
alert(typeof str); // string

let num = Number(str); // 變成 number 類型 123

alert(typeof num); // number
複製代碼

當咱們從 string 類型源（如文本表單）中讀取一個值，但指望輸入一個數字時，一般須要進行顯式轉換。

若是該字符串不是一個有效的數字，轉換的結果會是 NaN。例如：

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN，轉換失敗
複製代碼

number 類型轉換規則：

值	變成……
undefined	NaN
null	0
true 和 false	1 and 0
string	去掉首尾空格後的純數字字符串中含有的數字。若是剩餘字符串爲空，則轉換結果爲 0。不然，將會從剩餘字符串中「讀取」數字。當類型轉換出現 error 時返回 NaN。

譯註：字符串轉換爲 number 類型時，除了 undefined、null 和 boolean 三種特殊狀況，只有字符串是由空格和數字組成時，才能轉換成功，不然會出現 error 返回 NaN。

例子：

alert( Number(" 123 ") ); // 123
alert( Number("123z") );      // NaN（從字符串「讀取」數字，讀到 "z" 時出現錯誤）
alert( Number(true) );        // 1
alert( Number(false) );       // 0
複製代碼

請注意 null 和 undefined 在這有點不一樣：null 變成數字 0，undefined 變成 NaN。

加號 '+' 鏈接字符串

幾乎全部的算術運算符都將值轉換爲數字進行運算，加號 + 是個例外。若是其中一個運算元是字符串，則另外一個也會被轉換爲字符串。

而後，將二者鏈接在一塊兒：

alert( 1 + '2' ); // '12' (字符串在加號右邊)
alert( '1' + 2 ); // '12' (字符串在加號左邊)
複製代碼

這僅僅發生在至少其中一方爲字符串的狀況下。不然值會被轉換爲數字。

布爾型轉換

布爾（boolean）類型轉換是最簡單的一個。

它發生在邏輯運算中（稍後咱們將進行條件判斷和其餘相似的東西），可是也能夠經過調用 Boolean(value) 顯式地進行轉換。

轉換規則以下：

• 直觀上爲「空」的值（如 0、空字符串、null、undefined 和 NaN）將變爲 false。
• 其餘值變成 true。

好比：

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
複製代碼

請注意：包含 0 的字符串 "0" 是 true

一些編程語言（好比 PHP）視 "0" 爲 false。但在 JavaScript 中，非空的字符串老是 true。

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 空白, 也是 true (任何非空字符串是 true)
複製代碼

總結

有三種經常使用的類型轉換：轉換爲 string 類型、轉換爲 number 類型和轉換爲 boolean 類型。

字符串轉換 —— 轉換髮生在輸出內容的時候，也能夠經過 String(value) 進行顯式轉換。原始類型值的 string 類型轉換一般是很明顯的。

數字型轉換 —— 轉換髮生在進行算術操做時，也能夠經過 Number(value) 進行顯式轉換。

數字型轉換遵循如下規則：

值	變成……
undefined	NaN
null	0
true / false	1 / 0
string	「按原樣讀取」字符串，兩端的空白會被忽略。空字符串變成 0。轉換出錯則輸出 NaN。

布爾型轉換 —— 轉換髮生在進行邏輯操做時，也能夠經過 Boolean(value) 進行顯式轉換。

布爾型轉換遵循如下規則：

值	變成……
0, null, undefined, NaN, ""	false
其餘值	true

上述的大多數規則都容易理解和記憶。人們一般會犯錯誤的值得注意的例子有如下幾個：

• 對 undefined 進行數字型轉換時，輸出結果爲 NaN，而非 0。
• 對 "0" 和只有空格的字符串（好比：" "）進行布爾型轉換時，輸出結果爲 true。

咱們在本小結沒有講 object 類型的轉換。在咱們學習完更多關於 JavaScript 的基本知識後，咱們會在專門介紹 object 的章節 對象原始值轉換 中詳細講解 object 類型轉換。

做業題

先本身作題目再看答案。

類型轉換

重要程度：⭐️⭐️⭐️⭐️⭐️

下面這些表達式的結果是什麼？

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
7 / 0
" -9 " + 5
" -9 " - 5
null + 1
undefined + 1
" \t \n" - 2
複製代碼

好好思考一下，把它們寫下來而後和答案比較一下。

答案：

在微信公衆號「技術漫談」後臺回覆 1-2-6 獲取本題答案。

---

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 並列的 JavaScript 學習教程。

在線免費閱讀：zh.javascript.info

---

掃描下方二維碼，關注微信公衆號「技術漫談」，訂閱更多精彩內容。