javascript加号"+"的二义性
單個(gè)的加號(hào)作為運(yùn)算符在 JavaScript 中有三種作用。它可以表示字符串連接,例如:
varstr='hello'+'world!';
或表示數(shù)字取正值的一元運(yùn)算符,例如:
varn=10;
varn2=+n;
或表示數(shù)值表達(dá)式的求和運(yùn)算,例如:
varn=100;
varnn2=n+1;
三種表示法里,字符串連接與數(shù)字求和是容易出現(xiàn)二義性的。因?yàn)?JavaScript 中對(duì)這兩種運(yùn)算的處理將依賴于數(shù)據(jù)類型,而無法從運(yùn)算符上進(jìn)行判讀。我們單獨(dú)地看一個(gè)表達(dá)式:
aa=a+b;
是根本無法知道它真實(shí)的含義是在求和,亦或是在做字符串連接。這在 JavaScript 引擎做語法分析時(shí),也是無法確知的。
加號(hào)"+"帶來的主要問題與另一條規(guī)則有關(guān)。這條規(guī)則是"如果表達(dá)式中存在字符串,則優(yōu)先按字符串連接進(jìn)行運(yùn)算"。例如:
varv1='123';
varv2=456;
//顯示結(jié)果值為字符串'123456'
alert(v1+v2);
這會(huì)在一些宿主中出現(xiàn)問題。例如瀏覽器中,由于 DOM 模型的許多值看起來是數(shù)字,但實(shí)際上卻是字符串。因此試圖做"和"運(yùn)算,卻變成了"字符串連接"運(yùn)算。下面的例子說明了這個(gè)問題:
<imgid="testPic"style="border:1solidred">
我們看到這個(gè) id 為 testPic 的 IMG 元素(element)有一個(gè)寬度為 1 的邊框--省略了默認(rèn)的單位 px(pixel,像素點(diǎn))。但是如果你試圖用下面的代碼來加寬它的邊框,就會(huì)導(dǎo)致錯(cuò)誤(一些瀏覽器忽略該值,另一些則彈出異常,還有一些瀏覽器則可能崩潰):
varel=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 模型無法解釋"1px10"的含義,因此出錯(cuò)了。當(dāng)你再次讀borderWidth 值時(shí),它將仍是值 1px。那么,怎么證明上述的運(yùn)算過程呢?下面的代碼將表明 JavaScript 運(yùn)算的結(jié)果是 1px10,但賦值到 borderWidth 時(shí),是由于 DOM 忽略掉這個(gè)錯(cuò)誤的值,因此 borderWidth 沒有發(fā)生實(shí)際的修改:
alert(el.style.borderWidth='1px'+10);//值為'1px10'
這個(gè)問題追其根源,一方面在于我們?cè)试S了省略單位的樣式表寫法,另一方面也在于腳本引擎不能根據(jù)運(yùn)算符來確定這里的操作是數(shù)值運(yùn)算還是字符串連接。
后來 W3C 推動(dòng) XHTML 規(guī)范,試圖從第一個(gè)方面來避免這個(gè)問題,但對(duì)開發(fā)界的影響仍舊有限。因此,在瀏覽器的開發(fā)商提供的手冊(cè)中,都會(huì)盡可能地寫明每一個(gè)屬性的數(shù)據(jù)類型,以避免開發(fā)人員寫出上面這樣的代碼。在這種情況下,最正確的寫法是:
varel=document.getElementById('testPic');
//1.取原有的單位
varvalue=parseInt(el.style.borderWidth);
varunit=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;
總結(jié)
以上是生活随笔為你收集整理的javascript加号"+"的二义性的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 完全理解icmp协议
- 下一篇: 方根法公式_仓储管理笔记之库存分析法:A