如何在 JavaScript 代码中使用 JavaScript 模板代码？答案

【问题标题】：How to use JavaScript template code within JavaScript code?如何在 JavaScript 代码中使用 JavaScript 模板代码？
【发布时间】：2015-05-23 11:11:14
【问题描述】：

类似于我们如何使用 JS 模板引擎（例如 Handlebars）在 HTML 中动态插入值（例如 <div>{{value inserted by JavaScript}}</div>），我想使用相同的 {{curly brackets}} 表示法在 JavaScript 代码中插入 JavaScript 代码。例如：

 var myFunction= {{My Function}};
 var bar = myFunction(foo);

My Function 模板中定义的代码：

function(foo) {
   return foo+'bar';
}

我尝试了谷歌，但我没有得到任何结果，因为所有结果都是关于 JavaScript 模板引擎的（例如Handlebars）。

知道如何在浏览器中的 JavaScript 中实现这一点吗？

注 1：仅供参考，我想要实现此目的的原因是创建我可以在浏览器中进行单元测试的 JavaScript 函数，并将原样（无需替换 {{template}} 代码）重用到 @987654323 使用的 JavaScript 函数中@ 在其 JavaScript 引擎中支持 {{curly brackets}} 表示法。

注意 2：如果太复杂，我将使用后端语言（例如 PHP 中的 Twig）用 {{curly brackets}} 编写我的 JavaScript 代码并将纯 JavaScript 返回到浏览器，以便我的单元测试工作，并且重复使用后端编写的代码。

【问题讨论】：

我无法想象你真正需要这个的情况，因为你总是可以像任何其他 js 对象一样将函数作为参数传递给函数。我不想说它可能没用，但你真的确定你需要它吗？
拥有它肯定会很有用，因为它可以让我开发 + 单元测试我的代码，然后从字面上复制/粘贴到 Google 跟踪代码管理器中。现在我必须在将我的代码移植到 GTM 之前进行一些手动编辑，这很容易出错并且破坏了单元测试，以确保我的代码正常工作。我的谷歌标签管理器实例被用于将分析标签部署到每月接待数百万访问者的网站，因此确保一切正常运行非常重要。在这种情况下，我不认为这确实有用:)
Handlebars - 除了转义 - 不限于 HTML，但可以使用任何不会与 Handlebars 有语法冲突的语言。至此，您可以使用 Handelbars，因为 js 代码中不存在 {{ }} 符号。但由于转义，您需要使用 {{{ }}} 或将数据定义为 SafeString。

标签： javascript templates template-engine

【解决方案1】：

您可以使用 eval() 来创建动态 JS 代码。这是一个例子：

var getDynamicFunction = function(jsCode) { 
        return '(function() { return function() { ' + jsCode + ' }})()'
   },
   codeToInsert = 'alert("I am created dynamically");';

myFunction = eval(getDynamicFunction(codeToInsert));
myFunction();

http://jsfiddle.net/pLk3nsv3/1/

【讨论】：

谢谢。确实，我知道eval，但我仍然不知道如何在我的 JavaScript 代码中使用 {{template}} 表示法并使用这种技术将其替换为其他 JavaScript。