ES6系列_5之字符串模版
1.字符串模板对比引入:
(1)之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的:
var restult= "姓名: <b>"+person.name+"</b>"
但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。
(2)于是ES6中提供了模版字符串,用`(反引号)标识,用${}将变量括起来。上面的例子可以用模版字符串写成下面这样:
·姓名: <b>${person.name}</b>·
这样的做法就简洁了很多,我们不需要再使用大量的""和+来拼接字符串和变量。
注意:如果使用模版字符串表示多行字符串,所有的空格和缩进都会被保存在输出中!!
console.log( `i,
love
you.`);
输出结果为:
2.对运算的支持:
在${}中的大括号里可以放入任意的JavaScript表达式,还可以进行运算,以及引用对象属性。
let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);
输出结果为3。
3.字符串查找
(1)查找是否存在
ES6直接用includes就可以判断,不再返回索引值。
let name="小明";
let listName="小明,小红,小张";
document.write(listName.includes(name))
结果返回:true
(2)判断开头是否存在
listName.startsWith(name)
(3)判断结尾是否存在
listName.endsWith(name)
(4)复制字符串
我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。
document.write('*'.repeat(20));
结果为:********************。
未完,待续。。。。
ES6系列_5之字符串模版的更多相关文章
- ES6系列_5之数字操作
下面是针对ES6新增的一些数字操作方法进行简单梳理. 1.数字判断和转换 (1)数字验证Number.isFinite( xx ) 使用Number.isFinite( )来进行数字验证,只要是数字, ...
- javascript的replace+正则 实现ES6的字符串模版
采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- 字符串模版,替代原来Es5的+号拼装字符串
字符串模版 这节我们主要学习ES6对字符串新增的操作,最重要的就是字符串模版,字符串模版的出现让我们再也不用拼接变量了,而且支持在模板里有简单计算操作.小伙伴们是不是已经摩拳擦掌等不急了那?那我们就开 ...
- 大白话,讲编程之《ES6系列连载》汇总
如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...
- 石川es6课程---8、字符串
石川es6课程---8.字符串 一.总结 一句话总结: · es6字符串新增两个方法:startsWith(以什么开头),endsWith(以什么结尾) · 新增反单引号:可以解析变量,可以折行:le ...
- ES6系列之项目中常用的新特性
ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...
- ES6中的模板字符串和新XSS Payload
ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
随机推荐
- Android 各API版本代码常量
Android开发中常常有版本比较这个功能,来做版本兼容或者,其他相关效果等 以下是Android 7.0版本下的源码: public static class VERSION_CODES { ...
- IEnumerable<T> 接口和GetEnumerator 详解
IEnumerable<T> 接口 .NET Framework 4.6 and 4.5 公开枚举数,该枚举数支持在指定类型的集合上进行简单迭代. 若要浏览此类型的.NET Frame ...
- Xcode6中手动添加Precompile Prefix Header
Xcode5中创建一个工程的时候,系统会自动创建一个以以工程名为名字的pch(Precompile Prefix Header)文件,开发的过程中可以将广泛使用的头文件以及宏包含在该文件下,编译器就会 ...
- 048——VUE中使用animate.css动画库控制vue.js过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 改造 Ace Admin 模板的 ace_tree 组件的 folderSelect 样式
*注:我用的Ace Admin版本为1.3.4 Ace Admin 是一个轻量,功能丰富,HTML5.响应式.支持手机及平板电脑上浏览的优秀管理后台模板. 关于tree的使用,html文件夹下tree ...
- 利用Sonar定制自定义JS扫描规则(三)——SSLR JavaScript Toolkit 使用说明
在上一篇blog中讲了在sonar中如何新增自定义的JS规则,这里面比较难的地方是XPath语句的编写,而要编写正确的XPath语句,首先要拿到语法的AST,下面我们就来介绍如何使用SSLR Java ...
- 20181009-2 选题 Scrum立会报告+燃尽图(01)
Scrum立会报告+燃尽图(01)选题 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2190 一.小组介绍 组长:刘莹莹 ...
- (转)Fiddler教程(Web调试工具)
转载地址:写得很不错的fildder教程 http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站: www.fiddler2.c ...
- HDU 1533
http://acm.hdu.edu.cn/showproblem.php?pid=1533 人和房子数量相同,每个人进房子,费用是人到房子的曼哈顿距离,求最小费用 可用最小费用最大流求解,建立虚拟的 ...
- windows 下键盘映射
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout下添加二进制键 Scancode Map完后注销后即可生效