前端學習(27)~js學習(五): typeof和數據類型轉換

  • 2020 年 3 月 18 日
  • 筆記

變量的數據類型轉換：將一種數據類型轉換為另外一種數據類型。

通常有三種形式的類型轉換：

  • 轉換為字符串類型
  • 轉換為數字型
  • 轉換為布爾型

typeof 運算符

typeof()表示「獲取變量的數據類型」，返回的是小寫，語法為：（兩種寫法都可以）

// 寫法1  typeof 變量;    // 寫法2  typeof(變量);

typeof 這個運算符的返回結果就是變量的類型。那返回結果的類型是什麼呢？是字符串。

返回結果：

typeof 的代碼寫法

返回結果

typeof 數字

number

typeof 字符串

string

typeof 布爾型

boolean

typeof 對象

object

typeof 方法

function

typeof null

object

typeof undefined

undefined

備註 1：為啥 typeof null的返回值也是 object 呢？因為 null 代表的是空對象。

備註 2：typeof NaN的返回值是 number，上一篇文章中講過，NaN 是一個特殊的數字。

返回結果舉例：

console.log(type []); // 空數組的打印結果：object    console.log(type {}); // 空對象的打印結果：object

代碼解釋：這裡的空數組[]、空對象{} ，為啥他們在使用 typeof 時，返回值也是 object呢？因為這裡的 返回結果object指的是引用數據類型。空數組、空對象都是引用數據類型 Object。

變量的類型轉換的分類

類型轉換分為兩種：顯示類型轉換、隱式類型轉換。

顯示類型轉換

  • toString()
  • String()
  • Number()
  • parseInt(string)
  • parseFloat(string)
  • Boolean()

隱式類型轉換

  • isNaN ()
  • 自增/自減運算符：++、—-
  • 正號/負號：+a、-a
  • 加號：+
  • 運算符：-、*、/

隱式類型轉換（特殊）

  • 邏輯運算符：&&、||、！ 。非布爾值進行與或運算時，會先將其轉換為布爾值，然後再運算，但運算結果是原值。具體可以看下一篇文章《運算符》。
  • 關係運算符：<、> <= >=等。關係運算符，得到的運算結果都是布爾值：要麼是true，要麼是false。具體可以看下一篇文章《運算符》。

針對上面這兩種類型轉換，這篇文章來詳細介紹。

其他的簡單類型 –> String

方法一（隱式類型轉換）：字符串拼接

格式：變量+"" 或者 變量+"abc"

舉例：

var a = 123; // Number 類型  console.log(a + ''); // 轉換成 String 類型  console.log(a + 'haha'); // 轉換成 String 類型

上面的例子中，打印的結果，都是字符串類型的數據。實際上內部是調用的 String() 函數。也就是說，c = c + "" 等價於 c = String(c)。

方法二：調用 toString()方法

語法：

變量.toString()

【重要】該方法不會影響到原變量，它會將轉換的結果返回。當然我們還可以直接寫成a = a.toString()，這樣的話，就是直接修改原變量。

注意：null 和 undefined 這兩個值沒有 toString()方法，所以它們不能用方法二。如果調用，會報錯。

另外，Number 類型的變量，在調用 toString()時，可以在方法中傳遞一個整數作為參數。此時它將會把數字轉換為指定的進制，如果不指定則默認轉換為 10 進制。例如：

var a = 255;    //對於Number調用toString()時可以在方法中傳遞一個整數作為參數  //此時它將會把數字轉換為指定的進制,如果不指定則默認轉換為10進制  a = a.toString(2); // 轉換為二進制    console.log(a); // 11111111  console.log(typeof a); // string

方法三（強制轉換）：使用 String()函數

語法：

String(變量)

使用 String()函數做強制類型轉換時：

  • 對於 Number 和 Boolean 而言，本質上就是調用 toString()方法。
  • 但是對於 null 和 undefined，則不會調用 toString()方法。它會將 null 直接轉換為 "null"。將 undefined 直接轉換為 "undefined"。

prompt()：用戶的輸入

prompt()就是專門用來彈出能夠讓用戶輸入的對話框。重要的是：用戶不管輸入什麼，都當字符串處理。

其他的數據類型 –> Number 【重要】

