实现模板字符串解析

最新推荐文章于 2023-03-15 15:10:02 发布

、信仰_

最新推荐文章于 2023-03-15 15:10:02 发布

阅读量187

点赞数

分类专栏：蓝桥杯模板字符串解析二则表达式文章标签： javascript 蓝桥杯前端面试

本文链接：https://blog.csdn.net/sinat_51673411/article/details/129487396

版权

蓝桥杯同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

模板字符串解析

1 篇文章 0 订阅

订阅专栏

二则表达式

1 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript封装一个strRender函数，该函数通过正则表达式匹配并替换模板字符串中的变量，实现数据注入。方法一是通过循环和replace方法，方法二是利用replace方法的回调函数，两者都能将数据对象中的值填入模板。

摘要由CSDN通过智能技术生成

实现模板字符串解析

题目介绍

请封装一个 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'

题解

方法一

    function strRender(str, data) {
   
      const reg = /\$\{(\w+)\}/; //  匹配  ${多个字符} 这样的字符串 

      while (reg.test(str)) {
      
        const key = str.match(reg)[1];
        //match()得到的是一个对象如下一行内容所示   match()[1]即是我们想要的key值
        //['${name}', 'name', index: 11, input: 'My name is ${name}, I am ${age} years old, I come from ${country}', groups: undefined]
      
        str = str.replace(re, data[key]);
        //replace（） 如果第二个参数是字符串  则在原字符串中 讲第一个参数的值改为第二个参数值
 
      }
      return str;
    }

方法二

function strRender(str, data) {
  const re = /\$\{(\w+)\}/g;
  //g：global 表示全文查找
  return str.replace(re, (match, key) => data[key]);
  // replace() 第二个参数如果是函数   函数的返回值即相当于方法一中的第二个参数 使用方法的好处是 每次匹配到都会执行一次这个函数
  
}