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 相关文章推荐
jquery随机展示头像代码
Dec 21 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
vue发送ajax请求详解
Oct 09 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
微信小程序实现文件、图片上传功能
Aug 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
使用无限生命期Session的方法
2006/10/09 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
nodejs基础应用
2017/02/03 NodeJs
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
中学生评语大全
2014/04/18 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
实验室的标语
2014/06/20 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
简单介绍Python的第三方库yaml
2021/06/18 Python