javaScript实现模板字符串解析

挑战介绍

本节我们来挑战一道大厂面试真题 —— 实现模板字符串解析

挑战内容

请封装一个 strRender 函数，用来实现模板字符串解析功能。

strRender 函数接收两个参数，第一个参数是模板字符串 str，第二个参数是需要传入的 data，最终返回一个把模板中的变量替换了的新字符串。

示例：

const str = "My name is ${name}, I am ${age} years old, I come from ${country}";

const data = {
  name: "zhangsan",
  age: "18",
  country: "China",
};

console.log(strRender(str, data)); // 'My name is zhangsan, I am 18 years old, I come from China'

知识点

match 方法 ：方法将字符串与正则表达式进行匹配。

match() 方法返回包含匹配项的数组。

如果未找到匹配项，则 match() 方法返回 null。

答案

function strRender(str, data) {
    //   / 正则表达式内容/
    //   $在正则表达式中表示匹配输入字符串的结尾位置
    //  我们现在要匹配的是${xxx}
    //  则要使用转义字符 \
    //  \$表示 字符$
    //  \w表示匹配字母、数字、下划线。等价于 [A-Za-z0-9_]
    //  +表示一个或多个
    const re = /\$\{(\w+)\}/;
  
    // 如果字符串中存在 ${xxx}，说明还有变量没有被替换，才执行后面的逻辑
    if (re.test(str)) {
      // 使用 match 方法获取 key 值 例如：${xxx}  里的xxx
      const key = str.match(re)[1];
  
      // 使用 replace 方法替换变量为真实的数据
      str = str.replace(re, data[key]);
  
      // 注意这里的逻辑，递归调用自身，直到字符串中不存在 ${xxx}
      return strRender(str, data);
    }
    return str;
  }

module.exports = strRender