Ошибка JavaScript ReferenceError в переменной, на которую никогда не ссылаются

Question

Я создаю шаблонизатор HTML.

Программа просматривает HTML и находит все экземпляры {{}}.Затем он просматривает все ключи в нашем контроллере и заменяет экземпляры имен переменных ссылками на контроллер.

Например, если мой контроллер {name:"grody"}, а мой HTML имеет {{name}}, моя программавыполнит следующее: заменит это на {{ctrl['name']}}.

. Затем программа пройдет и будет использовать eval() во всех выражениях для их оценки.

Так что-то вроде {{name + " joe"}} -> {{ctrl['name'] + " joe"}} -> grody joe

Ошибка, которую я получаю, это ReferenceError, очевидно, возникающая в eval функции,Это ReferenceError происходит только тогда, когда существует более одной переменной, и оно выдаст ошибку для первой переменной.

Например, если шаблон равен {{name}} is {{age}} years old}}, он получит ReferenceError по имени.

Однако, если вы сделаете имя строкой, то что-то вроде "na+me":"grody" в контроллере вызовет ReferenceError: na не определено.

Это код:

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()чтобы сделать это умнее.