第九小节：ES6字符串模板

在过去呢，我们要组合变量和字符串的时候，需要不停地写变量、字符串、变量、字符串......这种方法呢，是十分繁琐又容易出错的，当我们不小心漏掉了一个单引号的时候，就会报错，于是又要从头到尾来找错误。下面的代码就是一般方法：

<script>
    const person = 'Lucy';
    const age = 5;
    const sentence = person + ' is ' + age + ' years old.';
</script>

那么有了ES6模板字符串之后呢，妈妈再也不用担心你会为了这个而发脾气了，哈哈哈哈......在过去呢，我们用的是单引号来定义我们的字符串，现在呢我们只要用一对反引号来定义字符串了，并且当你要组合变量和字符串的时候，不用 + 和 ' ' ，当你需要某个变量的时候，你只要用上${}来包裹你的变量就可以了。在{}中，你可以是一个变量，也可以是一个属性，甚至是一个函数。

<script>
    const person = 'Lucy';
    const age = 5;
    const sentence =` ${person} is ${age*5} years old.`;

</script>

本小节学的是字符串模板，当然和模板定义有关啦~
往常我们定义一个模板的时候会如下写代码：

<script>
    const template = '<div class="greet"><p>Hello</p></div>';
</script>

但是呢我们很难看出层级关系，尽管我们可以使用数组或者加上 \ 来模拟HTML结构，有了ES6 template模板之后，我们再也不用担心模拟HTML的层级关系啦：

<script>
   const template = `
    <div class="greet">
    <p>Hello</p>
    </div>
    `.trim();
console.log(template)
</script>

值得注意的是在ES6模板中会保留空格，所以可以使用字符串.trim()方法来删除空格。