ES6中模板字符串的原理

前言：
学习链接: ES6 模板字符串的实现原理, 3.ES6-模板字符串及其原理

作用说明

模板字符串（template string）其实也相当于一个语法糖，是增强版的字符串，可以利用反引号进行包裹，可以直接换行、嵌入变量。

原理说明

通过对特定的格式进行的匹配，然后进行填充。相信使用过 模板引擎的人都能快速理解，比如 Mustache。

// 嵌入变量，进行正则替换
let str = "我已经有${year}年${pos}开发经验了";
function replace(str) {
  // 原理是通过正则匹配，替换原字符串中的变量
  return str.replace(/\${[^$]+}/g, function (matched, key) {
    console.log(arguments); // arguments见下面
    return "猜猜我是谁";
  });
}

反引号转义

利用 \ 对 `(反引号)进行转义之后，也可以执行，如下图所示：

执行语句

// script 里面需要检查是否有XSS攻击等
await eval(`(async ()=> {${script}})()`);

赏

谢谢你请我吃糖果

支付宝

微信