如何在 es6 中对字符串变量使用模板文字答案

【问题标题】：How to use template literal in es6 on a string variable如何在 es6 中对字符串变量使用模板文字
【发布时间】：2020-02-07 12:53:47
【问题描述】：

我试图对来自数据库的值使用模板文字，该值如下所示保存

{
"classical" : "cs",
"state" : "myState",
"template" : "this is ${countryName} <b>Thanks for ${departmentName}</>"
}

这就是它在我的数据库中的保存方式。现在，在我的业务逻辑中，我读取了此记录并获取模板值并将其保存到变量中。我想替换 {countryName} 并使用来自数据的一些值。

我曾尝试使用电子邮件模板模块的渲染功能，但它不起作用。以下是我尝试过的一些代码。

方法一：

 function render(template, dataNext) {
             return template(dataNext);
     }
    const tpl = () => `${myDBObject[0].template}`;
    console.log(render(tpl, { countryName: "India", departmentName: "science"}));

上面我对印度进行了硬编码只是为了理解目的，该值也将来自数据库。

我期待一些 es6 方法用我的值替换这些容器。

【问题讨论】：

您知道模板中变量的名称是什么（在您的示例中为countryName 和departmentName）吗？如果是这样，一个简单的.replace 就可以完成这项工作
Convert a string to a template string的可能重复
countryName 和 departmentName 来自哪里？？

标签： javascript string ecmascript-6 replace template-literals

【解决方案1】：

以下是如何使用模板文字的示例。根据您的需要对其进行修改。 Read more on template literals

const countryName = 'United Kingdom';
const departmentName = 'IT';
const obj = {
  "classical": "cs",
  "state": "myState",
  "template": `This is <b> ${countryName}</b> <br/> Thanks for ${departmentName}`
}

document.getElementById('template').innerHTML = obj.template;
console.log(obj.template);

&lt;div id="template"&gt;&lt;/div&gt;

但对你来说，这可能不起作用，因为它作为字符串存储在你的数据库中，所以对于您的情况，您可以使用 replace 方法替换值。如下所示。

const countryName = 'United Kingdom';
const departmentName = 'IT';
const obj = {
  "classical": "cs",
  "state": "myState",
  "template": "This is <b> ${countryName}</b> <br/> Thanks for ${departmentName}"
}

obj.template = obj.template.replace('${countryName}', countryName);
obj.template = obj.template.replace('${departmentName}', departmentName);
document.getElementById('template').innerHTML = obj.template;
console.log(obj.template);

&lt;div id="template"&gt;&lt;/div&gt;

或者您甚至可以使用eval（虽然不推荐）将其转换为模板文字。

const countryName = 'United Kingdom';
const departmentName = 'IT';
const obj = {
  "classical": "cs",
  "state": "myState",
  "template": "This is <b> ${countryName}</b> <br/> Thanks for ${departmentName}"
}

obj.template = eval('`' + obj.template + '`');
document.getElementById('template').innerHTML = obj.template;
console.log(obj.template);

&lt;div id="template"&gt;&lt;/div&gt;

推荐：

在您的情况下，最好的解决方案是选择第二个选项，即replace 方法。

您可以对保存在数据库中的字符串进行更改，以使用 :cName 和 :depName 等占位符，然后相应地替换它们。

为什么不推荐evalvisit for more？

希望这会有所帮助:)

【讨论】：

我认为您误解了第一个“对象”的来源
@Bravo 来自对象来自的任何地方。这就是对象字面量的工作方式。只要有可用的变量，就没有关系。而且我确实提到这只是示例而不是确切的解决方案，因为我需要一个工作演示来显示所需的精确性。另外，如果你能解释一下否决票？
真的，所以如果你从一个数据库中读取那个对象，比如说一个存储"template": "This is ...."的数据库......你认为使用`创建一个obj会模拟实际的对象OP 正在合作？不，他说根据他的问题，该对象作为字符串存储在数据库中
我想你还是没有得到我的答案。我解释了对象文字是如何工作的，而不是确切的解决方案。如果它存储在数据库中，那么replace 将是可行的方法。是的，我的回答不是解决 OP 问题的方法。但这有助于他理解模板文字是如何工作的，而这在他的情况下肯定行不通
我得到你的答案 - 它依赖于 obj.template 作为模板文字 .... 从数据库中检索，它不会 - 我认为 OP 完全了解模板文字的工作原理

【解决方案2】：

模板文字是... 文字。它在 JavaScript 在解析代码时遇到它时被解析，并且此时必须定义引用的变量。一旦你存储一个真正的模板文字，它就已经被解析了。因此，您不能将模板文字当作模板变量来处理。 JavaScript 中不存在该概念，因此您存储在数据库中的内容与模板文字无关。它是一个普通的字符串，带有美元和大括号。

如果您仍想继续将这样的字符串存储在数据库中，则必须在知道需要合并到其中的变量时自己解析字符串。

let myDBObject = [{
  "classical" : "cs",
  "state" : "myState",
  "template" : "this is ${countryName} <b>Thanks for ${departmentName}</b>"
}];

function render(template, data) {
    return template.replace(/\$\{(\w+)\}/g, (_, name) => data[name] || "?");
}

console.log(render(myDBObject[0].template, { countryName: "India", departmentName: "science"}));

【讨论】：