使用 Number() 函數

情況一：字符串 –> 數字

  • 1.如果字符串中是純數字，則直接將其轉換為數字。
  • 2.只要字符串中包含了非數字的內容（小數點按數字來算），則轉換為 NaN。
  • 3.如果字符串是一個空串或者是一個全是空格的字符串，則轉換為 0。

情況二：布爾 –> 數字

  • true 轉成 1
  • false 轉成 0

情況三：null –> 數字

  • 結果為：0

情況四：undefined –> 數字

  • 結果為：NaN

補充：怎麼理解這裡的 NaN 呢？可以這樣理解，使用 Number() 函數之後，如果無法轉換為數字，就會轉換為 NaN。

使用 parseInt()函數：字符串 -> 整數

parseInt()的作用是將字符串中的有效的整數內容轉為數字。

例如：

parseInt("5");

得到的結果是數字 5。

parseInt()的轉換情況如下:

情況一：字符串 –> 數字

  • 1.只保留字符串最開頭的數字，後面的中文自動消失。
  • 2.如果字符串不是以數字開頭，則轉換為 NaN。
  • 3.如果字符串是一個空串或者是一個全是空格的字符串，轉換時會報錯。

情況二：Boolean –> 數字

  • 結果為：NaN

情況三：Null –> 數字

  • 結果為：NaN

情況四：Undefined –> 數字

  • 結果為：NaN

Number() 函數和 parseInt() 函數的區別：

就拿Number(true) 和 parseInt(true)/parseFloat(true)來舉例，二者在使用時，是有區別的：

  • Number(true) ：千方百計地想轉換為數字。
  • parseInt(true)/parseFloat(true) ：先轉為字符串，再提取出最前面的數字部分；沒提取出來，那就返回 NaN。

parseInt()具有以下特性：

（1）只保留字符串最開頭的數字，後面的中文自動消失。例如：

console.log(parseInt("2017在公眾號上寫了6篇文章")); //打印結果：2017    console.log(parseInt("2017.01在公眾號上寫了6篇文章")); //打印結果仍是：2017   （說明只會取整數）    console.log(parseInt("aaa2017.01在公眾號上寫了6篇文章")); //打印結果：NaN （因為不是以數字開頭）

（2）如果對非 String使用 parseInt()或 parseFloat()，它會先將其轉換為 String 然後再操作。【重要】

比如：

var a = 168.23;  console.log(parseInt(a)); //打印結果：168  （因為是先將c轉為字符串"168.23"，然後然後再操作）    var b = true;  console.log(parseInt(b)); //打印結果：NaN （因為是先將a轉為字符串"true"，然後然後再操作）    var c = null;  console.log(parseInt(c)); //打印結果：NaN  （因為是先將b轉為字符串"null"，然後然後再操作）    var d = undefined;  console.log(parseInt(d)); //打印結果：NaN  （因為是先將b轉為字符串"undefined"，然後然後再操作）

（3）自動帶有截斷小數的功能：取整，不四捨五入。

例 1：

var a = parseInt(5.8) + parseInt(4.7);  console.log(a);

打印結果：

9

（4）帶兩個參數時，表示在轉換時，包含了進制轉換。

代碼舉例：

var a = '110';    var num = parseInt(a, 16); // 【重要】將 a 當成 十六進制 來看待，轉換成 十進制 的 num    console.log(num);

打印結果：

272

parseFloat()函數：字符串 –> 浮點數（小數）

parseFloat()的作用是：將字符串轉換為浮點數。

parseFloat()和 parseInt()的作用類似，不同的是，parseFloat()可以獲得有效的小數部分。

代碼舉例：

var a = '123.456.789px';  console.log(parseFloat(a)); // 打印結果：123.456

parseFloat() 的幾個特性，可以參照 parseInt()。

轉換為 Boolean

將其他的數據類型轉換為 Boolean，可以使用 Boolean()函數。情況如下：

情況一：數字 –> 布爾。除了 0 和 NaN，其餘的都是 true。也就是說，Boolean(NaN)的結果是 false。

情況二：字符串 —> 布爾。除了空串，其餘的都是 true。全是空格的字符串，轉換結果也是 true。字符串'0'的轉換結果也是 true。

