js中模板字符串的使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中模板字符串的使用相关的知识,希望对你有一定的参考价值。

参考技术A

es6中增加了模板字符串,使字符的操作更加灵活和解决复杂的问题。
语法:
使用反引号( ` )来包裹普通字符串。如:

在模板字符串中可以将任何有效的 JS 表达式嵌入到模板字面量中,并将其结果输出为 字符串的一部分。如:

简单的变量替换

复杂的表达式

underscore.js 预编译模板使用

【中文标题】underscore.js 预编译模板使用【英文标题】:underscore.js precompiled templates using 【发布时间】:2013-09-12 04:16:47 【问题描述】:

我想使用预编译的 underscore.js 模板。我使用_.template().source 并将结果保存在文件中。但我不明白,如何使用这个模板。预编译的模板是字符串,我不能将它转换为函数。我尝试使用eval,但它总是返回解析错误。

例如:

<div>
    <% for(var i = 0; i < 5; i++) %>
        <div><%=i%></div>
    <%  %>
</div>

标准使用:

_.template(tpl).();

结果:

<div>

    <div>0</div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>

预编译:

_.template(tpl).source

预编译模板:

"function(obj)
var __t,__p='',__j=Array.prototype.join,print=function()__p+=__j.call(arguments,'');;
with(obj||)
__p+='<div>\n\t';
 for(var i = 0; i < 5; i++) 
__p+='\n\t\t<div>'+
((__t=(i))==null?'':__t)+
'</div>\n\t';
  
__p+='\n</div>\n';

return __p;
"

运行预编译模板:

var a = eval(tplc);
a();

错误:

Error
line: 1
message: "Parse error"
sourceId: 139746789246216
__proto__: SyntaxError

【问题讨论】:

【参考方案1】:

是的,source 属性将编译后的模板作为字符串返回。您可以将该字符串写入定义 JavaScript 对象文字的文件,如下所示:

window.JST =  ;
JST.some_name = function(obj) ... ;
// The rest of the compiled template functions go here

然后,像任何其他 JavaScript 文件一样将其加载到浏览器中,您最终会在 JST 中得到一堆已编译的模板函数:

var html = JST.some_name(data);

当然,您可以随意构建JST 定义,这只是说明整体方法的一种简单方式。

请记住,字符串是否只是一些要像任何其他文本块一样被操作的文本(例如将其写入文件)或者它是否是 JavaScript 源代码取决于谁在解释该字符串。

【讨论】:

【参考方案2】:

我终于找到了this 的解决方案。我不能说这是一个优雅的解决方案,但它确实有效。 以我为例:

var a = eval('[' + tplc + ']')[0];
a();

【讨论】:

eval 永远不是答案。 有些人在遇到问题时会想“我知道,我会使用 eval”。现在他们有两个问题,五个安全问题和一个无法调试的混乱。

以上是关于js中模板字符串的使用的主要内容,如果未能解决你的问题,请参考以下文章

js的反引号模板字符串方便了拼接字符串吗?

JS中模板字符串中的HTML元素

无法在 react.js 的模板字符串中呈现 html 标签

如何在 js 字符串模板文字中调用带参数的函数? [关闭]

Vue.js:访问模板字符串中的全局值

underscore.js 预编译模板使用