JavaScript ReferenceError 被抛出到从未被引用的变量上

Question

我正在制作一个 HTML 模板引擎。

程序遍历 HTML，并找到 {{ }} 的所有实例。然后它会遍历计数器中的所有键，并用对 Controller 的引用替换变量名称的实例。

例如，如果我的 Controller 是 {name:"grody"} 并且我的 HTML 具有 {{name}}，我的程序将执行以下操作来替换与 {{ctrl['name']}}。

然后程序将执行并对所有表达式使用 eval() 来计算它们。

所以类似于 {{name + "joe"}} --> {{ctrl['name'] + "joe"}} --> 格罗迪·乔

我收到的错误是 ReferenceError，显然发生在函数的 eval 内。仅当存在多个变量时才会发生此 ReferenceError，并且它将在第一个变量上抛出错误。

例如，如果模板是 {{name}} is {{age}} 岁}}，它将在名称上收到 ReferenceError。

但是，如果您将名称设置为字符串，那么 Controller 中类似 "na+me":"grody" 的内容将导致 ReferenceError: na is not Defined。

这是代码:

function template(str, ctrl) {
  var exp = str.match(/[^{{]+(?=\}})/g).map(function(x) {
    return x.replace("}}", "")
  })
  for (var i = 0; i < exp.length; i++) {
    for (var prop in ctrl) {

      //console.log("propSearch:", prop.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))

      var evalExp = exp[i].replace(new RegExp(prop.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), "g"), "ctrl['" + prop + "']")
      str = str.replace(new RegExp("{{" + exp[i].replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "}}", "g"), eval(evalExp))

      //console.log(prop)
      //console.log("exp[i]:", exp[i])
      //console.log("evalExp:", evalExp)
      //console.log("search:", exp[i].replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
      //console.log("eval:", eval(evalExp))
      //console.log("str", str)

      evalExp = ""
    }
  }
  return str
}

Answer 1

我认为你让事情变得比需要的复杂得多。我真的不明白为什么所有这些正则表达式和替换都是必要的。这是一个可以完成您正在寻找的功能的函数:

const mustache = /\{\{(\w+)\}\}/g;

function template(str, ctrl) {
    return str.replace(mustache, (match, key) => ctrl[key]);
};

它非常初级(它只能处理原始字符串键，但不能处理表达式)，但您可以处理传递给 .replace() 的回调以使其更智能。