JavaScript中類型轉(zhuǎn)換的示例

小編給大家分享一下JavaScript中類型轉(zhuǎn)換的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、類型轉(zhuǎn)換是什么？

我們都知道變量的類型由它存儲的值的類型來決定，所以將值從一種類型轉(zhuǎn)換為另一種類型通常稱為類型轉(zhuǎn)換（type-casting），而它也可以根據(jù)某些特點分成兩類

• 顯式類型轉(zhuǎn)換

• 隱式類型轉(zhuǎn)換。

顯式類型轉(zhuǎn)換

顯式類型轉(zhuǎn)換主要是指通過 String、Number、Boolean 等構(gòu)造方法轉(zhuǎn)換相應(yīng)的字符串、數(shù)字、布爾值

const str = String(1);const num = Number("123.3"); //number:123.3

這是顯式的情況——類型的轉(zhuǎn)換的動作是由我們主動發(fā)起的。

1.2 隱式類型轉(zhuǎn)換

const newStr1 = 1 + "str"; // '1str'const newStr2 = "hello" + [89, 150.156, "mike"]; // 'hello89,150.156,mike'

如果是做 C++、Java 以及其他強(qiáng)類型語言的同學(xué)寫到類似的組合，應(yīng)該就會報錯了，但在 Js 中不會。

既然隱式類型轉(zhuǎn)換會一直存在下去，我們就要接受它并去了解它的優(yōu)缺點！

二、轉(zhuǎn)換的基本規(guī)則

有些數(shù)據(jù)類型之間的轉(zhuǎn)換，會經(jīng)歷“多道工序”，我們盡量先介紹“工序”少的～

2.1 原始值轉(zhuǎn)字符串

我們使用 String 函數(shù)將類型轉(zhuǎn)換成字符串類型，如果 String 函數(shù)不傳參數(shù)，返回空字符串，如果有參數(shù)，調(diào)用 ToString(value)，而 ToString 也給了一個對應(yīng)的結(jié)果表。表如下：

規(guī)則：

舉例：

console.log(String()); // 空字符串console.log(String(undefined)); // undefinedconsole.log(String(null)); // nullconsole.log(String(false)); // falseconsole.log(String(true)); // true// Numberconsole.log(String(0)); // 0console.log(String(-0)); // 0console.log(String(NaN)); // NaNconsole.log(String(Infinity)); // Infinityconsole.log(String(-Infinity)); // -Infinityconsole.log(String(1)); // 1

2.2 原始值轉(zhuǎn)數(shù)字

有時我們需要將非數(shù)字值當(dāng)作數(shù)字來使用，比如數(shù)學(xué)運算。為此 ES5 規(guī)范在 9.3 節(jié)定義了抽象操作ToNumber，類似 ToString，它也有一定的轉(zhuǎn)換規(guī)則：

console.log(Number(true)); // 1console.log(Number(false)); // 0console.log(Number(undefined)); // NaNconsole.log(Number("余光")); // NaNconsole.log(Number("1")); // 1

2.3 原始值轉(zhuǎn)布爾

我們使用 Boolean 函數(shù)將類型轉(zhuǎn)換成布爾類型，在 JavaScript 中，只有 6 種 值可以被轉(zhuǎn)換成false，其他都會被轉(zhuǎn)換成true。

console.log(Boolean()); // falseconsole.log(Boolean(false)); // falseconsole.log(Boolean(undefined)); // falseconsole.log(Boolean(null)); // falseconsole.log(Boolean(+0)); // falseconsole.log(Boolean(-0)); // falseconsole.log(Boolean(NaN)); // falseconsole.log(Boolean("")); // false

2.4 原始值轉(zhuǎn)對象

原始值到對象的轉(zhuǎn)換非常簡單，原始值通過調(diào)用 String()、Number() 或者 Boolean() 構(gòu)造函數(shù)，轉(zhuǎn)換為它們各自的包裝對象。

null 和 undefined 屬于例外，當(dāng)將它們用在期望是一個對象的地方都會造成一個類型錯誤 (TypeError) 異常，而不會執(zhí)行正常的轉(zhuǎn)換。

var a = 1;console.log(typeof a); // numbervar b = new Number(a);console.log(typeof b); // object

