Javascript Append String: How to Concate Strings in JavaScript

by

To represent characters in JavaScript, you can use the String Object. Everything in JavaScript is an Object. The String object is used to represent the sequence of characters. The string is an immutable object and can not change after we created it. Let’s see how to combine two strings and append a string to a string using various approaches.

JavaScript append string

To append a string in JavaScript,

  1. Using + operator
  2. Using template literals
  3. Use concat() method
  4. Use join() method

The + operator

The + or concate operator is used to concatenate two strings. If the left-hand side of the + operator is a string, JavaScript will coerce the right-hand side to a string.

In JavaScript, “+” concatenation works by creating a new String object.

let str = "Maeve: ";
str += "Wiley";

console.log(str);

Output

Maeve: Wiley

You can see that we have appended a “Wiley” string to the “Maeve” string.

The + and += operators are fast on modern JavaScript engines; that’s why we used them to append the string.

Using template literals

Template literals are string literals producing enclosed expressions. You can use multi-line strings and string interpolation features with them.

Before template strings, this is the output of the following string.

let fn = "Krunal"
let country = "India"

console.log("Hi, I'm " + fn + " and I'm from " + country);

Output

Hi, I'm Krunal and I'm from India

You can see that the code is not easily readable, and you can make mistakes if you are not careful. It is a mess and cumbersome.

To resolve this issue, we can use the template literals, which makes things super easy.

let fn = "Krunal"
let country = "India"

console.log(`Hi, I'm ${fn} and I'm from ${country}`);

Output

Hi, I'm Krunal and I'm from India

Template literals can contain placeholders, and they are indicated by the dollar sign and curly braces (${expression}).

The expressions in the placeholders and the text between the backticks (` `) get passed to a function.

You can see that it returns the same output as the + operator, but it is more readable and more understandable.

Using concat() method

The string concat() is a built-in JavaScript method that takes one or more parameters and returns the modified string. You can use the concat() method to append or join the strings.

Strings are immutable in JavaScript, so concat() doesn’t modify the string in place.

const dt1 = "Otis";
const dt2 = dt1.concat(" ", "Milburne");

console.log(dt1);
console.log(dt2);

Output

Otis
Otis Milburne

As you can see that we have appended a “Milburne” string to the “Otis” string using the string.concat() method.

One downside of using string.concat() method is that the input must be a string. If the input parameter is null and you call the concat() function, it will return a TypeError.

const dt1 = null;
const dt2 = dt1.concat(" ", "Milburne");

console.log(dt1);
console.log(dt2);

Output

/Users/krunal/Desktop/code/node-examples/es/app.js:10
const dt2 = dt1.concat(" ", "Milburne");
 ^

TypeError: Cannot read property 'concat' of null

In the output, we get TypeError: Cannot read property ‘concat’ of null. This is why the concat() method is rarely used because it has more error cases than the + operator.

The best use case of the concat() method is to call it on an empty string.

console.log(''.concat('Data', ' ', 'Science'));

Output

Data Science

How to append an array to string in JavaScript

To append an array to a string in JavaScript, use the string.concat() method. The concat() method is used to combine a string with the array. When you pass an array as a parameter, it will convert the array items into a string separated by a comma.

const langs = ["Python", "JavaScript", "R"];

console.log('My Languages are '.concat(langs));

Output

My Languages are Python,JavaScript,R

You can see that we have appended all the array elements to the string, which looks like a complete string in the output.

There was a time when appending strings into an array and finalizing a string by using the join() function was considered the fastest and best method. These days browsers have super optimized string routines, and it is recommended that using(concat operator) + and += approaches are the fastest and best.

Javascript String concatenation vs. +

The main difference between String concat() and + operator is that if you are using an integer as a string, you need to use the + operator to append strings. If you use the concat() method, then it might throw an error.

It is also highly recommended that use the string concatenation operators (+, +=) instead of the String.concat() method for performance reasons to append or join the strings.

Using join() method

The array join() is a built-in method that combines the array items and returns a string. The items will be separated by a specified separator. The default separator is a comma (,). If you are working with an array, it’s beneficial to add additional strings.

const spain = "Hola";
const belgium = "Hello";
const switzerland = ['Other winners are ', spain, belgium];

const italy = "kem chho";

switzerland.push(italy);

console.log(switzerland.join(' '));

Output

Other winners are Hola Hello kem chho

You can see that we have appended the array elements and convert them into a string using the join() method.

That’s it for this tutorial.

Leave a Comment