JavaScript中將一個(gè)值轉(zhuǎn)換為字符串的方法分析[譯]
譯者注:前兩天在看ES5的時(shí)候順便出了一道題,今天看到這篇文章,剛好解釋的很清楚,就翻譯了一下.
在JavaScript中,主要有三種方法能讓任意值轉(zhuǎn)換為字符串.本文講解了每種方法以及各自的優(yōu)缺點(diǎn).
1.轉(zhuǎn)換字符串的三種方法
這三種將value轉(zhuǎn)換為字符串的方法是:
1.value.toString()
2."" + value
3.String(value)
第一種方法存在的問(wèn)題是,它不能把null和undefined轉(zhuǎn)換為字符串.還有第二種和第三種方法,這兩種方法的效果基本一樣.
•""+value: 使用加法運(yùn)算符配合一個(gè)空字符串可以把任意值轉(zhuǎn)換為字符串,我覺(jué)得這種方法代碼的可讀性很差,但相對(duì)String(value)來(lái),還是有一些人更喜歡用這種轉(zhuǎn)換方式.
•String(value): 這種方法可讀性更好,唯一的問(wèn)題是,這種函數(shù)調(diào)用可能會(huì)迷惑一些人,尤其是那些熟悉Java的的程序員,因?yàn)镾tring同時(shí)也是一個(gè)構(gòu)造函數(shù).要注意的是它作為普通函數(shù)和作為構(gòu)造函數(shù)時(shí)的表現(xiàn)完全不同:
> String("abc") === new String("abc")
false
> typeof String("abc")
'string'
> String("abc") instanceof String
false
> typeof new String("abc")
'object'
> new String("abc") instanceof String
true
String作為普通函數(shù)時(shí)會(huì)產(chǎn)生一個(gè)字符串(一個(gè)原始值).作為構(gòu)造函數(shù)時(shí)會(huì)產(chǎn)生一個(gè)String對(duì)象的實(shí)例.后者在JavaScript中很少用到,所以基本上你可以忽略掉String作為構(gòu)造函數(shù)的用法,但一定要記得它是個(gè)轉(zhuǎn)換函數(shù).
2.""+value 和 String(value)的細(xì)微差別
到現(xiàn)在你已經(jīng)知道了+ 和 String()都可以將它們的“參數(shù)”轉(zhuǎn)換為字符串.但他們的轉(zhuǎn)換方式還是著有細(xì)微的差別,不過(guò)幾乎所有的情況下,轉(zhuǎn)換結(jié)果都是一樣的.
2.1 將原始值轉(zhuǎn)換為字符串
這兩種方法都是使用引擎內(nèi)部的ToString()操作將原始值轉(zhuǎn)換為字符串的.“內(nèi)部操作”的意思是:這個(gè)操作函數(shù)是在ECMAScript 5.1 (§9.8)中定義的,但ES語(yǔ)言本身并不能訪問(wèn)到它.下面這個(gè)表格解釋了ToString()是如何轉(zhuǎn)換原始值的.
| 參數(shù) | 結(jié)果 |
| undefined | "undefined" |
| null | "null" |
| 布爾值 | "true"或者"false" |
| 數(shù)字 | 數(shù)字作為字符串,比如"1.765" |
| 字符串 | 無(wú)需轉(zhuǎn)換 |
2.2 將對(duì)象值轉(zhuǎn)換為字符串
這兩種方法都先將對(duì)象值轉(zhuǎn)換為原始值,然后再將原始值轉(zhuǎn)換為字符串.但是在這個(gè)轉(zhuǎn)換中, + 使用的是內(nèi)部的ToPrimitive(Number)操作(除非被轉(zhuǎn)換的是date對(duì)象),而String()用的是ToPrimitive(String).
•ToPrimitive(Number): 將一個(gè)對(duì)象值轉(zhuǎn)換為原始值,首先調(diào)用obj.valueOf().如果返回值是一個(gè)原始值,則返回這個(gè)原始值.如果不是,則再調(diào)用obj.toString().如果返回值是個(gè)原始值,返回這個(gè)原始值.否則,拋出TypeError異常.
•ToPrimitive(String): 和上面的方法類似,只是優(yōu)先調(diào)用obj.toString()方法而不是obj.valueOf().
通過(guò)轉(zhuǎn)換下面的這個(gè)對(duì)象,你可以看到它們之間的差別:
var obj = {
valueOf: function () {
console.log("valueOf");
return {}; // 不是原始值,繼續(xù)執(zhí)行
},
toString: function () {
console.log("toString");
return {}; // 不是原始值,繼續(xù)執(zhí)行
}
};
//運(yùn)行:
> "" + obj
valueOf
toString
TypeError: Cannot convert object to primitive value
> String(obj)
toString
valueOf
TypeError: Cannot convert object to primitive value
2.3 結(jié)果通常都相同
上面講的區(qū)別,在實(shí)際情況中幾乎不太可能遇到.因?yàn)?大部分對(duì)象都使用了默認(rèn)的繼承而來(lái)的valueOf()方法,返回值總是這個(gè)對(duì)象本身.
> var x = {}
> x.valueOf() === x
true
因此, ToPrimitive(Number)通常會(huì)跳過(guò)valueOf方法返回toString()方法的返回值,這就表現(xiàn)的和ToPrimitive(String)完全一樣.但是,如果這個(gè)對(duì)象是Boolean,Number或者String的對(duì)象實(shí)例,那么它的valueOf()會(huì)返回一個(gè)原始值(被這個(gè)對(duì)象包裝前的原始值).那么這兩種操作就會(huì)按照如下步驟執(zhí)行:
•ToPrimitive(Number)返回了對(duì)象的valueOf()方法的返回值(被包裝前的原始值)再經(jīng)過(guò)ToString()操作后的結(jié)果.
•ToPrimitive(String)返回了對(duì)象的toString()方法的返回值(在該對(duì)象被包裝前的原始值上進(jìn)行ToString()操作的返回值).
就這樣,他們還是返回了相同的結(jié)果,只是轉(zhuǎn)換的途徑不同.
3.結(jié)論
你應(yīng)該選擇哪種方式來(lái)將其他類型的值轉(zhuǎn)換為字符串呢?如果你能確保這個(gè)值永遠(yuǎn)不會(huì)是null或者undefined,則可以用value.toString()來(lái)轉(zhuǎn)換.否則,""+value和String(value)選哪個(gè)都可以,看個(gè)人喜好,我認(rèn)為String(value) 更明確一點(diǎn).
4.相關(guān)文章
- JavaScript values: not everything is an object [原始值和對(duì)象值的區(qū)別]
- What is {} + {} in JavaScript? [解釋了+運(yùn)算符的工作原理]
- String concatenation in JavaScript [怎樣才能更好的連接多個(gè)字符串]
- JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
- javaScript 數(shù)值型和字符串型之間的轉(zhuǎn)換
- javascript中json對(duì)象json數(shù)組json字符串互轉(zhuǎn)及取值方法
- js 數(shù)字、字符串、布爾值的轉(zhuǎn)換方法(必看)
- js將鍵值對(duì)字符串轉(zhuǎn)為json字符串的方法
- JavaScript字符串對(duì)象fromCharCode方法入門實(shí)例(用于把Unicode值轉(zhuǎn)換為字符串)
- JS操作字符串轉(zhuǎn)換為數(shù)值并取整的代碼
- js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時(shí)可以對(duì)不同進(jìn)制進(jìn)行操作
- JavaScript中將值轉(zhuǎn)換為字符串的五種方法總結(jié)
相關(guān)文章
js獲取上傳文件的絕對(duì)路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js獲取上傳文件的絕對(duì)路徑實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
JS 操作Array數(shù)組的方法及屬性實(shí)例解析
本篇文章主要是對(duì)JS操作Array數(shù)組的方法及屬性進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
javascript檢測(cè)頁(yè)面是否縮放的小例子
簡(jiǎn)單寫(xiě)了下,只測(cè)試了chrome,道理很簡(jiǎn)單,其他瀏覽器自行擴(kuò)充。2013-05-05
Kendo Grid editing 自定義驗(yàn)證報(bào)錯(cuò)提示的解決方法
Kendo UI是一個(gè)強(qiáng)大的框架用于快速HTML5 UI開(kāi)發(fā)。基于最新的HTML5、CSS3和JavaScript標(biāo)準(zhǔn)。今天小編通過(guò)分享本文給大家介紹Kendo Grid editing 自定義驗(yàn)證報(bào)錯(cuò)提示的解決方法2016-11-11
JavaScript中this的學(xué)習(xí)筆記及用法整理
在本篇文章里小編給大家整理的是關(guān)于JavaScript中this的使用以及代碼實(shí)例,需要的朋友們學(xué)習(xí)下。2020-02-02

