Question

我正在尝试对来自数据库的值使用模板文字，该值如下保存

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

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

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

方法1：

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

上面，我仅出于理解目的对印度进行了硬编码，并且该价值也将来自数据库。

我期望使用es6方法用我的值替换这些容器。

Answer 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);

<div id="template"></div>

但是对您来说，这可能不起作用，因为它作为字符串存储在数据库中，因此对于您的情况，可以使用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);

<div id="template"></div>

或者您甚至可以使用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);

<div id="template"></div>

推荐

：

您遇到的最佳解决方案是采用第二种选择，即replace方法。

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

为什么不推荐

eval visit for more？

希望这会有所帮助：）

Answer 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"}));

如何在ES6中对字符串变量使用模板文字

2 个答案: