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. python2.7练习小例子(二十六)

        26):题目:给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位数字.     程序分析:学会分解出每一位数.     程序源代码: #!/usr/bin/python # ...

  2. 初步学习pg_control文件之三

    接前文,初步学习pg_control文件之二 继续学习: 研究 DBState,先研究 DB_IN_PRODUCTION ,看它如何出现: 它出现在启动Postmaster时运行的函数处: /* * ...

  3. python中的os,shutil模块的定义以及用法

    # os 模块 os.sep 可以取代操作系统特定的路径分隔符.windows下为 '\\' os.name 字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux/Uni ...

  4. 当我们访问不了虚拟机上ip上的web页面,是因为在window上要添加映射

    在主机上添加映射步骤 1.打开C盘 注意:用nopedata++打开 保存即可!

  5. OrCAD创建原理图符号图

    1. 首先创建一个库 2. 右键新创建的库,添加新的器件New Part 3. 修改器件属性 4. 添加引脚 添加完引脚之后如图,其中双击引脚,即可修改引脚名字和序号 5. 添加符号的外形 添加完外形 ...

  6. Use Matlab though C++

    0. Environment Windows 8.1 Pro x64 Matlab R2013a 32-bit (installed in "F:\ProgramFiles_x86\MATL ...

  7. 原生js实现五子棋

    为什突然做这个,因为这是个笔试题,拖了一个月才写(最近终于闲了O(∩_∩)O),废话不多说,说说这个题吧 题目要求 编写一个单机[五子棋]游戏,要求如下: 1.使用原生技术实现,兼容 Chrome 浏 ...

  8. webpack loader之css、scss、less、stylus安装

    1.打包css,需要安装css-loader和style-loader yarn add --dev css-loader style-loader 或者 npm install --save-dev ...

  9. Ubuntu下使用Git_2

    接着上一篇的写,这里练习一下git clone 指令 指令格式 $ git clone <repository> <directory> <respository> ...

  10. python第三天(dictionary应用)转

    1.题目: python实现英文文章中出现单词频率的统计   前言: 这道题在实际应用场景中使用比较广泛,比如统计历年来四六级考试中出现的高频词汇,记得李笑来就利用他的编程技能出版过一本背单词的畅销书 ...