Add a String to Beginning and End of another String in JS

# Add a String to the beginning and end of another String

Use the addition (+) operator to add a string to the beginning and end of another string, e.g. "before" + str + "after".

When used with strings, the addition operator concatenates the strings and returns the result.

Copied!
const str = 'ello worl';

const result = 'h' + str + 'd';

// 👇️ "hello world"
console.log(result);

We used the addition (+) operator to add a string to the beginning and end of another string.

When used with strings, the addition operator concatenates them, and when used with numbers, the operator sums the numbers.

Copied!
console.log('ab' + 'cd'); // 👉️ "abcd"
console.log(2 + 2); // 👉️ 4

You could achieve the same result by using a template literal.

# Using a template literal

You can also use a template literal to add a string to the beginning and end of another string.

Template literals allow us to embed expressions into a string.

Copied!
const str = 'ello worl';

const result = `h${str}d`;

// 👇️ "hello world"
console.log(result);

We wrapped the string using backticks, which makes it a template literal.

The dollar sign and curly braces part ${} is an expression that gets evaluated.

In our case, the value of the str variable replaces the ${str} part of the template literal.

Alternatively, you can use the String.join() method.

# Using Array.join()

This is a two-step process:

1. Wrap the strings in an array.
2. Use the Array.join() method to join the strings without a separator.

Copied!
const prefix = 'h';
const suffix = 'd';

const str = 'ello worl';

const result = [prefix, str, suffix].join('');
console.log(result); // 👉️ hello world

We wrapped the strings in an array to be able to use the Array.join() method.

The Array.join() method concatenates all of the elements in an array using a separator.

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

# Append a string to the end of another string

If you only need to append a string to another string, you can also use the String.concat() method.

The concat method concatenates the supplied parameters to the string.

Copied!
const str = 'bobby ';

const result = str.concat('hadz');
console.log(result); // 👉️ "bobby hadz"

The String.concat() method takes one or more strings as parameters and concatenates them to the string on which it was called.

Copied!
const result = 'one '.concat('two', ' three');
console.log(result); // 👉️ "one two three"

The method returns a new string containing the combined text.