模板字符串 提供构造字符串的语法糖,在 Prel/python 等语言中也都有类似特性。

1、反引号模板,可以换行

2、反引号模板,可以嵌套

用+``来嵌套

好处:语法更加简洁

        var name="123456一堆返回的数据"
var desc="title内容";
var tpl=`
<div>
<span>${name}</span>
</div>
`;
console.log(tpl);
/*<div>
<span>123456一堆返回的数据</span>
</div>*/
var tpl2=`
<div>
<span>${name +`<strong>${desc}</strong>`}</span>
</div>
`;
console.log(tpl2);
/*<div>
<span>123456一堆返回的数据<strong>title内容</strong></span>
</div>*/

其它例子

// Basic literal string creation
`This is a pretty little template string.` // Multiline strings
`In ES5 this is
not legal.` // Interpolate variable bindings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?` // Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.` // Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
Content-Type: application/json
X-Credentials: ${credentials}
{ "foo": ${foo},
"bar": ${bar}}`(myOnReadyStateChangeHandler);

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6919746.html有问题欢迎与我讨论,共同进步。

es6 模板字符串的更多相关文章

  1. es6模板字符串使用使${} 来包裹一个变量或者一个表达式

    es6模板字符串使用使${} 来包裹一个变量或者一个表达式 2019-04-28 14:33:54 Gabriel_wei 阅读数 1774  收藏 更多 分类专栏: 前端   版权声明:本文为博主原 ...

  2. ES6模板字符串及字符串的扩展方法

    一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...

  3. ES6模板字符串

    ES6支持模板字符串,简单写法如下 //html界面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  4. ES6 模板字符串Template String

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

  5. ES6模板字符串之标签模板

    首先,模板字符串和标签模板是两个东西. 标签模板不是模板,而是函数调用的一种特殊形式.“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数. 但是,如果模板字符串中有变量,就不再是简单的调用了,而 ...

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

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

  7. es6模板字符串 问题记录

    自古无图无真相,望各位博主在条件允许的情况下,配张图片吧! 界面是用join拼接的,当循环td的时候会产生一个空串,界面就会出现一个逗号, 虽然功能块算实现了,不过始终美中不足,然后想到的办法是替换所 ...

  8. ES6 -- 模板字符串(反单引号)

    1)直接使用变量 // before var str = 'test'; console.log(str + "123"); // now var str = 'test'; co ...

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

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

随机推荐

  1. ppp 完全理解(二)【转】

    转自:https://blog.csdn.net/tianruxishui/article/details/44057717 ppp 完全理解(二) pppd 协议及代码分析 作者:李圳均 日期:20 ...

  2. CFtpConnection Class

    CFtpConnection Class   1.链接http://technet.microsoft.com/zh-cn/office/2kywsafk(v=vs.80) 2.测试ftp可以用这个地 ...

  3. Entity framework中LINQ的使用

    一.linq和ef的差别 我们做项目时,难免会遇到用的不知道是啥,及把linq和EF搞混了.今天我带领大家梳理下思路,首先说linq查询,然后介绍EF查询 1.linq查询 当我们使用linq查询时, ...

  4. zTree:一个依靠 jQuery 实现的多功能 “树插件”

    官方网站: http://www.treejs.cn/v3/main.php#_zTreeInfo 使用方式: 步骤1.文件准备 将需要使用的 zTree v3.x 相关的 js.css.img 文件 ...

  5. pl sql 中文乱码

    一:查看oracle数据库的字符集编码: select * fromnls_database_parameters where parameter in ('NLS_LANGUAGE', 'NLS_T ...

  6. OpenStack实践系列⑦深入理解neutron和虚拟机

    OpenStack实践系列⑦深入理解neutron和虚拟机 五.深入理解Neutron 5.1 虚拟机网卡和网桥 [root@node1 ~]# ifconfig brq65c11cc3-8e: fl ...

  7. mysql5.7 pxc

    pxc优点总结:可以达到时时同步,无延迟现象发生完全兼容MySQL对于集群中新节点的加入,维护起来很简单数据的强一致性不足之处总结:只支持Innodb存储引擎存在多节点update更新问题,也就是写放 ...

  8. VI和VIM

    linux下vi.VIM命令大全   进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + file ...

  9. CF 313B

    题意: 给你一个字符串, 然后m次区间查询,求出区间有多少组 str[i] == str[i+1] 就是一个水DP了 有则Dp[i] = Dp[i-1] 无则 Dp[i] = Dp[i-1]: (刚开 ...

  10. Java+selenium chrome 常见的问题WebDriverException: unknown error: call function result missing 'value'

    运行chrome浏览器 报错:"main" org.openqa.selenium.WebDriverException: unknown error: call function ...