首頁 web前端 js教程 JavaScript值型別與引用型別轉換用法實例詳解

JavaScript值型別與引用型別轉換用法實例詳解

Jul 18, 2017 pm 04:26 PM
javascript js 轉換

JavaScript的資料型別分為六種,分別為null,undefined,boolean,string,number,object。 object是引用型,其它的五種是基本型別或是原始型別。我們可以用typeof方法列印來某個是屬於哪個類型的。不同類型的變數比較要先轉類型,叫做型別轉換,型別轉換也叫隱式轉換。隱式轉換通常發生在運算子加減乘除,等於,還有小於,大於等。 。

一.值類型之間的資料型別轉換:

#javascript中的資料型別可以參閱javascript資料型別詳解一章節。

(1).數字和字串使用+運算子:

數字和字串如果使用+運算子進行操作,那麼會將數字先轉換為字串,然後進行字串連接操作:


var antzone = "antzone";
var num = 8;
console.log(antzone+num);
登入後複製

(2).布林值參與的+運算子操作:

如果有布林型參與,那麼首先會將布林值轉換為對應的數字或字串,然後再進行對應的字串連接或算數運算。


var bool = true;
var num = 8;
console.log(bool + num);
登入後複製

上面的程式碼是先將true轉換為數字1,然後再進行算數加運算。


var bool = true;
var num = "8";
console.log(bool + num);
登入後複製

上面的布林值會轉換為對應的字串形式"true",然後再進行字串連接。

(3).減法操作:

如果進行減法操作,那麼兩個運算元都會先轉換成數字,然後在進行算數運算:


var bool = true;
var num = "8";
console.log(bool - num);
登入後複製

true會轉換為數字1,字串"8"會轉換為數字8,然後進行算術運算。

乘,除,大於,小於跟減的轉換也是一樣,就不再舉例子了。

(4).==等性運算:

undefined和null比較特殊,它們兩個使用==運算子回傳值是true。


console.log(undefined==null);
登入後複製

其他值類型進行比較的時候都會將運算數轉換為數字


console.log("3"==3);
登入後複製

上面的程式碼會將字串"3"轉換成數字,然後再進行比較。


console.log("1"==true);
登入後複製

上面的程式碼會分別將"1"和true轉換成數字,然後進行比較。

二.引用型別轉值型別:

#引用型別(物件)轉換成值型別則要複雜很多,下面分散展開介紹。

物件繼承的兩個方法可以幫助我們實作物件到值類型的轉換功能:

(1).toString()方法。

(2).valueOf()方法。

通常我們認為,將一個物件轉換為字串要呼叫toString()方法,轉換為數字要呼叫valueOf()方法,但是真正應用的時候並沒有這麼簡單,看如下程式碼實例:


var obj = {
 webName: "phpcn",
 url:"php.cn"
}
console.log(obj.toString());
登入後複製

從上面的程式碼可以看出,toString()方法並沒有將物件轉換為一個能夠反映此物件的字串。


var arr = [1, 2, 3];
console.log(arr.valueOf());
登入後複製

從上面的程式碼可以看出,valueOf()方法並沒有將物件轉換為能夠反映此物件的一個數字。


var arr = [1, 2, 3];
console.log(arr.toString());
登入後複製

陣列物件的toString()方法能夠將陣列轉換為能夠反映此陣列物件的字串。

總結如下:

(1).有些物件只是簡單繼承了toString()或valueOf()方法,例如第一個例子。
(2).有些物件則不但是繼承了兩個方法,而且還進行了重寫。

所以有些物件的方法能夠達成轉換成字串或數字的目標,有些則不能。

當呼叫toString()或valueOf()將物件轉換成字串或數字的規則如下:

