The requirements of the original question clearly couldn't benefit from string interpolation, as it seems like it's a runtime processing of arbitrary replacement keys.

However, if you just had to do string interpolation, you can use:

const str = `My name is ${replacements.name} and my age is ${replacements.age}.`

Note the backticks delimiting the string, they are required.


For an answer suiting the particular OP's requirement, you could use String.prototype.replace() for the replacements.

The following code will handle all matches and not touch ones without a replacement (so long as your replacement values are all strings, if not, see below).

var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
    str = 'My Name is %NAME% and my age is %AGE%.';

str = str.replace(/%\w+%/g, function(all) {
   return replacements[all] || all;
});

jsFiddle.

If some of your replacements are not strings, be sure they exists in the object first. If you have a format like the example, i.e. wrapped in percentage signs, you can use the in operator to achieve this.

jsFiddle.

However, if your format doesn't have a special format, i.e. any string, and your replacements object doesn't have a null prototype, use Object.prototype.hasOwnProperty(), unless you can guarantee that none of your potential replaced substrings will clash with property names on the prototype.

jsFiddle.

Otherwise, if your replacement string was 'hasOwnProperty', you would get a resultant messed up string.

jsFiddle.


As a side note, you should be called replacements an Object, not an Array.

Answer from alex on Stack Overflow
Top answer
1 of 16
214

The requirements of the original question clearly couldn't benefit from string interpolation, as it seems like it's a runtime processing of arbitrary replacement keys.

However, if you just had to do string interpolation, you can use:

const str = `My name is ${replacements.name} and my age is ${replacements.age}.`

Note the backticks delimiting the string, they are required.


For an answer suiting the particular OP's requirement, you could use String.prototype.replace() for the replacements.

The following code will handle all matches and not touch ones without a replacement (so long as your replacement values are all strings, if not, see below).

var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
    str = 'My Name is %NAME% and my age is %AGE%.';

str = str.replace(/%\w+%/g, function(all) {
   return replacements[all] || all;
});

jsFiddle.

If some of your replacements are not strings, be sure they exists in the object first. If you have a format like the example, i.e. wrapped in percentage signs, you can use the in operator to achieve this.

jsFiddle.

However, if your format doesn't have a special format, i.e. any string, and your replacements object doesn't have a null prototype, use Object.prototype.hasOwnProperty(), unless you can guarantee that none of your potential replaced substrings will clash with property names on the prototype.

jsFiddle.

Otherwise, if your replacement string was 'hasOwnProperty', you would get a resultant messed up string.

jsFiddle.


As a side note, you should be called replacements an Object, not an Array.

2 of 16
34

How about using ES6 template literals?

var a = "cat";
var b = "fat";
console.log(`my {b}`); //notice back-ticked string

More about template literals...

🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Template_literals
Template literals (Template strings) - JavaScript | MDN
Along with having normal strings, template literals can also contain other parts called placeholders, which are embedded expressions delimited by a dollar sign and curly braces: ${expression}. The strings and placeholders get passed to a function — either a default function, or a function ...
🌐
freeCodeCamp
freecodecamp.org › news › javascript-string-format-how-to-use-string-interpolation-in-js
JavaScript String Format – How to use String Interpolation in JS
September 8, 2020 - You can see an example of string ... Besides that, we also have the format of ${placeholder}, which allows us to insert a dynamic value into the string....
🌐
YoungWonks
youngwonks.com › blog › javascript-string-format
JavaScript String Formatting: A Comprehensive Guide
September 28, 2023 - In this blog, we are going to cover how to write strings in JavaScript, how to concatenate them, and what are the different ways to format strings in JavaScript. We will also discuss the role of placeholders and backticks.
🌐
GitHub
gist.github.com › jlis › 5669677
Javascript format function to replace placeholders in a string with content · GitHub
Javascript format function to replace placeholders in a string with content - gist:5669677
🌐
Medium
medium.com › @onlinemsr › javascript-string-format-the-best-3-ways-to-do-it-c6a12b4b94ed
JavaScript String Format: The Best 3 Ways To Do It | by Raja MSR | Medium
January 14, 2025 - In the above example, the formatString() method accepts a template string and args as parameters. Using a regular expression, each placeholder is replaced with the corresponding value from args. You can write this as a JavaScript string prototype method, as shown in the below example:
🌐
TutorialsTonight
tutorialstonight.com › javascript-string-format
JavaScript String Format (3 Ways)
Best way to format a string in javascript is by using backticks ``. To format string backticks wraps the string and the variables are inserted within the backticks wrapped in curly braces {} preceded by a dollar sign $. These variables are called ...
🌐
GeeksforGeeks
geeksforgeeks.org › javascript › javascript-string-formatting
JavaScript String Formatting - GeeksforGeeks
August 5, 2025 - JavaScript, unlike languages like C# or Python, doesn’t support built-in string formatting using {} placeholders.
🌐
W3docs
w3docs.com › javascript
How to Do String Interpolation in JavaScript
Javascript string interpolation and placeholder expression · const AGE = 25; console.log(`I'm ${AGE} years old!`); ... The placeholder has the following format: ${expressionToEvaluate}. The expression inside the placeholder can be:
Find elsewhere
🌐
Dmitri Pavlutin
dmitripavlutin.com › javascript-template-strings
How to Use Template Strings in JavaScript
March 21, 2023 - String interpolation is replacing placeholders with values in a string literal. The string interpolation in JavaScript is done by template literals (strings wrapped in backticks `) and ${expression} as a placeholder.
🌐
EyeHunts
tutorial.eyehunts.com › home › javascript string format placeholder
JavaScript string format placeholder
April 18, 2023 - JavaScript string placeholders are used to represent dynamic values that will be inserted into a string. There are several ways to define..
🌐
npm
npmjs.com › package › string-format
string-format - npm
Placeholders may contain numbers which refer to positional arguments: '{0}, you have {1} unread message{2}'.format('Holly', 2, 's') ... If the referenced property is a method, it is invoked with no arguments to determine the replacement: ... This function takes an object mapping names to transformers and returns a formatting function. A transformer is applied if its name appears, prefixed with !, after a field name in a template string.
      » npm install string-format
    
Published   May 18, 2018
Version   2.0.0
Author   David Chambers
🌐
npm
npmjs.com › package › string-placeholder
string-placeholder - npm
A small library that replaces placeholders from string templates.
      » npm install string-placeholder
    
🌐
GitHub
github.com › crysalead-js › string-placeholder
GitHub - crysalead-js/string-placeholder: Replaces placeholders into a string template
A small library that replaces placeholders from string templates.
Starred by 5 users
Forked by 3 users
Languages   JavaScript
🌐
Mastering JS
masteringjs.io › tutorials › fundamentals › string-interpolation
JavaScript String Interpolation - Mastering JS
Here's how JavaScript handles objects in placeholders: class User { constructor(name) { this.name = name; } toString() { return this.name; } } const user = new User('Bill'); const str = `Hello ${user}!`; // "Hello Bill!" Template literals don't throw errors if a placeholder expression evaluates to null or undefined. `Hello ${null}!`; // "Hello null!" `Hello ${void 0}!`; // "Hello undefined!" The only case where string interpolation can throw a runtime error is if your placeholder expression evaluates to an object whose toString() function throws an error.
🌐
Scaler
scaler.com › home › topics › what is javascript string format?
What is JavaScript string format? - Scaler Topics
June 27, 2024 - By string interpolation i.e by using template literals (strings wrapped within backticks) and ${variable/expression} as placeholders. By defining a custom function ourselves. Normally strings are either wrapped in single quotes or double quotes.
🌐
Guru99
guru99.com › home › javascript › javascript string format: methods with examples
JavaScript String Format: Methods with EXAMPLES
July 28, 2025 - Template strings which are also known as Template literals offer a more expressive and advanced way to format strings in JavaScript. They permit the direct embedding of expressions and variables within the string using the placeholder “${expression}”.
🌐
tutorialstonight
tutorialstonight.com › javascript-string-format.php
JavaScript String Format (With Examples)
Formatting string in javascript is best done by the use of backticks (``) and the variables are inserted within the backticks wrapped in curly braces ({}) preceded by a dollar sign ($). ... These variables are called placeholders within the ...
🌐
Stack Overflow
stackoverflow.com › questions › 43905269 › string-format-with-positioned-placeholders-or-equivalent
javascript - String format with positioned placeholders or equivalent - Stack Overflow
var st1 = 'name'; var st2 = 'javascript'; var sentence = `My ${st1} is ${st2}`; console.log(sentence); It will replace the two strings inside the sentence.
🌐
MSR
rajamsr.com › home › javascript string format: the best 3 ways to do it
JavaScript String Format: The Best 3 Ways To Do It | MSR - Web Dev Simplified
December 20, 2023 - Using this approach, you can call the format() method on any string with placeholders.The issue with this approach is when the placeholder count grows. It will be difficult to determine the index position and value to pass as arguments.