模板字面量（模板字符串）

模板字面量是创建字符串的新字面量语法，使用反引号（`）来分界。有三种特性： 插值，多行和标记。

插值

使用占位符${expression} 将动态值放入创建的字符串中。

  

   

    

     

    
    

     

      let name = "strick",
     
    
   

    

     

    
    

     

      age = 29,str;
     
    
   

    

     

    
    

     

      str = `name is "${name}".age is ${age}.`;
     
    
   

    

     

    
    

     

      console.log(str)
     
    
   

    

     

    
    

     

      //name is "strick".age is 29.
     
    
  
 

多行字符串

原生支持创建多行字符串，不需要再用加号，反斜线和换行符。能识别空白符。

  

   

    

     

    
    

     

      let multi = `first line
     
    
   

    

     

    
    

     

      second line
     
    
   

    

     

    
    

     

      third line`;
     
    
   

    

     

    
    

     

      console.log(multi)
     
    
   

    

     

    
    

     

      //输出
     
    
   

    

     

    
    

     

      first line
     
    
   

    

     

    
    

     

      second line
     
    
   

    

     

    
    

     

      third line
     
    
  
 

标记

一种特殊方式的函数调用，函数名后面直接跟模板字面量 ， 它一 般会包含两个参数，第一个是由没有被替换的部分组成的数组，第二个是剩余参数，包含了所有占位符中的计算结果。

  

   

    

     

    
    

     

      //示例: 
     
    
   

    

     

    
    

     

      function foo(strings,...values){
     
    
   

    

     

    
    

     
    console.log(strings)
     
    
   

    

     

    
    

     
    console.log(values)
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      const desc = 'awesome'
     
    
   

    

     

    
    

     

      foo`Everything is ${desc}!]`
     
    
   

    

     

    
    

     

      //["Everything is ","!"]
     
    
   

    

     

    
    

     

      //[“awesome”]
     
    
  
 

  

   

    

     

    
    

     

      //应用
     
    
   

    

     

    
    

     

      //过滤HTML字符串，防止用户输入恶意内容
     
    
   

    

     

    
    

     

      function filter(strings,...values){
     
    
   

    

     

    
    

     
    return strings.reduce((s,v,idx)=>{
     
    
   

    

     

    
    

     
        if(idx>0){
     
    
   

    

     

    
    

     
            const prev = values[idx-1]
     
    
   

    

     

    
    

     

                  .replace(/</g,"&lt;")
     
    
   

    

     

    
    

     

                  .replace(/>/g,"&gt;")
     
    
   

    

     

    
    

     

                  s+=prev
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     
        return s+v
     
    
   

    

     

    
    

     

          })
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      const badCode = `<script>alert("abc")</script>`
     
    
   

    

     

    
    

     

      const message = filter`<p>${badCode}
     
    
   

    

     

    
    

     

      has been transformed safely~`
     
    
   

    

     

    
    

     

      console.log(message)
     
    
  
 

输出 ：

文章来源: root181.blog.csdn.net，作者：前端纸飞机，版权归原作者所有，如需转载，请联系作者。

原文链接：root181.blog.csdn.net/article/details/119859699