avaScript中的數據類型非常靈活；將一種類型轉為另外一種數據類型，如：將string類型的1轉換為數字類型的1；

為什么要進行類型轉換：因為數據之間的運算需要是同類型的運算，如果不同類型進行運算，需要將其轉換為同一種類型后再進行運算。

類型轉換分為兩種：強制類型轉換和自動類型轉換；

1）自動轉換：

在運行過程中根據運算的語意環境，會自動進行類型轉換；

var a="2",b="1";
console.log(a-b);
b=true;
console.log(a-b);

注：最經典的是用在if語句中的條件中：

var car=new Object();
if(car){
    console.log("汽車");
}

2）強制（顯式）類型轉換：

盡管JavaScript可以自動進行類型轉換，但有時仍需要顯示轉換，或者有時為了使代碼變得更加清晰易讀。

使用String()、Number()、Boolean()等函數強制轉換；

a）轉換為數值：

有3個函數可以把非數值轉換為數值：Number()、parseInt()、parseFloat()；Number()可以用于任何類型，而另外兩個則專門用于把字符串轉換成數值；這三個函數對于同樣的輸入會有不同的返回結果；

Number()函數：轉換規則如下：

如果是Boolean值，true和false分別被轉換為1和0；

如果是數字值，會直接返回該數值；

如果是undefined，返回NaN；

如果是null，返回0；

如果是字符串，則遵循以下規則：如果字符串中只包含數字（包括前面的正號或負號），則將其轉換為十進制數，如“123”會變成123，而“011“會變成11（注：前導零忽略了）；如果字符串中包含有效的浮點格式，如”1.1“，會被轉換為浮點數值（同樣，也忽略前導零）；如果字符串包含有效的十六進制格式 ，如”0xf“，則被轉換為相同大小的十進制數；會忽略字符串前面的空格；如果字符串是空的（不包含任何字符），則轉換為0；如果字符串中包含除上述格式之外的字符，則被轉換為NaN；

如果是對象，則調用對象的valueOf()方法，然后依照前面的規則轉換返回的值；

一元操作符（+、-）的操作與Number()函數相同，會將操作數轉換為數字；

var x="w";
console.log(typeof +x);  // 等價于 x - 0

parseInt()和parseFloat()函數：

由于Number()函數在轉換字符串時比較復雜而且不夠合理，并且只能基于十進制數進行轉換，且不能出現非法的尾隨字符，因此在處理整數的時候更常用的是parseInt()和parseFloat()函數；

二者是全局函數，不從屬于任何對象的方法；

其在轉換時，更多的是看其是否符合數值模式；它會忽略字符串前面的空格，直到找到第一個非空字符；如果第一個字符不是數字字符或者負號，其會返回NaN，即parseInt()轉換空字符串時會返回NaN（Number不會）；如果第一個字符是數字，parseInt()會繼續解析第二個字符，直到解析完后續所有字符或遇到到一個非數字字符；如：

console.log(parseInt("123red"));  // 123
console.log(parseInt("    8a"));  // 8
console.log(parseInt(22.5));  // 22
console.log(parseInt("wang"));  // NaN
console.log(parseInt(""));  // NaN

parseInt()可以識別出十六進制數，識別不了八進制，在解析八進制時，去除零轉換為十進制；

console.log(parseInt("0xAF"));  // 10*16 + 15=175
console.log(parseInt("  0xAFwangwei"));  // 175
console.log(parseInt("070"));  // 70

parseInt()在識別八進制時，第3版可以識別，但第5版識別不了，為了解決這個問題，可以為parseInt()指定第二個參數：轉換基數，如：

console.log(parseInt("0xAF",16));  // 175
console.log(parseInt("070",8));  // 56

在指定了進制后，字符串可以不帶前面的“0x“或“0”，如：

console.log(parseInt("AF",16));  // 175
console.log(parseInt("70",8));  // 56

注：當然除了八進制，十六進制，還可以指定其他進制；如：

console.log(parseInt("11",2));  // 1*2 + 1=3
console.log(parseInt("ff",16));  // 15 * 16 + 15=255
console.log(parseInt("zz",36));  // 35 * 36 + 35=1295
console.log(parseInt("077",8));  // 7 * 8 + 7=63
console.log(parseInt("077",10));  // 7 * 10 + 7=77