情況三：null 和 undefined 都會轉換為 false。

情況四：引用數據類型會轉換為 true。注意，空數組[]和空對象{}，轉換結果也是 true，這個一點，很多人都不知道。

PS：轉換為 Boolean 的這幾種情況，很重要，開發中會經常用到。

知識補充：其他進制的數字

  • 16 進制的數字，以0x開頭
  • 8 進制的數字，以0開頭
  • 2 進制的數字，0b開頭（不是所有的瀏覽器都支持：chrome 和火狐支持，IE 不支持）

比如070這個字符串，如果我調用 parseInt()轉成數字時，有些瀏覽器會當成 8 進制解析，有些會當成 10 進制解析。

所以，比較建議的做法是：可以在 parseInt()中傳遞第二個參數，來指定當前數字的進制。例如：

var a = "070";    a = parseInt(a, 8); //將 070 當成八進制來看待，轉換結果為十進制。  console.log(a); // 打印結果：56。這個地方要好好理解。

隱式類型轉換

重點：隱式類型轉換，內部調用的都是顯式類型的方法。下面來詳細介紹。

isNaN() 函數

語法：

isNaN(參數);

解釋：判斷指定的參數是否為 NaN（非數字類型），返回結果為 Boolean 類型。也就是說：任何不能被轉換為數值的參數，都會讓這個函數返回 true。

執行過程：

（1）先調用Number(參數)函數；

（2）然後將Number(參數)的返回結果和NaN進行比較。

代碼舉例：

console.log(isNaN('123')); // 返回結果：false。    console.log(isNaN('abc')); // 返回結果：true。因為 Number('abc') 的返回結果是 NaN    console.log(isNaN(null)); // 返回結果：false    console.log(isNaN(undefined)); // 返回結果：true    console.log(isNaN(NaN)); // 返回結果：true

自增/自減運算符：++、—-

舉例 1：

var a = "666";  a++;    console.log(typeof a); // 打印結果： number  console.log(a); // 打印結果：667

執行過程：

（1）先調用Number(參數)函數；

（2）然後將Number(參數)的返回結果進行 加 1 操作。

舉例 2：

var a = 'abc';  a++;  console.log(typeof a); // 打印結果：number  console.log(a); // 打印結果：NaN。因為 Number('abc')的結果為 NaN，再自增後，結果依然是 NaN

正號/負號：+a、-a

注意，這裡說的是正號/負號，不是加號/減號。

任何值做+a、-a、/a運算時，運算結果都會自動轉換為 Number 類型。 內部調用的是 Number() 函數。

舉例：

var a = '666';  var b = +a;    console.log(typeof a); // 打印結果：string。說明 a 的數據類型保持不變。  console.log(a); // 打印結果：666    console.log(typeof b); // 打印結果：number。說明 b 的數據類型發生了變化。  console.log(b); // 打印結果：666

加號：+

情況一：字符串 + 數字

  • 當加號的兩邊，只要有一個是字符串的時候，就會調用 String() 函數將數字轉為字符串，然後再計算。導致最終的運算結果是字符串。

情況二：Boolean + 數字

  • Boolean 型和數字型相加時， true 按 1 來算 ，false 按 0 來算。這裡其實是先調 Number() 函數，將 Boolean 類型轉換為 Number類型，然後再和 數字相加。

情況三： null + 數字

  • 等價於：0 + 數字

情況四： undefined + 數字

  • 計算結果：NaN

運算符：-、*、/

1、任何非 Number 類型的值做-、*、/運算時，會將這些值轉換為Number然後再運算(內部調用的是 Number() 函數），運算結果是 Number 類型。（註：任何值 + 字符串是特例，運算結果是字符串）

比如：

    result1 = true + 1;  // 2 = 1+ 1        result2 = true + false; // 1 = 1+ 0        result3 = 1 + null; // 1 = 1+ 0        result4 = 100 - '1' // 99

2、任何的值和字符串做加法運算，都會先轉換為字符串，然後再做拼串操作。

比如：

    result1 = 1 + 2 + '3'  // 33        result2 = '1' + 2 + 3; // 123

3、任何值和NaN做運算的結果都是NaN。

VirMach 便宜 VPS

QNews

QNews