強制轉型 & 如何作到轉換型別

# 強制轉型 & 如何作到轉換型別 ###### tags: `JavaScript` `JS 直播班 - 2021 秋季班` JavaScript的資料型態是動態的，依據給予的值型態來決定資料型態如果沒有給定變數的型別，JavaScript 會進行判斷 > ## 附上各型態轉換的結果圖 ![](https://i.imgur.com/KClTPm3.png) ## JS上的顯性轉型、隱性轉型 ### 顯性轉型 就是在程式碼中常看到的字串轉數字、數字轉字串等等，自己手動的將變數轉成自己想要的資料型態 #### 1.ToString 任何非字串的數值都會被強制轉換成字串 **ToString的轉換規則** * undefined => 'undefined' * null => 'null' * true => 'true' * false => 'false' * 非常大或非常小的數字 => '1.23e21'(用指數呈現) * Array(陣列有自己定義的ToString) => [1,2,3].ToString() => '1,2.3'; #### 2.ToNumber 將非數字的數值轉換成數字來做運算 **ToNumber的轉換規則** * undefined => NaN * null => 0 * true => 1 * false => 0 * String => 數字(ex: '123') 或 NaN(ex: 'hello') 附上簡單的範例 ```=JavaScript Number(undefined) // NaN Number(null) // 0 Number(true) // 1 Number(false) // 0 Number('5487') // 5487 Number('Hello world') // NaN ``` #### 3.ToBoolean boolean值只有實際被強制轉型為一個boolean時才會遵循這種規則。 **ToBoolean的轉換規則 Truthly & falsy** 在JS會轉換成false值的會有 * ""(空字串) * 0、-0、NaN * null * undefiend * false 除了以上這些值以外都會轉換成true，其中特別的有 * [] array不管是不是空的 * {} object不管是不是空的 * function x(){} 函式 * '0' 文字的0 * ' ' 包含空白的引號 #### 4.容易搞混的魔王 + ``` =JavaScript const c = "19"; const d = +c; d; // 19 ``` +號並不會做運算，而是會把c字串轉換成number值不過如果程式複雜的話，對於維護程式是不容易管理的，還是避免使用的好~ ##### +號將日期轉換數字 ```=javascript const a = new Date(); +a; // 1600876740123 ``` +號除了可以把string轉換成number還可以將日期轉換成數字 #### 5.parseInt 從一個String中抓出Number，**切記最好只用在String上面** ```=javascript const a = "17"; const b = "17px"; Number(a); // 17 Number(b); // NaN parseInt(a); 17 parseInt(b); 17 ``` ### 隱性轉型 #### 加法 ```=javascript 100 + "100" // "100100" 100 + "ABC" // "100ABC" "ABC" + "XYZ" // "ABCXYZ" ``` 當加號 + 兩側的其中一方是字串的情況下，加號 + 會將兩者都視為「字串」連接在一起。 number 、boolean 、 object 的情況來說，轉型時會去呼叫它們的 .toString() 的「原型方法」去取得對應的字串。 null 與 undefined 則是透過 JavaScript 的 String() 函數來將它們分別轉為 "null" 與 "undefined"。 example: ```=javascript var num1 = 10; var num2 = 100; var str = "10 加 100 的數字會是" + num1 + num2; ``` 猜猜看，此時 `str` 的結果會是什麼？答案是「 "10 加 100 的數字會是10100" 」。會有這樣的結果是由於運算式的計算是「**由左而右**」且「**先乘除後加減**」的模式來運算。也就是說，前面的字串會先與 `num1` 相加，再把結果與 `num2` 做相加。若要避免這樣的問題時，可以在 `num1 + num2` 的算式中，用小括號 `( )` 包覆起來： #### 減法 ```=javascript Infinity - Infinity // NaN -Infinity - -Infinity // NaN -Infinity - Infinity // -Infinity Infinity - -Infinity // Infinity ``` 1. 如果其中一方是 NaN 的話，那麼結果必定是 NaN。 2. 與加號 + 不同的是，當其中一方不是「數字」的情況下： * 基本型別 (如 string 、 boolean 、 undefined 與 null)在做減法運算時，若其中一方屬於基本型別且不是數字的情況，那麼 JavaScript 會在先在背後透過 Number() 嘗試將數值轉為「數字」，再進行運算。 #### 除法 在前後兩者都是數字的情況下，計算結果就是兩個數值的商。但是，在除數為 `0` 的情況下： - 被除數為正數，則結果為 `Infinity` - 被除數為負數，則結果為 `Infinity` - 被除數為 `0`，則結果為 `NaN` 當然，如果有其中一個是 `NaN`，則結果也會是 `NaN` 。如果有其中一個不是數字的話，那麼 JavaScript 就會先在背後以 `Nubmer()` 作轉換後再進行計算。 #### 乘法 ```=javascript 100 * "10" // 1000 100 * abc // NaN 100 * true // 100 100 * false // 0 100 * {} // NaN ``` 在前後兩者都是數字的情況下，計算結果就是兩個數值的乘積。如果計算結果超出 JavaSCript 的數字範圍，那麼就會看結果是正數或負數來決定是 `Infinity` 或是 `-Infinity`。當然如果其中一個是 `NaN`的話，那麼結果必定也是 `NaN`。而依照 IEEE754 標準的規定， `Infinity * 0` 的結果也是 `NaN`。如果有其中一個不是數字的話，那麼 JavaScript 就會先在背後以 `Nubmer()` 作轉換後再進行計算 #### 取餘數 在前後兩者都是數字的情況下，計算結果就是除法運算後的「餘數」。而被除數是 `Infinity` 或 `-Infinity` 的情況下，則取餘數後結果都會是 `NaN`。 ```=javascript Infinity % 0 // NaN Infinity % 100 // NaN Infinity % Infinity // NaN Infinity % -Infinity // NaN ``` 被除數是一般數值，而除數為 Infinity 的情況下，則結果為被除數： ```=javascript 100 % Infinity // 100 0 % Infinity // 0 ``` 被除數是一般數值，而除數為 `0` 的情況下，則結果也是 `NaN`。當然，如果有其中一個是 `NaN`，則結果也會是 `NaN` 。與除法一樣的是，如果有其中一個不是數字的話，那麼 JavaScript 就會先在背後以 `Nubmer()` 作轉換後再進行計算。 ### 參考資料 * [你懂 JavaScript 嗎？#8 強制轉型（Coercion）](https://ithelp.ithome.com.tw/articles/10201512) * [JavaScript 入門 - 強制轉型、Truthy & Falsy、條件式](https://zh-tw.coderbridge.com/series/9e5162da940f473a9f1cfeece124ee98/posts/7574ae0bc9734028b220faa7fb4b894b) * [【這些年我似是非懂的 Javascript】Day 8 - 魔幻邪惡的強制轉型 #第一章 # 心情轉折](https://ithelp.ithome.com.tw/articles/10241735) * [【這些年我似是非懂的 Javascript】Day 9 - 魔幻邪惡的強制轉型 #第二章 #明確的強制轉型](https://ithelp.ithome.com.tw/articles/10242376) * [重新認識 JavaScript: Day 07 「比較」與自動轉型的規則](https://ithelp.ithome.com.tw/articles/10191254)

Read more

BOM 簡單介紹

Vue學習#13 Component 元件化

JS 物件與原型鍊

認識CSS#13 Transform