模板字符串(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. ZOJ 3180 Number Game(模拟,倒推)

    题目 思路: 先倒推!到最后第二步,然后: 初始状态不一定满足这个状态.所以我们要先从初始状态构造出它出发的三种状态.那这三种状态跟倒推得到的状态比较即可. #include<stdio.h&g ...

  2. Bullet:Python的函数中参数是引用吗?

    别的语言中关于函数有传值和传引用的区分. 关于此,流传很广的一个说法是 他们在现象的区别之一就是值传递后的变化,受到影响的就是引用,未受到影响的就是传值.   在学习中,也曾碰到过这个问题,网上关于这 ...

  3. How To: Multipath Linux x86-64 Release 6.4

    [root@node01 ~]# lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0 ...

  4. 洛谷——P1183 多边形的面积

    P1183 多边形的面积 多边形求面积公式: $\frac {\sum_{i=0}^{n-1}(x_iy_{i+1}-y_ix_{i+1})}{2}$ #include<bits/stdc++. ...

  5. 44.bucket filter:统计各品牌最近一个月的平均价格

    课程大纲     GET /tvs/sales/_search { "size": 0, "query": { "term": { &quo ...

  6. 第十节:pandas之loc()、iloc()与ix()索引

  7. BZOJ1192 鬼谷子的钱袋

    没想到这是一道省选题... /* BZOJ1192 */ #include <cstdio> int main() { ; scanf("%d",&m); ;m ...

  8. Java端百度云推送消息Demo

    因为在做Java服务器有用到推送消息机制,于是到网上找了一下,就自己试着敲了一个demo.这个demo主要是简单的一个对app消息推送. jar:百度云消息推送Java端的jar. package x ...

  9. 洛谷 P2997 [USACO10NOV]旗帜Banner

    P2997 [USACO10NOV]旗帜Banner 题目背景 题目大意(by:曹彦臣): 平面上有(0,0)到(n,m)的(n+1)*(m+1)个点.问有多少点对所连的线段不过其他点,且长度在[l, ...

  10. Java JVM虚拟机选项Xms/Xmx/PermSize/MaxPermSize(转)

    通过JVM的这些选项:Xms/Xmx/PermSize/MaxPermSize可以牵扯出很多问题,比如性能调优等. 说明:以下转载没经过实践. 经验实例(参考): 设置每个线程的堆栈大小.JDK5.0 ...