How to Add a Variable Inside a String in JavaScript?

To add a variable inside a string in JavaScript, you can use the template literals. Template literals are a feature introduced in ECMAScript 6 (ES6) that allow you to create strings with embedded expressions.

The template literals are enclosed in backticks(``) instead of regular single('') or double quotes("") and can contain placeholders for expressions using ${expression} syntax.

The following example shows how you can add variables inside a string with template literals:

// Variables
const name = 'John';
const age = 30;

// Put variables inside the string
const message = `My name is ${name} and I'm ${age} years old.`;

// Print the result
console.log(message); 

Output:

"My name is John and I'm 30 years old."

In this example, we have put two variables ${name} and ${age} inside the string.

Therefore, when the code is executed, the value of the variable name is used in place of the ${name} expression and the value of the variable age is used in place of the expression ${age}.

Adding Expressions Inside a String

With the help of template literals, you can also embed executable expressions inside a string.

To embed an executable expression also, you can use the ${expression} syntax inside the backticks (``) that define a template literal.

For example:

// Variables
let num1 = 10;
let num2 = 20;

// Put variables and expression inside the string
const result = `The sum of ${num1} and ${num2} is ${num1 + num2}`;

// Print the result
console.log(result); 

Output:

The sum of 10 and 20 is 30

In the above example, we have put the expression ${num1 + num2} inside the string.

On execution, the expression is first evaluated and then its value is used inside the string.

You can literally put any sort of expression inside the string, even the function calls as well. The expression is evaluated at run time and then its value is used inside the string.

Add Variables to a String using String Concatenation

You can also add variables to a string using string concatenation.

To concatenate two or more strings in JavaScript, we use the addition operator(+). The same + operator can be used to concatenate two or more strings and variables.

For example:

// Variable
const name = 'John';

// Add variables to the string
const message = 'Hi, My name is ' + name;

// Print the result
console.log(message); 

Output:

"Hi, My name is John"

In this example, we have added a variable name to the string. You can add as many variables as you want with the + operator.

Adding Expressions to the String using String Concatenation

Just like the variables, you can add any sort of executable expression to the string using the + operator.

The expression is evaluated at the run time and its value is added to the string.

For example:

// Variables
let num1 = 10;
let num2 = 20;

// Add variables and expression to the string
const result = 'Sum of ' + num1 + ' and ' + num2 + ' is ' + (num1 + num2);

// Print the result
console.log(result);

Output:

"Sum of 10 and 20 is 30"

In the above example, we have added the expression (num1 + num2) to the string.

This expression is first evaluated at run time and then its value is added to the string.

That’s all for the day. Happy Coding.