ES6中模板字符串

ES5中模板字符串拼接

• 如果有换行就需要通过 + 号拼接，非常不利于书写。

 let template='<h1>hellow world</h1>'+
                '<p>这是es5语法</p>'

document.getElementById("app").innerHTML = template;

ES6中模板字符串

• 首尾使用 ` ` 符号，中间内容可随意换行，书写方便。

let template=`<h1>hellow world</h1>
                <p>这是es6语法</p>
                <ul>
                    <li>1</li>
                </ul>
            `

   document.getElementById("app").innerHTML = template;

• 传递变量：${}

    let name='LonJin';

    let template=`<h1>hellow ${name}</h1>
                <p>这是es6语法</p>
                <ul>
                    <li>1</li>
                </ul>
            `

   document.getElementById("app").innerHTML = template;

• 执行方法：${}

    function makeUppercase(word){
        return word.toUpperCase()
    }

    let name='LonJin';
    let template=`<h1>${makeUppercase("hello")} ${name}</h1>
                <p>这是es6语法</p>
                <ul>
                    <li>1</li>
                </ul>
            `

   document.getElementById("app").innerHTML = template;