JavaScript--String的常用方法

272 阅读10分钟

charAt方法

var str = "abc";
console.log(str.charAt(1));//b
console.log(str[1])//b

String.charAt(index) == String[index]
charAt方法,其实和字符串的下标值是差不多的。全是返回当前下标的字符。有一点点的细微差别就是,当index超出范围的时候,一个是undefined,一个是空字符串:

var str = "abc";
console.log(str.charAt(4));//undefined
console.log(str[4])//""

请注意,charAt方法不能改变原字符串。

charCodeAt方法

和charAt方法,不同的是,这种方法不是返回原字符。而是返回原字符的Unicode码。
请注意,charCodeAt方法不能改变原字符串。

concat方法

String.concat(String1,String2,String3,...);

用来连接一个字符串或者多个字符串。注意点主要有两个,一个是无缝连接,一个是返回一个全新的字符串。

var str = "a"
str.concat("b","c")//abc

如果存在哪个参数不是字符串,首先会先转化成字符串。
请注意,concat方法不能改变原字符串。

indexOf方法

String.indexOf(String[,index])

indexOf方法就是要匹配的字符串是否是String的子字符串。如果是,就返回对应的index下标。如果不是就返回-1.不过值得一提的是,这个index的值。

indexOf方法中index值的情况

  • index取正常值([0,String.length-1])
    这种情况下,就是取哪从哪开始匹配。
  • index取小于0的数
    **请注意这种情况下,都当作0处理,并不是倒着数,比如说不是-1是string的最后一个字符。 **
  • index取大于String.length-1的数
    一律当作大于String.length-1来处理。
var str = "abbbc"//undefined
str.indexOf("b",-1)//1
str.indexOf("b",555)//-1
str.indexOf("b",2)//2

indexOf方法检索的顺序

indexOf方法检索的顺序是从左到右的。

lastIndexOf方法

这个方法和indexOf方法是一样一样的,只不过它的检索顺序是从右往左的,并且它的默认起始位置是String.length-1,而index方法的起始位置是0.

slice方法

String也存在slice方法。用于截取字符串的一个副本。

slice的index形式

不传index

var str = "abc";
var str1 = str.slice();//abc

不传参数返回的是一个全新的一模一样的副本。相当于是从0位置,到最后一个位置的复制。

传一个index

var str = "abc";
str.slice(-1);//c

意思是从目标的index一直复制到结尾。

传两个index

var str = "abc";
str.slice(1,2);//b

传两个index,就是进行前后的限制,**但是务必要注意,这是一个前闭后开的区间。**比如,这里,index=2对应的c,是不会截取的。

slice方法中index的取值

和刚刚的indexOf方法中的index参数不同,slice方法的index是允许负参数的。负参数表示倒着数(部分负参数)。

  • index < -str.length
    这种情况当0处理就行了。
  • index∈[-str.length,-1]
    这种情况就倒着取,-1对应最后一个,-str.length对应第一个。
  • index∈[0,str.length-1]
    这种情况就是一般的情况了,对应哪个取哪个。
  • index >= str.length
    就当作大于等于str.length即可。

slice方法的注意点

  • slice方法不会改变原字符串。
  • ** slice方法的截取顺序是从左到右的。例如:**
var str = "abc"
str.slice(2,1);//空字符串

substr方法

String.substr([index[,length]]);

也是截取字符串的方法。
当他不传入任何参数的时候,就相当于完全复制了原来的字符串。

substr方法中的index值

substr方法中的index值也是可以取正,取负,取0.代表开始的位置。规则和slice的index值一致:(没有设置第二个参数,默认是截取完。)

  • index < -str.length
    这种情况当0处理就行了。
  • index∈[-str.length,-1]
    这种情况就倒着取,-1对应最后一个,-str.length对应第一个。
  • index∈[0,str.length-1]
    这种情况就是一般的情况了,对应哪个取哪个。
  • index >= str.length
    就当作大于等于str.length即可。

substr方法中的length值

  • length的值小于等于0,那么就是截取一个空字符串。
  • length的值大于0,是多少截取多少。

同样,substr方法只会返回一个新字符串,不会改变字符串。

substring方法

String.substring([index[,index]]);

没有参数的话,就是复制一个字符串了。
这种方法非常类似slice方法。但是还是几点区别的。

和slice方法的区别

  • index只能是非负数。如果是负数/NaN的话,默认转成0.
  • slice方法只能是从左到右,就是说边界字符对应的下标值,左边一定要大于右边。否则为空字符串。而substring方法,并不是这样的,它可以任意方向。直接看例子:
var str = "abc";
str.slice(2,1)//""空字符串
str.substring(2,1)//"b"
str.substring(1,0)//"a"

请注意哦,这里并不是左闭右开哦,而应该是前闭后开。 左闭右开就是说(2,1)应该是2显示,1不显示。那么就应该是"c"。但是实际上是'b'.那就说明是越靠近字符串右边的不显示。所以应该是左闭右开!!!
同样,substring方法只会返回一个新字符串,不会改变字符串。

split方法

split就是将字符串以切割符为标准切割成数组。

var str = "1ab2ab3ab4."
str.split("ab")// ["1", "2", "3", "4."]

这个用的还是超级多的,并且特别简单。
同样,split方法只会返回一个新字符串,不会改变字符串。

toUpperCase方法和toLowerCase方法

var  str = "AbC";
str.toUpperCase();//ABC
str.toLowerCase();//abc

就是将整个字符串中的所有字母转成大写或者转成小写。
同样,toUpperCase/toLowerCase方法只会返回一个新字符串,不会改变字符串。

match方法

String.match(String|RegExp);

match方法的参数通常是正则对象。如果不是正则对象,也会通过new RegExp()转成正则对象。所以String的形式,就可以理解成new RegExp(String)的一个正则对象。

正则表达式如果是不全局匹配的话

那么返回的是一个数组,并且这个数组和exec方法的返回值是一模一样:如果没有匹配到对应结果,那么都返回null,如果有匹配值返回一个数组。这个数组有一些特有的属性:

  • groups 对象,属性名:具名捕获组。属性值:具名捕获组匹配到的字符串。
  • input 进行匹配的字符串
  • index 匹配到的字符串的index下标

数组的元素也有说法:
第一个元素是匹配到的子字符串
第二个元素是第一个捕获组匹配到的子字符串,后面的依次类推。 (这里的情况和正则的exec方法非常像,如果不懂可以直接去看我的那篇文章。)
对于一个不全局匹配的正则对象,和同一个String,String调用match方法的结果,和RegExp对象调用exec方法的结果是一模一样的:

正则表达式如果是全局匹配的话

对于exec方法,返回的还是一个数组,只不过呢?会将lastIndex后移。
而对于match方法,返回的也是一个数组,只不过这个数组大有不同。这个数组的组成元素是所有的匹配结果!!而不是刚刚那种形式:

replace方法

String.replace(String/RegExp,String/function)

其实我觉得这个replace方法还是值得研究的。因为之前面试官要我做了一道题,他说是正则方向的,我后面会将他们整理到后面。

当第一个参数是String的时候

这个时候,String只会发生一次匹配。并替换。

var str = "abcacdabc"
str.replace("abc","123")
"123acdabc"

当第一个参数是一个不全局匹配的正则表达式的时候

当第一个参数是一个不全局匹配的正则表达式的时候,他也只会发生一次匹配并替换。

var str = "abcacdabc"
str.replace(/abc/,"123")
"123acdabc"

当第一个参数是一个全局匹配的正则表达式的时候

当第一个参数是一个全局匹配的正则表达式的时候,这个时候才会把字符串中所有的匹配到的子字符串替换掉。

var str = "abcacdabc"
str.replace(/abc/g,"123");//"123acd123"

当第二个参数是函数的时候

