Format string template with variables in Javascript

Question

I want to use a statically defined template for URL building.

I'm trying to use ES6 string interpolation feature for this

var template = "http://example.com/?name=${name}&age=${age}";

var name = "John";
var age = "30";

var url = `${template}`;

Expected result: http://example.com/?name=John&age=23

Actual result: http://example.com/?name=${name}&age=${age}

In case this can't be done with string interpolation is there any better method than String.prototype.replace like

var url = template.replace(/\${name}/,"John").replace(/\${age}/, 23);

Answer 1

The variables are substituted at the moment of evaluation of the literal, so you can't create a universal template that can be substituted with variables later:

var template = `http://example.com/?name=${name}&age=${age}`;
var name = "John";
var age = "30";

console.log( template ); // "http://example.com/?name=undefined&age=undefined"

Edit: fiddle for those who reuse a console session and have the variables defined from previous experiments: https://jsfiddle.net/nwvcrryt/

You also can not convert a string literal "My name is ${name}" to a template like what you're trying to do.

You can, however, use a function that takes the name and age and returns the desired url:

const formatUrl = (name, age) => `http://example.com/?name=${name}&age=${age}`;
let name = "John";
let age = "30";
let url = formatUrl( name, age ); // "http://example.com/?name=John&age=30"

Answer 2

Here is how you would handle this issue if the values came after and you still wanted to use the template:

var template = (name, age) => `http://example.com/?name=${name}&age=${age}`;

// these come after template is defined
var name = "John";
var age = "30";

console.log(template(name, age));

---

This is if the question was in regards to recursion:

You used double quotes " instead of a backtick `

It will work otherwise:

var name = "John";
var age = "30";
var template = `http://example.com/?name=${name}&age=${age}`

var url = `${template}`;

https://jsfiddle.net/kab48ht5/

---

If all you're trying to do is get some values into a proper URL format, you can try and follow this solution: https://stackoverflow.com/a/22678412/185672

Answer 3

As above mentioned, it is impossible to use variable as Template, perhaps, if you really need to implement it, and your environment is secure, you can use eval

var template = "http://example.com/?name=${name}&age=${age}";

var name = "John";
var age = "30";

var url = eval(`\`${template}\``);

But again, use eval with caution. I recommend you to read this or similar articles before you start using eval in your code.

PS. I'm sure, there will be many people who'll downvote my answer because of it :D

Answer 4

Maybe I'm misunderstanding your issues/use case, but you should be able to do that without the "template" variable. . . just assign the value that you currently have assigned to "template" directly to "url" and use the backticks instead of quotes:

var name = "John";
var age = "30";

var url = `http://example.com/?name=${name}&age=${age}`;

That results in: http://example.com/?name=John&age=30

Answer 5

How about this:

function sFormat(template){
    return data => {
        return Object.keys(data)
                     .reduce((acc, key)=>acc.replaceAll(`\$\{${key}\}`, data[key]), template)
    }
}

let first = "John"
let last = "Doe"
let age = 55
let someData = { a: 1, b: "foo" }

let template = sFormat('Hi ${first}! Your full name: ${first} ${last}, Age: ${age}, Data: ${someData}')
console.log(template({ first, last, age, someData }))

// "Hi John! Your full name: John Doe, Age: 55, Data: [object Object]"

Answer 6

You'd use it like this, directly into the string.

Docs here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals - credit to @jetpackpony

const name = 'John'
const age = 23

console.log(`Hi my name is ${name}`)

console.log(`http://example.com/?name=${name}&age=${age}`)

@Phil has presented a quick solution to the recursion problem, as long as you use back ticks on the initial template declaration.

With regards to the initial question (and the lack of a clear-cut answer) perhaps it's not explained enough. If you declare the template vars after the template literal, you cannot use them.