//原始字符串拼接寫法
const name = 'Asher';
const age = 5;
const sentence = name + ' is ' + age + ' years old';
console.log(sentence); //Asher is 5 years old
//ES6中拼接字符串
//``定義字符串
//{}中可以是任何JS表達(dá)式拍屑，變量左医、函數(shù)痹雅、對象的屬性等
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.模板字符串內(nèi)可以使用三元表達(dá)式
<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
- 標(biāo)簽?zāi)０遄址?/li>
//使用模板字符串掖举，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}`
//使用標(biāo)簽?zāi)０遄址笥蚊ぃ祷?es6"介袜，僅返回標(biāo)簽函數(shù)所返回的內(nèi)容
function highLight (){
return 'es6';
}
const user = 'Asher';
const topic = 'Learn to use es6';
const sentence = highLight`${user} has commented on your topic ${topic}`
//標(biāo)簽函數(shù)仪芒，...value表示剩余參數(shù)唁影，參數(shù)結(jié)解析如下圖
//strings里有2個空字符串的原因是模板字符串以變量開頭結(jié)尾
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
- 標(biāo)簽?zāi)０遄址咐?/li>
//效果如下，
<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
- 標(biāo)簽函數(shù)的用途掂名，可以用來過濾用戶輸入
<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
