Javascript (+) sign concatenates instead of giving

问题:

Why when I use this: (assuming i = 1)

divID = \"question-\" + i+1;

I get question-11 and not question-2?

回答1:

Use this instead:

var divID = \"question-\" + (i+1)

It\'s a fairly common problem and doesn\'t just happen in JavaScript. The idea is that + can represent both concatenation and addition.

Since the + operator will be handled left-to-right the decisions in your code look like this:

• \"question-\" + i: since \"question-\" is a string, we\'ll do concatenation, resulting in \"question-1\"
• \"question-1\" + 1: since \"queston-1\" is a string, we\'ll do concatenation, resulting in \"question-11\".

With \"question-\" + (i+1) it\'s different:

• since the (i+1) is in parenthesis, its value must be calculated before the first + can be applied:
  • i is numeric, 1 is numeric, so we\'ll do addition, resulting in 2
• \"question-\" + 2: since \"question-\" is a string, we\'ll do concatenation, resulting in \"question-2\".

回答2:

You may also use this

divID = \"question-\" + (i*1+1); 

to be sure that i is converted to integer.

回答3:

Use only:

divID = \"question-\" + parseInt(i) + 1;

When \"n\" comes from html input field or is declared as string, you need to use explicit conversion.

var n = \"1\"; //type is string
var frstCol = 5;
lstCol = frstCol + parseInt(n);

If \"n\" is integer, don\'t need conversion.

n = 1; //type is int
var frstCol = 5, lstCol = frstCol + n;

回答4:

Since you are concatenating numbers on to a string, the whole thing is treated as a string. When you want to add numbers together, you either need to do it separately and assign it to a var and use that var, like this:

i = i + 1;
divID = \"question-\" + i;

Or you need to specify the number addition like this:

divID = \"question-\" + Number(i+1);

EDIT

I should have added this long ago, but based on the comments, this works as well:

divID = \"question-\" + (i+1);

回答5:

divID = \"question-\" + parseInt(i+1,10);

check it here, it\'s a JSFiddle

回答6:

Joachim Sauer\'s answer will work in scenarios like this. But there are some instances where adding brackets won\'t help.

For eg: You are passing \'sum of value of an input element and an integer\' as an argument to a function.

arg1 = $(\"#elemId\").val();   // value is treated as string
arg2 = 1;

someFuntion(arg1 + arg2);    // and so the values are merged here
someFuntion((arg1 + arg2));  // and here

You can make it work by using Number()

arg1 = Number($(\"#elemId\").val());
arg2 = 1;

someFuntion(arg1 + arg2);

or

arg1 = $(\"#elemId\").val();
arg2 = 1;

someFuntion(Number(arg1) + arg2);

回答7:

Add brackets

divID = \"question-\" + (i+1);

回答8:

using braces surrounding the numbers will treat as addition instead of concat.

divID = \"question-\" + (i+1)

回答9:

The reason you get that is the order of precendence of the operators, and the fact that + is used to both concatenate strings as well as perform numeric addition.

In your case, the concatenation of \"question-\" and i is happening first giving the string \"question=1\". Then another string concatenation with \"1\" giving \"question-11\".

You just simply need to give the interpreter a hint as to what order of prec endence you want.

divID = \"question-\" + (i+1);

回答10:

var divID = \"question-\" + (parseInt(i)+1);

Use this + operator behave as concat that\'s why it showing 11.

回答11:

Another alternative could be using:

divID = \"question-\" + i- -1;

Subtracting a negative is the same as adding, and a minus cannot be used for concatenation

回答12:

Simple as easy ... every input type if not defined in HTML is considered as string. Because of this the Plus \"+\" operator is concatenating.

Use parseInt(i) than the value of \"i\" will be casted to Integer.

Than the \"+\" operator will work like addition.

In your case do this :-

divID = \"question-\" + parseInt(i)+1;

回答13:

One place the parentheses suggestion fails is if say both numbers are HTML input variables. Say a and b are variables and one receives their values as follows (I am no HTML expert but my son ran into this and there was no parentheses solution i.e.

• HTML inputs were intended numerical values for variables a and b, so say the inputs were 2 and 3.
• Following gave string concatenation outputs: a+b displayed 23; +a+b displayed 23; (a)+(b) displayed 23;
• From suggestions above we tried successfully : Number(a)+Number(b) displayed 5; parseInt(a) + parseInt(b) displayed 5.

Thanks for the help just an FYI - was very confusing and I his Dad got yelled at \'that is was Blogger.com\'s fault\" - no it\'s a feature of HTML input default combined with the \'addition\' operator, when they occur together, the default left-justified interpretation of all and any input variable is that of a string, and hence the addition operator acts naturally in its dual / parallel role now as a concatenation operator since as you folks explained above it is left-justification type of interpretation protocol in Java and Java script thereafter. Very interesting fact. You folks offered up the solution, I am adding the detail for others who run into this.