呼叫toString()時,如果物件具有這個方法,則呼叫此方法;如果此方法傳回一個值類型數據,那麼就傳回這個值類型數據,然後再根據所處的上下文環境進行相關資料類型轉換。如果沒有toString(),或者此方法傳回值並不是一個值類型數據,那麼就會呼叫valueOf()(如果此方法存在的話),如果valueOf()傳回一個值類型數據,那麼再根據所處的上下文環境進行相關的資料類型轉換。

進一步說明:

(1).上面介紹了通常預設情況下valueOf()和toString()方法的作用(將物件轉換為數字或字串),但是需要注意的是,這並不是硬性規定,也就是說並不是valueOf()方法必須要回傳數字或toString()方法必須轉換為字串,例如簡單繼承的這兩個方法就無法進行實作轉換為數字和字串的功能,再例如,我們可以自己稱謝這兩個方法,回傳值也沒有必要是數字或字串。

(2).还有需要特别注意的一点就是,很多朋友认为,转换为字符串首先要调用toString()方法, 其实这是错误的认识,我们应该这么理解,调用toString()方法可以转换为字符串,但不一定转换字符串就是首先调用toString()方法。

看如下代码实例:


var arr = [];
arr.valueOf = function () { return "1"; }
arr.toString = function () { return "2"; }
console.log(arr + "1");
登入後複製

上面的代码中,arr是要被转换为字符串的,但是很明显是调用的valueOf()方法,而没有调用toString()方法。有些朋友可能会有这样的质疑,难道[2]这样的数字转换成字符串"2",不是调用的toString()方法吗。

代码如下:


var arr = [2];
console.log(arr + "1");
登入後複製

其实过程是这样的,首先arr会首先调用valueOf()方法,但是数字的此方法是简单继承而来,并没有重写(当然这个重写不是我们实现),返回值是数组对象本身,并不是一个值类型,所以就转而调用toString()方法,于是就实现了转换为字符串的目的。

总结如下:

大多数对象隐式转换为值类型都是首先尝试调用valueOf()方法。但是Date对象是个例外,此对象的valueOf()和toString()方法都经过精心重写,默认是调用toString()方法,比如使用+运算符,如果在其他算数运算环境中,则会转而调用valueOf()方法。

代码实例如下:


var date = new Date();
console.log(date + "1");
console.log(date + 1);
console.log(date - 1);
console.log(date * 1);
登入後複製

以上是JavaScript值型別與引用型別轉換用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

全角英文字母轉換為半角形式的實用技巧 全角英文字母轉換為半角形式的實用技巧 Mar 26, 2024 am 09:54 AM

全角英文字母轉換為半角形式的實用技巧

如何在Windows 11/10中將ODT轉換為Word? 如何在Windows 11/10中將ODT轉換為Word? Feb 20, 2024 pm 12:21 PM

如何在Windows 11/10中將ODT轉換為Word?

如何將虛擬機器轉換為實體機器? 如何將虛擬機器轉換為實體機器? Feb 19, 2024 am 11:40 AM

如何將虛擬機器轉換為實體機器?

如何將AI檔案轉換為CDR格式 如何將AI檔案轉換為CDR格式 Feb 19, 2024 pm 04:09 PM

如何將AI檔案轉換為CDR格式

qq音樂怎麼轉換mp3格式 手機上qq音樂轉mp3格式 qq音樂怎麼轉換mp3格式 手機上qq音樂轉mp3格式 Mar 21, 2024 pm 01:21 PM

qq音樂怎麼轉換mp3格式 手機上qq音樂轉mp3格式

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

Golang時間處理:如何在Golang中將時間戳轉換為字串 Golang時間處理:如何在Golang中將時間戳轉換為字串 Feb 24, 2024 pm 10:42 PM

Golang時間處理:如何在Golang中將時間戳轉換為字串

PHP 月份轉換為英文月份的實作方法詳解 PHP 月份轉換為英文月份的實作方法詳解 Mar 21, 2024 pm 06:45 PM

PHP 月份轉換為英文月份的實作方法詳解

See all articles