第十一小节：ES6标签模板

        首先，什么是标签模板字符串呢？

就是在你的模板字符串里面写一个标签，比如说highlight，然后给它制定一些规则，让它返回你想要的字符串，那么这个标签呢对应的是js里的一个函数名。

 <style>
        .highlight{
            padding:2px 5px;
            background: #00abd5 ;
            color: #ffffff;
        }
    </style>

 <script>
 function highlight(strings,...values){     // 变量过多可以使用ES6里面的剩余参数方法 ...values
     
       const highlighted = values.map(value => `<span class="highlight">${value}</span>`);

       return strings.reduce((prev,curr,i) =>`${prev}${curr}${highlighted[i] || ''}`,'')
     //     let str ='';
     //     strings.forEach((string, i) => str +=`${string}${highlighted[i] || ``}`);
     //     这是为了去掉空字符串，将undefined结果隐藏起来
     //     return str;
   
       return strings.reduce(fn,'')

 

    }
    const user = 'Mary';
    const topic = 'Learn to user markdown';
    const sentence = highlight`${user} has commented on your topic ${topic}`;

    document.body.innerHTML = sentence;
</script>

比如我们先定义一 highlight函数，然后返回 laravist ,刷新浏览器，打印一下 sentence 返回得到 laravist 。
也就是说当你使用标签模板字符串的时候，最后这个字符串返回的内容其实是由你这个标签也就是这个函数决定的。那么我们这个函数它会接受模板字符串作为它的参数。

values其实是一个数组，里面的元素就是后面这些剩余的参数组成的，比如我们的user和topic。值得注意的是模板中用变量开头或结尾的话就会多一个空字符串，注意打印出来的结果有一个undefined。标签模板字符串可以帮助我们处理模板字符串,返回我们想要的字符串。
以上代码可以实现语句高亮。