模板字符串(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. redis数据库学习笔记

    redis数据库 工作需要,简单了解一下redis数据库,供后续参考和复习使用. 一.简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字 ...

  2. enote笔记语言(4)(ver0.4)——“5w1h2k”分析法

    章节:“5w1h2k”分析法   what:我想知道某个“关键词(keyword)”(即,词汇.词语,或称单词,可以是概念|专业术语|.......)的定义. why:我想分析and搞清楚弄明白“事物 ...

  3. Books Queries (codeforces 1066C)

    模拟题 开一个容器进行模拟即可,注意容器设置初始大小不然容易re.设置两个指针l,r.把容器当作桶,每一个桶都有一个编号表示位置,左边进入那么就是编号为l,右边一样.然后l--或者r++,l=r=0的 ...

  4. WPF Style设置和模板化Template

    WPF样式设置和模板化是一套功能(样式,模板,触发器和演示图版),可以为产品设置统一外观.类似于html的css,可以快速的设置一系列属性值到控件. 案例:ButtonStyle 这里创建了一个目标类 ...

  5. vue 瀑布流实现

    <div class="myWrite" v-if="list.length==0"> - 这个福宝有点懒哦 - </div> < ...

  6. 00107_TCP通信

    1.TCP通信的概述 (1)TCP通信同UDP通信一样,都能实现两台计算机之间的通信,通信的两端都需要创建socket对象: (2)区别在于: ①UDP中只有发送端和接收端,不区分客户端与服务器端,计 ...

  7. jQuery学习----简单介绍,基本使用,操作样式,动画

    jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...

  8. GlobalSign 企业型SSL 证书

    GlobalSign 企业型SSL 证书   GlobalSign 企业型 SSL 证书属于OV SSL,进行严格的网站所有权的验证,企业真实身份验证,证书标识企业组织机构名称,增加信任度.提供40位 ...

  9. [TYVJ1730]二逼平衡树

    [TYVJ1730]二逼平衡树 题目 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:1.查询k在区间内的排名2.查询区间内排名为k的值3.修改某一位值上的数值4.查 ...

  10. no_merge hint

    This is tested in 10gR2. SQL> select * from v$version; BANNER ----------------------------------- ...