您如何将 JavaScript 变量转换为模板文字？

Question

我想获取我生成并存储在字符串中的文本，并将其用作模板文字。

var generatedText = "Pretend this text was generated and then stored in a variable. "; 
generatedText = "But I still need to use it as a template it to get ${variable}.";

var variable = "Successs!!!!";

console.log(generatedText);
//prints 'But I still need to interpolate it to get ${variable}.'
//how can I make it print using variable in it like a template as if it were doing this
console.log(`But I still need to use it as a template it to get ${variable}.`);
//prints 'But I still need to use it as a template it to get Successs!!!!.'

如何让生成的文本成为模板字符串？

generatedText 必须以变量开头，因此我需要找到一种方法将其转换为模板字符串（如果可能的话）。

编辑：

我认为我不必放这个但我也不想使用 eval 来冒险评估随机代码...

Answer 1

您应该改为模拟模板文字，因为让文本来自 ~somewhere~ 运行任意 JavaScript 就像真正的模板文字的 ${} 部分通常不是一个好主意:

generatedText.replace(/$\{variable}/g, variable);

Answer 2

对于一般情况，您可以使用替换函数将每个出现的 ${someProp} 替换为对象上的 someProp 属性：

const interpolate = (str, obj) => str.replace(
  /${([^}]+)}/g,
  (_, prop) => obj[prop]
);

const generatedText = "But I still need to use it as a template it to get ${variable}.";
const variable = "Successs!!!!";

console.log(interpolate(generatedText, { variable }));

正则表达式${([^}]+)}表示：

$ - 文字 $
{ - 文字 {
([^}]+) 第一个（也是唯一一个）捕获组：
- [^}]+ - 一个或多个不属于 }
} - 文字 }

由于 prop 是在括号之间找到的属性名称，请替换为 obj[prop] 以替换为所需的替换项。

Answer 3

下面的 interpolate 函数是的扩展版本，增加了对简单嵌套对象字段引用的支持（例如：a.b.c）

function interpolate(s, obj) {
  return s.replace(/[$]{([^}]+)}/g, function(_, path) {
    const properties = path.split('.');
    return properties.reduce((prev, curr) => prev && prev[curr], obj);
  })
}

console.log(interpolate('hello ${a.b.c}', {a: {b: {c: 'world'}}}));
// Displays 'hello world'

Answer 4

下面的插值函数是上述解决方案的扩展版本，添加了对简单嵌套对象字段引用的支持，并添加了数组（例如：a[0][2].b.c）

const interpolate = (str, obj) => {
  return str.replace(/${([^}]+)}/g, (_, target) => {
    let keys = target.split(".");
    return keys.reduce((prev, curr) => {
      if (curr.search(/\[/g) > -1) {
        //if element/key in target array is array, get the value and return
        let m_curr = curr.replace(/\]/g, "");
        let arr = m_curr.split("[");
        return arr.reduce((pr, cu) => {
          return pr && pr[cu];
        }, prev);
      } else {
        //else it is a object, get the value and return
        return prev && prev[curr];
      }
    }, obj);
  });
};

let template = "hello ${a[0][0].b.c}";
let data = {
  a: [
    [{
      b: {
        c: "world",
        f: "greetings"
      }
    }, 2], 3
  ],
  d: 12,
  e: 14
}
console.log(interpolate(template, { ...data
}));

您如何将 JavaScript 变量转换为模板文字？

How would you turn a JavaScript variable into a Template literal?

javascript

string

template-literals