es6+最佳入门实践(14)

最新推荐文章于 2019-02-13 12:49:22 发布

大地飞鸿

最新推荐文章于 2019-02-13 12:49:22 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript ES6+入门系列

本文链接：https://blog.youkuaiyun.com/keledon/article/details/86842083

javascript 同时被 2 个专栏收录

51 篇文章

订阅专栏

ES6+入门系列

14 篇文章

订阅专栏

本文详细介绍ES6中模版字符串的使用方法及其优势，通过具体案例对比ES5的字符串拼接，展示模版字符串如何简化代码并提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

14.模版字符串

模版字符串(template string)是增强版的字符串，定义一个模版字符串需要用到反引号

let s = `这是一个模版字符串`
console.log(s)

14.1.模版字符串的应用场景

在es5中,我们经常会遇到字符串拼接的情况，例如：输入标题1-6

for(let i = 1; i <= 6; i++){
    document.write('<h'+i+'>标题'+i+'</h'+i+'>')
}

在es6中，支持模版字符串的写法，我们可以写成下面这种形式

for(let i = 1; i <= 6; i++){
    document.write(`<h${i}>标题${i}</h${i}>`)
}

模版字符串的好处就是可以使得拼接字符串非常的方便，例如：

let htmlStr = `
    <div id="dialog-wrap">
        <div class="dialog-title">
            <p class="title-text"></p>
        </div>
        <div class="dialog-content">
            <ul class="list-group"></ul>
        </div>
    </div>
`
document.body.innerHTML = htmlStr;

视频教程地址：http://edu.nodeing.com/course/50