【精讲】Javascript模板字面量

模板字面量是什么？

模板字面量，是允许嵌入表达式的字符串字面量。

他的语法结构是：`string ${expression} string`

1. 用反引号包括住整个模板字面量。

2. 表达式要用${}包括。

3. 要在模板字面量内使用反引号，需要用斜杠转义输出。

4. 支持输出多行模板字面量

5. 支持表达式

---

    var name = '李华';
    var age = 19;
    alert(`${
     name} 已经 ${
     age} 岁了 `);

    alert(`这里要输出一个反引号\``);

---

    alert(`这里要输出一个反引号：\``);

---

    alert(`
        hello!
        goodbye!
        nice to meet u!
    `);

输出多行模板字面量时，换行处不需要手动输入\n转义符进行换行，编译器会自动识别字面量中的换行。

这有什么用呢？

当然你需要输入一大段json或者写一段html代码的时候，用多行模板字面量会非常的方便。

    /*输出一段html*/
    //注意：模板字符串内的正常单引号、双引号不需要转义
    const html=`
   <a href="">
        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt=""><span>京东超市</span>
   </a>
    `
    document.body.innerHTML=html;