ES6模板字符串

初识模板字符串`` 和 ${}

let person = {
        name: "changhao",
        age: 21,
    }

    let fiveYearsLater = `${person.name}五年后的年龄是${person.age + 5}`;
    console.log(fiveYearsLater)

输出

书写 HTML 模板

 let temp = `
    <div>
         <p></p>
    </div> 
    `
    
    console.log(temp)

输出：

这里发现模板字符串会保留 两个反单引号之间的空格 可以使用 .trim( ) 方法删掉空格

    let temp = `
         <div>
             <p></p>
         </div>`.trim()
    console.log(temp)

输出：为何这么丑

模板字符串是可以嵌套的

也能在里面用函数

 const temp  = `
            <div>
                <h1>名字是:${person.name}</h1>
                <ul>
                    ${person.todo.map(todo=> `<li>${todo.name}</li>`)}
                </ul>
            </div>
       			 `
       console.log(temp.trim())

输出：

map 方法返回的是一个数组所以map 出来的 li 是数组有逗号间隔  这时候用join 方法 

person.todo.map(todo=> `<li>${todo.name}</li>`).join('') 
//隐 式 返 回，返回值是个数组，然后join（''） 把数组中的所有元素放入一个字符串。 

输出：这就是一个正常模板啦！这样才能用到 HTML页面里面

 document.body.innerHTML = temp

显示：

复习三元运算

${person.todo.map(todo=> `<li>${todo.name} ${todo.completed  ? '√' : '×'}</li>`).join('')}

模板字符串更高端的用法，标签模板字符串

先写一个简单的模板字符串

	    const user = "changhao";
	    
        const topic = "I like to play the guitar";
        
        const sentence = `${user} said ${topic}`
        
        console.log(sentence)

输出：

在上面案例的模板中 添加一个标签 highlight 并定义一些规则，所以对应一个方法

 const sentence = highlight`${user} said ${topic}`
 
 function highlight() {
 
        return "changhao"
        
    }

然后神奇的发现 整个sentence 被highlight控制了，完全是按照标签的函数方法返回值输出的

只剩下changhao
标签模板的标签方法

// 有二参数
 第一个string 是模板字符串里的字符串 said  
 第二个是 模板字符串 里面的变量 一般用 剩余参数接受，因为数量不确定 ...arr(数组)
 function highlight(string ,...arr) {
        return "changhao"
    }

注意点：
当标签模板字符串里的变量作为开头或者结尾的时候，他的string第一个或者最后一个都是空的，

function highlight(string,...arr) {
        console.log(string)
    }

输出：