4. template 常量

1.新建index.html ，将dist/main.js引入到html页面

2.写一行div，<div id="template"></template>

3.mian.js 内代码

let template = '<h1>Template</h1><p>this is template</p>';

document.getElementById('template').innerHTML = template;

浏览器刷新，代码生效

4.多行写法

a.

let template = 
'<h1>Template</h1>' +
'<p>this is template</p>';

document.getElementById('template').innerHTML = template;

b.

let template = 
`<h1>Template</h1>
<p>this is template</p>`;

document.getElementById('template').innerHTML = template;

5.嵌套变量

let name = 'Tim';

let template = 
`<h1>Template ${name}</h1>
<p>this is template</p>`;

document.getElementById('template').innerHTML = template;

6.函数嵌套

let name = 'Tim';

function makeUpperCase(word) {
  return word.toUpperCase();
}

let template =
`<h1>${makeUpperCase('Template')} ${name}</h1>
<p>this is template</p>`;

document.getElementById('template').innerHTML = template;