ES6模板字符串

传统的在一个DOM里面插入内容,通过字符串和变量的一个拼接，这种写法非常的繁琐，如果需要插入的内容过多，就非常容易绕迷，所以在ES6新增对字符串的扩展模板字符串，通过模板字符串插入内容。

• 传统插入内容

 let app=document.getElementById("app")
    let obj={
        name:'today'
    }
app.inneHTML="<p>"+obj.name+"</p>"

• ES6模板字符串插入内容

let app=document.getElementById("app")
    let obj={
        name:'today'
    }
    app.innerHTML=`<p>${obj.name}</p>`

• ES6模板字符串是以两个反引号(` `)作为标识,插入变量通过 ${变量名}，来插入。{}可以使用普通的字符串。
• 在模板字符串中需要使用反引号，则前面要用反斜杠转义。
• 大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let app=document.getElementById("app")
    let obj={
        name:'today'
    }
    app.innerHTML=`<p>${obj.name=="yestoday"?1:2}</p>`//2

• 模板字符串之中还能调用函数，如果需要显示函数运行的结果，则需要return出一个值。

 let app=document.getElementById("app")
    function get(){
        console.log(123)
        return 123
    }
    app.innerHTML=`<p>${get()}</p>`

• 如果大括号中的值不是字符串，将按照一般的规则转为字符串。如果模板字符串中的变量没有声明，将报错。
• 模板字符串可以嵌套。

let app=document.getElementById("app")
count=1
app.innerHTML=`<p>数字${`<h3>${count}</h3>`}</p>`//数字1