运行时模板字符串

var templateString = (template, values) => {
    let output = template;
    Object.keys(values)
        .forEach(key => {
        output = output.replace(new RegExp('\\$' + `{${key}}`, 'g'), values[key]);
    });
    return output;
};

Test

console.debug(templateString('hello ${word} world', {word: 'wonderful'}));

你可以在函数中放入一个模板字符串:

function reusable(a, b) {
  return `a is ${a} and b is ${b}`;
}

你可以用带标签的模板做同样的事情:

function reusable(strings) {
  return function(... vals) {
    return strings.map(function(s, i) {
      return `${s}${vals[i] || ""}`;
    }).join("");
  };
}

var tagged = reusable`a is ${0} and b is ${1}`; // dummy "parameters"
console.log(tagged("hello", "world"));
// prints "a is hello b is world"
console.log(tagged("mars", "jupiter"));
// prints "a is mars b is jupiter"

其思想是让模板解析器从变量“slots”中分离出常量字符串，然后返回一个函数，该函数每次都根据一组新的值将它们重新组合在一起。

可能最干净的方法是使用箭头函数(因为在这一点上，我们已经在使用ES6)

var reusable = () => `This ${object} was created by ${creator}`;

var object = "template string", creator = "a function";
console.log (reusable()); // "This template string was created by a function"

object = "example", creator = "me";
console.log (reusable()); // "This example was created by me"

.．.对于带标签的模板字面量:

reusable = () => myTag`The ${noun} go ${verb} and `;

var noun = "wheels on the bus", verb = "round";
var myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb + strings[2] + verb;
};
console.log (reusable()); // "The wheels on the bus go round and round"

noun = "racecars", verb = "fast";
myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb;
};
console.log (reusable()); // "The racecars go fast"

这也避免了eval()或Function()的使用，这可能会导致编译器出现问题，并导致大量的放缓。

感谢@Quentin-Engles的出色想法和最佳答案，让我开始了!

但是我将新函数直接存储在一个变量中，而不是每次都返回函数，这样函数和模板文字都只构建一次，而不是每次调用它，就像在Quentin的回答中那样。

const templateString = "Hello ${this.name}.";
var myData = {
    name: "world"    
};

const buildItem = new Function("return `" + templateString + "`;");

console.log(buildItem.call(myData));  // Hello world.

myData.name = "Joe";
console.log(buildItem.call(myData));  // Hello Joe.

2019答:

注意:标准库最初希望用户清理字符串以避免XSS。库的版本2不再要求净化用户字符串(web开发人员无论如何都应该这样做)，因为它完全避免了eval。

npm上的es6-dynamic-template模块可以做到这一点。

const fillTemplate = require('es6-dynamic-template');

与目前的答案不同:

它使用ES6模板字符串，而不是类似的格式。更新版本2使用类似的格式，而不是ES6模板字符串，以防止用户使用未经消毒的输入字符串。 模板字符串中不需要这个 可以在单个函数中指定模板字符串和变量 它是一个维护的，可更新的模块，而不是从StackOverflow复制

使用方法很简单。使用单引号作为模板字符串将在稍后解决!

const greeting = fillTemplate('Hi ${firstName}', {firstName: 'Joe'});

简单的答案是使用_。lodash中的模板

// Use the ES template literal delimiter as an "interpolate" delimiter.
// Disable support by replacing the "interpolate" delimiter.
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'