js es6 模板字符串和使用

模板字符串描述：
模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。

//以前的字符串写法
var name='大毛',color='黄色';
var str=name+'是一只'+color+'的猫';
console.log(str)  //大毛是一只黄色的猫
​
//模板字符串的写法
var template=`${name}是一只${color}的猫`;
console.log(template);//大毛是一只黄色的猫
//页面输出的时候
var templateStr=`<div>
        <p>${name}是一只${color}的猫</p>
    </div>`;
console.log(templateStr);    
// <div>
//       <p>大毛是一只黄色的猫</p>
//    </div>
//使得代码的结构可读性更强

插入表达式和嵌套模板

<script>
    var cat={
        name:'大毛',
        color:'黄色',
        todos:[
            {name:'睡觉',completed:false},
            {name:'吃饭',completed:false},
            {name:'晒太阳',completed:true}
        ]
    };
    //循环调用的写一个函数提取出来大毛每天要做的事
    var tempStr=function (todos) {
       return  `<ul>
          ${todos.map((todo) => `<li>
          ${todo.name} 
          //这里嵌套一个三元表达式来说明要做的事是否完成
          ${todo.name?'√':'×'}</li>`).join('')}
      </ul>`
    };
    
    var template=`
      <div>
      <p>${cat.name}是一只${cat.color}的猫。</p>
      <p>每天要做的事情</p>
        ${tempStr(cat.todos)}
      </div>`;
    document.body.innerHTML=template
</script>

标签的模板字符串

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后，你的函数可以返回处理好的的字符串（或者它可以返回完全不同的东西 , 如下个例子所述）。用于该标签的函数的名称可以被命名为任何名字。

var person = 'Mike';
var age = 28;
function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }
  return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ person } is a ${ age }`;
console.log(output);
// that Mike is a youngster