JavaScript基于replace+正則實現(xiàn)ES6的字符串模版功能
本文實例講述了JavaScript基于replace+正則實現(xiàn)ES6的字符串模版功能。分享給大家供大家參考，具體如下：
采用拼接字符串的形式，將 JSON 數(shù)據(jù)嵌入 HTML 中。開始時代碼量較少，暫時還可以接受。但當頁面結(jié)構(gòu)復雜起來后，其弱點開始變得無法忍受起來:
書寫不連貫。每寫一個變量就要斷一下，插入一個 + 和 “。十分容易出錯。
無法重用。HTML 片段都是離散化的數(shù)據(jù)，難以對其中重復的部分進行提取。
無法很好地利用 標簽。這是 HTML5 中新增的一個標簽，標準極力推薦將 HTML 模板放入 標簽中，使代碼更簡潔。
replace+正則實現(xiàn)
項目剛開始用的數(shù)據(jù)拼接
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;
},
第一個參數(shù)為需要渲染的數(shù)據(jù)模板，其他參數(shù)為數(shù)據(jù)：
formatString('{0},My name is {1}', 'everyMan', '吳孔云')
這種后期維護較麻煩，一旦更改順序，都需要更改~~就跟函數(shù)需要接收一大串參數(shù)一樣，我們盡量寫成對象的形式，
var myObject = maker(f,l,m,c,s);//不建議寫法
var myObject = maker({//建議寫法
first : f,
last: l,
state:s,
city:c
});
在網(wǎng)上搜索看到一個例子，可以類似實現(xiàn)ES6的字符串模版形式，博客是一個高中生寫的，戳鏈接 。
function render(template, context) {
//被轉(zhuǎn)義的的分隔符 { 和 } 不應該被渲染，分隔符與變量之間允許有空白字符
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
return template.replace(tokenReg, function (word, slash1, token, slash2) {
//如果有轉(zhuǎn)義的\{或\}替換轉(zhuǎn)義字符
if (slash1 || slash2) {
return word.replace('\\', '');
}
// 切割 token ,實現(xiàn)級聯(lián)的變量也可以展開
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.jb51.net/regex/javascript
正則表達式在線生成工具：
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ECMAScript6(ES6)入門教程》、《JavaScript正則表達式技巧大全》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊小圖顯示大圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
詳解基于Vue cli生成的Vue項目的webpack4升級
這篇文章主要介紹了詳解基于Vue cli生成的Vue項目的webpack4升級，本文將詳細介紹從webpack3到webpack4的升級過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
今天組里的同事要寫一個屏保的效果，要求鼠標無操作N秒后進入屏幕保護，滑動鼠標的時候取消屏幕保護。我真是難倒了，糾結(jié)了半天，搞定了，下面給大家分享實現(xiàn)代碼2017-07-07
本文主要介分享了js實現(xiàn)倒計時效果（小于10補零）的實例代碼，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
下面小編就為大家?guī)硪黄猰ui開發(fā)中獲取單選按鈕、復選框的值(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了js點擊任意區(qū)域彈出層消失實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
js表數(shù)據(jù)排序 sort table data
對于表格的排序，是很不錯的一個功能，方便用戶快速的分析一些數(shù)據(jù)。2009-02-02
原生js獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法
下面小編就為大家?guī)硪黄鷍s獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript中AOP的實現(xiàn)與應用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了JavaScript 防篡改對象的用法示例，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以參考下2021-04-04