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. Java线程:概念与使用

    Java线程大总结 原文章地址:一篇很老的专栏,但是现在看起来也感觉深受启发,知识点很多,很多线程特点我没有看,尴尬.但是还是整理了一下排版,转载一下. 操作系统中线程和进程的概念 在现代操作系统中, ...

  2. P1794 装备运输_NOI导刊2010提高(04)

    P1794 装备运输_NOI导刊2010提高(04) 题目描述 德国放松对英国的进攻后,把矛头指向了东边——苏联.1943年初,东线的战斗进行到白热化阶段.据可靠情报,90余万德国军队在库尔斯克准备发 ...

  3. 高德API+Python解决租房问题(.NET版)

    源码地址:https://github.com/liguobao/58HouseSearch 在线地址:58公寓高德搜房(全国版):http://codelover.link:8080/ 周末闲着无事 ...

  4. 保证IO流不出错

    package com.io.demo1; import java.io.FileInputStream;import java.io.IOException; /** * 测试IO * io流,输入 ...

  5. Coap协议学习笔记-第一篇

    1. 物联网应用上一般使用单片机(或者其他SOC),单片机的RAM内存一般只有20KB~~128KB左右,然而一个TCP协议栈可能就20KB,所以只能用UDP,因为UDP相对小很多,然后在UDP上加了 ...

  6. 关于 SSH Server 的整体设定

    # . 关于 SSH Server 的整体设定,包含使用的 port 啦,以及使用的密码演算方式 Port # SSH 预设使用 这个 port,您也可以使用多的 port ! # 亦即重复使用 po ...

  7. VS2010安装MVC3出错

             开始已经在电脑上安装了VS2010以及SP1,还装了MVC4的相关升级包.最后项目中又要用MVC3,然后又去安装MVC3的安装包,但是在安装的过程就出现了问题.一直安装不成功,最后在 ...

  8. 分享 go语言爬虫---开源项目Pholcus

    写在开头的话:记录一下最近学习Pholcus(https://github.com/henrylee2cn/pholcus)的过程,首先去学习的go基本语法,在没接触的时候发现很多不理解的地方,但是当 ...

  9. su: Authentication failure

    su: Authentication failure问题解决: su 命令切换失败,提示su: Authentication failure,只要你sudo passwd root过一次之后,下次再s ...

  10. tensorflow学习笔记(2)-反向传播

    tensorflow学习笔记(2)-反向传播 反向传播是为了训练模型参数,在所有参数上使用梯度下降,让NN模型在的损失函数最小 损失函数:学过机器学习logistic回归都知道损失函数-就是预测值和真 ...