感谢任何反馈......
我有一个嵌入了JS字符串文字的HTML模板......
<html>
<head>
<title>${title}</title>
</head>
<body>
User name: ${user.name}
</body>
</html>
我正在做......
let temp = require('./template.html')
return temp; // <--- I need this to return the compiled html
如何获取要渲染的字符串文字？
甚至可以这样做吗？
我需要'temp'变量作为编译字符串返回，以便我可以稍后在代码中将其插入到document.write中。
感谢。
答案 0 :(得分：1)
那些不是字符串文字。它们看起来像JavaScript的模板文字中的标记。
甚至可以这样做吗？
如果您想要动态加载HTML然后将其用作模板文字，那么您只有两种选择：
使用模板库（或编写自己的模板代码）来解析字符串并处理这些标记
使用eval / new Function
eval（或new Function）与您自己的内容一起使用时不是邪恶的（而且性能成本已被夸大了夸大其词），尽管我不是说我推荐它。但这就是你要做的事情（假设在你的堆栈中，require('./template.html')会给你一个包含内容的字符串）：
let temp = require('./template.html');
const template = "`" + temp.replace(/`/g, "\\`") + "`";
（你可能想要在那里逃跑，我只是处理了反击。）
然后当你在范围内有相关的令牌时：
const str = eval(template);
直播示例：
let temp = document.getElementById("template").textContent.trim();
const template = "`" + temp.replace(/`/g, "\\`") + "`";
// Using it
const title = "This is the title";
const user = {name: "Joe Blogs"};
const str = eval(template);
console.log(str);<script type="text/template" id="template">
<html>
<head>
<title>${title}</title>
</head>
<body>
User name: ${user.name}
</body>
</html>
</script>
为什么eval代替new Function？因此，包含模板以供使用的代码不必知道名称title和user。 new Function仍允许执行任意代码，就像eval一样，所以除了您自己的内容之外，您仍然无法使用它...
答案 1 :(得分：0)
您可以创建新的Function将其转换为字符串模板
return new Function("title","user","return `" + temp + "`;")(title,user);
正如T.J所指出的，你需要知道模板中使用的所有变量，并将它们作为函数的参数包含在内。
答案 2 :(得分：0)
是的，可以对您的代码进行一些小修改。
首先将template.html重命名为template.js并将其内容更改为
exports default ({title, user}) =>`
<html>
<head>
<title>${title}</title>
</head>
<body>
User name: ${user.name}
</body>
</html>`
然后let temp = require('./template.js')会为你应该用你的上下文调用一个temp函数。像
let ctx = { title: 'titre', user: { name: 'alice' } }
let compiled = temp(ctx) // your compiled template
查看yo-yo适用于此概念的库