ES6-反引号

模板字符串
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

基本用法
普通字符串

let string = `Hello'\n'world`;
console.log(string); 
// "Hello'
// 'world"
多行字符串:

let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?

字符串插入变量和表达式。

变量名写在 $中，${} 中可以放入 JavaScript 表达式。

let name = "Mike";
let age = 27;
let info = `My Name is ${
      
      name},I am ${
      
      age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

字符串中调用函数：

function f(){
    
    
  return "have fun!";
}
let string2= `Game start,${
      
      f()}`;
console.log(string2);  // Game start,have fun!

注意要点

模板字符串中的换行和空格都是会被保留的

innerHtml = `<ul>
  <li>menu</li>
  <li>mine</li>
</ul>
`;
console.log(innerHtml);
// 输出
<ul>
 <li>menu</li>
 <li>mine</li>
</ul>

标签模板
标签模板，是一个函数的调用，其中调用的参数是模板字符串。
当模板字符串中带有变量，会将模板字符串参数处理成多个参数。

alert`Hello world!`;
// 等价于
alert('Hello world!');


function f(stringArr,...values){
    
    
 let result = "";
 for(let i=0;i<stringArr.length;i++){
    
    
  result += stringArr[i];
  if(values[i]){
    
    
   result += values[i];
        }
    }
 return result;
}
let name = 'Mike';
let age = 27;
f`My Name is ${
      
      name},I am ${
      
      age+1} years old next year.`;
// "My Name is Mike,I am 28 years old next year."
 
f`My Name is ${
      
      name},I am ${
      
      age+1} years old next year.`;
// 等价于
f(['My Name is',',I am ',' years old next year.'],'Mike',28);