lodash template

语法

_.template([string=''], [options={}])

创建一个已编译的模板函数，该函数可以在 interpolate 分隔符中插入数据属性，在 escape 分隔符中插入 HTML escape interpolated 数据属性，并在 evaluate 分隔符中执行 JavaScript。数据属性可以作为模板中的自由变量访问。如果给定了一个设置对象，它将优先于 _.templateSettings 值。

在开发版本中，_.template 利用 sourceURLs 来简化调试。

Arguments

• [string=''] (string): The template string.
• [options={}] (Object): The options object.
• [options.escape=_.templateSettings.escape] (RegExp): The HTML "escape" delimiter.
• [options.evaluate=_.templateSettings.evaluate] (RegExp): The "evaluate" delimiter.
• [options.imports=_.templateSettings.imports] (Object): An object to import into the template as free variables.
• [options.interpolate=_.templateSettings.interpolate] (RegExp): The "interpolate" delimiter.
• [options.sourceURL='lodash.templateSources[n]'] (string): The sourceURL of the compiled template.
• [options.variable='obj'] (string): The data object variable name.

Returns

(Function): Returns the compiled template function.

示例

// 使用 "interpolate" 分隔符创建编译模板
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

// 使用 HTML "escape" 分隔符转义数据属性值
var compiled = _.template('<b><%- value %></b>');
compiled({ 'value': '<script>' });
// => '<b>&lt;script&gt;</b>'

// 使用 "evaluate" 分隔符执行 javascript 并生成 HTML。
var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'

// 在 "evaluate" 分隔符中使用内部的 "print" 函数。
var compiled = _.template('<% print("hello " + user); %>!');
compiled({ 'user': 'barney' });
// => 'hello barney!'

// 使用 ES 模板文字分隔符作为 "插入" 分隔符
// 通过替换 "interpolate" 分隔符禁用支持
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'

// 使用反斜杠将分隔符视为纯文本
var compiled = _.template('<%= "\\<%- value %\\>" %>');
compiled({ 'value': 'ignored' });
// => '<%- value %>'

// 使用 "imports" 选项将 "jQuery" 导入为 "jq"
var text = '<% jq.each(users, function(user) { %><li><%- user %></li><% }); %>';
var compiled = _.template(text, { 'imports': { 'jq': jQuery } });
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'

// 使用 "sourceURL" 选项指定模板的自定义 sourceURL
var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' });
compiled(data);
// => Find the source of "greeting.jst" under the Sources tab or Resources panel of the web inspector.

// 使用 "variable" 选项确保编译模板中不使用 with 语句
var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' });
compiled.source;
// => function(data) {
//   var __t, __p = '';
//   __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!';
//   return __p;
// }

// 使用自定义模板分隔符
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'

// 使用 "source" 属性内联编译模板以获得有意义的
// 错误消息和堆栈跟踪中的行号
fs.writeFileSync(path.join(process.cwd(), 'jst.js'), '\
  var JST = {\
    "main": ' + _.template(mainText).source + '\
  };\
');