stackoverflow.com › questions › 1408289 › string-interpolation-in-javascript

Since ES6, you can use template literals:

const age = 3
console.log(`I'm ${age} years old!`)

P.S. Note the use of backticks: ``.

Answer from Damjan Pavlica on Stack Overflow

Stack Overflow

stackoverflow.com › questions › 1408289 › string-interpolation-in-javascript

String interpolation in JavaScript? - Stack Overflow

tl;dr

Use ECMAScript 2015's Template String Literals, if applicable.

Explanation

There is no direct way to do it, as per ECMAScript 5 specifications, but ECMAScript 6 has template strings, which were also known as quasi-literals during the drafting of the spec. Use them like this:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

You can use any valid JavaScript expression inside the {}. For example:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

The other important thing is, you don't have to worry about multi-line strings anymore. You can write them simply as

> `foo
...     bar`
'foo\n    bar'

Note: I used io.js v2.4.0 to evaluate all the template strings shown above. You can also use the latest Chrome to test the above shown examples.

Note: ES6 Specifications are now finalized, but have yet to be implemented by all major browsers.
According to the Mozilla Developer Network pages, this will be implemented for basic support starting in the following versions: Firefox 34, Chrome 41, Internet Explorer 12. If you're an Opera, Safari, or Internet Explorer user and are curious about this now, this test bed can be used to play around until everyone gets support for this.

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 you supply. The default function (when you don't supply your own) just performs string interpolation to do substitution of the placeholders and then concatenate the parts into a single string.

Discussions

TIL JavaScript provides string interpolation with string template literals

Next thing to learn is probably tagged templates I have never really used them outside of React styled-components so you probably won't see them much but it's good to know they exist More on reddit.com

r/ProgrammerTIL

October 2, 2023

JavaScript : Can I use string interpolation to create dynamic variable names?

Sure you can. Just use eval. Disclaimer: if you ever write eval in any codebase I have control over for this purpose, I will burn down your house. More on reddit.com

r/AskProgramming

December 21, 2021

How to convert a string literal to string interpolation?

The only kind of interpolation JS supports out of the box is through template literals which happens when the string is parsed within the source code. If you have arbitrary input as a string, there's nothing built-in that will automatically go through that string and swap out template tags with their respective values like what you get with template literals. However, for basic usage you can easily do something similar with a regex replace. const input = "

Hello {username}

" const params = { username: "marvelhoax" } const output = input.replace(/{(.*?)}/g, (match, param) => param in params ? params[param] : match) console.log(output) //

Hello marvelhoax

Videos