## template + [link](./template "Link to this entry.") + [source](https://github.com/lodash/lodash/blob/4.5.0正式版/lodash.src.js#L12648 "View in source.") + [npm](https://www.npmjs.com/package/lodash.template "See the npm package.") ``` _.template([string=''], [options]) ``` 創建一個預編譯模板方法，可以插入數據到模板中 "interpolate" 分隔符相應的位置。 HTML會在 "escape" 分隔符中轉換為相應實體。 在 "evaluate" 分隔符中允許執行JavaScript代碼。 在模板中可以自由訪問變量。 如果設置了選項對象，則會優先覆蓋 `_.templateSettings` 的值。 **注意:** 在開發過程中可以使用 [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl) 便于調試。 了解更多預編譯模板的信息查看 [lodash的自定義構建文檔](https://lodash.com/custom-builds) 了解更多 Chrome 沙箱擴展的信息查看 [Chrome的擴展文檔](https://developer.chrome.com/extensions/sandboxingEval) ### 參數 1. [string=''] (string) 模板字符串 2. [options] (Object) 選項對象 3. [options.escape] (RegExp) "escape" 分隔符 4. [options.evaluate] (RegExp) "evaluate" 分隔符 5. [options.imports] (Object) 導入對象到模板中作為自由變量 6. [options.interpolate] (RegExp) "interpolate" 分隔符 7. [options.sourceURL] (string) 模板編譯的來源URL 8. [options.variable] (string) 數據對象的變量名 ### 返回值 (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!' // 使用自定義的模板分隔符 _.templateSettings.interpolate = /{{([\s\S]+?)}}/g; var compiled = _.template('hello {{ user }}!'); compiled({ 'user': 'mustache' }); // => 'hello mustache!' // 使用反斜杠符號作為純文本處理 var compiled = _.template('<%= "\\<%- value %\\>" %>'); compiled({ 'value': 'ignored' }); // => '<%- value %>' // 使用 `imports` 選項導入 `jq` 作為 `jQuery` 的別名 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` 選項指定模板的來源URL var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' }); compiled(data); // => 在開發工具的 Sources 選項卡 或 Resources 面板中找到 "greeting.jst" // 使用 `variable` 選項確保在編譯模板中不聲明變量 var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' }); compiled.source; // => function(data) { // var __t, __p = ''; // __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!'; // return __p; // } // 使用 `source` 特性內聯編譯模板 // 便以查看行號、錯誤信息、堆棧 fs.writeFileSync(path.join(cwd, 'jst.js'), '\ var JST = {\ "main": ' + _.template(mainText).source + '\ };\ '); ```