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

es6+最佳入门实践(14)的更多相关文章

  1. es6+最佳入门实践(1)

    1.let和const 1.1.let和块级作用域 在es5中,js的作用域分为全局作用域和局部作用域,通常是用函数来区分的,函数内部属于局部作用域,在es6中新增了块级作用域的概念,使用{}括起来的 ...

  2. es6+最佳入门实践(12)

    12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...

  3. es6+最佳入门实践(10)

    10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...

  4. es6+最佳入门实践(9)

    9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...

  5. es6+最佳入门实践(8)

    8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...

  6. es6+最佳入门实践(7)

    7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...

  7. es6+最佳入门实践(6)

    6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...

  8. es6+最佳入门实践(5)

    5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...

  9. es6+最佳入门实践(4)

    4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...

随机推荐

  1. Zookeeper系列(二) Zookeeper配置说明

            在配置ZooKeeper配置文件时,有些参数是必需的,有些参数是可选的,这些必需的参数构成了Zookeeper配置文件的最低配置要求,如果需要对ZooKeeper进行更详细的配置,可以 ...

  2. 1、Java多线程基础:进程和线程之由来

    Java多线程基础:进程和线程之由来 在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程.当然,Java并发编程涉及到很多方面的内容,不是一朝一夕就能够融会贯通 ...

  3. 现代web开发需要学习的15大技术

    现代Web开发需要学习的15大技术 2016-06-08 13:08 快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 ...

  4. OpenCV入门:(七:OpenCV取随机数以及显示文字)

    1.随机颜色 OpenCV中自带了取随机数的方法,使用步骤: RNG rng( 0xFFFFFFFF ); 随机数 = rng.uniform( 下限,上限 ); 2.显示文字 , , bool bo ...

  5. C++学习004-Go To 语句使用

    C++中,goto语句主要负责语句的跳转,可以用在循环中跳出循环 注意gotu语句是无条件跳转,用的时候一定要谨慎,一定要少 编写环境 Qt 5.7 for(int i = 0;i<100;i+ ...

  6. 第三篇 Postman之 Tests(后置处理器,断言)

    第二篇里讲了手动设置全局变量及局部变量的方法,但是这有一个缺点,就是每次测试之前,都需要获取相关变量值,手动再填写更新到对应的全局变量或者局部变量里,这对于想进行自动化执行的人或者懒人就不太友好了,本 ...

  7. python 基础篇03

    本节主要内容:1. python基本数据类型回顾2. int----数字类型3. bool---布尔类型4. str--- 字符串类型一.python基本数据类型1. int ==> 整数. 主 ...

  8. 对TPR(真正例率) 与 FPR(反正例率)的理解

    将测试样本进行排序,“最可能”是正例的排在最前面,“最不可能”是正例的排在最后面. 分类过程就相当于在这个排序中以某个“截断点”(见图中阈值)将样本分为两部分,前一部分判作正例,后一部分判作反例. 我 ...

  9. 第一周 Introduction

    欢迎 欢迎来到这门关于机器学习的免费网络课程,机器学习是近年来最激动人心的技术之一,在这门课中,你不仅可以了解机器学习的原理,更有机会进行实践操作,并且亲自运用所学的算法. 每天你都可能在不知不觉中使 ...

  10. Spark实战练习03--Pair RDD

    一.场景 现有某网站的网站日志,内容为用户对网站的请求,包含user ID.IP address.datetime……等等 另有一份文件中包含用户的账户详细信息数据,包含User ID.creatio ...