模版语法的简单实现,使用 eval

5 阅读1分钟
const name = 'Nexmoe';
const message = 'My name is {{name}} and I\'m {{getAge(20)}} years old.';

function getAge(age) {
  return age;
}

const replacedMessage = message.replace(/\{\{(.*?)\}\}/g, (match, variableOrFunction) => {
  const trimmedValue = variableOrFunction.trim();

  if (trimmedValue.includes('(')) {  // 如果占位符包含括号,则表示为带参数的函数替换
    const [functionName, ...args] = trimmedValue.split(/\(|\)/).filter(Boolean);
    const func = eval(functionName);
    return func(...args);
  } else {  // 否则为变量替换
    return eval(trimmedValue);
  }
});

onsole.log(replacedMessage);

先检查占位符中是否包含括号,如果包含括号,则表示是一个带参数的函数调用。使用split方法和正则表达式来解析函数名和参数,并将其存储在functionNameargs变量中。然后,使用eval函数将函数名转换为实际的函数对象,并使用扩展运算符 (...) 将参数作为参数列表传递给函数。函数执行后,将返回值作为替换后的字符串返回。

如果占位符不包含括号,则表示是一个变量。直接使用eval函数将变量名转换为实际的变量值,并返回其值作为替换后的字符串。

⚠️ 注意:使用eval函数执行代码具有一定的安全风险,因为它可以执行任意的 JavaScript 代码。有相当多的建议建议不使用eval。准备过段时间研究研究不用eval的方法。