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 相关文章推荐
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
javascript回到顶部特效
Jul 30 Javascript
详解JavaScript树结构
Jan 09 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
Vuex提升学习篇
Jan 11 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
js实现轮播图特效
May 28 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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
用PHP动态创建Flash动画
2006/10/09 PHP
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
php中文本操作的类
2007/03/17 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python读写配置文件的方法
2015/06/03 Python
Python复制文件操作实例详解
2015/11/10 Python
django 常用orm操作详解
2017/09/13 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python谱减法语音降噪实例
2019/12/18 Python
python画图常规设置方式
2020/03/05 Python
Python验证码截取识别代码实例
2020/05/16 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
财产公证书样本
2014/04/04 职场文书
企业趣味活动方案
2014/08/21 职场文书
运动会加油稿20字
2014/11/15 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
《藏戏》教学反思
2016/02/23 职场文书
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript