Format string template with variables in javascript

Question

I want to use a statically defined pattern to build a URL.

I am trying to use the ES6 string interpolation function 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}

If this cannot be done with string interpolation, is there a better way than String.prototype.replace as

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

Answer 1

Variables are replaced at the time the literal is evaluated, so you cannot create a universal template that can be replaced 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 variables defined from previous experiments: https://jsfiddle.net/nwvcrryt/

You also cannot convert the string literal "My name is ${name}" to a template, like what you are trying to do.

However, you can use a function that takes a 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's how you handle this problem if the values ​​come after, and you still wanted to use a pattern:

 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 regarding recursion:

You used double quotation marks " instead of` backward protrusion

It will work differently:

 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 are trying to do is get some values ​​in the correct URL format, you can try and execute this solution: fooobar.com/questions/228358 / ...

Answer 3

Maybe I misunderstand your problems / usage, but you can do it without the "template" variable., Just assign the value that you currently assigned to the "template" directly to "url" and use the return outputs instead of quotes:

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

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

Answer 4

You would use it like that, right on the line.

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

 const name = 'John' const age = 23 console.log(`Hi my name is ${name}`) console.log(`http://example.com/?name=${name}&age=${age}`) 

@Phil introduced a quick solution to the recursion problem if you use reverse ticks in the declaration of the original template.

Regarding the initial question (and the lack of a clear answer), he may not have sufficiently explained. If you declare template templates after the template literal, you cannot use them.

Answer 5

As mentioned above, it is impossible to use a variable as a template, perhaps if you really need to implement it, and the environment is safe, you can use eval

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

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

PS. I am sure that because of this there will be many people who will reduce my answer: D