Как использовать шаблонный литерал в es6 для строковой переменной - PullRequest
Новая
       30

Как использовать шаблонный литерал в es6 для строковой переменной

0 голосов
/ 10 октября 2019

Я пытаюсь использовать шаблонный литерал для значения, поступающего из базы данных, эти значения сохраняются, как показано ниже 

{
"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 способов заменить эти контейнеры моими значениями.

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

Литерал шаблона - это ... литерал . Он анализируется в тот момент, когда 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"}));
0 голосов
/ 10 октября 2019

Ниже приведен пример использования литералов шаблона. Измените его в соответствии с тем, что вам нужно. Подробнее о литералах шаблонов 

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 не рекомендуется посещение дляподробнее почему?

Надеюсь, это поможет:)

...