JS模板字面量，及插值表达式，实例在线编辑

JS模板字面量是什么

JS的模板字面量，是一种新增的定义字符串的方法，不仅可以定义JS的多行字符串，也可以直接在字符串中使用英文的单引号''和双引号""，不必进行相关的转义。除此之外，通过JS模板字面量定义的字符串还可以通过插值${...}的方式插入JS变量的值或表达式。令人想起python的web框架Django的视图模板和go的模板，二者是连接浏览器端和服务器端的关键所在。

---

JS模板字面量定义字符串的方法

var str = ` `；

提示：使用的反引号，mac键盘是在字母z的左侧，使用时记得切换为英文，windows的键盘是在1的左侧，同样需要切换为英文。

---

JS模板字面量定义字符串实例代码，及在线编辑器

<p id='e1'></p>
<button class='btn btn-default' onclick='setValue()'>点击显示文本</button>
<script>
  var str = `笨鸟工具，x1y1z1.com，
  "该网站"是一个可以学习python全栈，包括web前端知识的网站！`
  function setValue(){
    document.getElementById('e1').innerHTML = str
  }
</script>

试一试

模板字面量的插值用法

插值，顾名思义，就是利用插值的语法，将JS的变量或表达式插入字符串中。其插值的语法如下：

${...}

插值的简单用法实例

<script>
  var web = "笨鸟工具"
  var url = "x1y1z1.com"
  var describe = "这是一个致力于分享python全栈技术的网站"
  var str = `网站名称为：${web};网站的地址为：${url}；${describe}`
  alert(str)
</script>

试一试

插值为表达式的用法

<script>
  var a = 1
  var b = 2
  var c = 3
  var sum = `a+b+c=${a+b+c}`
  alert(sum)
</script>

试一试

模板字面量动态添加HTML的DOM元素

JS在web前端中的作用之一就是让web的页面更具动态性和交互性，因此，JS也常常用来动态地添加HTML文档的元素节点，这通常就需要用到JS的多行字符串来编写HTML的代码，有了模板字面量之后，就可以变得非常简单，可以通过下面的实例进行对比：

<div id='e2'></div>
<div id='e3'></div>
<button class='btn btn-default' onclick='setElement()'>点击显示文本</button>
<script>
  
  function setElement(){
    var html1 = '<p>用加号的定义多行字符串存HTML代码！</p>'+
        '<p>这是第二行！</p>'
    var html2 = `<hr><p>使用模板字面量的多行字符串</p>
    <p>这样就可以像使用IDE编辑HTML代码一样，随性所欲地换行！，非常方便！</p>
    <p>看，这就是鄙人随意写的！</p>`
    document.getElementById('e2').innerHTML = html1
    document.getElementById('e3').innerHTML = html2
  }
</script>

试一试