How to do string concatenation in Javascript

Question

I am trying to check user input before displaying the correct HTML element.

Here is my code:

<script>
var additem = '<div><div class="itesm">' +
'<h1>'+itemname+'</h1>';
if(itype == 'edit'){
 additem .= '<div><input id="itemdis" value="'+itemdis+'"></div>';
}else{
 additem .= 'Good item';
}
 additem .= '</div>';
$('showitem').html(additem);
</script>

I always do something like this in PHP, but I can't figure out how to do it in javaScript.

Can anyone tell me how to concatenate the strings together so that my example works?

Put `+` instead of `.` Javascript uses `+` operator as concatenation... — Yash Parekh, Aug 23 '17 at 09:25
@YashParekh i thing i found this `additem.concat(additem1, additem2);` and it worked — Peter, Aug 23 '17 at 09:29
You can use es6 template strings : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals — NeoPix, Aug 23 '17 at 09:30
Your line 2 + 3 are doing exactly what you want to know. This is easy to Google. — Martijn, Aug 23 '17 at 09:30
@PhilipJems You said about operator and `concat()` is a function. After all working things will be better than nothing. Happy Coding — Yash Parekh, Aug 23 '17 at 09:31

Super User · Answer 1 · 2017-08-23T09:34:19.043

You can use + instead of ., check snippet below..

var itemname = "itemname",
    itemdis = "itemdis",
    itype = "edit";

var additem = '<div><div class="itesm">' +
'<h1>'+itemname+'</h1>';
if(itype == 'edit'){
 additem += '<div><input id="itemdis" value="'+itemdis+'"></div>';
}else{
 additem += 'Good item';
}
 additem += '</div>';
document.getElementById('showitem').innerHTML =  additem;

<div id="showitem"></div>

score 0 · Answer 2 · answered Aug 23 '17 at 09:28

This will help you.

<script>
var additem = '<div><div class="itesm">' +
'<h1>'+itemname+'</h1>';
  if(itype == 'edit'){
   additem .= '<div><input id="itemdis" value="'+itemdis+'"></div>';
  }else{
   additem .= 'Good item';
  }
  additem .= '</div>';
  $('showitem').html(additem);
</script>

Please note javascript has + operator for concatenation.

score 0 · Accepted Answer · answered Aug 23 '17 at 09:39

var itype = 'edit';
var additem = '<div><div class="itesm"><h1>ABC</h1>';
if(itype == 'edit'){
 additem += '<div><input id="itemdis" value="ABC"></div>';
}else{
 additem += 'Good item';
}
 additem += '</div>';
$('div').html(additem);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="showtime"></div>

Rick van Lieshout · Answer 4 · 2017-08-23T09:49:42.130

Some other users have already pointed out that javascript uses the + operator and not the . operator (like PHP does).

A more, full-fledged example can be found at w3schools.

Note that this, however, will not work right when you use numbers and strings combined. As demonstrated with the following code:

var a = 10;
var b = 20;
console.log('result is ' + a + b);

The previous code will, unlike expected, print "result is 120".

There is another, well-known, way to concat strings, however. This works by using the .concat method like so:

var str1 = "Hello ";
var str2 = "world!";
var res = str1.concat(str2);

Interestingly you could also convert the strings to an array and use array operations like [push][2] to concatenate strings.

A performance evaluation (by jsperf) can be found here.

ps: sorry for taking so long, I forgot about this tab :)

How to do string concatenation in Javascript

4 Answers4

Linked