手动实现ES6中的模板字符串

1. 手动实现ES6中的模板字符串 ${}，

 // 手动实现模板字符串 ${}，对应正则表达式为： /\$\{(.*?)\}/g
   function templateStr(str) {
      /*
        m：匹配的字符串；p1：匹配正则中第一个元组的字符串；index: 匹配的字符串在整个字符串中的开始下标，str: 当前完整的字符串；
        replace函数使用法参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace
      */
      return str.replace(/\$\{(.*?)\}/g, function(m, p1, index,str) {
        return eval(p1)
      })
    }
    let name = '张三', age = 25
    let temp = '姓名：${name}，年龄：${age}'
    console.log(templateStr(temp));

2. 手动实现双括号模板字符串{{}}

// 手动实现双括号模板字符串  {{}}； 正则表达式为： /\{\{(.*?)\}\}/g
function templateStr2(str, obj) {
      let pattern = /\{\{(.*?)\}\}/     // 单个模板字符串的进行匹配
      if(pattern.test(str)) {
        // 字符串中含有匹配该正则的字符串；则将匹配的字符串进行替换
        const key = pattern.exec(str)[1]
        str = str.replace(pattern, obj[key])
        // 递归将剩下匹配的字符串也进行替换，直至字符串中不含有与正则匹配的字符串
        return templateStr2(str, obj)
      }
      // 不存在模板字符串则直接返回
      return str
    }

    // 手动实现双括号模板字符串  {{}}；
    function templateStr3(str, obj) {
      let pattern = /\{\{(.*?)\}\}/g     // 全局模板字符串的进行匹配
      if(pattern.test(str)) {
        return str.replace(pattern, function(key, p1) {
          // p1的值为 "name", "age"； 
          return eval('obj[p1]')    // 相当于执行eval('obj["name"]')
        })
      }
      // 不存在模板字符串则直接返回
      return str
    }

    let obj = {
      name: '李四',
      age: 25
    }
    let str = "姓名：{{name}}--年龄：{{age}}"
    console.log(templateStr2( str, obj));
    console.log(templateStr3( str, obj));

正则表达式中相关的字符用法：

*匹配0次或多次；

?匹配0次或一次;

.匹配除换行之外的所有单字符；

\s匹配所有空白字符；

\S匹配所有非空字符，不包括换行；

 $匹配字符串的结尾；  

^匹配字符串的开头；

\w匹配单词字符；

\W匹配非单词字符；

n+匹配任何包含至少一个n的字符串；