基于JS正則表達式如何實現模板數據動態渲染

這篇文章主要介紹基于JS正則表達式如何實現模板數據動態渲染，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一、業務需求：

1.前端后端定義好模板以及變量名，保存數據庫

2.訂單數據是前端根據支付結果獲取的，最終渲染完的數據模板需要調用打印機打印出來

3.模板相對商家來說比較固定，但是每個商家需要的模板都有可能不一樣，所以需要每次登錄后，查詢一次模板緩存前端，后續每次支付后，動態渲染數據即可

二、考點：

1.正則表達式

2.精簡代碼量，盡量減少前端的工作量

三、實現思路：

1.需要渲染數據的模板，以${變量名}區分：

var t="銀行：${bankName}，商家名稱：${merchantName}，訂單號：${orderNum}";

2.正則匹配獲取所有變量名

var keys=[];
var arr = t.match(/\$\{(.*?)\}/g);
for(var key in arr){
  var s=arr[key].replace("${","").replace("}","");
  keys.push(s);
}
alert(keys);

3.組裝訂單數據，注意變量屬性名與模板里的變量名要保持一致

var order={
 "bankName": "工行",
 "merchantName": "小賣部",
 "orderNum": "123456"
};

4.渲染數據

for(var i=0;i<keys.length;i++){
 var key=keys[i];
 var value=order[key];
 t= t.replace("${"+key+"}",value);
}
alert(t);

5.查看效果：

6.有人會說，直接拼接字符串不是更快？比如：

var t=`銀行：${order.bankName}，商家名稱：${order.merchantName}，訂單號：${order.orderNum}`;

這種方式在模板固定且數據量少的時候是挺好用的，但是業務上，雖然模板和數據對于商家來說相對固定，但是系統里面很多商家，每個商家的小票模板可能都不一樣，需要渲染的變量也挺多，前端不可能根據每個商家都改一套模板的，總而言之，適合才是最好的！

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。

以上是“基于JS正則表達式如何實現模板數據動態渲染”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！