與parseInt()類似，parseFloat()也是如此，但如果字符串里有兩個小數點，第二個小數點就是無效的了。

console.log(parseFloat("22.23.5"));  // 22.23

parseFloat()只能解析十進制數，會忽略字符串的前導零，即十六進制數會被始終轉換成0；

如果字符串包含的是一個可解析為整數的值，或者小數點后是零，parseFloat()會返回整數；

console.log(parseFloat("123abc"));  // 123
console.log(parseFloat("123.56abc"));  // 123.56
console.log(parseFloat("0xA"));  // 0
console.log(parseFloat("22.5"));  // 22.5
console.log(parseFloat("0909.5"));  // 909.5
console.log(parseFloat("3.125e6"));   // 3125000

b) 轉換為字符串：

要把一個值轉換為一個字符串有兩種方式；第一種是使用幾乎每個值都有的toString()方法；該方法會返回相應值的字符串；

var age=18;
var ageString=age.toString();
var found=true;
console.log(found);  // "true" ，實際上調用了：found.toString()或found.valueof();

注：數值、布爾值、對象和字符串值都有toString()方法，但null和undefined值沒有這個方法；

可以為toString()指定一個可選的基數（radix）的參數；默認情況下，toString()方法以十進制格式返回數值的字符串表示；通過設置基數，可以輸出其他進制表示的字符串；如：

var age=18;
console.log(age.toString(2));  // 10010
console.log(age.toString(8));  // 22
console.log(age.toString(16));  // 12

第二種方法：使用String()，這個函數可以將任何類型的值轉換為字符串，包括null或undefined；

轉換規則：如果值有toString()方法，則調用該方法（沒有參數）；如果值是null，則返回null；如果是undefined，則返回undefined；

console.log(String(null));  // null
console.log(String(undefined));  // undefined

如果要把某個值轉換為字符串，可以使用加號操作符把它與一個空字符串拼接。

var str=10 + "";
console.log(typeof str);  // string

c）轉換為Boolean：

可以使用轉型函數Boolean()，如：var message="zero"; alert(Boolean(message));

使用Boolean()，會返回一個Boolean一個值，但返回的值是true還是false，取決于要轉換值的數據類型及其實際值；

這些轉換規則一般用在控制語句（如if語句）自動執行相應的Boolean轉換，如：

var msg="zero";
if(msg){
    console.log(msg);
}

一元“！”運算符也將其操作數轉換為布爾值并取反，這是在代碼中進行這種類型轉換的慣用用法：

var x="w";
console.log(!!x);  // 等價于 Boolean(x)

檢測類型：

typeof操作符：

ECMAScript中的數據是松散類型的，因此需要有一種方法來檢測給定的變量的數據類型：typeof，其會返回以下字符串：

undefined值未定義、boolean布爾值、string字符串、number數值、object對象或null、function函數；

var msg="zeronetwork";
console.log(typeof msg);
console.log(typeof(msg));
console.log(typeof 18);

說明：typeof是一個操作而非不是一個函數，因此可以不使用括號；

注：有時typeof會返回一個令人迷惑但技術上卻正確的值，如：typeof null，會返回object，因為特殊值null被認為是一個空的對象引用；

注：從技術角度來說，函數在ECMAScript中是對象，不是一種數據類型；然而，函數也確實有一些特殊的屬性，因此通過typeof操作符來區分函數和其他對象是有必要的。

instanceof操作符：

雖然typeof是個非常有用的工具，但是在檢測引用類型的值時，用處不大；有時，想確認一個對象具體是什么類型的對象，就需要使用instanceof操作符了；

語法：result=variable instanceof constructor

如果變量是引用類型的實例，其會返回true，如：

var num=1;
console.log(num instanceof Number);
var person=new Object();
console.log(person instanceof Object);
var color=new Array();
alconsole.log(color instanceof Array);
var pattern=new RegExp();
console.log(pattern instanceof RegExp);

說明：根據規定，所有引用類型的值都是Object的實例；因此，在檢測一個引用類型值和Object構造函數時，instanceof操作符始終會返回true；

使用instanceof操作符在檢測基本類型的值，會返回false，因為基本類型不是對象。

些你不知道的Javascript隱式類型轉換

JavaScript是一種動態類型、弱類型語言，它在處理字符和字符串時表現出了獨特的靈活性和復雜性。在本文中，我們將從探討JavaScript中的一段通過隱式類型轉換的看似瘋狂但有效的代碼片段到熟知Javascript中的隱式類型轉換規則