三、對象轉(zhuǎn)字符串和數(shù)字

3.0 對象轉(zhuǎn)布爾值

3.0 這一小節(jié)是我認(rèn)為值得一提，但篇幅較少的一點：

對象到布爾值的轉(zhuǎn)換非常簡單：所有對象(包括數(shù)組和函數(shù))都轉(zhuǎn)換為 true。對于包裝對象也是這樣，舉個例子：

console.log(Boolean(new Boolean(false))); // true

3.1 對象的 toString 和 valueOf

這是一個不太常見的操作，或者說現(xiàn)象，但我們也不能忽略它。

1. 對象=>字符串

2. 對象=>數(shù)字

轉(zhuǎn)換都是通過調(diào)用待轉(zhuǎn)換對象的一個方法來完成的，在 Js 中，一般待轉(zhuǎn)換對象擁有兩個方法：

1. toString

2. valueOf

toString

所有的對象除了null和undefined之外的任何值都具有toString方法，通常情況下，它和使用String方法返回的結(jié)果一致。

在JavaSciprt 專題之類型檢測中我們提到過Object.prototype.toString 方法會根據(jù)這個對象的[[class]]內(nèi)部屬性，返回由 "[object " 和 class 和 “]” 三個部分組成的字符串。舉個例子：

const obj = { name: "余光" };obj.toString(); // "[object Object]"obj.toString === Object.prototype.toString; // true

我們已經(jīng)驗證了 => 對象調(diào)用 toString 方法是調(diào)用其構(gòu)造函數(shù)原型上的方法

其他數(shù)據(jù)類型的 toString 方法也都有自己的特點：

• 數(shù)組：將每個數(shù)組元素轉(zhuǎn)換成一個字符串，并在元素之間添加逗號后合并成結(jié)果字符串。

• 函數(shù)：返回源代碼字符串。

[1, 2, 3, 4].toString(); // "1,2,3,4"[].toString(); // ""function func() {
  console.log();}func.toString(); // "function func () { console.log() }"

valueOf

valueOf 方法返回這個對象本身，數(shù)組、函數(shù)、正則簡單的繼承了這個默認(rèn)方法，也會返回對象本身。日期是一個例外，它會返回它的一個內(nèi)容表示: 1970 年 1 月 1 日以來的毫秒數(shù)。

var date = new Date(2017, 4, 21);console.log(date.valueOf()); // 1495296000000

3.2 對象轉(zhuǎn)字符串和數(shù)字的基本規(guī)則

在我們知道了 toString()和 valueOf()這兩個方法后，來看看轉(zhuǎn)換的規(guī)則，即什么時候用：ES5 規(guī)范 9.8

所謂的 ToPrimitive 方法，其實就是輸入一個值，然后返回一個一定是基本類型的值。

我們總結(jié)一下，當(dāng)我們用 String 方法轉(zhuǎn)化一個值的時候：

1. 基本類型：參照 “原始值轉(zhuǎn)字符” 的對應(yīng)表

2. 引用類型：調(diào)用一個ToPrimitive方法，將其轉(zhuǎn)為基本類型，然后再參照 “原始值轉(zhuǎn)字符” 的對應(yīng)表進(jìn)行轉(zhuǎn)換。

其實，從對象到數(shù)字的轉(zhuǎn)換也是一樣：

注意：轉(zhuǎn)字符和數(shù)字的時候處理略有不同～

3.3 ToPrimitive

那接下來就要看看 ToPrimitive 了，ES5 規(guī)范 9.1

這個返回原始值的方法接受一個輸入?yún)?shù) 和一個可選的參數(shù)來表示轉(zhuǎn)換類型：

1. input，表示要處理的輸入值

• 如果傳入的 input 是 Undefined、Null、Boolean、Number、String 類型，直接返回該值。

2. PreferredType，非必填，表示希望轉(zhuǎn)換成的類型，有兩個值可以選，Number 或者 String。

• 當(dāng)不傳入 PreferredType 時，如果 input 是日期類型，相當(dāng)于傳入 String，否則，都相當(dāng)于傳入 Number。

如果是 ToPrimitive(obj, Number)，處理步驟如下：

• 如果 obj 為 基本類型，直接返回

