Can ES6 template literals be substituted at runtime (or reused)?

by

To make these literals work like other template engines there needs to be an intermediary form.

The best way to do this is to use the Function constructor.

const templateString = "Hello ${this.name}!";
const templateVars = {
    name: "world"    
}

const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(templateVars);
}

console.log(fillTemplate(templateString, templateVars));

As with other template engines, you can get that string from other places like a file.

Some issues can appear using this method (for example, template tags would be harder to add). You also can’t have inline JavaScript logic, because of the late interpolation. This can also be remedied with some thought.

More Related Contents:

  1. Backticks (`…`) calling a function in JavaScript
  2. Defer execution for ES6 Template Literals
  3. Is there a downside to using ES6 template literals syntax without a templated expression?
  4. What does this `…${…}…` code in the node docs mean? [duplicate]
  5. Template literals syntax is not working in IE11
  6. What is the purpose of template literals (backticks) following a function in ES6?
  7. Wrap long template literal line to multiline without creating a new line in the string
  8. Unexpected comma using map()
  9. How to call native es6 template string replacement from tag function?
  10. Understanding members of Symbol – function constructor
  11. Find list of strings that matches a pattern that start with a special character « and end with a special character »
  12. Unable to access React instance (this) inside event handler [duplicate]
  13. Why does babel rewrite imported function call to (0, fn)(…)?
  14. Spread Syntax ES6
  15. Async function not returning value, but console.log() does: how to do? [duplicate]
  16. ES6 Object Destructuring Default Parameters
  17. let keyword in the for loop
  18. What does three dots do in ReactJS [duplicate]
  19. Why are ES6 classes not hoisted?
  20. Javascript ES6 cross-browser detection
  21. How to find duplicate values in a JavaScript array of objects, and output only unique values?
  22. How do I make a “public static field” in an ES6 class?
  23. Mixins for ES6 classes, transpiled with babel
  24. Get list of duplicate objects in an array of objects
  25. What is the difference between importing a function expression or a function declaration from a ES6 module?
  26. destructuring falsy and null with default parameters
  27. What can we do with ES6 Generator that we cannot with for loop?
  28. Update one of the objects in array, in an immutable way
  29. functional way to iterate over range (ES6/7) [duplicate]
  30. ES6 module scope

Leave a Comment