javascript - 将 DOM 元素转换为 Javascript (ES6) 模板字符串

Question

所以，有一个 ES6 文字 ` - 反引号标记来制作内部带有变量的多行字符串，我需要将它与模板一起使用，最初在 HTML 中描述。

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

JS:

var value = 'Hello, world!'

var template = document.getElementById('template');

// Magic to convert DOM element to template string `<div id="template">${value}</div>`

console.log(element)

>>> <div id="template">Hello, world!</div>

所以，我需要“Magic”系列中的东西)

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]。