How to Insert Variable Into String in JavaScript

To put a variable’s value inside a JavaScript string, use a template literal: wrap the text in backticks and include the exact interpolation form `${variableName}` where the value should appear. Replace variableName with your variable’s identifier; JavaScript inserts its current value. Template literals are the simplest choice for most string construction. Console placeholders are useful for logs, while a formatting library can help when its features justify a dependency.

Use Template Literals to Insert Variable Into String in JavaScript

Template literals use backticks rather than single or double quotes. JavaScript evaluates the expression between ${ and } and converts its result to a string. You can assign the completed string to a variable, return it from a function, or pass it to another function. In a quoted string such as "Hello, ${name}", the interpolation syntax stays literal text; single and double quotes do not interpolate values.

This example builds a greeting and calculates a total before assigning the finished text to message:

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

The expression ${price + 3} is evaluated first, so it contributes 15; the dollar sign immediately before it is ordinary text. Expressions can include arithmetic, property access, or function calls. Keep them short enough to make the resulting sentence easy to understand. A template literal can span multiple lines, and quotes inside it do not need escaping. To include a literal ${ sequence, escape the dollar sign as \${; escape a backtick with a backslash. If an expression produces an object, JavaScript uses that value’s string conversion, which may not be the representation you want; choose an explicit conversion for readable object data. Interpolation creates plain text, not HTML-safe output. When displaying untrusted values on a web page, use a context-appropriate safe DOM API.

Use Basic Formatting to Insert Variable Into String in JavaScript

For diagnostic output, console.log() can format a message with placeholders and following arguments. In this example, %s formats the name and %d formats the score, with the arguments in matching order:

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

Placeholder support and conversion details depend on the console implementation, so this is a logging convenience rather than a portable string-building API. console.log() writes diagnostic output and does not return the formatted message for assignment or insertion into an HTML page. If you need a string value, use a template literal or a formatting library. Keep arguments in the order of their corresponding placeholders; consoles can display extra values or unmatched placeholders differently.

Use sprintf() to Insert Variable Into String in JavaScript

sprintf-js is an optional library whose sprintf() function returns a string. In a project where the package is installed and CommonJS is available, you can load it with const { sprintf } = require("sprintf-js"); and create a value with const message = sprintf("%s has %d items", name, count);. These lines illustrate the API; package installation and imports depend on your project environment. For browser or module-based projects, follow the linked project’s setup instructions.

sprintf() interprets its format directives and supplied arguments; it does not evaluate JavaScript expressions written inside the format string. Each directive uses a corresponding argument. Choose the library when its format-string features help with repeated or more elaborate formatting and are worth the added dependency. The project documentation describes the available directives and setup options. For one short sentence with a variable, built-in template-literal syntax is usually simpler.

Conclusion

Use template literals for ordinary string construction, variable values, and embedded JavaScript expressions. Use console.log() placeholders for diagnostic output, remembering that their behavior can vary by implementation and the call does not produce a reusable formatted string. Consider sprintf-js when its formatting features are useful enough to justify including the dependency. For simple interpolation, backticks with ${...} are usually the clearest way to put a variable’s current value into a JavaScript string.