Question

因此，有一个ES6文字`-反引号来制作带有变量的多行字符串，我需要将其与模板一起使用，该模板最初以HTML进行描述。

JS：

<div id="template">${value}</div>

所以，我需要“魔术”行中的内容）

Answer 1

eval()可以满足您的要求，尽管如果表达式比变量复杂，则可能很危险。

var value = 'Hello, world!'
var template = document.getElementById('template').outerHTML;

var element = template.replace(/\$\{(\w+)\}/g, function(match, varname) {
  return window[varname];
});
console.log(element);

<div id="template">${value}</div>

如果仅在模板中允许使用全局变量，则可以使用正则表达式。

var value = 'Hello, world!'
var template = document.getElementById('template').outerHTML;
var element = eval('`' + template + '`');
console.log(element);

<div id="template">${value}</div>

但是，我建议完全不使用变量引用，这通常比您需要的更通用。创建一个包含所有允许的模板变量的对象，并使用templateVars[varname]而不是window[varname]。

Answer 2

您可以使用new Function创建它：您将要转换的字符串模板字符串作为函数的主体传递：

const value = 'Hello, world!';
const template = document.getElementById('template').outerHTML;
const func = new Function('value', `return \`${template}\``);
console.log(func(value));

<div id="template">${value}</div>

Answer 3

由于我们在这里重新发明了模板，因此编写自己的模仿字符串文字的模板函数似乎更安全，例如：

(function() {

  let tpl = document.getElementById('template-1').innerHTML

  let template = function(tpl) {
    return function(values) {
      let str = tpl.toString() //copy it

      for( let key in values ) {
       str = str.replace(v, values[key])
      }

      return str
    }
  }

  let el = template(tpl)({
     '${value}': 'test'
   })

   console.log(el)

   // <div id="myDiv">This is a test</div>

})()

//html
<!doctype html>
<html>
  <head></head>
  <body>
    <div>Hello World!</div>
    <template id="template-1">
      <div id="myDiv">This is a ${value}</div>
    </template>
   <script type="text/javascript" src="main.js"></script>
 </body>
</html>

如果您需要执行验证和转义，可以按每个值进行。当然不建议使用 eval（），并且除了混淆代码之外，您实际上并没有在这里使用字符串文字来购买任何东西。

将DOM元素转换为Javascript（ES6）模板字符串

3 个答案: