ES6模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
</head>
<body>
<div>
表明:<li></li>
内容:<li></li>
姓名:<li></li>
</div>
<script>
let list = {
title:'我是一个列表名',
content:'我是内容',
name:'哈哈哈哈'
}
// es5字符串和变量进行拼接
let ele = "<div>表明:<li>"+list.title+"</li>内容:<li>"+list.content+"</li>姓名:<li>"+list.name+"</li></div>"
// es6的模板语法 ``
let newEle = `
<div>
表明:<li>${list.title}</li>
内容:<li>${list.content}</li>
姓名:<li>${list.name}</li>
</div>
`
/*
``:作为空分隔符,里面放字符串
${}:用来渲染变量
模板字符串:
字符串中的空格和缩进都会被保留,使代码结果清晰明了;
${}中不仅可以放入变量,也可以放入表达式(运算等等)
如果需要使用 `,只需要在前加上反斜杠\即可
*/
</script>
</body>
</html>