ES6字符串模板拼接
2018-08-07 本文已影响0人
Locdee_落地
1、字符串需要用一对反引号( ` )包裹起来 ,它可以定义多行字符串，只用一对反引号
2、要拼进去的数据需要放在${}里面
3、大括号里面可以进行运算
4、大括号里面可以调用函数
<body>
<!-- 字符串模板的使用 -->
<article id="article">
<h1></h1>
<p></p>
</article>
</body>
<script type="text/javascript">
'use strict'//严格模式
let obj = {
title:"字符串模板拼接",
content:"这里告诉你如何进行字符串模板拼接"
}
let articleElement = document.getElementById('article');
// 以前添加内容的方式，innerHTML字符串拼接
articleElement.innerHTML = "<h1>"+obj.title+"</h1><p>"+obj.content+"</p>";
// 使用ES6字符串模板拼接，可以换行
/articleElement.innerHTML = `<h1>${obj.title}</h1>
<p>${obj.content}</p>`
function fn(){
return "带函数的"
}
articleElement.innerHTML = `<h1>${fn()+obj.title}</h1>
<p>${obj.content}</p>`
