【js常用polyfill】（一）模版字符串|利用正則表達式生成一個模版字符串

正則表達式相關博客：
【前端js】算法全歸納（三）字符串：最常用的20個正則表達式（附實例詳解）

正則表達式模版字符串

實現一個模版字符串：傳入一個數據（對象/基礎類型），和一段字符串格式的html模版，含有{{somedata}}/{{somedata.xxx}},替換成值
思路

1. 使用(/\{\{(.+?)\}\}/g+replace全局匹配字符串中{{}}的內容，注意要使用？實現惰性匹配，否則可能匹配{{xxx}}{{xxx}}中間的所有部分
2. 回調函數參數：m是整個內容，s1是括號內子表達式。
3. 當s1爲data，而且傳入data類型是基礎類型時，直接用值替代data
4. 當s1不爲data，split(".")分割字符串（子串個數不確定時，只能使用split，不能用正則），得到s1Key數組，數組爲空或者data不是對象，不進行替換，也就是返回m
5. 當數組不空而且data是對象時，遍歷s1Key數組，對data遞歸查詢要訪問的value，最後替換爲查詢的值

function templateStr(data, str) {
  // 匹配字符串中{{}}的內容，m是整個匹配，s1是括號內子表達式
  return str.replace(/\{\{(.+?)\}\}/g, (m, s1) => {
    //s1是data而且data爲基礎類型，直接用值替代data
    if (s1 === "data" && !(data instanceof Object)) return data;
    //s1Key保存字符串分割以後的key
    let s1Key = s1.split(".");
    //s1Key是空或者data不是對象，返回匹配的m，不替換
    if (!s1Key || !(data instanceof Object)) return m;
    //s1Key不空而且data是對象
    let i = 1; //i指向當前key的索引
    let value = data; //value指向當前的obj.key
    while (value[s1Key[i]]) {
      //obj.key存在時，
      value = value[s1Key[i]]; //替換value
      i++; //指針後移
    }
    return value; //obj.key不存在，查詢完畢，用value替換匹配的m
  });
}
templateStr({ a: 1, b: { c: 2 } }, "<a href={{data.a}}>{{data.b.c}}</a>");
//"<a href=1>2</a>"
templateStr(5, "<a href={{data}}>{{data.b.c}}</a>");
//"<a href=5>{{data.b.c}}</a>"