瘋狂仍有效的代碼

JavaScript的靈活性和隱式類型轉換能力使得一些看似不合理的代碼片段實際上是有效的。一個典型的例子就是以下代碼：

// a
(![]+[])[+!![]]==="a"

轉換規則

符號運算規則[]空數組，在JavaScript中被視為真值（truthy）。盡管它是一個空數組，但它的存在本身就表示為真。!邏輯非（NOT）運算符，將其操作數的布爾值取反。結果是一個布爾值。!!雙重邏輯非操作，將其操作數轉換為布爾值。這是一個常見的技巧，用于將任何值轉換為布爾值。+加號運算符不僅用于數值相加，當其一個操作數是字符串或可以轉換為字符串時，JavaScript會將另一個操作數也轉換為字符串，然后進行字符串連接操作。

轉換步驟

符號運算過程運算結果![]空數組 [] 在JavaScript中被視為真值（truthy）。對其進行邏輯非操作 !，結果是 false(false+[])[+!![]]![] + []![] 的結果是 false，與空數組 [] 進行字符串連接操作，結果是 "false"("false")[+!![]]!![]布爾值 true("false")[+true]+!![]將布爾值 true 轉換為數值 1("false")[1](![]+[])[+!![]]("false")[1] 獲取字符串 "false" 的第 1 個字符（從 0 開始計數），結果是字符 "a""a"

進一步探索

通過這個例子，我們可以看到JavaScript的靈活性和強大的隱式類型轉換能力。盡管這些代碼片段看起來很瘋狂，但它們確實是有效的，并且展示了JavaScript獨特的特性和魅力。通過使用這六個字符（!, (, ), [, ], +），我們可以構建出各種各樣的代碼表達式。大家可以使用這個網站 JSF u ck 來自行嘗試更多的組合和表達式。比如：

JSF u ck中，用了7455個字符來構建'z', 我們可以看出，逐個解析對于開發人員來說是十分困難的，它的可讀性很差且難以讓人理解，所以我們在日常開發中都不會像這樣來寫代碼，但是我們為了增加開發效率和避免一些隱式類型錯誤問題，我們仍需要去熟悉常見的隱式類型轉換，以下是一些隱式類型轉換的規則。

類型轉換規則

基礎的隱式類型轉換

算術運算符

在算術運算符中，只有字符串與運算符‘+'一起進行轉換時，會轉換成字符串，其他情形下均轉換成數字

// +運算符和字符串一起，均轉換成字符串
console.log(1 + '1')    // '11' 
// 其他
console.log(1 + true)      // 2 : number + boolean
console.log(true + false)  // 1 : boolean + boolean
console.log(1 - false)     // 1 : number - boolean
console.log(true - false)  // 1 : boolean - boolean
console.log(-1 * '1')      // -1 : number * string
console.log(-1 / true)     // -1 : number / boolean
console.log(2 ** ('1' + 0))// 1024 : number ** (string + number)
console.log(100 % ('1' + 0))// 0 : number % (string + number)

邏輯運算符

邏輯運算符中，運算符非(|)會轉換成布爾值，而運算符或(||) 和 與(&&)會進行真/假值判斷, 或(||)第一個為假輸出第二個值，第一個為真輸出第一個值。與(&&)第一個為真輸出第二個值，第一個為假輸出第一個值

// 非(!)
console.log(!true)        //false
console.log(![])          // false
console.log(!!{})         // true !{} 會調用{}的valueOf 和 toString, 轉換成[object object]

// 或(||) 和 與(&&)
console.log(0 || 1)       // 1
console.log(1 || 0)       // 1
console.log(0 && 1)       // 0
console.log(1 && 0)       // 0

位運算符

位運算符 與(&)，或(|)，異或(*)，取反(~)，左移(<<)，右移(>>)均會進行二進制值的轉換

console.log(2 & 3)        // 2 (010 & 011=> 010)
console.log(2 | 3)        // 3 (010 | 011=> 011)
console.log(2 ^ 3)        // 1 (010 ^ 011=> 001)
console.log(~2)           // -3 (00000010=>11111101=> 11111100(-1取反碼)=> 00000011(按位取反)=> -3)
console.log(2 << 1)       // 4 (010 << 1=> 100=> 4)
console.log(4 >> 1)       // 2 (100 >> 1=> 010=> 2)

