模板字符串 提供构造字符串的语法糖,在 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. 华为Qinq的配置

    作者:邓聪聪 qinq(dot1q in dot1q)是一种二层环境中的二层vpn技术,用于二层ISP网络将相同客户网络中的vlan帧,再打一层vlan-tag的手段实现同一个客户的不同站点之间的数据 ...

  2. C# 基础之string[,] 和string[][]

    昨天做项目时碰到一个问题,后台返回一张关系表,里面就两个字段,简化为A,B字段(1:N的关系),一个A对应多个B字段. 由于对于string[,] 和string[][] 的认识不到位,刚开始搞错了数 ...

  3. 题解-POI2007 OSI-Axes of Symmetry

    Problem bzoj1100 题意概要:给定一个简单多边形(不一定凸),求其对称轴数量 数据组数\(\leq 10\),多边形点数\(\leq 10^5\) Solution 这题算是跨界算法的经 ...

  4. 题解-ZJOI2015地震后的幻想乡

    Problem bzoj & 洛谷 题意简述:给定一个\(n\)(\(n\leq 10\))个点\(m\)条边的无向图,每条边的权值为一个\(0\)到\(1\)之间的连续随机变量,求图的最小生 ...

  5. 007_ip统计及攻击ip分析

    线上经常有被扫描的DDoS攻击事件,需要集合日志进行分析,这里有两种方法,分别是通过shell和python的方式. 一.shell '''<1>shell一句命令分析 http://bl ...

  6. 【进阶3-1期】JavaScript深入之史上最全--5种this绑定全面解析(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记  https://github.com/yygmind/blog/issues/20 this的绑定规则总共有下面5种. 1.默认绑定(严格/非严 ...

  7. 解决get方法提交参数中文乱码问题:

    解决get方法提交参数中文乱码问题: 1找到你们的tomcat的目录 2在这个目录下面\tomcat61-32\tomcat61\conf 3找到server.xml ,用notepad打开(没有就下 ...

  8. STL 容器区别:vector、list、deque、set、map的底层实现

    https://blog.csdn.net/shawjan/article/details/45424405

  9. Java的家庭记账本程序(F)

    日期:2019.2.17 博客期:034 星期日 我先配置了Android的相关环境,先试着做了Hello World的测试,但是却出现了很严重的问题,问题如下: Unable to get curr ...

  10. ERROR 1044 (42000): Access denied for user 'root'@'%' to database 'mysql'

    原因:修改数据库账号时删除了默认的localhost root,  新建了% root 但没有赋予全部权限; 解决方法: 1.关闭数据库# mysqld stop 2.在my.cnf里加入skip-g ...