String interpolation on variable

by

With something as simple as ${str} you can use a simple string replacement:

var template = (tpl, args) => tpl.replace(/\${(\w+)}/g, (_, v) => args[v]);

var tpl="Hello ${str} and ${other}";

console.log(template(tpl, {str: 'foo', other: 'bar'}));

In a general case, no, not possible without eval (short of writing your own js interpreter), because ${...} can contain arbitrary expressions.

For completeness’ sake, here’s the eval solution:

var template = function(tpl, args) {
    var keys = Object.keys(args),
        fn = new Function(...keys, 
          'return `' + tpl.replace(/`/g, '\\`') + '`');
    return fn(...keys.map(x => args[x]));
};


function test() {
    var myTpl="Hello ${str + "!"} and ${other.toUpperCase()}";
    console.log(template(myTpl, {str: 'foo', other: 'bar'}));
}

test();

More Related Contents:

  1. setState doesn’t update the state immediately
  2. Does ES6 introduce a well-defined order of enumeration for object properties?
  3. Private properties in JavaScript ES6 classes
  4. Why can I change a constant object in javascript
  5. Array.fill(Array) creates copies by references not by value [duplicate]
  6. Defer execution for ES6 Template Literals
  7. How to import ES6 modules in content script for Chrome Extension
  8. How does this object method definition work without the “function” keyword?
  9. What is the temporal dead zone?
  10. ES6 Array destructuring weirdness
  11. Get functions (methods) of a class [duplicate]
  12. ECMAScript 6 features available in Node.js 0.12
  13. Which ECMAScript 6 features imply strict mode?
  14. Proper use of const for defining functions
  15. ES6: Conditional & Dynamic Import Statements
  16. Access to ES6 array element index inside for-of loop
  17. Do I need require js when I use babel?
  18. Can I use arrow function in constructor of a react component?
  19. How to reliably check an object is an EcmaScript 6 Map/Set?
  20. setState() inside of componentDidUpdate()
  21. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  22. How to destructure option argument with all default values in ES6?
  23. How do you import a javascript package from a cdn/script tag in React?
  24. Curly brackets (braces) in Node.js ‘require’ statement
  25. “unexpected token import” in Nodejs5 and babel?
  26. How to get the target of a JavaScript Proxy?
  27. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  28. Javascript – Template Strings Don’t Pretty Print Objects
  29. How can the current number of i be accessed in a for of loop?
  30. How to bind methods when destructuring an object in JavaScript?

Leave a Comment