如何让其转义字符失效

  1. var text = String.raw`abc\t\nbcd`;
  3. console.log(text); // 输出结果为 abc\t\nbcd

模板字符串标记

使用方法 标记名 + 模板字符串内容
标记名会被当做函数调用，所以需要函数配合，并将其参数传递进去
参数如下
1. 参数1：被插值分割的字符串数组 /会将模板字符串中的字符串分割为数组
2. 后续参数：所有的插值 / 插值就是${插值}里面的值

利用标记改进模板字符串的缺点，如果传入的代码，会执行此代码 代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <p>
  11.         <textarea id="txt"></textarea>
  12.         <button id="btn">设置div的内容</button>
  13.     </p>
  14.     <div id="container"></div>
  15.     <script src="./index.js"></script>
  16. </body>
  17. </html>
  1. const container = document.getElementById("container");
  2. const txt = document.getElementById("txt");
  3. const btn = document.getElementById("btn");
  5. btn.onclick = function(){
  6.     container.innerHTML = safe`<p>
  7.         ${txt.value}
  8.     </p>
  9.     <h1>
  10.         ${txt.value}
  11.     </h1>
  12.     `;
  13. }
  15. function safe(parts){
  16.     // const values = Array.prototype.slice.apply(arguments).slice(1);
  17.     const values = Array.from(arguments).slice(1);
  18.     let str = "";
  19.     for (let i = 0; i < values.length; i++) {
  20.         const v = values[i].replace(/</g, "&lt;").replace(/>/g, "&gt;");
  21.         str += parts[i] + v;
  22.         if (i === values.length - 1) {
  23.             str += parts[i + 1];
  24.         }
  25.     }
  26.     return str;
  27. }

结果示意图
image.png