模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

大家可以先看下面一段代码:

$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);
 

我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);

反引号`来标识起始,用${}来引用变量,而且所有的空格和缩进都会被保留在输出之中,是不是非常爽?!

ES6 Template String 模板字符串的更多相关文章

  1. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

  2. es6 中的 模板字符串

    Template literals are string literals allowing embedded expressions. You can use multi-line strings ...

  3. ES6中的模板字符串使用方法

    传统的 JavaScript 语言,输出模板通常是这样写的. $('#result').append( 'There are <b>' + basket.count + '</b&g ...

  4. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  5. ES6中的模板字符串---反引号``

    在react中,反引号``有特殊的含义. 如MDN中所述,模板字符串(Template literals)允许嵌入表达式,并且支持多行字符串和字符串插补特性.基本语法为以下几种: 其中第一行为最基本用 ...

  6. ES6 模板字符串Template String

    1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们 ...

  7. ES6模板字符串【${}配合反单引号一起用】

    先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜.高级编程中,例如java里面的string.format就是干这个事情,诸如此类. 1. 概念理解 A ...

  8. 2、ES6结构赋值和模板字符串

    ES6允许按照一定的模式,从数组和对象中提取值,这被称为结构,即解开数据的结构 1.数组的解构赋值 let [a,b] = [1,2] let [a,b,c=100] = [1,2] //c的默认值为 ...

  9. es6的新特性--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

随机推荐

  1. 阅读《JavaScript设计模式》第三章心得

    简单工厂模式 1.通过类实例化对象创建 传统的用面向对象方法去创建很多类去实现某些功能不妥当,这样不仅占用的很多类名称,而且别人使用这些方法的同时要记住每个类的名字,所以这样不适合团队开发,所以我们可 ...

  2. 标准C 语言总结

    ***************C语言****************** --day01-- Linux是一个和Windows类似的操作系统 通常通过终端软件使用Linux操作系统 终端软件里只能使用 ...

  3. hdu 1584 蜘蛛纸牌

    把小的牌放到大的牌上,求最小移动的距离和 DFS遍历所有的可能,把每一张牌与之要移动的牌都进行两层for的循环,注意回溯条件满足立刻break 代码(算法借鉴) #include <bits/s ...

  4. LMDB installation

    Official Website: http://lmdb.readthedocs.io/en/release/ Install commands for Ubuntu: $ sudo apt-get ...

  5. How do I drop a MongoDB database, from the command line?

    mongo <dbname> --eval "db.dropDatabase()" > use mydb; > db.dropDatabase(); mon ...

  6. 清北学堂模拟赛d3t5 c

    分析:其实就是一道数学题.如果以左下角的点为原点建立平面直角坐标系,那么点(b,a)是最容易卡住棺材的.我们求出棺材左边到点(b,a)的距离最小值,只有w小于等于这个最小值才能被拉过去.那么先求出左面 ...

  7. ACDream - Chasing Girl

    先上题目: Chasing Girl Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) ...

  8. centos7安装opennms-17.0.0

    https://blog.csdn.net/jiangzhexi/article/details/52036858 http://www.jb51.net/os/RedHat/281470.html

  9. 新的HTML5语义元素

    先看一个传统的HTML4的文档: <div class="header"> <h1>My Site Name</h1> <h2>My ...

  10. 【2014秋季版】【辛星php】【0】清晰的认识一下PHP语言

    *********************PHP情结***************** 1.假设您和我经历非常相似,也可能会有这种PHP情结,为什么呢.由于我最先学习的是Java.然后学习了C++,开 ...