1.1代码实现
/**
* 模板字符串解析
* @param {*} templateString
* @param {*} data
* @returns 解析后的字符串
*/
function parseTemplateString (templateString, data) {
// 使用正则表达式在模板字符串中查找所有 ${...} 的实例
const regex = /\${(.*?)}/g;
// 使用 replace() 方法将每个 ${...} 的实例替换为数据对象中相应的值
const parsedString = templateString.replace(regex, (match, key) => {
// 使用 eval() 函数来评估 ${...} 中的表达式，并从数据对象中返回相应的值
return eval(`data.${key}`);
});
return parsedString;
}
// 测试:
const name = 'John';
const age = 30;
const job = 'Web Developer';
const templateString = '我的名字是 ${name}，我今年 ${age} 岁，我从事 ${job} 的工作。';
const data = { name, age, job };
const parsedString = parseTemplateString(templateString, data);
console.log(parsedString); // 输出: 我的名字是 John，我今年 30 岁，我从事 Web Developer 的工作。
是
1.2代码分析
1.2.1正则表达式const regex = /${(.*?)}/g;
这个正则表达式用来查找模板字符串中所有的${...}的实例。以下是这个表达式的拆解
/-正则表达式的开始\-转义字符${-匹配${字符(.?*)-一个捕获组，匹配任何字符（除了换行符）零次或多次，尽可能少的匹配}-匹配}字符/-正则表达式的结束g-全局标志，用于匹配字符串中正则表达式所有的实例
因此，正则表达式匹配以${开头并以}结尾的任何字符串，并捕获中间的内容，这使得函数能够将匹配到的字符串替换为数据对象中相应的值。
1.2.2匹配模式
str.replace(regexp|substr, newSubStr|function)
可以接收正则表达式，和一个函数所以有
const parsedString = templateString.replace(regex, (match, key) => {
// 使用 eval() 函数来评估 ${...} 中的表达式，并从数据对象中返回相应的值
return eval(`data.${key}`);
});
这段代码实现了模板字符串的解析功能，将模板字符串中 ${...} 包含的表达式替换为对应数据对象中的值。
templateString 是包含模板字符串的变量，regex 是一个正则表达式，用于匹配模板字符串中 ${...} 的部分，并提取其中的键名 key。
replace 是字符串方法，它会在模板字符串中查找与 regex 匹配的所有子串，并将每个子串替换为回调函数的返回值。回调函数传入两个参数：match 表示匹配到的子串，在这里指的就是完整的 ${...} 部分；key 表示从子串中提取出来的键名。
在回调函数中，使用 eval 函数评估 ${...} 中的表达式，并从数据对象（data）中返回相应的值，最后返回这个值作为替换结果。
需要注意的是，使用 eval 函数存在一定的安全风险，因为它可以执行任意 JavaScript 代码，可能会导致代码注入等安全问题。如果数据源无法保证安全，建议避免使用 eval 函数，寻找其他更加可控的方式来实现模板字符串的解析，这里就简单做个记录，作为其中的一种实现方式罢了。
感触：：AI不愧是个好帮手，就是白嫖有些难了，魔法不够强大🤔。
