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

所有的道具在这里教我关于javascript的一个功能，我从来不知道-我知道字符串模板文字，但不知道你可以用它们调用函数没有括号!

作为感谢，我在这里分享我的typescript改编，这使得它很容易用typescript知道的命名变量来制作一个可重用的模板——它允许任何类型，因为它们会自动转换为字符串，但如果你不喜欢这个策略，你可以自己调整。

/**
 * Use this with a template literal in order to create reusable string template;
 * use interpolation to add strings for each variable you want to use in the template.
 * 
 * e.g.:
 * 
 *  const reUsableStringTemplate = stringTpl`${'name'} and ${'otherName'} are going to ${'place'}`;
 * 
 * You can then call it with:
 * 
 *  const filled = reUsableStringTemplate({name: 'John', otherName: 'Jane', place: 'Paris'});
 *  // John and Jane are going to Paris
 * 
 * reUsableStringTemplate will have types and know the names of your variables
 * 
 * @returns String template function with full typescript types
 */
export function stringTpl<keys extends string>(parts: TemplateStringsArray, ...keys: keys[]) {
  return (opts: Record<keys, any>) => {
    let outStr = '';
    for (let i = 0; i < parts.length; ++i) {
      outStr += parts[i];
      const key = keys.shift();
      if (key && key in opts) {
        outStr += opts[key];
      } else {
        outStr += key ?? '';
      }
    }
    return outStr;
  };
}

你可以像这样使用内联箭头函数， 定义:

const template = (substitute: string) => `[^.?!]*(?<=[.?\s!])${substitute}(?=[\s.?!])[^.?!]*[.?!]`;

用法:

console.log(template('my replaced string'));

一般来说，我反对使用邪恶的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}`;
}

当我看到它的时候，我非常头疼。javascript中的文字模板非常酷，但它们****可重用或带有动态值。但解决方法非常简单。事实上，在花了几天时间编写解析器、格式化器和其他解决方案后，我不得不踢自己几次。最后在我放弃了这个想法，打算使用胡子或其他模板模块后，它击中了我.....

const DT = function dynamicTemplate(source) { return (new Function(`return \`${source}\``))() }

//let a = 1, b = 2;
//DT("${a} + ${b} equals ${a + b}")
// prints '1 + 2 equals 3'

这就是她写的全部内容。

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

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