ES6 template literals based on template variable

Question

I try to render a ES6 template literal variable :

function render(template, data){
 ...
}
const template = 'resources/${id}/';
console.log(render(template, {id: 1})); // -> resources/1/

Does exist a way to transform a string template with context into a formated string with ES6 template literals feature ?

score 16 · Answer 1 · edited Jul 28 '16 at 11:34

16

You can not do this with simple template literals.

However, you can achieve such behaviour by wrapping your literals into functions. Thanks to ES6 features (desctructuring and arrow functions), the result code is simple

function render(template, data) {
  return template(data);
}
const tpl = ({ id }) => `resources/${id}/`;

console.log(render(tpl, { id: 1})); // resources/1/

edited Jul 28 '16 at 11:34

Michelangelo

5,888
5
31
50

answered Jul 28 '16 at 11:26

Konstantin

24,271
5
48
65

1

Or even simpler: ```(({ id }) => `resources/${id}/`)({ id: 1})``` – alex_1948511 Aug 14 '18 at 10:03
2

But this doesn't answer the original question. The moral of the original question is what you hold is `'resources/${id}/'` as a variable. – Aug 18 '19 at 08:26
@QianChen why do you think so? I believe I've stated the answer quite clearly. – Konstantin Aug 19 '19 at 06:32
1

If the `\`resources/${id}/\`` is held in a variable which is read from network or a file, what will you do? – Aug 19 '19 at 22:15
@QianChen I don't get. Why should I do anything about it? – Konstantin Aug 21 '19 at 15:56

score 2 · Answer 2 · answered Jul 28 '16 at 12:05

2

ES6 template literals can't be compiled at run time. To do this, third-party library should be used, like es6-template.

At this point there's no real benefit in using template literal syntax, any other template engine of choice may be used instead.

answered Jul 28 '16 at 12:05

Estus Flask

206,104
70
425
565

is this still releavnt? i face the same issue and wonder if to use es6 literal template or not – sd1sd1 Jul 18 '19 at 19:29
Yes, it is. Use template engine when you need one. – Estus Flask Jul 19 '19 at 10:06

ES6 template literals based on template variable

2 Answers2

Linked