Description of the ambiguity of the javascript plus sign "+" _ javascript skills

A single plus sign acts as an operator in JavaScript. A single plus sign acts as an operator in JavaScript. It can represent a string connection, for example:

The Code is as follows:

Var str = 'hello' + 'World! ';

Or the unary operator that indicates a number to take a positive value. For example:

The Code is as follows:

Var n = 10;
Var n2 = + n;

Or the sum operation of a numeric expression, for example:

The Code is as follows:

Var n = 100;
Var nn2 = n + 1;

In the Three Representations, String concatenation and number summation are prone to ambiguity. Because the processing of these two operations in JavaScript will depend on the Data Type and cannot be interpreted from the operator. Let's look at an expression separately:

The Code is as follows:

Aa = a + B;

It is simply unable to know that its true meaning is in summation, or in string connection. This is unknown when the JavaScript engine performs syntax analysis.

The main problem caused by the plus sign "+" is related to another rule. This rule is "If a string exists in the expression, the operation is performed by string connection first ". For example:

The Code is as follows:

Var v1 = '20140901 ';
Var v2 = 456;

// The displayed result value is a string '123'
Alert (v1 + v2 );

This will cause problems in some hosts. For example, in a browser, many values of the DOM model seem to be numbers, but they are actually strings. Therefore, the attempt to perform "and" operations turns into "string connection" operations. The following example illustrates the problem:

The Code is as follows:

We can see that the IMG element (element) with id testPic has a border with a width of 1-the default unit px (pixel, pixel) is omitted ). However, if you try to use the following code to widen its border, it will lead to errors (Some browsers ignore this value, others bring up exceptions, and some browsers may crash ):

The Code is as follows:

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

In fact, in the DOM model, borderWidth is a string value in units, so the value here will be "1px ". JavaScript itself does not have errors. It performs operations similar to the following and assigns the value to borderWidth:

The Code is as follows:

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

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

The Code is as follows:

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

The root cause of this problem lies in the fact that we have allowed to omit the style table writing unit, and that the script engine cannot determine whether the operation here is a numerical operation or a string connection 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 manual provided by the browser developer, the Data Type of each attribute is written as much as possible to prevent the developer from writing the above Code. In this case, the most correct method is:

The Code is as follows:

Var el = document. getElementById ('testpic ');
// 1. Obtain the original unit
Var value = parseInt (el. style. borderWidth );
Var unit = el. style. borderWidth. substr (value. toString (). length );
// 2. Calculate the result and append the Unit
El. style. borderWidth = value + 10 + unit;

// If you are sure that the property uses the default unit px and tries to omit the unit value,
// You can use the following method (I do not recommend this ):
// El. style. borderWidth = parseInt (el. style. borderWidth) + 10;