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