如何将字符串转换为插值字符串？答案

【问题标题】：how I convert string into interpolated string?如何将字符串转换为插值字符串？
【发布时间】：2020-11-05 22:55:30
【问题描述】：

我从后端收到一个字符串。比方说

"Save Earth, ${name}"

在前端，我使用 javascript 我想知道如何从字符串中的变量绑定name。

我知道 JS 中的字符串插值，如下所示

`Save Earth, ${name}`

即使使用字符串插值也无济于事我正在从后端获取 普通字符串，如下所示：

  const name = "John"; 
  const response = "Save Earth, ${name}";
  console.log(`${response}`);

我得到了什么

"Save Earth, ${name}"

预期

"Save Earth, John"

注意：我不能使用字符串查找和替换方法，因为变量名可以是任何东西。

编辑：我是否只需要在这里使用Regex 到find & replace 方法。

我为什么要寻找另一种方法？ 因为字符串可能很长，我觉得会增加时间复杂度。

【问题讨论】：

这也可以看看stackoverflow.com/questions/29182244/…。除了查找和替换之外，还有一种方法是使用eval，但这有其自身的缺点。
@BasvanderLinden 是的，直到现在我一直在回避eval。但是，如果它可以成为优化的解决方案，我会尝试对此进行一些头脑风暴。
这能回答你的问题吗？ Convert a string to a template string

标签： javascript reactjs regex string

【解决方案1】：

为此，您需要使用正则表达式的替换功能使用 /${\w+}/ 变量，您定义了什么。

const name = "John";
const response = "Save Earth, ${name}";

const newResponse = response.replace(/\${\w+}/ ,name);

console.log(newResponse);

【讨论】：

我不能把整个字符串改成插值字符串吗？或者正则表达式是这里唯一的选择......
yes.eval 不推荐使用和不鼓励使用。所以正则表达式是匹配字符串的选项
感谢您的回答。我接受了@theblackgigant 的回答，因为他之前发过帖。

【解决方案2】：

查找和替换仍然可以与regex 一起使用。

您可以使用一个对象而不是单独的变量来替换您要替换的数据。然后在替换函数中，您可以传递一个函数作为返回正确数据的第二个参数。

对象的原因是我们不能通过名称访问变量（除非你将它们添加到窗口对象中）。

const response = "${name} is ${age} years old!";

const data = {
  name: "John Doe",
  age: "42"
};

const replaceVariable = (match, inner) => {
  return data[inner] || "";
}

const replaced = response.replace(/\$\{(\w+)\}/gi, replaceVariable);

console.log(replaced);

【讨论】：

我不能把整个字符串改成插值字符串吗？或者正则表达式是这里唯一的选择
@HarishSharma 有多种方法，正则表达式只是其中一种。您可以向字符串原型 (See this post) 添加一个方法。另一种选择是使用eval()，但非常不鼓励使用它，所以请不要使用它（MDN eval）。
是的，我为此避免了eval，我正在寻找time complexity 的目的，因为字符串可能很大。我现在接受regex。感谢您的回答

【解决方案3】：

恐怕你可以使用regex 来解决这个问题。使用regex获取变量名，使用var关键字声明变量。

var 关键字将值放入window 对象中，以便您可以从window 获取它们。

您可以按照此代码进行操作-

var name = "John"; 
var email = "hello@example.com";

const response = "Save Earth, ${name} ${email}";

const parse = str => str.replace(/\${(.+?)\}/gm, (match, varName) => window[varName]);

console.log(parse(response));

【讨论】：