How to Append a String in JavaScript

by

JavaScript append string

There are the following ways to append a string in JavaScript.

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

Method 1: Using 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 into a string. In JavaScript, the “+” concatenation creates a new String object.

Example

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 in modern JavaScript engines, so we used them to append the string.

Method 2: Using template literals

Template literals are string literals producing enclosed expressions. You can use multi-line strings and string interpolation features with them. For example, this is the output of the following string before template strings.

Example

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 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.

It returns the same output as the + operator, but it is more readable and more understandable.

Method 3: Using the 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.

Example

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. 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

Method 4: Using the join() method

The array join() is a built-in method that combines the array items and returns a string. A specified separator will separate the elements. The default separator is a comma (,). If you are working with an array, adding additional strings is beneficial.

Example

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

We have appended the array elements and converted them into a string using the join() method.

That’s it.

Leave a Comment