无法在 html 中嵌套 backlint（`）答案

【问题标题】：Unable to nest backlint( ` ) in html无法在 html 中嵌套 backlint（`）
【发布时间】：2021-12-11 01:35:40
【问题描述】：

实际上我正在使用 nodemailer 在 node js 中发送 html 模板代码，但我面临的问题是我无法在其中嵌套 backlint：-

我的代码：-

    let mailDetails={
        from: 'def@gmail.com',
        to: 'abc@gmail.com',
        subject: 'Order Confirmation Mail',
        html: `<html>  //outer backlint start from here
    <body>
    <p id="s"></p>
    <script>
    const dataElement = document.querySelector('s');
    
    const data = [
      {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
      {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
    ];
data.map(item => {
  dataElement.insertAdjacentHTML('beforebegin', `<p>${item.name}</p>`)});//inner backlints
    </script>
    </body>
    </body>
    </html>
    `, //outer backlint end
    };

Ps:- 忽略 javascript 插入的内容，因为它们是虚拟数据。只是想展示我想要的嵌套类型。如果我使用 `，那么 item.name 会变得未定义，甚至在使用 ${} 时也会发生。

【问题讨论】：

看看这个：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
你需要转义字符。
@folkol 使用 ${} 显示 item.name 为未定义
也转义括号。我建议不要做你正在做的事情，而是将电子邮件的 HTML 作为变量生成，然后将该变量用作 html 属性的值。
WTF 是一个反引号 - 你的意思是反引号

标签： javascript html node.js nodemailer template-literals

【解决方案1】：

您需要使用\ 转义反引号。结果是这样的：

    <html>  //outer backlint start from here
        <body>
        <p id="s"></p>
        <script>
        const dataElement = document.querySelector('s');
        
        const data = [
          {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
          {url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
        ];
    data.map(item => {
      dataElement.insertAdjacentHTML('beforebegin', \`<p>${item.name}</p>\`)});//inner backlints
        </script>
        </body>
        </body>
    </html>

另外，您应该删除第二个</body>

【讨论】：

【解决方案2】：

使用 ejs https://www.npmjs.com/package/ejs 将使这样的模板非常快。我正在使用 ejs 进行操作。

example.js


let mailDetails = {
  from: 'def@gmail.com',
  to: 'abc@gmail.com',
  subject: 'Order Confirmation Mail',
  html: ejs.render("<path_to_ejs_template/template.ejs>"), //<-- replace this line with correct path to template.ejs
};

模板.ejs

<html>
  <body>
    <p id="s"></p>
    <script>
      const dataElement = document.querySelector("s");

      const data = [
        {
          url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60",
          name: "Nathan",
          price: "Rs. 250",
          description: "IRAN",
        },
        {
          url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60",
          name: "Nathan",
          price: "Rs. 250",
          description: "IRAN",
        },
      ];
      data.map((item) => {
        dataElement.insertAdjacentHTML("beforebegin", `<p>${item.name}</p>`);
      });
    </script>
  </body>
</html>

【讨论】：