ES6模板字串的實現原理

toymm發表於2018-05-20
字串

ES6模板字串的原理

在ES5中經常會用到拼接字串，比如

let year = 3, pos = "前端";
"我已經有" + year + "年" + pos + "開發經驗了";
輸出結果是 =>  "我已經有3年前端開發經驗了"
複製程式碼

ES5中的拼接字串在實際使用中效率不高，可讀性極差;所以ES6對此作出了改進，推出了模板字串，以上的程式碼就變成了

let year = 3, pos = "前端";
`我已經有${year}年${pos}開發經驗了`
輸出結果是 =>  "我已經有3年前端開發經驗了"
複製程式碼

是不是特別好用，注意模板字串使用的是反引號(Tab鍵上邊那個) 那它的原理是什麼？是怎麼實現的？

// 定義一個字串
let year = 3, pos = "前端";
let str = "我已經有${year}年${pos}開發經驗了";
function replace(str){
    // 原理是通過正則匹配，替換原字串中的變數
    return str.replace(/\$\{([^}])\}/g,function(matched,key){
            console.log(arguments)  // arguments見下面
            return eval(key)
    })
}
console.log(replace(str)) => "我已經有3年前端開發經驗了"

// 字串repalce方法的arguments
{ '0': '${year}',                               // 大正則匹配項
  '1': 'year',                                  // 正則小分組匹配項        
  '2': 4,                                       // 匹配項第一個元素在字串中的索引    
  '3': '我已經有${year}年${pos}開發經驗了' }    // 原字串
{ '0': '${pos}',
  '1': 'pos',
  '2': 12,
  '3': '我已經有${year}年${pos}開發經驗了' }
複製程式碼

總結

很多模板其實都是這個原理，比如handlebar的{{handlebar}}, ejs的<%=ejs%>

相關文章