ES6系列 (三）模板字面量

特性

• 模板字面量实现字符串插值
• 模板字面量实现多行字符串
• 模板字面量实现可重用的模板
• 理解标记模板字面量如何自定义处理添加到模板字面量中

有过开发经验的人一定烦恼过，js一直缺乏对多行字符串的支持，必须将每一行代码分解成单独的字符串并将它们粘合在一起，这是一个冗长乏味的过程,ES6模板字面量的出现，让我们可以有效的解决这个问题

//此函数接受一个产品对象，然后返回相应的html来展示产品，字符串拼接难以阅读
    function getProductHtml(product){
        let html='';
        html+='<div class="product">';
        html+='<div class="product-image">';
        // more...
        html+='</div>'
        html+='</div>'
    }

什么是模板字面量

模板字面量是创建新字符串的新字面量语法，与字符串字面量一样，它采用了反引号来分界，支持新的特性和功能，模板字面量也可以作为字符串进行计算

let strA = 'hello';
let strB = 'hello';
console.log(strA===strB) //true

模板字面量支持三种新特性

• 插值

  字符串插值是将动态值放入创建的字符串中的概念
  js let strName=`your name is ${name}`

• 多行

  多行字符串，这是是字面量跨越多行的概念，而不是创建多行字符串的概念
  js let strName=`your name is Eastboat `

• 标记

  标记模板字面量是使用函数标记的模板字面量,我们为函数分别提供所有原始字符串部分和所插入的值，因此函数可以进行自定义字符串预处理。

1. 模板字面量的字符串插值

   将值插入模板字面量的语法是使用大括号{}将待插入的值包括起来，并且在第一个大括号前加一个美元符号$作为前缀

       function fa(icon){
           return `fa-${icon} fa`;
       }
   
       fa('check-square'); // "fa-check-square fa"
   
       //通过转义字符转义插值
       let code='string'
       let strA=`this is ${code}`; // 'this is string'
       let strB=`this is \${code}` // 'this is ${code}'
       
       // 插入的值如果不是字符串会被转换为字符串
       
       let obj={name:'cc'};
       let str=`name:${obj}`  // "name:[object Object]"
   

2. 模板字面量的多行字符串

   一定要记住，多行字符串保留了所有的空格字符串,所以在渲染网页时，可能对布局略有影响
   js //使用模板字面量编写开头案例 function getProductHtml(product){ return ` <div class="product"> <div class="product-image"> <img src="${product.image_url}" alt="${product.name}"> </div> </div> ` }

模板字面量是不可重用的模板

let strA='hello';
let res=`${strA},world`
strA='new hello'
console.log(res)// hello,world

使用标记模板字面量进行自定义处理

标记模板字面量是在模板字面量前添加函数的函数名进行标记的模板字面量

//使用myTag对字符串进行标记，myTag函数会被调用，以模板作为参数
myTag`my string`

目前js只有一个内置标记函数String.raw 这个函数处理模板而无需解释特定的字符

const strA=String.raw`this\strA` //this\strA