JavaScript中類型轉(zhuǎn)換的示例-創(chuàng)新互聯(lián)
小編給大家分享一下JavaScript中類型轉(zhuǎn)換的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一、類型轉(zhuǎn)換是什么？
我們都知道變量的類型由它存儲(chǔ)的值的類型來(lái)決定，所以將值從一種類型轉(zhuǎn)換為另一種類型通常稱為類型轉(zhuǎn)換（type-casting），而它也可以根據(jù)某些特點(diǎn)分成兩類
顯式類型轉(zhuǎn)換
隱式類型轉(zhuǎn)換。
顯式類型轉(zhuǎn)換
顯式類型轉(zhuǎn)換主要是指通過(guò) String、Number、Boolean 等構(gòu)造方法轉(zhuǎn)換相應(yīng)的字符串、數(shù)字、布爾值
const str = String(1);const num = Number("123.3"); //number:123.3這是顯式的情況——類型的轉(zhuǎn)換的動(dòng)作是由我們主動(dòng)發(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)類型語(yǔ)言的同學(xué)寫到類似的組合，應(yīng)該就會(huì)報(bào)錯(cuò)了，但在 Js 中不會(huì)。
既然隱式類型轉(zhuǎn)換會(huì)一直存在下去，我們就要接受它并去了解它的優(yōu)缺點(diǎn)！
二、轉(zhuǎn)換的基本規(guī)則
有些數(shù)據(jù)類型之間的轉(zhuǎn)換，會(huì)經(jīng)歷“多道工序”，我們盡量先介紹“工序”少的～
2.1 原始值轉(zhuǎn)字符串
我們使用 String 函數(shù)將類型轉(zhuǎn)換成字符串類型，如果String 函數(shù)不傳參數(shù)，返回空字符串，如果有參數(shù)，調(diào)用ToString(value)，而ToString 也給了一個(gè)對(duì)應(yīng)的結(jié)果表。表如下：
規(guī)則：
| 參數(shù)類型 | 返回 |
|---|---|
| Undefined | “undefined” |
| Null | “null” |
| Boolean | 如果參數(shù)是 true，返回 “true”。參數(shù)為 false，返回 “false” |
| Number | 結(jié)果有很多種，例如 NaN 和 Infinity |
| String | 返回與之相等的值 |
舉例：
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í)我們需要將非數(shù)字值當(dāng)作數(shù)字來(lái)使用，比如數(shù)學(xué)運(yùn)算。為此 ES5 規(guī)范在 9.3 節(jié)定義了抽象操作ToNumber，類似 ToString，它也有一定的轉(zhuǎn)換規(guī)則：
| 參數(shù)類型 | 返回 |
|---|---|
| true | 1 |
| false | 0 |
| undefined | NaN |
| null | 0 |
| String | 返回與之相等的值，但如果處理失敗則返回 NaN |
console.log(Number(true)); // 1console.log(Number(false)); // 0console.log(Number(undefined)); // NaNconsole.log(Number("余光")); // NaNconsole.log(Number("1")); // 12.3 原始值轉(zhuǎn)布爾
我們使用Boolean 函數(shù)將類型轉(zhuǎn)換成布爾類型，在 JavaScript 中，只有6 種 值可以被轉(zhuǎn)換成false，其他都會(huì)被轉(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("")); // false2.4 原始值轉(zhuǎn)對(duì)象
原始值到對(duì)象的轉(zhuǎn)換非常簡(jiǎn)單，原始值通過(guò)調(diào)用 String()、Number() 或者 Boolean() 構(gòu)造函數(shù)，轉(zhuǎn)換為它們各自的包裝對(duì)象。
null 和undefined 屬于例外，當(dāng)將它們用在期望是一個(gè)對(duì)象的地方都會(huì)造成一個(gè)類型錯(cuò)誤 (TypeError) 異常，而不會(huì)執(zhí)行正常的轉(zhuǎn)換。
var a = 1;console.log(typeof a); // numbervar b = new Number(a);console.log(typeof b); // object
三、對(duì)象轉(zhuǎn)字符串和數(shù)字
3.0 對(duì)象轉(zhuǎn)布爾值
3.0 這一小節(jié)是我認(rèn)為值得一提，但篇幅較少的一點(diǎn)：
對(duì)象到布爾值的轉(zhuǎn)換非常簡(jiǎn)單：所有對(duì)象(包括數(shù)組和函數(shù))都轉(zhuǎn)換為true。對(duì)于包裝對(duì)象也是這樣，舉個(gè)例子：
console.log(Boolean(new Boolean(false))); // true
3.1 對(duì)象的 toString 和 valueOf
這是一個(gè)不太常見(jiàn)的操作，或者說(shuō)現(xiàn)象，但我們也不能忽略它。
對(duì)象=>字符串
對(duì)象=>數(shù)字
轉(zhuǎn)換都是通過(guò)調(diào)用待轉(zhuǎn)換對(duì)象的一個(gè)方法來(lái)完成的，在 Js 中，一般待轉(zhuǎn)換對(duì)象擁有兩個(gè)方法：
toString
valueOf
toString
所有的對(duì)象除了null和undefined之外的任何值都具有toString方法，通常情況下，它和使用String方法返回的結(jié)果一致。
在JavaSciprt 專題之類型檢測(cè)中我們提到過(guò)Object.prototype.toString 方法會(huì)根據(jù)這個(gè)對(duì)象的[[class]]內(nèi)部屬性，返回由 "[object " 和 class 和 “]” 三個(gè)部分組成的字符串。舉個(gè)例子：
const obj = { name: "余光" };obj.toString(); // "[object Object]"obj.toString === Object.prototype.toString; // true我們已經(jīng)驗(yàn)證了 => 對(duì)象調(diào)用 toString 方法是調(diào)用其構(gòu)造函數(shù)原型上的方法
其他數(shù)據(jù)類型的 toString 方法也都有自己的特點(diǎn)：
數(shù)組：將每個(gè)數(shù)組元素轉(zhuǎn)換成一個(gè)字符串，并在元素之間添加逗號(hào)后合并成結(jié)果字符串。
函數(shù)：返回源代碼字符串。
[1, 2, 3, 4].toString(); // "1,2,3,4"[].toString(); // ""function func() {
console.log();}func.toString(); // "function func () { console.log() }"valueOf
valueOf 方法返回這個(gè)對(duì)象本身，數(shù)組、函數(shù)、正則簡(jiǎn)單的繼承了這個(gè)默認(rèn)方法，也會(huì)返回對(duì)象本身。日期是一個(gè)例外，它會(huì)返回它的一個(gè)內(nèi)容表示: 1970 年 1 月 1 日以來(lái)的毫秒數(shù)。
var date = new Date(2017, 4, 21);console.log(date.valueOf()); // 1495296000000
3.2 對(duì)象轉(zhuǎn)字符串和數(shù)字的基本規(guī)則
在我們知道了 toString()和 valueOf()這兩個(gè)方法后，來(lái)看看轉(zhuǎn)換的規(guī)則，即什么時(shí)候用：ES5 規(guī)范 9.8
| 參數(shù)類型 | 結(jié)果 |
|---|---|
| Object | 1. primValue = ToPrimitive(input, String) 2. 返回 ToString(primValue) |
所謂的 ToPrimitive 方法，其實(shí)就是輸入一個(gè)值，然后返回一個(gè)一定是基本類型的值。
我們總結(jié)一下，當(dāng)我們用 String 方法轉(zhuǎn)化一個(gè)值的時(shí)候：
基本類型：參照 “原始值轉(zhuǎn)字符” 的對(duì)應(yīng)表
引用類型：調(diào)用一個(gè)
ToPrimitive方法，將其轉(zhuǎn)為基本類型，然后再參照 “原始值轉(zhuǎn)字符” 的對(duì)應(yīng)表進(jìn)行轉(zhuǎn)換。
其實(shí)，從對(duì)象到數(shù)字的轉(zhuǎn)換也是一樣：
| 參數(shù)類型 | 結(jié)果 |
|---|---|
| Object | 1. primValue = ToPrimitive(input, Number) 2. 返回 ToNumber(primValue) |
注意：轉(zhuǎn)字符和數(shù)字的時(shí)候處理略有不同～
3.3 ToPrimitive
那接下來(lái)就要看看 ToPrimitive 了，ES5 規(guī)范 9.1
這個(gè)返回原始值的方法接受一個(gè)輸入?yún)?shù) 和一個(gè)可選的參數(shù)來(lái)表示轉(zhuǎn)換類型：
input，表示要處理的輸入值
如果傳入的 input 是 Undefined、Null、Boolean、Number、String 類型，直接返回該值。
PreferredType，非必填，表示希望轉(zhuǎn)換成的類型，有兩個(gè)值可以選，Number 或者 String。
當(dāng)不傳入 PreferredType 時(shí)，如果 input 是日期類型，相當(dāng)于傳入 String，否則，都相當(dāng)于傳入 Number。
如果是 ToPrimitive(obj, Number)，處理步驟如下：
如果 obj 為 基本類型，直接返回
否則，調(diào)用 valueOf 方法，如果返回一個(gè)原始值，則 JavaScript 將其返回。
否則，調(diào)用 toString 方法，如果返回一個(gè)原始值，則 JavaScript 將其返回。
否則，JavaScript 拋出一個(gè)類型錯(cuò)誤異常。
如果是 ToPrimitive(obj, String)，處理步驟如下：
如果 obj 為 基本類型，直接返回
否則，調(diào)用 toString 方法，如果返回一個(gè)原始值，則 JavaScript 將其返回。
否則，調(diào)用 valueOf 方法，如果返回一個(gè)原始值，則 JavaScript 將其返回。
否則，JavaScript 拋出一個(gè)類型錯(cuò)誤異常。
所以總結(jié)下，對(duì)象轉(zhuǎn)字符串(就是 Number() 函數(shù))可以概括為：
舉個(gè)例子：
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)換對(duì)象時(shí)，你會(huì)發(fā)現(xiàn)它變成了 NaN，所以
在這個(gè)例子中，
[]和[0]都返回了 0當(dāng)我們
Number([])的時(shí)候，先調(diào)用[]的valueOf方法，此時(shí)返回[]；因?yàn)榉祷亓艘粋€(gè)對(duì)象，所以又調(diào)用了
toString方法；此時(shí)返回一個(gè)空字符串，接下來(lái)調(diào)用
ToNumber這個(gè)規(guī)范上的方法；等價(jià)于
Number([].valueOf().toString())，結(jié)果為 0；[1, 2, 3]卻返回了一個(gè) NaN：當(dāng)我們
Number([])的時(shí)候，先調(diào)用[1,2,3]的valueOf方法，此時(shí)返回 [1,2,3]；因?yàn)榉祷亓艘粋€(gè)對(duì)象，所以又調(diào)用了
toString方法；此時(shí)為
1,2,3，接下來(lái)調(diào)用 ToNumber 這個(gè)規(guī)范上的方法；等價(jià)于
Number([1,2,3].valueOf().toString())，結(jié)果為 NaN；
四、涉及到類型轉(zhuǎn)換的運(yùn)算符
讀到這里我們對(duì)類型轉(zhuǎn)換有了一定的概念，現(xiàn)在我們?cè)賮?lái)看看在運(yùn)算中常見(jiàn)的類型轉(zhuǎn)換問(wèn)題。
4.1 一元操作符 +
+a 運(yùn)算符顯式地將后面的變量 a 保存的數(shù)據(jù)轉(zhuǎn)換為數(shù)字，不是字符串拼接。
查看 ES5 規(guī)范 11.4.6，會(huì)調(diào)用 ToNumber 處理該值，相當(dāng)于 Number(‘1’)，最終結(jié)果返回?cái)?shù)字 1。
const a = "1.1";const b = 5 + +a;console.log(b); // 6.6
上面的代碼應(yīng)該是我們經(jīng)常用到的，當(dāng)我們知道一個(gè)字段是字符串但希望它是數(shù)字時(shí)，一般會(huì)這么做～
我們一起驗(yàn)證下下面這些類型
console.log(+[]); // 0console.log(+["1"]); // 1console.log(+["1", "2", "3"]); // NaNconsole.log(+{}); // NaN既然是調(diào)用 ToNumber 方法我們?cè)谥暗男」?jié)中提到過(guò)
如果 obj 為基本類型，直接返回
否則，調(diào)用
valueOf方法，如果返回一個(gè)原始值，則 JavaScript 將其返回。否則，調(diào)用
toString方法，如果返回一個(gè)原始值，則 JavaScript 將其返回。否則，JavaScript 拋出一個(gè)類型錯(cuò)誤異常。
以
+[]為例，[]調(diào)用valueOf方法，返回一個(gè)空數(shù)組，因?yàn)椴皇窃贾?，調(diào)用toString方法，返回""。得到返回值后，然后再調(diào)用
ToNumber方法，""對(duì)應(yīng)的返回值是 0，所以最終返回 0。
4.2 一元操作符 ！
一元運(yùn)算符!顯式地將值強(qiáng)制類型轉(zhuǎn)換為布爾值。但是它同時(shí)還將真值反轉(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
同樣的!! 會(huì)講其他類型轉(zhuǎn)成對(duì)應(yīng)的 bool 值
！和 + 運(yùn)算符是我們最常用的兩種顯式類型轉(zhuǎn)換運(yùn)算符，之后我們?cè)倏纯茨切┎唤?jīng)意間就被轉(zhuǎn)換類型的操作～
五、常見(jià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
兩個(gè)數(shù)組的結(jié)果為什么也是個(gè)字符串？
原因
ES5 規(guī)范 11.6.1 中提到，如果某個(gè)操作數(shù)是字符串或者能通過(guò)以下步驟轉(zhuǎn)換為字符串，+將進(jìn)行拼接操作
如果其中的一個(gè)操作數(shù)是引用類型，則首先對(duì)其進(jìn)行ToPrimitive操作（第三小節(jié)有提）
總結(jié)
簡(jiǎn)單來(lái)說(shuō)就是，如果+的其中一個(gè)操作數(shù)是字符串（或者通過(guò)以上步驟可以得到字符串），則執(zhí)行字符串拼接；否則執(zhí)行數(shù)字加法。
5.2 被轉(zhuǎn)換成布爾值的操作
現(xiàn)在我們來(lái)看看到布爾值的隱式強(qiáng)制類型轉(zhuǎn)換，它最為常見(jiàn)也最容易搞錯(cuò)。相對(duì)布爾值，數(shù)字和字符串操作中的隱式強(qiáng)制類型轉(zhuǎn)換還算比較明顯。
下面的情況會(huì)發(fā)生布爾值隱式強(qiáng)制類型轉(zhuǎn)換。
if (…)語(yǔ)句
括號(hào)內(nèi)的條件為
true時(shí)執(zhí)行操作；for ( let i = 0; i < 10; i++ )
語(yǔ)句中的條件判斷表達(dá)式即 i < 10 為
truewhile (…)和 do…while(…)
循環(huán)中的條件判斷表達(dá)式為
true;三目運(yùn)算
? ：；邏輯運(yùn)算符 ||（邏輯或）和 &&（邏輯與）左邊的操作數(shù)；
5.3 == 和 ===
談到類型轉(zhuǎn)換，一定繞不開(kāi)== 和===。
==用于比較兩個(gè)值是否相等，當(dāng)要比較的兩個(gè)值類型不一樣的時(shí)候，就會(huì)發(fā)生類型的轉(zhuǎn)換。
在ES5 規(guī)范 11.9.5 中簡(jiǎn)述了它的規(guī)則：
當(dāng)執(zhí)行 x == y 時(shí)：
如果 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 指向同一個(gè)對(duì)象，返回 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 是對(duì)象，判斷 x == ToPrimitive(y)
x 是對(duì)象，y 不是字符串或者數(shù)字，判斷 ToPrimitive(x) == y
以上是“JavaScript中類型轉(zhuǎn)換的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞標(biāo)題：JavaScript中類型轉(zhuǎn)換的示例-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://m.jiaotiyi.com/article/dojhij.html