Skip to main content

How to Add a String to the Beginning or End of Another String in JavaScript

Concatenating strings—joining them together to form a new string—is one of the most fundamental operations in JavaScript. A common requirement is to wrap an existing string with a prefix (adding to the beginning) or a suffix (adding to the end).

This guide will teach you the modern and most common methods for string concatenation. You will learn how to use template literals, which are the recommended best practice for their readability, as well as the classic addition (+) operator. We will also cover other useful methods like String.prototype.concat() for completeness.

The Core Task: String Concatenation​

The goal is to take a base string and attach other strings to its beginning (prefix) or end (suffix).

Base String: "world" Desired Prefix: "Hello, " Desired Suffix: !" Final Result: "Hello, world!"

Template literals (or template strings) are the modern, clean, and most readable way to build strings in JavaScript. They are enclosed in backticks (`) instead of single or double quotes, and you can embed variables or expressions directly inside them using the ${expression} syntax.

The logic:

  • Wrap your prefix, main string, and suffix inside backticks, with the variables placed inside ${} placeholders.

The solution:

const mainString = 'world';
const prefix = 'Hello, ';
const suffix = '!';

const result = `${prefix}${mainString}${suffix}`;

console.log(result); // Output: "Hello, world!"

Output:

Hello, world!
note

This is the recommended best practice for string construction in modern JavaScript because it is highly readable and less error-prone than other methods.

Method 2: Using the Addition (+) Operator​

The classic and most widely known method for string concatenation is the addition (+) operator. When used with strings, it joins them together.

The problem:

  • While this method works perfectly, it can become hard to read and manage if you are joining many variables and literal strings, a situation often referred to as "plus-clutter."

The solution:

const mainString = 'world';
const prefix = 'Hello, ';
const suffix = '!';

const result = prefix + mainString + suffix;

console.log(result); // Output: "Hello, world!"

Output:

Hello, world!
note

This method is functionally identical to template literals but is considered slightly less modern and readable.

Method 3: Using String.prototype.concat()​

Strings in JavaScript have a built-in concat() method. It is called on one string and takes one or more other strings as arguments to append to it.

The problem:

  • This method is not commonly used for simple concatenation because its syntax is more verbose than the other methods. It is also less readable when you need to add both a prefix and a suffix.

The solution:

const mainString = 'world';
const prefix = 'Hello, ';
const suffix = '!';

// You must chain the calls, which can be clumsy.
const result = prefix.concat(mainString, suffix);

console.log(result); // Output: "Hello, world!"

Output:

Hello, world!
note

Because of its verbosity, the concat() method is rarely the best choice.

Common Pitfalls and Best Practices​

  • Type Coercion with +: The + operator is also used for addition. If you mix strings and numbers, JavaScript will try to coerce the types, which can lead to unexpected results.

    console.log("The answer is: " + 4 + 2); // Output: "The answer is: 42"
    console.log("The answer is: " + (4 + 2)); // Output: "The answer is: 6"

    Template literals do not have this ambiguity, as the expressions inside ${} are evaluated first.

  • Readability: For anything more than joining two simple strings, template literals are almost always easier to read and maintain.

Practical Example: Creating a Dynamic Greeting Message​

This script creates a personalized greeting, demonstrating the superior readability of template literals.

Goal: Create a string like: "Hello, John! Welcome to our website."

Solution using Template Literals​

function createGreeting(name) {
  const greeting = `Hello, ${name}! Welcome to our website.`;
  return greeting;
}

console.log(createGreeting('John'));
// Output: "Hello, John! Welcome to our website."

Output:

Hello, John! Welcome to our website.

Solution using the + Operator​

function createGreeting(name) {
  const greeting = 'Hello, ' + name + '! Welcome to our website.';
  return greeting;
}

console.log(createGreeting('John'));
// Output: "Hello, John! Welcome to our website."

Output:

Hello, John! Welcome to our website.
note

As you can see, the template literal is cleaner and avoids the need to manage spaces inside the literal strings.

Conclusion​

Adding a prefix or suffix to a string is a fundamental operation with several valid solutions in JavaScript.

  • Template literals (`${...}`) are the modern and recommended best practice. They are the most readable, flexible, and least error-prone method for constructing strings.
  • The addition operator (+) is a perfectly functional and classic alternative, but it can become difficult to read with more complex strings.
  • The String.prototype.concat() method is generally too verbose and is the least common choice.

For clean, modern, and maintainable JavaScript, always prefer template literals.

Table of Contents