本文實例講述了JavaScript基于replace+正則實現ES6的字符串模版功能。分享給大家供大家參考，具體如下：
采用拼接字符串的形式，將 JSON 數據嵌入 HTML 中。開始時代碼量較少，暫時還可以接受。但當頁面結構復雜起來后，其弱點開始變得無法忍受起來:
書寫不連貫。每寫一個變量就要斷一下，插入一個 + 和 “。十分容易出錯。
無法重用。HTML 片段都是離散化的數據，難以對其中重復的部分進行提取。
無法很好地利用 標簽。這是 HTML5 中新增的一個標簽，標準極力推薦將 HTML 模板放入 標簽中，使代碼更簡潔。
replace+正則實現
項目剛開始用的數據拼接
function formatString() { if (arguments.length === 0) return null; var str = arguments[0]; for (var i = 1; i < arguments.length; i++) { var re = new RegExp('//{' + (i - 1) + '//}', 'gm'); str = str.replace(re, arguments[i]); } return str;},第一個參數為需要渲染的數據模板，其他參數為數據：
formatString('{0},My name is {1}', 'everyMan', '吳孔云')這種后期維護較麻煩，一旦更改順序，都需要更改~~就跟函數需要接收一大串參數一樣，我們盡量寫成對象的形式，
var myObject = maker(f,l,m,c,s);//不建議寫法var myObject = maker({//建議寫法 first : f, last: l, state:s, city:c});在網上搜索看到一個例子，可以類似實現ES6的字符串模版形式，博客是一個高中生寫的，戳鏈接 。
function render(template, context) { //被轉義的的分隔符 { 和 } 不應該被渲染，分隔符與變量之間允許有空白字符 var tokenReg = /(//)?/{([^/{/}//]+)(//)?/}/g; return template.replace(tokenReg, function (word, slash1, token, slash2) { //如果有轉義的/{或/}替換轉義字符 if (slash1 || slash2) { return word.replace('//', ''); } // 切割 token ,實現級聯的變量也可以展開 var variables = token.replace(//s/g, '').split('.'); var currentObject = context; var i, length, variable; for (i = 0, length = variables.length; i < length; ++i) { variable = variables[i]; currentObject = currentObject[variable]; // 如果當前索引的對象不存在，則直接返回空字符串。 if (currentObject === undefined || currentObject === null) return ''; } return currentObject; })}String.prototype.render = function (context) { return render(this, context);};"{greeting}! My name is { author.name }.".render({ greeting: "Hi", author: { name: "hsfzxjy" }});// Hi! My name is hsfzxjy.擴展：ES6字符串模版API
ES6引入了一種新型的字符串字面量語法，我們稱之為模板字符串（template strings）。除了使用反撇號字符 ` 代替普通字符串的引號 ' 或 ” 外，它們看起來與普通字符串并無二致。
var a = 'kenny'`my name is ${a}` //"my name is kenny"可以用bable編譯成ES5。
PS：這里再為大家提供2款非常方便的正則表達式工具供大家參考使用：
JavaScript正則表達式在線測試工具：
http://tools.VeVB.COm/regex/javascript
正則表達式在線生成工具：
http://tools.VeVB.COm/regex/create_reg
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《ECMAScript6(ES6)入門教程》、《JavaScript正則表達式技巧大全》、《JavaScript字符與字符串操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
