Concatenate a String with a Variable in JavaScript

# Concatenate a String with a Variable in JavaScript

Use the addition (+) operator to concatenate a string with a variable, e.g. 'hello' + myVar.

The addition (+) operator is used to concatenate strings or sum numbers.

Copied!
const example = 'world';

const result = 'hello ' + example;

console.log(result); // 👉️ 'hello world'

We used the addition (+) operator to concatenate a string with a variable.

You can use this approach with as many strings and variables as necessary.

Copied!
const example = 'world';

const result = 'hello ' + example + '!';

console.log(result); // 👉️ 'hello world!'

The addition (+) operator is used to achieve 2 main goals:

1. concatenate strings
2. sum numbers

If you use the addition (+) operator with a number and a string, it converts the number to a string and concatenates the strings.

Copied!
const num = 100;

const result = num + ' percent';

console.log(result); // 👉️ '100 percent'

Note that this can be confusing if you get the types of the values wrong when trying to sum up numbers.

Copied!
const num = 100;

const result = '100' + num;

console.log(result); // 👉️ 100100

If you want to get the correct result, you have to convert the string to a number.

Copied!
const num = 100;

const result = Number('100') + num;

console.log(result); // 👉️ 200

# Concatenate a String with a Variable using a template literal

You can also use a template literal to concatenate a string with a variable.

Template literals allow us to embed a variable into a string. The variable is then substituted with its value.

Copied!
const example = 'world';

const result = `hello ${example}`;

console.log(result); // 👉️ 'hello world'

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.

The syntax for template literals is ${variable} or ${expression}.

You can add characters before or after the variables.

Copied!
const variable = 'two';

const result = `one ${variable} three`;

console.log(result); // 👉️ one two three

Here are some more examples of using template literals.

Copied!
const example = 'world';

const result = `hello ${example}!`;
console.log(result); // 👉️ 'hello world!'

const str = `${50 + 50} percent`;
console.log(str); // 👉️ '100 percent'

The expression between the curly braces gets evaluated and placed in the string.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Concatenate Strings with a Separator using JavaScript
• How to Concatenate Two Numbers in JavaScript