{"id":228962,"date":"2024-06-23T17:27:30","date_gmt":"2024-06-23T17:27:30","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/?p=228962"},"modified":"2024-06-23T17:27:30","modified_gmt":"2024-06-23T17:27:30","slug":"how-to-add-variable-value-to-a-string-in-javascript","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-add-variable-value-to-a-string-in-javascript\/","title":{"rendered":"How to add variable value to a string in JavaScript?"},"content":{"rendered":"

**How to add variable value to a string in JavaScript?**<\/p>\n

In JavaScript, there are multiple ways to add a variable value to a string. Let’s explore the different methods and understand how you can achieve this.<\/p>\n

One of the simplest methods is using the ‘+’ operator to concatenate a string and a variable together. The variable can be of any data type, such as string, number, or boolean. Here’s an example:<\/p>\n

“`javascript
\nlet name = “John”;
\nlet age = 25;<\/p>\n

let message = “My name is ” + name + ” and I am ” + age + ” years old.”;
\nconsole.log(message);
\n“`<\/p>\n

In the code above, we’re using the ‘+’ operator to combine the value of the ‘name’ and ‘age’ variables with the string “My name is” and “and I am” respectively. The resulting output will be:<\/p>\n

“`
\nMy name is John and I am 25 years old.
\n“`<\/p>\n

You can also use template literals, introduced in ECMAScript 2015, to achieve the same result in a more concise and readable way. Template literals allow you to embed expressions within backticks (`) and use placeholders for variables using the `${}` syntax. Here’s how you can modify the previous example using template literals:<\/p>\n

“`javascript
\nlet name = “John”;
\nlet age = 25;<\/p>\n

let message = `My name is ${name} and I am ${age} years old.`;
\nconsole.log(message);
\n“`<\/p>\n

Again, the output will be:<\/p>\n

“`
\nMy name is John and I am 25 years old.
\n“`<\/p>\n

Template literals provide a much cleaner syntax, especially when dealing with complex string concatenation.<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n