这样做(这样做):

让a = 'b:${this.b}' 令b = 10 函数template(templateString, templateVars) { 返回new函数('return " + templateString + ' ").call(templateVars) ｝ 结果。textContent = template(a， {b}) < b id =结果> < / b >

你想要的是:

//从问题中引用的非工作代码 让b = 10; console.log (a.template ()); / / b: 10

与eval完全相同(就功能和安全而言):获取包含代码的字符串并执行该代码的能力;执行的代码还可以看到调用者环境中的局部变量。

在JS中，函数无法看到调用者中的局部变量，除非该函数是eval()。甚至Function()也做不到。

当您听说JavaScript中出现了所谓的“模板字符串”时，很自然地认为这是一个内置的模板库，就像Mustache一样。它不是。它主要是字符串插值和JS的多行字符串。不过，我认为这在一段时间内将是一个普遍的误解。：(

有很多好的解决方案张贴在这里，但没有一个利用ES6字符串。原始的方法。这是我的贡献。它有一个重要的限制，它只接受传入对象的属性，这意味着模板中的代码执行将不起作用。

function parseStringTemplate(str, obj) {
    let parts = str.split(/\$\{(?!\d)[\wæøåÆØÅ]*\}/);
    let args = str.match(/[^{\}]+(?=})/g) || [];
    let parameters = args.map(argument => obj[argument] || (obj[argument] === undefined ? "" : obj[argument]));
    return String.raw({ raw: parts }, ...parameters);
}

let template = "Hello, ${name}! Are you ${age} years old?";
let values = { name: "John Doe", age: 18 };

parseStringTemplate(template, values);
// output: Hello, John Doe! Are you 18 years old?

将字符串拆分为非参数的文本部分。看到正则表达式。 部分:[“你好，”，“!”你多大了?”) 将字符串拆分为属性名。如果匹配失败则为空数组。 参数:["name"， "age"] 通过属性名映射obj中的参数。解决方案受限于浅的一级映射。未定义的值用空字符串代替，但接受其他假值。 参数:["John Doe"， 18] 使用String.raw(…)并返回结果。

你应该试试这个小JS模块，由Andrea Giammarchi，来自github: https://github.com/WebReflection/backtick-template

/*! (C) 2017 Andrea Giammarchi - MIT Style License */
function template(fn, $str, $object) {'use strict';
  var
    stringify = JSON.stringify,
    hasTransformer = typeof fn === 'function',
    str = hasTransformer ? $str : fn,
    object = hasTransformer ? $object : $str,
    i = 0, length = str.length,
    strings = i < length ? [] : ['""'],
    values = hasTransformer ? [] : strings,
    open, close, counter
  ;
  while (i < length) {
    open = str.indexOf('${', i);
    if (-1 < open) {
      strings.push(stringify(str.slice(i, open)));
      open += 2;
      close = open;
      counter = 1;
      while (close < length) {
        switch (str.charAt(close++)) {
          case '}': counter -= 1; break;
          case '{': counter += 1; break;
        }
        if (counter < 1) {
          values.push('(' + str.slice(open, close - 1) + ')');
          break;
        }
      }
      i = close;
    } else {
      strings.push(stringify(str.slice(i)));
      i = length;
    }
  }
  if (hasTransformer) {
    str = 'function' + (Math.random() * 1e5 | 0);
    if (strings.length === values.length) strings.push('""');
    strings = [
      str,
      'with(this)return ' + str + '([' + strings + ']' + (
        values.length ? (',' + values.join(',')) : ''
      ) + ')'
    ];
  } else {
    strings = ['with(this)return ' + strings.join('+')];
  }
  return Function.apply(null, strings).apply(
    object,
    hasTransformer ? [fn] : []
  );
}

template.asMethod = function (fn, object) {'use strict';
  return typeof fn === 'function' ?
    template(fn, this, object) :
    template(this, fn);
};

演示(以下所有测试返回true):

const info = 'template';
// just string
`some ${info}` === template('some ${info}', {info});

// passing through a transformer
transform `some ${info}` === template(transform, 'some ${info}', {info});

// using it as String method
String.prototype.template = template.asMethod;

`some ${info}` === 'some ${info}'.template({info});

transform `some ${info}` === 'some ${info}'.template(transform, {info});

因为我们正在重新发明一些东西，这将是javascript中的一个可爱的特性。

我使用eval()，这是不安全的，但javascript是不安全的。我承认我不擅长javascript，但我有一个需求，我需要一个答案，所以我做了一个。

我选择用@而不是$来风格化我的变量，特别是因为我想使用文字的多行特性，直到它准备好才计算。变量语法是@{optionalobject。optionalobjectn。variable_name}

我不是javascript专家，所以我很乐意听取改进建议，但是……

var prsLiteral, prsRegex = /\@\{(.*?)(?!\@\{)\}/g
for(i = 0; i < myResultSet.length; i++) {
    prsLiteral = rt.replace(prsRegex,function (match,varname) {
        return eval(varname + "[" + i + "]");
        // you could instead use return eval(varname) if you're not looping.
    })
    console.log(prsLiteral);
}

下面是一个非常简单的实现

myResultSet = {totalrecords: 2， 姓名:["Bob"， "Stephanie"]， 37岁的年龄:[22]}; rt = '我的名字是@{myResultSet。我是@{myResultSet.Age}。' var prsLiteral, prsRegex = /\@\{(.*?)(?!\@\{)\}/g . var prsLiteral, prsRegex = /\@\ For (i = 0;i < myResultSet.totalrecords;我+ +){ prsLiteral = rt.replace(prsRegex，函数(匹配，varname) { 返回eval(varname + "[" + I + "]"); //如果不循环，可以使用return eval(varname)。 }) console.log (prsLiteral); ｝

在我的实际实现中，我选择使用@{{variable}}。再来一组大括号。不太可能意外地遇到这种情况。的正则表达式 /\@\{\{(.*?)(?!\@\{\{)\}\}/ g

为了便于阅读

\@\{\{    # opening sequence, @{{ literally.
(.*?)     # capturing the variable name
          # ^ captures only until it reaches the closing sequence
(?!       # negative lookahead, making sure the following
          # ^ pattern is not found ahead of the current character
  \@\{\{  # same as opening sequence, if you change that, change this
)
\}\}      # closing sequence.

如果您对正则表达式没有经验，一个非常安全的规则是转义每个非字母数字字符，并且不要不必要地转义字母，因为许多转义字母对于几乎所有类型的正则表达式都具有特殊意义。

这里的问题是有一个函数可以访问它的调用者的变量。这就是为什么我们看到直接eval被用于模板处理。一种可能的解决方案是生成一个函数，接受由字典属性命名的形式参数，并以相同的顺序使用相应的值调用它。另一种方法是这样简单:

var name = "John Smith";
var message = "Hello, my name is ${name}";
console.log(new Function('return `' + message + '`;')());

对于任何使用Babel编译器的人，我们需要创建一个闭包，它可以记住创建它的环境:

console.log(new Function('name', 'return `' + message + '`;')(name));