master

分支 (3)

管理

管理

master

test

testing

ES6
/
04_模板字符串.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_模板字符串</title>
</head>
<body>

<!--
1. 模板字符串 : 简化字符串的拼接
  * 模板字符串必须用 `` 包含
  * 变化的部分使用${xxx}定义
-->
<script type="text/javascript">
	const Jelly={
		name:"留言板",
		todos:[
			{name:"go to store",completed:false},
			{name:"watch movie",completed:true},
			{name:"running",completed:true},
		],
		data:new Date()
	}

	function render(todos){
		console.log(todos)
		return (
			`<ul>
					${Jelly.todos.map(todo=>
					`<li>
							${todo.name} ${todo.completed?'○':'x'}
					</li>`
					).join('')}
				</ul>`
		)
	}
	const template=`
		<div>${Jelly.name}</div>
		<div>${render(Jelly.todos)}</div>
		<div>${Jelly.data}</div>
	`
	document.body.innerHTML=template;
	console.log(template)
</script>
</body>
</html>