欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript加號(hào)"+"的二義性說(shuō)明

 更新時(shí)間:2013年03月04日 11:12:28   作者:  
單個(gè)的加號(hào)作為運(yùn)算符在 JavaScript 中有三種作用。

單個(gè)的加號(hào)作為運(yùn)算符在 JavaScript 中有三種作用。它可以表示字符串連接,例如:

復(fù)制代碼 代碼如下:

var str = 'hello ' + 'world!';

或表示數(shù)字取正值的一元運(yùn)算符,例如:

復(fù)制代碼 代碼如下:

var n = 10; 
var n2 = +n;

或表示數(shù)值表達(dá)式的求和運(yùn)算,例如:

復(fù)制代碼 代碼如下:

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á)式:

復(fù)制代碼 代碼如下:

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)算"。例如:


復(fù)制代碼 代碼如下:

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)題:


復(fù)制代碼 代碼如下:

<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ò)誤(一些瀏覽器忽略該值,另一些則彈出異常,還有一些瀏覽器則可能崩潰):

復(fù)制代碼 代碼如下:

var el = document.getElementById('testPic'); 
el.style.borderWidth += 10;
 

因?yàn)槭聦?shí)上在 DOM 模型里,borderWidth 是有單位的字符串值,因此這里的值會(huì)是"1px"。JavaScript 本身并不會(huì)出錯(cuò),它會(huì)完成類似下面的運(yùn)算,并將值賦給 borderWidth:

復(fù)制代碼 代碼如下:

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í)際的修改:

復(fù)制代碼 代碼如下:

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ā)人員寫出上面這樣的代碼。在這種情況下,最正確的寫法是:

復(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關(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-02
  • javascript實(shí)現(xiàn)列表滾動(dòng)的方法

    javascript實(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圖形

    這篇文章主要介紹了如何利用JavaScript讀取excel文件并繪制echarts圖形,文章通過(guò)excel財(cái)務(wù)報(bào)表,并且需要根據(jù)這張excel表繪制成各種echarts圖形,需要了解更多詳情的小伙伴可以參考一下文章內(nèi)內(nèi)容
    2022-05-05
  • JS typeof fn === ''function'' && fn()詳解

    JS typeof fn === ''function'' && fn()詳解

    最近在學(xué)習(xí)js的時(shí)候發(fā)現(xiàn)很多人都喜歡在JS 中存在fn && fn() 執(zhí)行語(yǔ)句或者typeof fn === 'function' && fn(),下面這篇文章就為大家分享一下
    2020-08-08
  • JavaScript定時(shí)顯示廣告代碼分享

    JavaScript定時(shí)顯示廣告代碼分享

    這篇文章主要介紹了JavaScript定時(shí)顯示廣告代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2015-03-03
  • JavaScript實(shí)現(xiàn)的前端AES加密解密功能【基于CryptoJS】

    JavaScript實(shí)現(xiàn)的前端AES加密解密功能【基于CryptoJS】

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進(jìn)行AES加密解密操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • bcastr2.0 通用的圖片瀏覽器

    bcastr2.0 通用的圖片瀏覽器

    bcastr2.0 通用的圖片瀏覽器...
    2006-11-11
  • 原生js+ajax分頁(yè)組件

    原生js+ajax分頁(yè)組件

    這篇文章主要為大家詳細(xì)介紹了原生js+ajax分頁(yè)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • webpack中如何使用雪碧圖的示例代碼

    webpack中如何使用雪碧圖的示例代碼

    這篇文章主要介紹了webpack中如何使用雪碧圖的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • 網(wǎng)頁(yè)和瀏覽器兼容性問(wèn)題匯總(draft1)

    網(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

最新評(píng)論