es6新语法系列,查找字符串,模板字符串
一、模板字符串:
ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings)。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致。在最简单的情况下,它们与普通字符串的表现一致:
拼接字符串时用``,例如:console.log(`用户 ${user.name} 未被授权执行 ${action} 操作。`)
二、for...of字符串的遍历接口
for(let i of "abc"){
console.log(i);
}
// a
// b
// c
//空格也会被遍历出来
三、includes判断是否包含某字符串,返回布尔值
与indexOf的区别:indexOf返回字符串的下标,找不到则返回-1
includes返回布尔值,只能判断是否存在
var s = "hello";
// es5
s.indexOf("o"); //
// es6
s.includes("o"); // true
s.includes("d"); // false
s.includes("h", 2); // false 从第三个字符开始找
四、startsWith 参数字符串是否在源字符串的头部,返回布尔值
格式:str.startsWith(searchString[, position])
var s = "hello world";
// es5
s.indexOf("hello"); // 0 等于0表示就在源字符串头部
// es6
s.startsWith("hello"); // true
s.startsWith("world"); // false
s.startsWith("world", 6); // true
五、endsWith 跟startsWith相反,表示参数字符串是否在源字符串的尾部,返回布尔值
格式:str.endsWith(searchString[, position])
var s = "hello world";
// es5
String.prototype.endWith=function(endStr){
var d=this.length-endStr.length;
return (d>=0&&this.lastIndexOf(endStr)==d)
}
s.endWith("world"); // true
// es6
s.endsWith("world"); // true
s.endsWith("world", 5); // false
s.endsWith("hello", 5); // true
六、repeat 将原字符串重复n次,返回一个新字符串
var s = "s";
s.repeat(3); // sss
s.repeat(2.6); // ss 小数会被取整
s.repeat(-2); // RangeError 报错
s.repeat(0); // ""
七、模板字符串 是增强版的字符串,用反引号(`)标识
它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,好处相当明显,不用再拼接字符串,使用模板字符串内部可以使用变量了。
// es5 输出模板通常是如下格式,相当繁琐还不方便
var name="Bob",time="today";
var resultStr = "hello "+name+", how are you "+time+'?'; //hello Bob, how are you today?
// es6 模板字符串
console.log(`string text line 1
string text line 2`);
//string text line 1
//string text line 2 // 直接用${变量名}表示
`Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?
// 使用表达式
var obj={a:1,b:2};
`${obj.a+obj.b}` //
// 使用函数
function fn() {
return "Hello World";
}
`this is fn return str: ${fn()}` // this is fn return str: Hello World
es6新语法系列,查找字符串,模板字符串的更多相关文章
- ES6新语法
ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...
- ES6入门五:箭头函数、函数与ES6新语法
箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...
- JavaScript——字符串——模板字符串
JavaScript--字符串--模板字符串 字符串可以用反引号包裹起来,其中的${expression}表示特殊的含义,JavaScript会将expression代表的变量的值和反引号中的其它普通 ...
- ES6新语法的介绍
对于ES6新语法,阮一峰有一篇文章介绍的挺详细 http://es6.ruanyifeng.com/#docs/destructuring
- ES6新语法之let关键字;有别于传统关键字var的使用
ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...
- ES6多行字符串+模板字符串
多行字符串 最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示: 'use strict'; // 如果浏览器支持模板字符串,将会替换字符串内部的变量: var name ...
- ES6新语法(一)
1.常量 ES5没有定义声明常量的方式,ES6标准中引入了新的关键字const来定义常量. 常量必须给初始值: 常量不能在同一作用域内重新定义或赋值: <scr ...
- es6 新语法分享给爱前端的伙伴
相信es6大家并不陌生,那么我还是简单介绍一下es6,es是15年发布的,可以用babel转化成es5可以支持低端浏览器,es6是一种新的语法,流行的库基本都是基于es6开发的.所以小伙伴要掌握哦!而 ...
- 总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
随机推荐
- umount 卸载 无响应的 NFS 文件系统
当NFS Client 无法访问 NFS Server的适合,在Client上df操作等就会挂起. 这个适合需要将挂载的NFS卸载掉.在不知道挂载点的情况下,可以使用nfsstat -m 命令来查看. ...
- IE botton 点击文字下沉
IE点击文字下沉这个应该是浏览器自带的,只要是用button标签应该都是避免不了的. 如果实在接受不了的话,用一个元素比如div.p等块级元素或者是i.b.s.u.span等行内元素.用样式去模拟bu ...
- Zigbee协议栈--Z-Stack的使用
使用方法简介:一般情况下用户只需要额外添加三个文件就可以完成一个项目.一个是主文件,存放具体的任务事件处理函数:一个是这个主文件的头文件:另外一个是以Osal开头的操作系统接口文件,是专门存放任务处理 ...
- ajax方法data参数用法的总结
源文件分析: data的传递格式有两种:一是url字符串格式:一种是Json格式,格式分别如上 区别是:当传递的参数中包含 特殊字符如:&时,服务器解析这个参数时就会出错,而必须用encode ...
- Spring Boot错误errMsg: "request:ok"
在把评论写到数据库并且动态刷新评论区的时候,有时候正常写入,有时候就会有“request:ok”的的错误出现,错误信息如下: data: {timestamp: , error: "Inte ...
- htons和htonl函数具体应用
htons和htonl函数具体应用 htons和htonl函数,是用来将主机字节顺序转换为网络字节顺序在进行网络抓包时,抓到的包的数据是网络字节顺序,在进行编程时,要进行主机字节顺序和网络字节顺序间的 ...
- rest framework 认证
一.简单认证示例 需求: 用户名密码正确:没有 token 则产生一个 token,有 token 则更新,返回登录成功: 若用户名或密码错误,返回错误信息. 1.models.py from dja ...
- sqlserver2012——INTERSECT交查询
1. select a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' 一般的查询 a.成绩编号,a.分数,b.姓名 From 成绩信息 a,学生信息 b ' order a. ...
- Hyperledger Fabric (1.0)环境部署 chaincode【转】
三.测试Fabric 其实我们在前面运行./network_setup.sh up的时候系统已经运行了一个Example02的ChainCode测试,部署上去的ChainCodeName是mycc,所 ...
- hdu1520 Anniversary party
Anniversary party HDU - 1520 题意:你要举行一个晚会,所有人的关系可以构成一棵树,要求上下级关系的人不能同时出现,每一个人都有一个rating值,要求使整个晚会的ratin ...