javascript加號' '的二義說明_javascript技巧

單一的加號作為運算子在 JavaScript 中有三種作用。它可以表示字串連接，例如：

複製程式碼 程式碼如下:

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

或表示數字取正值的一元運算符，例如：

複製代碼 代碼如下:

var n = 10; 
var n2 = n;

或表示數值表達式的求和運算，例如：

複製代碼 代碼如下:

var n = 100; 
var nn2 = n 1;
 

三種表示法裡，字串連接與數字求和是容易出現二義性的。因為 JavaScript 中對這兩種運算的處理將依賴資料類型，而無法從運算子上進行判讀。我們單獨看一個表達式：

複製程式碼 程式碼如下:

aa = a b;

是根本無法知道它真實的意思是在求和，亦或是在做字串連接。這在 JavaScript 引擎做語法分析時，也是無法確切的。

加號" "帶來的主要問題與另一條規則有關。這條規則是"如果表達式中存在字串，則優先按字串連接進行運算"。例如：

複製程式碼 程式碼如下:

var v1 = '123'; >var v2 = 456; 

//顯示結果值為字串'123456' 
alert( v1 v2 );

這會在某些宿主中出現問題。例如瀏覽器中，由於 DOM 模型的許多值看起來是數字，但實際上卻是字串。因此試圖做"和"運算，卻變成了"字串連接"運算。下面的例子說明了這個問題：

複製程式碼 程式碼如下:

 

我們看到這個 id 為 testPic 的 IMG 元素（element）有一個寬度為 1 的邊框--省略了預設的單位 px（pixel，像素點）。但如果你試圖用下面的程式碼來加寬它的邊框，就會導致錯誤（有些瀏覽器忽略該值，有些則彈出異常，還有一些瀏覽器則可能崩潰）：

複製程式碼 程式碼如下:

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

因為事實上在 DOM 模型裡，borderWidth 是有單位的字串值，所以這裡的值會是"1px"。 JavaScript 本身不會出錯，它會完成類似下面的運算，並將值賦給borderWidth：

複製程式碼 程式碼如下:

el.style.borderWidth = '1px' 10; 

//值為'1px10'

這時，瀏覽器的 DOM 模型無法解釋"1px10"的含義，因此出錯了。當你再讀borderWidth 值時，它將仍是值 1px。那麼，要怎麼證明上述的運算過程呢？下面的程式碼將顯示JavaScript 運算的結果是1px10，但賦值到borderWidth 時，是由於DOM 忽略掉這個錯誤的值，因此borderWidth 沒有發生實際的修改：

複製程式碼 程式碼如下:

alert( el.style.borderWidth = '1px' 10 );//值為'1px10'

這個問題追其根源，一方面在於我們允許了省略單位的樣式表寫法，另一方面也在於腳本引擎不能根據運算符來確定這裡的操作是數值運算還是字串連接。

後來 W3C 推動 XHTML 規範，試圖從第一個面向來避免這個問題，但對開發界的影響仍舊有限。因此，在瀏覽器的開發人員提供的手冊中，都會盡可能地寫明每一個屬性的資料類型，以避免開發人員寫出上面這樣的程式碼。在這種情況下，最正確的寫法是：

複製程式碼 程式碼如下:

程式碼如下:


var el = document.getElementById('testPic'); 
// 1.取原有的單位 
var value = parseInt(el.style.borderWidth); 
var unit = el. .substr(value.toString().length); 
// 2.運算結果並附加單位 
el.style.borderWidth = value 10 unit; 

//如果你知道屬性採用了預設單位px，並試圖仍然省略單位值，  //那麼你可以用下面這種方法(我並不推薦這樣):  // el.style.borderWidth = parseInt(el.style .borderWidth) 10;