復雜的隱式類型轉換

對象轉換為基本類型

在javaScript中,對象在需要轉換為基本類型時,會調它們的tostring()或者valueof()方法。

操作數類型運算符轉換規則示例object + string+調用 valueOf() 和 toString() 方法({}) + '' 結果為 "[object Object]"object - number-調用 valueOf() 方法轉換為數字({valueOf() { return 3; }}) - 1 結果為 2

let obj={
  toString() {
    return '42';
  },
  valueOf() {
    return 10;
  }
};

console.log(obj + 10); // 輸出 52
console.log(String(obj)); // 輸出 '42'

解析：當對象參與加法運算時，JavaScript會調用valueOf() 方法獲取基本類型值。在字符串上下文中，則會調用toString()方法。

Symbol 類型的隱式轉換

Symbol 是 ES6 引入的一種新的原始數據類型，用于創建唯一的標識符。Symbol 類型的值在轉換為字符串或數字時，會拋出錯誤

let sym=Symbol('example');

try {
  console.log('symbol: ' + sym); // 拋出 TypeError
} catch (e) {
  console.log(e); // TypeError: Cannot convert a Symbol value to a string
}

try {
  console.log(sym + 10); // 拋出 TypeError
} catch (e) {
  console.log(e); // TypeError: Cannot convert a Symbol value to a number
}

try {
  console.log(String(sym));   // 'Symbol('example')'
} catch(e) {
  console.log(e);
}

解析：Symbol 類型的值在隱式轉換為字符串或數字時會拋出錯誤，必須顯式轉換

幾個隱式類型轉換陷阱

數組與數字運算

console.log([] + 1); // 輸出 '1'
console.log([1] + 1); // 輸出 '11'
console.log([1,2] + 1); // 輸出 '1,21'

解析：空數組轉換為字符串為 ''，與數字 1 相加結果為 '1'。數組 [1] 轉換為字符串為 '1'，數組 [1,2] 轉換為 '1,2'，與數字 1 相加結果為 '1,21'。

空對象與布爾運算

console.log({}==true); // 輸出 false
console.log({}==false); // 輸出 false
console.log([]==true); // 輸出 false
console.log([]==false); // 輸出 true

解析：與boolean值比較，兩邊都轉換成數字， 這時{}會轉換成[object object]最后轉數字成NaN。空數組 [] 轉換為布爾值為 true，但與 false 比較時，會首先轉換為數字 0，所以結果為 true。

undefined 和 null

console.log(undefined + 1)    // NaN
console.log(null + 1)         // 1
console.log(undefined==null)// true

解析：undefined 沒有數值形式，所以當undefined + 1時，嘗試將undefined轉換為數字失敗，結果為NaN. Null 在算術運算過程中，會被當作0，所以結果為1。當用'=='進行比較時，javascript會將它們視為相等，因為他們都是"無"或者"空"的特殊值。

復雜應用場景中的隱式類型轉換

JSON 與對象轉換

在復雜的條件語句中，隱式類型轉換也可能導致意外結果

let jsonStr='{"a": 1, "b": "2"}';
let obj=JSON.parse(jsonStr);

console.log(obj.a + obj.b); // 輸出 '12'

解析：JSON.parse 將 JSON 字符串轉換為對象，但對象屬性 b 仍為字符串，與數字屬性 a 相加時進行字符串拼接。

類型轉換與條件語句

在復雜的條件語句中，隱式類型轉換也可能導致意外結果

let x=0;
let y='0';

if (x==y) {
  console.log('x==y'); // 會輸出
}

if (x===y) {
  console.log('x===y'); // 不會輸出
}

if (x || y) {
  console.log('x || y'); // 會輸出
}

解析：在 x==y 中，JavaScript 會將 y 轉換為數字 0，結果為 true。在 x || y 中，x 為假值（false），但 y 為真值（非空字符串 '0'），結果為 '0'。

總結

以上內容展示了JavaScript中隱式類型轉換的強大與復雜性，以及如何利用這些特性構建出看似瘋狂但有效的代碼片段。了解這些規則和陷阱對于編寫健壯的JavaScript代碼至關重要。

作者:唐亞婷

來源-微信公眾號:大轉轉FE

出處:https://mp.weixin.qq.com/s/5jPYIRE0UjXqZSq5ikglrA