javascript加號(hào)"+"的二義性說(shuō)明
單個(gè)的加號(hào)作為運(yùn)算符在 JavaScript 中有三種作用。它可以表示字符串連接,例如:
var str = 'hello ' + 'world!';
或表示數(shù)字取正值的一元運(yùn)算符,例如:
var n = 10;
var n2 = +n;
或表示數(shù)值表達(dá)式的求和運(yùn)算,例如:
var n = 100;
var nn2 = n + 1;
三種表示法里,字符串連接與數(shù)字求和是容易出現(xiàn)二義性的。因?yàn)?JavaScript 中對(duì)這兩種運(yùn)算的處理將依賴于數(shù)據(jù)類型,而無(wú)法從運(yùn)算符上進(jìn)行判讀。我們單獨(dú)地看一個(gè)表達(dá)式:
aa = a + b;
是根本無(wú)法知道它真實(shí)的含義是在求和,亦或是在做字符串連接。這在 JavaScript 引擎做語(yǔ)法分析時(shí),也是無(wú)法確知的。
加號(hào)"+"帶來(lái)的主要問(wèn)題與另一條規(guī)則有關(guān)。這條規(guī)則是"如果表達(dá)式中存在字符串,則優(yōu)先按字符串連接進(jìn)行運(yùn)算"。例如:
var v1 = '123';
var v2 = 456;
//顯示結(jié)果值為字符串'123456'
alert( v1 + v2 );
這會(huì)在一些宿主中出現(xiàn)問(wèn)題。例如瀏覽器中,由于 DOM 模型的許多值看起來(lái)是數(shù)字,但實(shí)際上卻是字符串。因此試圖做"和"運(yùn)算,卻變成了"字符串連接"運(yùn)算。下面的例子說(shuō)明了這個(gè)問(wèn)題:
<img id="testPic" style="border: 1 solid red">
我們看到這個(gè) id 為 testPic 的 IMG 元素(element)有一個(gè)寬度為 1 的邊框--省略了默認(rèn)的單位 px(pixel,像素點(diǎn))。但是如果你試圖用下面的代碼來(lái)加寬它的邊框,就會(huì)導(dǎo)致錯(cuò)誤(一些瀏覽器忽略該值,另一些則彈出異常,還有一些瀏覽器則可能崩潰):
var el = document.getElementById('testPic');
el.style.borderWidth += 10;
因?yàn)槭聦?shí)上在 DOM 模型里,borderWidth 是有單位的字符串值,因此這里的值會(huì)是"1px"。JavaScript 本身并不會(huì)出錯(cuò),它會(huì)完成類似下面的運(yùn)算,并將值賦給 borderWidth:
el.style.borderWidth = '1px' + 10;
//值為 '1px10'
這時(shí),瀏覽器的 DOM 模型無(wú)法解釋"1px10"的含義,因此出錯(cuò)了。當(dāng)你再次讀borderWidth 值時(shí),它將仍是值 1px。那么,怎么證明上述的運(yùn)算過(guò)程呢?下面的代碼將表明 JavaScript 運(yùn)算的結(jié)果是 1px10,但賦值到 borderWidth 時(shí),是由于 DOM 忽略掉這個(gè)錯(cuò)誤的值,因此 borderWidth 沒(méi)有發(fā)生實(shí)際的修改:
alert( el.style.borderWidth = '1px' + 10 );//值為 '1px10'
這個(gè)問(wèn)題追其根源,一方面在于我們?cè)试S了省略單位的樣式表寫法,另一方面也在于腳本引擎不能根據(jù)運(yùn)算符來(lái)確定這里的操作是數(shù)值運(yùn)算還是字符串連接。
后來(lái) W3C 推動(dòng) XHTML 規(guī)范,試圖從第一個(gè)方面來(lái)避免這個(gè)問(wèn)題,但對(duì)開(kāi)發(fā)界的影響仍舊有限。因此,在瀏覽器的開(kāi)發(fā)商提供的手冊(cè)中,都會(huì)盡可能地寫明每一個(gè)屬性的數(shù)據(jù)類型,以避免開(kāi)發(fā)人員寫出上面這樣的代碼。在這種情況下,最正確的寫法是:
var el = document.getElementById('testPic');
// 1.取原有的單位
var value = parseInt(el.style.borderWidth);
var unit = el.style.borderWidth.substr(value.toString().length);
// 2.運(yùn)算結(jié)果并附加單位
el.style.borderWidth = value + 10 + unit;
//如果你確知屬性采用了默認(rèn)單位 px,并試圖仍然省略單位值,
//那么你可以用下面這種方法(我并不推薦這樣):
// el.style.borderWidth = parseInt(el.style.borderWidth) + 10;
相關(guān)文章
window.open關(guān)于瀏覽器攔截問(wèn)題分析及解決方法
window.open是javascript函數(shù),該函數(shù)的作用是打開(kāi)一個(gè)新窗口或這改變?cè)瓉?lái)的窗口,如果你直接在js中調(diào)用window.open()函數(shù)去打開(kāi)一個(gè)新窗口,瀏覽器會(huì)攔截你,那么如何避免呢,感興趣的朋友可以了解下本文或許對(duì)你學(xué)習(xí)有所幫助2013-02-02javascript實(shí)現(xiàn)列表滾動(dòng)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)列表滾動(dòng)的方法,較為詳細(xì)的分析了javascript實(shí)現(xiàn)列表滾動(dòng)的頁(yè)面布局及javascript滾動(dòng)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07如何利用JavaScript讀取excel文件并繪制echarts圖形
這篇文章主要介紹了如何利用JavaScript讀取excel文件并繪制echarts圖形,文章通過(guò)excel財(cái)務(wù)報(bào)表,并且需要根據(jù)這張excel表繪制成各種echarts圖形,需要了解更多詳情的小伙伴可以參考一下文章內(nèi)內(nèi)容2022-05-05JS typeof fn === ''function'' && fn()詳解
最近在學(xué)習(xí)js的時(shí)候發(fā)現(xiàn)很多人都喜歡在JS 中存在fn && fn() 執(zhí)行語(yǔ)句或者typeof fn === 'function' && fn(),下面這篇文章就為大家分享一下2020-08-08JavaScript實(shí)現(xiàn)的前端AES加密解密功能【基于CryptoJS】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進(jìn)行AES加密解密操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08網(wǎng)頁(yè)和瀏覽器兼容性問(wèn)題匯總(draft1)
由于IE擴(kuò)展了許多私有的DOM、CSS等導(dǎo)致許多網(wǎng)頁(yè)的開(kāi)發(fā)者都根據(jù)IE開(kāi)發(fā),才導(dǎo)致許多網(wǎng)頁(yè)的不規(guī)范,從而導(dǎo)致現(xiàn)在的瀏覽器瀏覽相同網(wǎng)頁(yè)效果不盡相同。2009-06-06