一、常見類型轉換方法
1. parseInt()
簡介
parseInt() 方法可以根據給定的進制數把一個字符串解析成整數。
parseInt()在轉換字符串時：
- 它會忽略字符串前面的空格，直到找到第一個非空格字符。
- 如果第一個非空格字符不是數字字符或符號，就會返回NaN。
- 如果第一個非空格字符是數字字符，它會繼續解析第二個字符，直到解析完所有后續字符或者遇到了一個非數字字符。
在沒有指定基數，或者基數為 0 的情況下，JavaScript 作如下處理：
- 如果字符串 string 以"0x"或者"0X"開頭, 則基數是16 (16進制).
- 如果字符串 string 以"0"開頭, 基數是8（八進制）或者10（十進制），具體是哪個基數由實現環境決定。ECMAScript 5 規定使用10，但是並不是所有的瀏覽器都遵循這個規定。故永遠都要明確給出radix參數的值。
- 如果字符串 string 以其它任何值開頭，則基數是10 (十進制)。
既有 全局方法paresInt(),也有ES6的 Number.paresInt().
語法
parseInt(string[, radix])
Params：
-
string:
被解析的值。如果不是一個字符串，則將其轉換為字符串。字符串開頭的空白符將會被忽略。 -
radix:
一個介於2和36之間的整數(數學系統的基礎)，表示上述字符串的基數。總是指定該參數可以保證結果可預測。當忽略該參數時，不同的實現環境可能產生不同的結果。
返回值：
返回解析后的整數值。 如果被解析參數的第一個字符無法被轉化成數值類型，則返回 NaN
示例:
parseInt('1234blue',10);//1234
parseInt('',10);//NaN
parseInt('0xA',16);//10
parseInt(22.5, 10);//22
parseInt('10',2);//2
parseInt('10',8);//8
parseInt('10',10);//10
parseInt('10',16);//16
2. parseFloat()
簡介
parseFloat() 函數解析一個字符串參數並返回一個浮點數。
pareFloat()在解析字符串時：
- 與paresInt()類似，parseFloat()也是從第一個字符開始解析，一直遇到第一個無效的浮點數字符為止。
- 如果在解析過程中遇到了除了正負號(+或-),數字(0-9),小數點,或者科學記數法中的指數(e或E)以外的字符,則它會忽略該字符以及之后的所有字符,返回當前已經解析到的浮點數。
- 字符串中的第一個小數點是有效的，第二個小數點就是無效的了。
- 如果字符串包含的是一個可解析為整數的數，即沒有小數點或小數點后面為0,則會得到整數。
與parseInt()的區別：
| 對比的方面 | parseFloat() | parseInt() |
|---|---|---|
| 前導0 | 終都會忽略前導的0 | 如果字符串 string 以"0x"或者"0X"開頭, 則基數是16 (16進制); 如果字符串 string 以"0"開頭, 基數是8（八進制）或者10（十進制） |
| 參數個數 | 只有一個參數， 只解析十進制值 | 兩個參數，第二個參數是介於2和36之間的整數，表示進制基數 |
既有 全局方法paresFloat(),也有ES6的 Number.parseFloat().
語法
parseFloat(string)
Params:
- string:需要被解析成為浮點數的字符串.
示例
parseFloat('3.14')//3.14
parseFloat('314e-2')//3.14
parseFloat('0.0314e+2')//3.14
parseFloat('3.14xxxaa')//3.14
parseFloat('0xA')//0
parseFloat('0908.5')//908.5
parseFloat('22.34.2')//22.34
3.Number()
簡介
Number()可以用於任何數據類型。以上parseInt()和parseFloat()則專門用於字符串。
Number()的轉換規則：
| 被轉換值 | 轉換規則 |
|---|---|
| Boolean | true轉換為1，false轉換為0 |
| Number | 簡單的傳入和傳出 |
| null | 返回為0 |
| undefined | 返回NaN |
| String | |
| 如果字符串中只包含數字 | 轉換為十進制數，前導0會被忽略 |
| 如果字符串中包含有效的浮點格式 | 轉換為對應浮點數值，前導0會被忽略 |
| 如果字符串中包含有效的十六進制格式，如‘0xf' | 轉換為相同大小的十進制值 |
| 如果字符串為空，即為'' | 返回0，與parseInt,pareFloat將''轉換為NaN不同 |
| 如果字符串中包含除上述以外的字符 | 返回NaN |
| 對象 | 調用對象的ValueOf()方法，然后依照上述規則轉換；如果valueOf得到NaN,則調用對象的toString()方法，然后依照上述規則轉換 |
語法
Number(value)
示例
Number(false)//0
Number(12)//12
Number(null)//0
Number(undefined)//NaN
Number('')//0
Number('0011')//11
Number('1.22.2')//NaN
Number('1.22')//1.22
Number('0xff')//255
Number('Hello')//NaN
Number({a:0,b:1})//NaN
Number('100%')//NaN
注意：
parseInt('10px');//10
Number('10px');//NaN
parseInt('');//NaN
Number('');//0
4. 一元正號(+)
一元正號運算符（unary plus operator）位於其操作數前面，計算其操作數的數值，如果操作數不是一個數值，會嘗試將其轉換成一個數值。
盡管一元負號也能轉換非數值類型，但是 一元正號是轉換其他對象到數值的最快方法,也是最推薦的做法，因為 它不會對數值執行任何多余操作。
| 原值 | 一元正號轉換結果 |
|---|---|
| 字符串 | 整數、浮點數 |
| true | 1 |
| false | 0 |
| null | 0 |
+3 // 3
+"3" // 3
+true // 1
+false // 0
+null // 0
5. Number.prototype.toString()
簡介
返回指定 Number 對象的字符串表示形式。
Number 對象覆蓋了 Object 對象上的 toString() 方法，它不是繼承的 Object.prototype.toString()。
- 如果被轉換的是負數，則會保留負號
- 進行數字到字符串的轉換時，建議用小括號將要轉換的目標括起來，防止出錯。
語法
num.toString([radix])
參數:
- num:待轉換的Number
- radix: 指定要用於數字到字符串的轉換的基數(從2到36)。如果未指定 radix 參數，則默認值為 10。如果radix不在 2到36之間,將會拋出錯誤 RangeError。
示例
(17).toString()//"17"
(11.22).toString()//"11.22"
(254).toString(16)//"fe"
(-10).toString(2)//"-1010"
(-0xff).toString(2)//"-11111111"
二、一些情景帶來的自動類型轉換
1. 條件中的值自動轉換為布爾值
發生場景
有時候，一些變量作為條件語句的判斷條件，該變量就會被自動轉換為布爾值。
例如:
val ? doA(): doB()
if(val) {
doA()
}
自動轉換規則
| 值類型 | 轉換的布爾值 |
|---|---|
| undefined | false |
| null | false |
| Boolean | false就是false ,true就是true |
| Number | 0、+0、-0、NaN是false，其他為true |
| String | ''為false,其他為true |
| Object | true |
示例
function testTrue(value) {
value ? console.log('true'): console.log('false');
}
testTrue(false)//false
testTrue(new Boolean(false))//true
testTrue(null)//false
testTrue(undefined)//false
testTrue('')//false
testTrue('lalala')//true
testTrue(NaN)//false
testTrue(new Number(0))//true
testTrue({a:false})//true
2. 相等操作符==帶來的自動類型轉換
發生場景
使用==時，不同類型的值也可以看作相等。
轉換規則
x,y表示等號兩邊的兩個值的類型。
| 類型(x) | 類型(y) | 結果 |
|---|---|---|
| null | undefined | true |
| number | string | 把y轉化為number,再與x進行比較 |
| boolean | 任何類型 | 把x轉換為number,再與x進行比較 |
| string或number | object | 把y轉換為原始值，再與x進行比較 |
| object | object | 如果它們指向同一個對象，則返回true;否則返回false |
把其他類型的值轉換為number，規則如下:
| 值類型 | 結果 |
|---|---|
| undefined | NaN |
| null | +0 |
| bool | 如果是true，結果為1；如果是false，結果為0 |
| string | 解析為數字。如果字符串中包含字母，就返回NaN；如果是由數字字符組成，就返回數字。 |
| object | Number(將值轉換為原始值) |
將對象轉換為原始值，規則如下：
如果對象的valueOf()方法返回原始值，則返回原始值；如果對象的toString()方法返回原始值，則返回原始值；其他情況返回一個錯誤
Tips:Object.prototype.valueOf()
valueOf()方法返回指定對象的原始值
JavaScript調用valueOf方法將對象轉換為原始值。很少需要自己調用valueOf方法；當遇到要預期的原始值的對象時，JavaScript會自動調用它,比如==比較的時候有一側是Object。
JavaScript的許多內置對象都重寫了該函數，以實現更適合自身的功能需要。因此，不同類型對象的valueOf()方法的返回值和返回值類型均可能不同。
不同類型對象的valueOf()方法的返回值:
| 對象 | 返回值 |
|---|---|
| Array | 數組對象本身 |
| Boolean | 布爾值 |
| Date | 從 1970 年 1 月 1 日午夜開始計的毫秒數 UTC。 |
| Function | 函數本身 |
| Number | 數字值 |
| Object | 對象本身 |
| String | 字符串值 |
| Math和Error | 沒有valueOf方法 |
語法
obj.valueOf()
Tips:Object.prototype.toString()
toString() 方法返回一個表示該對象的字符串。
每個對象都有一個toString()方法，當該對象被表示為一個文本值時，或者一個對象以預期的字符串方式引用時自動調用。默認情況下，toString()方法被每個Object對象繼承。如果此方法在自定義對象中未被覆蓋，toString() 返回 "[object type]"，其中type是對象的類型。
語法
obj.toString()
用例：使用toString()檢測對象類型:
Object.prototype.toString.call(new Array())//"[object Array]"
Object.prototype.toString.call([1,2,3])//"[object Array]"
Object.prototype.toString.call(new Date())//"[object Date]"
Object.prototype.toString.call(new String('hhh'))//"[object String]"
Object.prototype.toString.call(Math)//"[object Math]"
Object.prototype.toString.call(undefined)//"[object Undefined]"
Object.prototype.toString.call(null)//"[object Null]"
示例
[] == ![] //true
/* 轉換步驟
* 右側[]為object，自動轉換為true，取反后變成false
* 根據"轉換規則"表格的第三條，boolean和其他類型值比較時要把boolean值先轉換為Number, 右側的false轉換為0
* 根據"轉換規則"表格的第四條，object和number或string比較時要轉換為原始值，即[].toString()，得到''。這時即是比較''==0
* 根據"轉換規則"表格的第二條，number和string類型比較要先把string類型化為number, Number('')得到0。這時即是比較 0==0
× 得到結果true
*/
3. 四則運算符帶來的類型轉換
轉換規則
- 加法運算: 一方是字符串，另一方也會被轉換為字符串類型。加法運算會觸發3種類型轉換
- 將值轉換為原始值
- 將值轉換為數字
- 將值轉化為字符串
- 其他運算：只要其中一方是數字，另一方也會被轉換為數字
示例
1 + '1' //'11'
2 * '2' //4
[1,2] + [3,4] //'1,23,4'
/* 轉換步驟
* [1,2].toString() -> '1,2'
* [3,4].toString() -> '3,4'
* '1,2' + '3,4' -> '1,23,4'
*/
'a' + +'b' //'aNaN'
/* 轉換步驟
* +'b' -> 'NaN'
* 'a' + 'NaN' -> 'aNaN'
*/
參考資料
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
《JavaScript高級程序設計》3.4.5 4.
《你不知道的JavaScript》1.3.3,1.3.4