Ambiguity description of JavaScript plus "+" _javascript tips

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

Copy Code code as follows:

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

Or a unary operator that represents a positive number, for example:

Copy Code code as follows:

var n = 10;
var n2 = +n;

or represents a summation of numeric expressions, for example:

Copy Code code as follows:

var n = 100;
var nn2 = n + 1;

In three representations, string concatenation and number summation are easy to appear in two semantics. Because the processing of these two operations in JavaScript will depend on the data type, it cannot be interpreted from the operator. We look at an expression individually:

Copy Code code as follows:

AA = a + b;

It is impossible to know the true meaning of a sum or a string connection. This is not known when JavaScript engines do parsing.

The main problem brought by the plus sign "+" is related to another rule. This rule is "if there is a string in the expression, then the string concatenation takes precedence." For example:

Copy Code code as follows:

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

Display the result value as String ' 123456 '
Alert (v1 + v2);

This can cause problems in some hosts. In browsers, for example, because many of the values of the DOM model appear to be numbers, they are actually strings. So trying to do the "and" operation, but become a "string concatenation" operation. The following example illustrates the problem:

Copy Code code as follows:

We see that the IMG element (element) with the ID Testpic has a 1-width border-omitting the default unit px (pixel, pixel). But if you try to widen its border with the following code, it will cause errors (some browsers ignore the value, others pop up the exception, and some browsers may crash):

Copy Code code as follows:

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

Because in fact in the DOM model, BorderWidth is a string value of units, so the value here would be "1px". JavaScript itself does not go wrong, it completes the operation similar to the following and assigns the value to BorderWidth:

Copy Code code as follows:

El.style.borderWidth = ' 1px ' + 10;
Value is ' 1px10 '

At this point, the browser's DOM model could not explain the meaning of "1px10", so it went wrong. When you read the BorderWidth value again, it will still be a value of 1px. So, how to prove the above calculation process? The following code will indicate that the result of the JavaScript operation is 1px10, but when assigned to BorderWidth, the DOM ignores the value of the error, so borderwidth does not actually change:

Copy Code code as follows:

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

The problem is traced to the fact that we allow the omission of the unit's stylesheet, and the scripting engine cannot determine whether the operation is numeric or string connected by operator.

Later, the world's most sought after the XHTML specification to try to avoid the problem from the first, but the impact on the development community remains limited. Therefore, in the manual provided by the developer of the browser, the data type of each attribute is stated as much as possible to avoid the developer writing the code above. In this case, the most correct formulation is:

Copy Code code as follows:

var el = document.getElementById (' testpic ');
1. Take the original unit
var value = parseint (el.style.borderWidth);
var unit = EL.STYLE.BORDERWIDTH.SUBSTR (value.tostring (). length);
2. Operation result and additional unit
El.style.borderWidth = value + + unit;

If you know that the attribute uses the default unit PX and tries 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;