Ambiguity of JavaScript plus sign ' '_javascript skills

A single plus sign has three functions as an operator in JavaScript. It can represent string concatenation, for example:

Copy code The code is as follows:

var str = 'hello ' 'world!';

or a unary operator that represents a positive value of a number, for example:

Copy code The code is as follows:

var n = 10;
var n2 = n;

or represents the summation operation of numerical expressions, for example:

Copy code The code is as follows:

var n = 100;
var nn2 = n 1;

Among the three representations, string concatenation and numerical summation are prone to ambiguity. Because the processing of these two operations in JavaScript will depend on the data type, it cannot be judged from the operator. Let’s look at an expression alone: ​​

Copy the code The code is as follows:

aa = a b;

has no way of knowing whether its true meaning is summing or string concatenation. This is also impossible to determine when the JavaScript engine performs syntax analysis.

The main problem raised by the plus sign " " relates to another rule. This rule is "If there are strings in the expression, string concatenation is preferred." For example:

Copy code The code is as follows:

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

//Display the result value as the string '123456'
alert( v1 v2);

This will occur in some hosts Something went wrong. For example, in browsers, many values ​​in the DOM model appear to be numbers, but are actually strings. So trying to do the "and" operation turned into a "string concatenation" operation. The following example illustrates this problem:

Copy code The code is as follows:

We see that the IMG element with the id testPic has a border with a width of 1 - the default unit px (pixel, pixel point) is omitted. But if you try to widen its borders with the following code, it will cause an error (some browsers ignore the value, others will pop up exceptions, and some browsers may crash):

Copy code The code is as follows:

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

Because in fact in the DOM model, borderWidth is a united string value, so the value here will be "1px". JavaScript itself does not make errors, it will complete operations similar to the following and assign the value to borderWidth:

Copy code The code is as follows :

el.style.borderWidth = '1px' 10;
//The value is '1px10'

At this time, the browser's DOM model cannot interpret the meaning of "1px10", so an error occurs. When you read the borderWidth value again, it will still be the value 1px. So, how to prove the above operation process? The following code will show that the result of the JavaScript operation is 1px10, but when assigned to borderWidth, the DOM ignores this wrong value, so borderWidth is not actually modified:

Copy code The code is as follows:

alert( el.style.borderWidth = '1px' 10 );//The value is '1px10'

The root cause of this problem is that on the one hand we allow the writing of style sheets that omit units, and on the other hand the script engine cannot determine whether the operation here is a numerical operation or a string concatenation based on the operator.

Later, W3C promoted the XHTML specification and tried to avoid this problem from the first aspect, but the impact on the development community was still limited. Therefore, in the manuals provided by browser developers, the data type of each attribute will be stated as much as possible to prevent developers from writing code like the above. In this case, the most correct way to write it is:

Copy the code The code is as follows:

var el = document.getElementById('testPic');
// 1. Get the original unit
var value = parseInt(el.style.borderWidth);
var unit = el.style.borderWidth .substr(value.toString().length);
// 2. Calculate the result and attach the unit
el.style.borderWidth = value 10 unit;

//If you know the attribute Using the default unit px and trying to still omit the unit value,
// Then you can use the following method (I do not recommend this):
// el.style.borderWidth = parseInt(el.style .borderWidth) 10;