JavaScript 字符串常用操作小结(非常实用)
字符串截取
1.substring()
xString.substring(start,end)
substring()是最常用到的字符串截取方法,它可以接收两个参数(参数不能为负值),分别是要截取的开始位置和结束位置,它将返回一个新的字符串,其内容是从start处到end-1处的所有字符。若结束参数(end)省略,则表示从start位置一直截取到最后。
letstr='www.jeffjade.com' console.log(str.substring(0,3))//www console.log(str.substring(0))//www.jeffjade.com console.log(str.substring(-2))//www.jeffjade.com(传负值则视为0)
2.slice()
stringObject.slice(start,end)
slice()方法与substring()方法非常类似,它传入的两个参数也分别对应着开始位置和结束位置。而区别在于,slice()中的参数可以为负值,如果参数是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1指字符串的最后一个字符。
letstr='www.jeffjade.com' console.log(str.slice(0,3))//www console.log(str.slice(-3,-1))//co console.log(str.slice(1,-1))//www.jeffjade.co console.log(str.slice(2,1))//''(返回空字符串,start须小于end) console.log(str.slice(-3,0))//''(返回空字符串,start须小于end)
3.substr()
stringObject.substr(start,length)
substr()方法可在字符串中抽取从start下标开始的指定数目的字符。其返回值为一个字符串,包含从stringObject的start(包括start所指的字符)处开始的length个字符。如果没有指定length,那么返回的字符串包含从start到stringObject的结尾的字符。另外如果start为负数,则表示从字符串尾部开始算起。
letstr='www.jeffjade.com' console.log(webStr.substr(1,3))//ww. console.log(webStr.substr(0))//www.jeffjade.com console.log(webStr.substr(-3,3))//com console.log(webStr.substr(-1,5))//m(目标长度较大的话,以实际截取的长度为准)
4.split()
str.split([separator][,limit])
separator指定用来分割字符串的字符(串)。separator可以是一个字符串或正则表达式。如果忽略separator,则返回整个字符串的数组形式。如果separator是一个空字符串,则str将会把原字符串中每个字符的数组形式返回。
limit一个整数,限定返回的分割片段数量。split方法仍然分割每一个匹配的separator,但是返回的数组只会截取最多limit个元素。
letstr='www.jeffjade.com' str.split('.')//["www","jeffjade","com"] str.split('.',1)//["www"] str.split('.').join('')//wwwjeffjadecom
话说这个函数真心好用,很多时候的字符截取需求,就是依赖于某个字符;而以上三个函数都需知道其位置。我们当然可以借助indexOf等方法获取,很显然这很繁琐;而借助split则显得更轻而易举。
查找类方法
1.indexOf()&includes()
stringObject.indexOf(searchValue,fromIndex)
indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数,searchValue表示要查找的子字符串,fromIndex表示查找的开始位置,省略的话则从开始位置进行检索。
letstr='www.jeffjade.com' console.log(str.indexOf('.'))//3 console.log(str.indexOf('.',1))//3 console.log(str.indexOf('.',5))//12 console.log(str.indexOf('.',12))//-1
虽然indexOf()用来检索指定的字符串值在字符串中首次出现的位置,然而很多时候,使用它的场景在于判断字符串中是否存在指定的字符串;因此代码就会如此:
if(str.indexOf('yoursPecifiedStr')!==-1){ //dosomething }
要知道在这样的场景下,ES6语言中的includes()就显得更优雅许多;includes()方法用于判断一个字符串是否被包含在另一个字符串中,如果是返回true,否则返回false。
str.includes(searchString[,position])
searchString将要搜寻的子字符串。position可选。从当前字符串的哪个索引位置开始搜寻子字符串;默认为0。需要注意的是,includes()是区分大小写的。
'BlueWhale'.includes('blue');//returnsfalse '乔峰乔布斯乔帮主'.includes('乔布斯');//returnstrue if(str.includes('yoursPecifiedStr')){ //dosomething(这样写是不是更为人性化?Yeah,这是一个更趋向人性化的时代嘛) }
2.lastIndexOf()
stringObject.lastIndexOf(searchValue,fromIndex)
lastIndexOf()语法与indexOf()类似,它返回的是一个指定的子字符串值最后出现的位置,其检索顺序是从后向前。
letstr='www.jeffjade.com' console.log(str.lastIndexOf('.'))//12 console.log(str.lastIndexOf('.',1))//-1 console.log(str.lastIndexOf('.',5))//3 console.log(str.lastIndexOf('.',12))//12 search() stringObject.search(substr) stringObject.search(regexp)
search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置,如果没有匹配的,则返回-1。
letstr='www.jeffjade.com' console.log(str.search('w'))//0 console.log(str.search(/j/g))//4 console.log(str.search(/\./g))//3
match()方法
stringObject.match(substr)
stringObject.match(regexp)
match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
如果参数中传入的是子字符串或是没有进行全局匹配的正则表达式,那么match()方法会从开始位置执行一次匹配,如果没有匹配到结果,则返回null。否则则会返回一个数组,该数组的第0个元素存放的是匹配文本,除此之外,返回的数组还含有两个对象属性index和input,分别表示匹配文本的起始字符索引和stringObject的引用(即原字符串)。
letstr='#1a2b3c4d5e#'; console.log(str.match('A'));//返回null console.log(str.match('b'));//返回["b",index:4,input:"#1a2b3c4d5e#"] console.log(str.match(/b/));//返回["b",index:4,input:"#1a2b3c4d5e#"]
如果参数传入的是具有全局匹配的正则表达式,那么match()从开始位置进行多次匹配,直到最后。如果没有匹配到结果,则返回null。否则则会返回一个数组,数组中存放所有符合要求的子字符串,并且没有index和input属性。
letstr='#1a2b3c4d5e#' console.log(str.match(/h/g))//返回null console.log(str.match(/\d/g))//返回["1","2","3","4","5"]
其他方法
replace()方法
stringObject.replace(regexp/substr,replacement)
replace()方法用来进行字符串替换操作,它可以接收两个参数,前者为被替换的子字符串(可以是正则),后者为用来替换的文本。
如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式,那么replace()方法将只进行一次替换(即替换最前面的),返回经过一次替换后的结果字符串。
letstr='www.jeffjade.com' console.log(str.replace('w','W'))//Www.jeffjade.com console.log(str.replace(/w/,'W'))//Www.jeffjade.com
如果第一个参数传入的全局匹配的正则表达式,那么replace()将会对符合条件的子字符串进行多次替换,最后返回经过多次替换的结果字符串。
letstr='www.jeffjade.com' console.log(str.replace(/w/g,'W'))//WWW.jeffjade.com toLowerCase()&toUpperCase() stringObject.toLowerCase() stringObject.toUpperCase()
toLowerCase()方法可以把字符串中的大写字母转换为小写,toUpperCase()方法可以把字符串中的小写字母转换为大写。
letstr='www.jeffjade.com' console.log(str.toLowerCase())//www.jeffjade.com console.log(str.toUpperCase())//WWW.JEFFJADE.COM
模板字符串
这个也是ES6才引入进来的新语法,来解决传统输出String模板的蹩脚问题;其功能之强大,设计之贴心,着实令人得到极大满足感,好如久旱逢甘霖一般的舒畅。更何况,在当今MVVM前端框架大行其道的时代,使用ES6语法也是不用自己个儿去操心兼容性问题,对于塑造DomTemplate更是如虎添翼,令人爱不释手。
对于她的使用,阮一峰在ECMAScript6入门有过详细的描述以及示例,在此就不赘述。只需要明白我们可以像这样去操作了,试问爽否?
functionncieFunc(){ return"四海无人对夕阳"; } varniceMan="陈寅恪"; varjadeTalk=`一生负气成今日\n${ncieFunc()}, 语出${niceMan}的《忆故居》。 ` console.log(jadeTalk)
运行之,ChromeConsole输出结果如下:
一生负气成今日
四海无人对夕阳,
语出陈寅恪的《忆故居》。
组合其法
细看JavaScript提供的StringApi,还是有蛮多的,也有些许废弃的,也有将在未来版本会出来的;这其中不乏很多也挺有用的,譬如:charAt(x)、charCodeAt(x)、concat(v1,v2,…)、fromCharCode(c1,c2,…)等等,还有ES6对字符串的扩展,比如字符串的遍历器接口,repeat()等等,这可以参见ES6-string,这里就不多赘述。
在实际代码生产中,很多时候需要用这些提供的基本方法,来打出一套组合拳,以解决其需求所需。很显然又可以借助prototype属性,将自造的各路拳法,其归置于String对象,然后天亮啦。这一步就看个人喜好了,这里抛出一二段,以引大玉。
字符串反转
String.prototype.reverse=function(){ returnthis.split('').reverse().join('') }
去除空白行
String.prototype.removeBlankLines=function(){ returnthis.replace(/(\n[\s\t]*\r*\n)/g,'\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g,'') }
String转化为数组
1,转化为一维数组
场景是根据某子字符串转化,直接就用split就好;如果转换规则不统一,那么请自求多福吧。
letStr='陈寅恪,鲁迅,钱钟书,胡适,王国维,梁启超,吴宓,季羡林' lethallAllOfFameArr=Str.split(',') console.log(hallAllOfFameArr) //["陈寅恪","鲁迅","钱钟书","胡适","王国维","梁启超","吴宓","季羡林"]
2,转化为二维数组
String.prototype.removeBlankLines=function(){ returnthis.replace(/(\n[\s\t]*\r*\n)/g,'\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g,'') } String.prototype.strTo2dArr=function(firstSplit,secondSplit){ varcontentStr=this.removeBlankLines(), contentStrArr=contentStr.split(firstSplit), resultArr=contentStrArr.map((element)=>{ returnelement.split(secondSplit) }) returnresultArr } varstr=` 渺渺钟声出远方,依依林影万鸦藏。 一生负气成今日,四海无人对夕阳。 破碎山河迎胜利,残馀岁月送凄凉。 松门松菊何年梦,且认他乡作故乡。 ` console.log(str.strTo2dArr('\n',','))
运行之,输出结果如下:
[[‘渺渺钟声出远方',‘依依林影万鸦藏。'],
[‘一生负气成今日',‘四海无人对夕阳。'],
[‘破碎山河迎胜利',‘残馀岁月送凄凉。'],
[‘松门松菊何年梦',‘且认他乡作故乡。']]
以上所述是小编给大家介绍的JavaScript字符串常用操作小结(非常实用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!