我觉得这个部分是最重要的,因为一些复杂的替换逻辑肯定是要通过函数实现的,我之前根本不知道replace方法还能传递函数,导致我的实现方法异常复杂。那么这里具体讲一下,函数的形式。
首先一点,很重要。函数的调用是每次匹配到一个子字符串,就被调用一次。也就是匹配到n个子字符串,调用n次函数。

函数的返回值

函数的返回值被当作用于替换的字符串。

函数的参数

函数的参数有点意思。一开始,我也不知道函数的参数应该是点啥,但是我知道他一定和匹配到的子字符串有关。这是一个回调函数最基本的素质。所有我专门测试了一下:

str.replace(/(?<namea>a)bc/g,(a,b,c,d,e,f)=>console.log(a,b,c,d,e,f))
// abc a 0 abcacdabc {namea: "a"} undefined
// abc a 6 abcacdabc {namea: "a"} undefined

首先会打印两次,这是因为这是一次全局匹配。并且有两个匹配项所以会执行两次这个回调函数。重点我们来注意一下他的参数情况,这里我们并不知道他有几个参数,所以我尽可能多的规定了形参。
大家有没有发现,他跟之前的match方法和exec方法的数组的元素特别特别像。对的就是这样的,所以我来总结一下,replace方法的回调函数的参数情况:

  • 第一个参数,是匹配到的那个字符串。
  • 第二个参数,是第一个捕获组匹配到的字符串,依次类推。。。。当然如果没有设置捕获组,那么第二个参数就应该是匹配到的字符串的index值。
  • 第三个参数,匹配到的子字符串的index值(就是之前的index)
  • 第四个参数,参与匹配的字符串,(就是之前的input)
  • 第五个参数, 具名匹配组组成的对象,(就是之前的groups),如果没有具名捕获组那么就是undefined,跟没传参数是一样的。

这样上面的参数应该都清楚了。我觉得这部分还是挺重要的,以后处理字符串替换问题一定用得上。

search方法

String.search(String/RegExp);

这就是进行搜索的方法,判断字符串中有没有匹配的子字符串。
没有的话,返回-1,存在的话,返回对应的index值。
值得注意的是,RegExp对象的g属性是会被自动忽略的,并且lastIndex属性会置为0.所以导致search方法永远只能匹配到第一个符合条件的子字符串。

includes方法

String.includes(String[,index]);

这个方法比较简单,就是检索String中是否存在子字符串。如果存在,返回true。不存在就返回false。
注意点:

  • 这里第一个参数只能是String,不能是正则对象
  • index值所有的负数值都会当成0处理。

startsWith方法

String.startsWith(String[,index])

就是检测字符串index处开始的位置,是不是对应的字符串。是的话,返回true,不是的话, 返回false。
注意点:

  • 这里第一个参数只能是String,不能是正则对象
  • index值所有的负数值都会当成0处理。

endsWith方法

String.endsWith(String[,length])

就是检测字符串结尾处是不是指定的字符串。不是的话,返回false,是的话,返回true. 注意点:

  • 第一个参数是String
  • 第二个参数并不是index,而是指定进行匹配的字符串的长度。默认是String.length
const str1 = 'Cats are the best!';
str1.endsWith("best");//false
str1.endsWith("best",17)/true

repeat方法

String.repeat(count);

这个方法就是创建一个重复string count次的字符串副本。
count的大小只能是[0,Infinity)
如果省略的话,count默认为0.也就是返回一个空字符串。如果count为负数是会报错的。

"abc".repeat(0)      // ""
"abc".repeat(1)      // "abc"
"abc".repeat(2)      // "abcabc"
"abc".repeat(3.5)    // "abcabcabc" 参数count将会被自动转换成整数.

valueOf方法

String.valueOf();

返回String的原始值,等同于调用String.prototype.toString方法。

trim方法

String.trim();

除去String前后端的空字符。

var str = "   s "
str.trim();//"s"

该方法不会改变原字符串。

总结

总结一下,好像只有slice方法和subtr方法的index值比较特殊。