文章目录

初识模板字符串` `` ` 和 ${}书写 HTML 模板模板字符串是可以嵌套的模板字符串更高端的用法，标签模板字符串

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

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) }

输出：