模板文字不是插值变量答案

【问题标题】：Template literals are not interpolating variables模板文字不是插值变量
【发布时间】：2019-01-10 05:27:37
【问题描述】：

今天才注意到带有html标签的模板文字不起作用，或者我写错了？

我试图在模板文字中包含 p 标签（我在 sn-p 中注释掉了），但它不起作用。有没有人有任何想法？谢谢！

var blueBtn = document.getElementById('btn');
var aniBox = document.getElementById('animal-info');

blueBtn.addEventListener('click', function() {
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
    ourRequest.onload = function() {
        var ourData = JSON.parse(ourRequest.responseText);
        addHTML(ourData)
    };
    ourRequest.send();
});

function addHTML(data) {
    var content = '';
    for (let i of data) {
        console.log(i);
        content += '<p>' + i.name + ' is a ' + i.species + '.</p>';
 //content += '`<p>${i.name} is a ${i.species}.</p>`'; <--this one doesn't work
    }
    aniBox.insertAdjacentHTML('beforeend', content);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON and AJAX</title>
</head>
<body>
    <header>
        <h1>JSON and AJAX</h1>
        <button id="btn">Fetch Info for 3 New Animals</button>
    </header>

    <div id="animal-info"></div>

    <script src="js/main.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript ecmascript-6 template-literals

【解决方案1】：

模板需要用反引号括起来。您无需再次将模板括在引号中。

你需要改变这个：

'`<p>${i.name} is a ${i.species}.</p>`'

到这里：

`<p>${i.name} is a ${i.species}.</p>`

前者只是一个纯 JavaScript 字符串，而后者是模板文字语法，它允许插入 ${ ... } 中的部分。

请参阅以下工作示例：

var blueBtn = document.getElementById('btn');
var aniBox = document.getElementById('animal-info');

blueBtn.addEventListener('click', function() {
  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
  ourRequest.onload = function() {
    var ourData = JSON.parse(ourRequest.responseText);
    addHTML(ourData)
  };
  ourRequest.send();
});

function addHTML(data) {
  var content = '';
  for (let i of data) {
    console.log(i);
    // content += '<p>' + i.name + ' is a ' + i.species + '.</p>';
    content += `<p>${i.name} is a ${i.species}.</p>`;
  }
  aniBox.insertAdjacentHTML('beforeend', content);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JSON and AJAX</title>
</head>

<body>
  <header>
    <h1>JSON and AJAX</h1>
    <button id="btn">Fetch Info for 3 New Animals</button>
  </header>

  <div id="animal-info"></div>

  <script src="js/main.js"></script>
</body>

</html>

在文档中阅读有关template literals 的更多信息。

【讨论】：