• 否則，調(diào)用 valueOf 方法，如果返回一個原始值，則 JavaScript 將其返回。

• 否則，調(diào)用 toString 方法，如果返回一個原始值，則 JavaScript 將其返回。

• 否則，JavaScript 拋出一個類型錯誤異常。

如果是 ToPrimitive(obj, String)，處理步驟如下：

• 如果 obj 為 基本類型，直接返回

• 否則，調(diào)用 toString 方法，如果返回一個原始值，則 JavaScript 將其返回。

• 否則，調(diào)用 valueOf 方法，如果返回一個原始值，則 JavaScript 將其返回。

• 否則，JavaScript 拋出一個類型錯誤異常。

所以總結(jié)下，對象轉(zhuǎn)字符串(就是 Number() 函數(shù))可以概括為：

舉個例子：

console.log(Number({})); // NaNconsole.log(Number({ a: 1 })); // NaNconsole.log(Number([])); // 0console.log(Number([0])); // 0console.log(Number([1, 2, 3])); // NaNconsole.log(
  Number(function() {
    var a = 1;
  })); // NaNconsole.log(Number(/\d+/g)); // NaNconsole.log(Number(new Date(2010, 0, 1))); // 1262275200000console.log(Number(new Error("a"))); // NaN

注意：

• 轉(zhuǎn)換對象時，你會發(fā)現(xiàn)它變成了 NaN，所以

• 在這個例子中，[]和[0]都返回了 0

• 當(dāng)我們 Number([]) 的時候，先調(diào)用 [] 的 valueOf 方法，此時返回 []；

• 因為返回了一個對象，所以又調(diào)用了 toString 方法；

• 此時返回一個空字符串，接下來調(diào)用 ToNumber 這個規(guī)范上的方法；

• 等價于 Number([].valueOf().toString())，結(jié)果為 0；

• [1, 2, 3] 卻返回了一個 NaN：

• 當(dāng)我們 Number([]) 的時候，先調(diào)用 [1,2,3] 的 valueOf 方法，此時返回 [1,2,3]；

• 因為返回了一個對象，所以又調(diào)用了 toString 方法；

• 此時為1,2,3，接下來調(diào)用 ToNumber 這個規(guī)范上的方法；

• 等價于 Number([1,2,3].valueOf().toString())，結(jié)果為 NaN；

四、涉及到類型轉(zhuǎn)換的運算符

讀到這里我們對類型轉(zhuǎn)換有了一定的概念，現(xiàn)在我們再來看看在運算中常見的類型轉(zhuǎn)換問題。

4.1 一元操作符 +

+a 運算符顯式地將后面的變量 a 保存的數(shù)據(jù)轉(zhuǎn)換為數(shù)字，不是字符串拼接。
查看 ES5 規(guī)范 11.4.6，會調(diào)用 ToNumber 處理該值，相當(dāng)于 Number(‘1’)，最終結(jié)果返回數(shù)字 1。

const a = "1.1";const b = 5 + +a;console.log(b); // 6.6

上面的代碼應(yīng)該是我們經(jīng)常用到的，當(dāng)我們知道一個字段是字符串但希望它是數(shù)字時，一般會這么做～

我們一起驗證下下面這些類型

console.log(+[]); // 0console.log(+["1"]); // 1console.log(+["1", "2", "3"]); // NaNconsole.log(+{}); // NaN

既然是調(diào)用 ToNumber 方法我們在之前的小節(jié)中提到過

• 如果 obj 為基本類型，直接返回

• 否則，調(diào)用 valueOf 方法，如果返回一個原始值，則 JavaScript 將其返回。

• 否則，調(diào)用 toString 方法，如果返回一個原始值，則 JavaScript 將其返回。

• 否則，JavaScript 拋出一個類型錯誤異常。

• 以 +[] 為例，[] 調(diào)用 valueOf 方法，返回一個空數(shù)組，因為不是原始值，調(diào)用 toString 方法，返回 ""。

• 得到返回值后，然后再調(diào)用 ToNumber 方法，"" 對應(yīng)的返回值是 0，所以最終返回 0。

4.2 一元操作符 ！

一元運算符!顯式地將值強(qiáng)制類型轉(zhuǎn)換為布爾值。但是它同時還將真值反轉(zhuǎn)為假值（或者將假值反轉(zhuǎn)為真值）。

const a = 1;const b = "str";const c = [1, 2, 3];console.log(!a); // falseconsole.log(!b); // falseconsole.log(!c); // falseconsole.log(!0); // trueconsole.log(!""); // trueconsole.log(![]); //falseconsole.log(![]); //falseconsole.log(!undefined); // trueconsole.log(!null); // true

同樣的 !! 會講其他類型轉(zhuǎn)成對應(yīng)的 bool 值

！和 + 運算符是我們最常用的兩種顯式類型轉(zhuǎn)換運算符，之后我們再看看那些不經(jīng)意間就被轉(zhuǎn)換類型的操作～

五、常見的類型轉(zhuǎn)換操作

5.1 字符串和數(shù)字之間

const num = 1;const str = "200";console.log(num + str); // '1200'

這段代碼大家應(yīng)該都知道結(jié)果，但是其中的原理是否和大家想的一樣呢？

const arr1 = [1, 2];const arr2 = [3, 4];console.log(arr1 + arr2); // 1,23,4

兩個數(shù)組的結(jié)果為什么也是個字符串？

原因

ES5 規(guī)范 11.6.1 中提到，如果某個操作數(shù)是字符串或者能通過以下步驟轉(zhuǎn)換為字符串，+將進(jìn)行拼接操作

如果其中的一個操作數(shù)是引用類型，則首先對其進(jìn)行ToPrimitive操作（第三小節(jié)有提）

總結(jié)

簡單來說就是，如果+的其中一個操作數(shù)是字符串（或者通過以上步驟可以得到字符串），則執(zhí)行字符串拼接；否則執(zhí)行數(shù)字加法。

5.2 被轉(zhuǎn)換成布爾值的操作

現(xiàn)在我們來看看到布爾值的隱式強(qiáng)制類型轉(zhuǎn)換，它最為常見也最容易搞錯。相對布爾值，數(shù)字和字符串操作中的隱式強(qiáng)制類型轉(zhuǎn)換還算比較明顯。

下面的情況會發(fā)生布爾值隱式強(qiáng)制類型轉(zhuǎn)換。

• if (…)語句

• 括號內(nèi)的條件為true時執(zhí)行操作；

• for ( let i = 0; i < 10; i++ )

• 語句中的條件判斷表達(dá)式即 i < 10 為true

• while (…)和 do…while(…)

• 循環(huán)中的條件判斷表達(dá)式為true;

• 三目運算 ? ：；

• 邏輯運算符 ||（邏輯或）和 &&（邏輯與）左邊的操作數(shù)；

5.3 == 和 ===

談到類型轉(zhuǎn)換，一定繞不開 == 和 ===。

==用于比較兩個值是否相等，當(dāng)要比較的兩個值類型不一樣的時候，就會發(fā)生類型的轉(zhuǎn)換。

在ES5 規(guī)范 11.9.5 中簡述了它的規(guī)則：

當(dāng)執(zhí)行 x == y 時：

• 如果 x 與 y 是同一類型：

• x 是 NaN，返回 false

• y 是 NaN，返回 false

• x 與 y 相等，返回 true

• x 是+0，y 是-0，返回 true

• x 是-0，y 是+0，返回 true

• x 是 Undefined，返回 true

• x 是 Null，返回 true

• x 是數(shù)字：

• x 是字符串，完全相等返回 true,否則返回 false

• x 是布爾值，x 和 y 都是 true 或者 false，返回 true，否則返回 false

• x 和 y 指向同一個對象，返回 true，否則返回 false

• x 是 null 并且 y 是 undefined，返回 true

• x 是 undefined 并且 y 是 null，返回 true

• x 是數(shù)字，y 是字符串，判斷 x == ToNumber(y)

• x 是字符串，y 是數(shù)字，判斷 ToNumber(x) == y

• x 是布爾值，判斷 ToNumber(x) == y

• y 是布爾值，判斷 x ==ToNumber(y)

• x 不是字符串或者數(shù)字，y 是對象，判斷 x == ToPrimitive(y)

• x 是對象，y 不是字符串或者數(shù)字，判斷 ToPrimitive(x) == y

以上是“JavaScript中類型轉(zhuǎn)換的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！