ES6 学习 -- 字符串模板
ES5及以前,动态操作dom结构时,要多个字符串和变量拼接,如果不换行处理,则需要写很长的代码,不利于阅读理解,如果进行换行写入,则需要一堆的"+"号来连接文本与变量,写起来非常麻烦,如下:
var html = "<div>" + my.name + "</div>";
如果有很多个标签,那么需要很多次拼接,写起来很麻烦,并且结构复杂非常臃肿
而在ES6中,通过模板字符串,可以简单快捷的拼接字符串与变量,还可以实现换行写入,且标签的层级结构跟HTML一样,也非常清楚,如下:
let name = 'bob';
let html = `
<div>
<h1>好久不见</h1>
<span>${name}</span>
</div>
`;
**使用反引号``将需要拼接的字符串写在反引号里面,而其中的变量通过${}来引入变量即可,且在反引号的里面还可以继续使用反引号,写入其他的字符串模板,如下:
let hello = "I miss you";
let html1 = `
<div>
<h1>好久不见</h1>
<div>
`<p>${hello}</p>`
</div>
</div>
`;
ES6 学习 -- 字符串模板的更多相关文章
- es6学习笔记--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...
- es6 学习2 模板字符
es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...
- 只为粗暴看一下ES6的字符串模板的性能
网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...
- ES6中字符串模板的使用
反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...
- 前端小白-----ES6之字符串模板
前言:只要坚持就会胜利--Coldfront-小白菜 既是总结也是一种分享 分享内容:ES6 字符串模板 案例1:var Musics=[{music:"六月的雨",singer: ...
- ES6 学习 -- 字符串新增方法
1.检测字符串中是否包含某个字符 ES5方法:string.indexOf("需要检测的字符"),如果返回值为-1,则说明当前字符串中不存在这个字符,返回值不为-1,则 是当前字符 ...
- es6字符串模板总结
我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了 1.模板中的变量写在${}中,${}中的值可以 ...
- [js]es6语法: 字符串和数组的方法
s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...
- ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set
这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...
随机推荐
- springboot启动失败( No active profile set, falling back to default profiles: default)
问题: springboot启动失败( No active profile set, falling back to default profiles: default) 解决方法 在pom.xml文 ...
- elasticsearch中TermQuery查不到数据问题
在java rest client中调用elasticsearch中的数据,精准匹配的termQuery查不到数据,这个问题是java rest client客户端自带的bug,换用matchPhra ...
- Spring 学习笔记 数据绑定,校验,BeanWrapper 与属性编辑器
Spring 数据绑定,校验,BeanWrapper,与属性编辑器 Data Binding 数据绑定(Data binding)非常有用,它可以动态把用户输入与应用程序的域模型(或者你用于处理用户输 ...
- angularJS 上传multipart/form-data
var fd = new FormData();fd.append('file', vm.file);CommodityViewImport.post(fd, onSaveSuccess, onSav ...
- Servilet初步
以http://locahost:8080/......开头,或者以/开头,都是绝对路径以路径开头:相对路径 路径/路径 Servlet执行流程:(只用自己编写执行的代码,执行的细节全是tomcat封 ...
- python调用tushare获取股票月线数据
接口:monthly 描述:获取A股月线数据 限量:单次最大3700,总量不限制 积分:用户需要至少300积分才可以调取,具体请参阅本文最下方积分获取办法 注:tushare库下载和初始化教程,请查阅 ...
- <python练习题>python练习题(常练勿忘)
学了python,去面试经常出现,某个或某些库不熟悉导则想不起来怎么写,知道思路而写不出来,多半还是不够熟悉,这里就作为熟悉python的地方,多做做题,多思考. 题目1:店铺ID为00000000- ...
- 结对编程UI
GitHub:https://github.com/zsl1996/UI/commits/master 一. 实验内容 这是交付给最终用户的软件,有一定的界面和必要的辅助功能.完 ...
- keras 或 tensorflow 调用GPU报错:Blas GEMM launch failed
GPU版的tensorflow在模型训练时遇到Blas GEMM launch failed错误,或者keras遇到相同错误(keras 一般将tensorflow作为backend,如果安装了GPU ...
- ulimit - 获取和改变用户的限制设定
大纲 #include <ulimit.h> long ulimit(int cmd, long newlimit); 描述 警告: 这个函数已经被废弃. glibc 不再提供这个包含文件 ...