模板字符串 提供构造字符串的语法糖,在 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. 华为交换机配置NTP服务端/客户端

    作者:邓聪聪 配置设备作为NTP服务器 单播客户端/服务器模式 # 配置NTP主时钟,层数为2. <HUAWEI> system-view [HUAWEI] ntp refclock-ma ...

  2. requests库入门14-Cookie

    因为http是没有状态的协议,上一个请求和下一个请求是没有关联.但是现实中又需要有关联,比如一个页面某个操作需要登陆之后才能进行,没有登陆就提示你登陆.为了实现这样的效果,所以出现了Cookie和Se ...

  3. 设计模式C++学习笔记之十一(Bridge桥梁模式)

      桥梁模式,将抽象部分与它的实现部分分离,使它们都可以独立地变化.实现分离的办法就是增加一个类, 11.1.解释 main(),客户 IProduct,产品接口 CHouse,房子 CIPod,ip ...

  4. mongodb管理与安全认证

    mongodb数据管理 数据的导出.数据导入数据导出 mongoexport [使用mongoexport -h查看参数] 数据导入 mongoimport [使用mongoimport -h查看参数 ...

  5. CDHtmlDialog探索----WebBrowser扩展和网页Javascript错误处理

    当WebBrowser控件(CDHtmlDialog自动创建了WebBrowser控件)加载的网页中含有错误Javascript代码时默认情况下控件会弹出错误信息提示对话框,相对于用户体验来说这样的提 ...

  6. Linux更改目录及其子目录、文件的访问权限

    修改某个目录及其下所有文件的权限,要使用-R参数,表示启动递归处理. 例如: #仅将/home/user/test目录的权限设置为rwxr-xr-x /home/user/test #表示将整个/ho ...

  7. git与eclipse集成之添加.gitignore文件

    1.1. 添加.gitignore文件 .gitignore 配置文件用于配置不需要加入版本管理的文件 1.以斜杠/开头表示目录: 2.以星号*通配多个字符: 3.以问号?通配单个字符 4.以方括号[ ...

  8. linux下使用命令模式去编译Qt程序

    1.打开终端输入,qmake -v ,如果提示版本信息正,就可以编译程序了. 2.当前目录切换到程序源代码目录,cd /home/likewei/untitled2 3.生成untitled2.pro ...

  9. ASP.NET 验证码绘制

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  10. Laravel 5.2响应--后台back()->with('提示信息'),前台为什么收不到?

    ### 今天遇到了个小问题,想后台判断数据的时候,返回前台,然后弹窗提示没有数据 但是前台点了有返回,咩有提示信息 ### 网上找了很9⃣️,关于这方面的都是属于验证时候的相关问题,但是我这个跟验证没 ...