ES6中字符串string常用的新增方法小结


Posted in Javascript onNovember 07, 2017

本文实例讲述了ES6中字符串string常用的新增方法。分享给大家供大家参考,具体如下:

ES6为js新增了很多方法,包括遍历、查询、替换等等,可以很简洁的替换ES5中的类似方法,本文不考虑codePointAt等不常用方法。

for…of:

let str="wbiokr";
for(let s of str){
  console.log(s)
}
//结果:w, b, i, o, k, r

由于es5并没有为js制定字符串相关遍历方法,for…of无疑会是接下来前端开发中的一个很重要角色。

includes:

let str="wbiokr";
str.includes('wb');//结果:true
str.includes('wbiokr');//结果:true
str.includes('w',1);//false
str.includes('b',1);//true

string.includes(s,i)方法参数1为需要查询字符(串),参数2为查询的起始位置,返回布尔值,而indexOf返回查询的位置。

startsWith:

let str="wbiokr";
str.startsWith('wb');//结果:true
str.startsWith('w');//结果:true
str.startsWith('w',1);//结果:false
str.startsWith('b',1);//true
str.startsWith('kr');//结果:false

string.startsWith(s,i)方法参数1为需要查询字符(串),参数2为查询的起始位置,返回布尔值,表示是否字符(串)位于string的头部位置。

endsWith:

let str="wbiokr";
str.endsWith('kr');//结果:true
str.endsWith('r');//结果:true
str.endsWith('wb');//结果:false
str.endsWith('i',6);//false
str.endsWith('i',3);//false
str.endsWith('kr',6);//true

string.endsWith()方法参数1为需要查询字符(串),参数2为查询的起始位置,返回布尔值,表示是否字符(串)位于string的尾部位置。

repeat:

let str="wbiokr";
str.repeat(2);//wbiokrwbiokr"str被重复了2次返回,str不改变
'hi'.repeat(3);//"hihihi"
'hi'.repeat(2.6);//'hihi'浮点类型参数,会取整重复
'hi'.repeat(0);//''0的时候返回空字符串
'hi'.repeat(-3)//负数,报错
'hi'.repeat(undefined)//''undefined转化为0
'hi'.repeat(null)//''null转化为0
'hi'.repeat(NaN)//''NaN转化为0

string.repeat(num)方法,参数num为重复字符串的次数,各种情况下的返回值见代码。

${} :

let str="wbiokr";
$('#box').html('
  there is a word ${str},i know it
');
//there is a word wbiokr,i know it

开发过程中,经常用到jq为元素动态添加子元素或动态添加内容,过去我们都是通过字符串拼接进行添加变量。ES6添加的 可以很好的取代jq的老方法,单引号加上'${}'不仅可以嵌入变量,还能保持代码格式,并且{}里面可以进行js代码运行。

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

Javascript 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
vue组件间通信子与父详解(二)
Nov 07 #Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 #Javascript
You might like
phpfans留言版用到的install.php
2007/01/04 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Python中的包和模块实例
2014/11/22 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
教师年终个人自我评价
2013/10/04 职场文书
运动会入场词50字
2014/02/20 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
商场消防安全责任书
2014/07/29 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
导游词之丽江普济寺
2019/10/22 职场文书