重学ES6 模板字符串

比眉伴天荒 2022-10-01 09:53 114阅读 0赞

在两三年前，jQuery还是比较主流的开发技术，当我们要为页面添加DOM时，一般，我们是这样写的

$("#container").append(
      'Today is <b>' + week.type + '</b>'
    )
    复制代码

但是，写起来真的很难受，因为一直要写引号，有时候还会写丢了。**ES6引入了模板字符串**，解决这个问题

$("#container").append(
      `Today is <b> ${ week.type}` </b>
    )
    复制代码

变量再也不用使用 + 拼接了，只需要 `${}`就完事了，简直爽到爆炸~

而且`${}`里面可以放入任何JavaScript表达式，进行运算，对象属性引用，还能调用函数~

## 模板编译应用 ##

在这个SPA流行的时代，入坑较晚的，应该都没有用过ejs

let template = ` <ul> <% for(let i=0; i < data.supplies.length; i++) { %> <li><%= data.supplies[i] %></li> <% } %> </ul> `
    复制代码

该模板使用`<%...%>`放置 JavaScript 代码，使用`<%= ... %>`输出 JavaScript 表达式。

网页是不认识这样的代码的，所以，需要我们将这个模板字符串进行编译

这里有一种思路，我们用js来输出这里面的所有html

echo('<ul>')
    for(var i = 0; i < data.supplies.length; i++){
        echo('<li>')
        echo(data.supplies[i])
        echo('</li>')
    }
    echo('</ul>')
    复制代码

这样，我们就用js将整个DOM输出出来了~

那么，我们需要先将模板字符串转化为js代码

转载于:https://juejin.im/post/5cae8bbcf265da03b36ed1a3

重学ES6 模板字符串

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ES6：模板字符串

相关 es6 模板字符串

相关 ES6模板字符串

相关重学ES6 模板字符串

相关重学ES6 Map

相关 ES6模板字符串

相关 es6模板字符串

相关 Es6 - 字符串模板

相关 ES6模板字符串

相关 ES6——模板字符串