//原始字符串拼接写法
const name = 'Asher';
const age = 5;
const sentence = name + ' is ' + age + ' years old';
console.log(sentence); //Asher is 5 years old
//ES6中拼接字符串
//``定义字符串
//{}中可以是任何JS表达式，变量、函数、对象的属性等
const name = 'Asher';
const age = 5;
const sentence = `${name} is ${age * 2} years old`;
console.log(sentence); //Asher is 10 years old
//ES6的模板字符串
const name = 'Asher';
const template = `<div>${name}</div>`;
console.log(template); //<div>Asher</div>
//最常用的就是在vue中写一个模板的时候，方便多了
const template = `
<div class="box">
<p>hello</>
</div>
`;
- 模板字符串使用案例一
1.模板字符串可嵌套使用
2.模板字符串内可以使用三元表达式
<style type="text/css">
.todoList {
width: 300px;
border :1px solid #B0E2FF;
border-radius: 3px;
}
.userName {
padding: 10px 0 10px 10px;
background: #B0E2FF;
}
.date {
padding: 5px 0 5px 10px;
background: #B0E2FF;
}
</style>
<script type="text/javascript">
const Asher = {
name: 'Asher',
date: '2017-05-30',
todos: [
{
item: 'go to store',
completed: false
},
{
item: 'go to store',
completed: true
},
{
item: 'go to store',
completed: true
}
]
};
function renderTodos(todos){
return (
`
<ul>
${todos.map( todo => `
<li>
${todo.item} ${todo.completed ? '√' : '×'}
</li>` ).join('')}
</ul>
`
)
}
const template = `
<div class="todoList">
<div class="userName">${Asher.name}</div>
<div class="list">
${renderTodos(Asher.todos)}
</div>
<div class="date">${Asher.date}</div>
</div>
`;
document.body.innerHTML = template;
</script>
string template-1.PNG
- 标签模板字符串
//使用模板字符串，sentence返回"Asher has commented on your topic Learn to use es6"
function highLight (){
return 'es6';
}
const user = 'Asher';
const topic = 'Learn to use es6';
const sentence = `${user} has commented on your topic ${topic}`
//使用标签模板字符串后，返回"es6"，仅返回标签函数所返回的内容
function highLight (){
return 'es6';
}
const user = 'Asher';
const topic = 'Learn to use es6';
const sentence = highLight`${user} has commented on your topic ${topic}`
//标签函数，...value表示剩余参数，参数结解析如下图
//strings里有2个空字符串的原因是模板字符串以变量开头结尾
function highLight (strings, ...values){
debugger;
}
const user = 'Asher';
const topic = 'Learn to use es6';
const sentence = highLight`${user} has commented on your topic ${topic}`
tagged template arguments.PNG
- 标签模板字符串案例
//效果如下，
<style type="text/css">
.highLight {
padding: 2px 5px;
background: #B0E2FF;
}
</style>
<script type="text/javascript">
function highLight (strings, ...values){
const highLighted = values.map(value => `<span class="highLight">${value}</span>`)
let str = '';
strings.forEach((string,i) => str += `${string}${highLighted[i] || ``}`)
return str;
}
const user = 'Asher';
const topic = 'Learn to use es6';
const sentence = highLight`${user} has commented on your topic ${topic}`
document.body.innerHTML = sentence;
</script>
tagged template example.PNG
- 标签函数的用途，可以用来过滤用户输入
<style type="text/css">
.comment-text {
padding: 10px;
width: 350px;
height: 150px;
border: 1px solid #B0E2FF;
border-radius: 3px;
}
button {
display: block;
margin: 10px 0 20px;
padding: 10px 15px;
background: #B0E2FF;
border: 1px solid #B0E2FF;
border-radius: 3px;
color: #333;
cursor: pointer;
}
.userName {
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
color: #F08080;
font-size: 18px;
}
.comentCotent {
padding: 15px 0;
}
</style>
<body>
<div class="box">
<form class="add-comment">
<textarea class="comment-text"></textarea>
<button>Post Comment</button>
</form>
<div class="comment"></div>
</div>
<script type="text/javascript">
const addCommentForm = document.querySelector(".add-comment");
const textarea = document.querySelector(".comment-text");
const comment = document.querySelector(".comment");
const user = 'Asher';
function filter(strings,...values){
//这里可以写上过滤需求
}
addCommentForm.addEventListener("submit",function(evt){
evt.preventDefault();
const newComment = textarea.value.trim();
if(newComment) {
comment.innerHTML = filter`
<div class="userName">${user}</div>
<div class="comentCotent">${textarea.value}</div>
`;
textarea.value = '';
}
})
</script>
</body>
filter.PNG
