技術標籤：字串jsjavascript

模板字面量是增強版的字串，它用反引號（`）標識

我們可以通過程式碼來看看，模板字面量和我們用普通的引號有什麼區別

  let message = 'yangyu'
        let msg = `yangyu`
        console.log(message)
        console.log(message.length)
        console.log(msg)
        console.log(msg.length)

當我們需要換行時：
普通的字串：

   let message = 'yang\nyu'
 

而當我們用模板字面量時，就可以按照自己的心意隨意換行,需要注意：在反引號之內的所有空白符都是字串的一部分，因此需要特別留意縮排

  let msg = `yang
                              yu`

變數佔位符

模板字面量看上去僅僅是普通JS字串的升級版，但二者之間真正的區別在於模板字面量的變數佔位符。變數佔位符允許將任何有效的JS表示式嵌入到模板字面量中，並將其結果輸出為字串的一部分變數佔位符由起始的 ${ 與結束的 } 來界定，之間允許放入任意的 JS 表示式。最簡單的變數佔位符允許將本地變數直接嵌入到結果字串中，有點類似Vue當中的Mustache語法

let age = 18;
      let information = `My age is ${變數}`
      console.log(information)

效果：

既然佔位符是JS表示式，那麼可替換的就不僅僅是簡單的變數名。可以輕易嵌入運算子、函式呼叫等

我們可以通過幾個例子來了解一下

      let count = 5;
      let a = 2;

      let information = `My num is ${a*count}`
      console.log(information)

 function count(){
         let num = 0;
         for(let a = 1;a<10;a++){
            num = num+a;
         }
         console.log(num)
     }
     let fin = `${count()}`
 

標籤模板

標籤模板其實不是模板，而是函式呼叫的一種特殊形式。“標籤”指的是函式，緊跟在後面的模板字串就是它的引數。

 let num = 10;
     let price = 2;
     let message = tag`I bought ${num} apples yesterday and cost me ${num*price} yuan`
     console.log(message)

tag函式有三個引數第一個是['I bought','apples yesterday and cost me','yuan'] ，第二個是'10',第三個是'20'

標籤模板的一個重要應用，就是過濾HTML字串，防止使用者輸入惡意內容

  var message =SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);

    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // Don't escape special characters in the template.
    s += templateData[i];
  }
    return s;
}

var sender = '<script>alert("abc")</script>'; // 惡意程式碼
var message = SaferHTML`<p>${sender} has sent you a message.</p>`;