es6 模板字符串
模板字符串 提供构造字符串的语法糖,在 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 模板字符串的更多相关文章
- es6模板字符串使用使${} 来包裹一个变量或者一个表达式
es6模板字符串使用使${} 来包裹一个变量或者一个表达式 2019-04-28 14:33:54 Gabriel_wei 阅读数 1774 收藏 更多 分类专栏: 前端 版权声明:本文为博主原 ...
- ES6模板字符串及字符串的扩展方法
一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...
- ES6模板字符串
ES6支持模板字符串,简单写法如下 //html界面 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- ES6 模板字符串Template String
1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们 ...
- ES6模板字符串之标签模板
首先,模板字符串和标签模板是两个东西. 标签模板不是模板,而是函数调用的一种特殊形式.“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数. 但是,如果模板字符串中有变量,就不再是简单的调用了,而 ...
- ES6模板字符串【${}配合反单引号一起用】
先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜.高级编程中,例如java里面的string.format就是干这个事情,诸如此类. 1. 概念理解 A ...
- es6模板字符串 问题记录
自古无图无真相,望各位博主在条件允许的情况下,配张图片吧! 界面是用join拼接的,当循环td的时候会产生一个空串,界面就会出现一个逗号, 虽然功能块算实现了,不过始终美中不足,然后想到的办法是替换所 ...
- ES6 -- 模板字符串(反单引号)
1)直接使用变量 // before var str = 'test'; console.log(str + "123"); // now var str = 'test'; co ...
- es6的新特性--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...
随机推荐
- 解决ubuntu的gedit编辑器中文乱码的问题
hello,本人 sky 又和大家见面了很多人在使用ubuntu系统时发现打开windows系统下面写的文档的话会发现乱码,是因为编码格式的问题windows系统下面是用GB2312等编码格式进行中文 ...
- genPanel.py
#!/usr/bin/python # -*- coding: UTF-8 -*- import os import sys import re import shutil import glob ' ...
- 请求头缺少 'Access-Control-Allow-Origin'
报错: 火狐上运行,出现报错信息.已拦截跨源请求:同源策略禁止读取位于 https://xxxxxxx 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin' ...
- 021_supervise进行管理利器
一.公司的类似ansible的工具也是用supervise管理的 [admin@mjyall-test-1 /service/ansible-oc-agent]$ ps -ef|grep 19070 ...
- Ubuntu18 输入法fcitx安装
默认iBus非常难用 1.安装fcitx终端输入fcitx提示程序尚未安装.使用命令安装sudo apt-get install fcitx-bin相关的依赖库和框架都会自动安装上.2.安装输入法su ...
- OpenStack实践系列②认证服务Keystone
OpenStack实践系列②认证服务Keystone 三.实战OpenStack之控制节点3.1 CentOS7的时间同步服务器chrony 下载chrony # yum install -y chr ...
- python习题实例(上)_update18/07/03
用以记录python学习过程中做过的小习题~ ヾ(◍°∇°◍)ノ゙ 1.生成两个列表,分别存放将100以内的偶数&奇数 odd_number=[] even_number=[] for i i ...
- [C]内存管理、内存泄露、堆栈
原文地址:https://www.cnblogs.com/youthshouting/p/4280543.html,转载请注明源地址. 1.内存分配区间: 对于一个C语言程序而言,内存 ...
- yum报错:Error: Multilib version problems found. This often means that the root
使用yum安装一些依赖库报错: yum -y install gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel 错误信 ...
- JsonResponse
1.JsonResponse class JsonResponse(data, encoder=DjangoJSONEncoder, safe=True, json_dumps_params=None ...