Concatenate strings in Javascript: Quick guide

Strings in javascript are the most commonly used data types. Anything we write between double quotes is a string. We can also use single quotes for strings. We can manipulate strings in various ways. Javascript provides a lot of options for string manipulation. One of the ways of working with strings in javascript is by concatenating them. In this article, we will show how to concatenate strings in Javascript by many methods.

Topics in the article:

• Concatenate strings in one Array
• How to concatenate strings and other variables
• Concatenate strings with a separator

Concatenate strings in one Array

An array in javascript can hold any number of values. We can also store strings in an array. The following code has an array that holds three strings. This is one example of how to concatenate strings in an array in Javascript.

Example 1

var arr = ["USA", "Mexico", "Canada"]

In this array, we have “USA” at the zeroth index. similarly, “Mexico” and “Canada” occupy the next two positions. In javascript, we can concatenate all the values inside the array in a very simple way. We can use the join() method to concatenate the strings inside the array.

var arr = ["USA", "Mexico", "Canada"]
var result = arr.join()

The content of the variable result is:

Observe the result variable above. We concatenated the USA, Mexico, and Canada by using the join() method. But we can notice a comma after the USA and Mexico. This is the default separator of the join() method. We will learn about separators later.

We can also concatenate two arrays in javascript using the concat() method.

var arr = ["USA", "Mexico", "Canada"]
var arr2 = ["Spain", "France", "Germany"]
var result = arr.concat(arr2)
// result = "USA,Mexico,Canada,Spain,France,Germany"

The content of the variable result is:

Example 2

In the above example, we have a second array named arr2. It also contains the names of the countries. We concatenate the first and second array by using the concat() method. We can see the result as a string containing the names of all six countries. But again we can notice, a comma is separating each country.

Concatenate strings and other variables in Javascript

In javascript, we can also concatenate strings with variables. We can do more than concatenate strings in Javascript: we can concatenate integers and booleans to strings.  For example, observe the following code.

var sum = 10

var result = "value of sum is: " + sum

//result = "value of sum is 10"

The content of the variable result is:

In the above example, we concatenate an integer variable with a string. The sum variable has a value of 10 and in the result variable, we concatenate the sum variable with a string, i.e “value of sum is: “. We have to use a (+) sign for concatenation.

We can also concatenate a number of variables containing string values with each other.

var string1 = "USA";
var string2 = "Mexico";
var string3 = "Canada";

var result = string1+string2+string3;

The content of the variable result is:

In the above example, we can see the values of all three variables are concatenated into a single string. This is how we concatenate a number of variables.

We can also concatenate a string with variables containing different types of data types.

var string1 = "Mexico";
var integer1 = 100;
var boolean1 = true;

var result = string1+integer1+boolean1;

The content of the variable result is:

In the above example, we have three variables. First, the variable has a string, the second has an integer and third has a boolean. We concatenated these three variables into a string using the (+) sign. The result of this concatenation is also a string, i.e “string100true”.

Remember, In javascript, anything concatenated with a string is always a string. It does not matter what are data types of other variables.

Concatenate strings in Javascript with a separator

Earlier, when we used the join() and concat() methods, we found out that the resulting string has a separator with every value. The separator was a comma that is the default separator of these two methods. But while concatenating strings using the (+) sign, we should use some kind of separators because they make the resulting string look better. The following example concatenates three strings using three slashes as a separator.

var string1 = "This is string1" 
var string2 = "This is string2"
var string3 = "This is string3"
var separator = "///"
var result = string1 + separator + string2 + separator + string3

The content of the variable result is:

In the above example, we used a separator (///) while concatenating three variables.

We can also use a separator with a for loop.

function concatWithSeparator(newString, string)
{
  var result = '';
  for(var i=0;i<string.length;i++) { 
     result = result + string[i]; 
     if(i+i<string.length) { 
         result = result + separator 
     } 
  }
  return result;
}

var string = ["USA","Mexico","Canada"]
var separator = "///"
var newString = ''; 

result = concatWithSeparator(newString, string);

The content of the variable result is:

Apart from the above two ways, we can also use the join() method with a separator. Earlier when we used this method, the default separator was a comma. We can specify our own separator also.

var arr = ["USA", "Mexico", "Canada"];

var result = arr.join("///")

The content of the variable result is:

In the above example, we again used the join() method to concatenate values of the array. But this time we passed a value inside the join() method. This is the separator. We can see the separator in the resulting string.

Conclusion

Strings in javascript are very common and useful. They play an important part while writing code. Javascript provides many methods and ways for manipulating strings in javascript. Remember that whenever you have issues with Javascript, you can debug in Chrome to find the exact point of error.

Concatenate strings in Javascript inside arrays, or even merged with other variables (like integers, floats, and booleans).  We can also use separators while concatenating. Strings in arrays can also be manipulated.