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 相关文章推荐
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
如何使JavaScript休眠或等待
Apr 27 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中取得image按钮传递的name值
2006/10/09 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
javascript 闭包详解
2015/07/02 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python程序中设置HTTP代理
2016/11/06 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python函数式编程实例详解
2020/01/17 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
python的Jenkins接口调用方式
2020/05/12 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
优秀求职信范文分享
2014/01/26 职场文书
趣味比赛活动方案
2014/02/15 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
高考备战决心书
2014/03/11 职场文书
留学生求职信
2014/06/03 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
机关职员工作检讨书
2014/10/23 职场文书
出国签证在职证明范本
2014/11/24 职场文书
简单的辞职信模板
2015/05/12 职场文书