快速掌握js字符串方法

Posted 2021-10-12 蛙人

js字符串常用方法也是面试中经常遇到到问题。

话不多说，直接code一把梭

---

indexOf

indexOf该方法是字符串里最常用的,一般使用在判断情况下。

查找字符串首次出现的位置,如果找到返回该字符串的下标值,下标从0开始查找,找不到返回-1。

有很多小伙伴们，不知道indexOf第二个参数，默认可填，第二个参数理解就是从第几位开始查找, 如果找不到返回 -1

演示:

var str = \'hello 秦司令\';
console.log(str.indexOf(\'秦\')) // 6 
console.log(str.indexOf(\'a\')) // -1
console.log(str.indexOf(\'秦\', 7)) // -1

lastIndexOf

lastIndexOf跟indexOf方法一样,只不过它查找字符串最后出现的位置,同样,查找到返回下标位置,找不到为-1。

演示:

var str = \'hello 秦司令秦\';
console.log(str.lastIndexOf(\'秦\')) // 9
console.log(str.lastIndexOf(\'a\')) // -1 

可以看到上面代码中,str 字符串里面有两个 "秦" 而lastIndexOf该方法只查找最后出现的位置。

charAt

charAt该方法也跟indexOf差不多,只不过它是跟indexOf颠倒过来了。
charAt方法是查找下标,返回对应的内容,如果没有该下标,则返回空字符串。

演示:

var str = \'hello 秦司令秦\';
console.log(str.charAt(0)) // h
console.log(str.charAt(6)) // 秦 
console.log(str.charAt(19)) //空  

charCodeAt

charCodeAt是文字所存的Unicode编码,不经常使用。

演示:

var str = \'hello 秦司令秦\';
var n = \'鸟\'
console.log(str.charCodeAt()) //104
console.log(n.charCodeAt())  //40479

上面代码中,str的返回值就是它的字符串首字符串 h 在计算机内所存的编码,charCodeAt方法只查找首字符串,想要全部获取一下编码,遍历一下就行,
n的变量 "鸟" 返回值 40479 它也是在计算机内所存的编码。

String.fromCharCode

该方法跟上面的charCodeAt方法正好相反,这两方法搭配是一套,该方法是把所存的编码在转换为文字。

演示:

console.log(String.fromCharCode(104))  //h
console.log(String.fromCharCode(40479)) //鸟

substring

该方法也常用,而且还非常好使,一位参数是截取掉几位字符,二位参数是从哪个位置开始,到那个位置结束的前一位,不包括结束的位置,不会改变原字符串。

演示:

var str = \'hello 秦司令秦\';
console.log(str.substring(1))  // ello 秦司令秦
console.log(str.substring(1,2)) // e
console.log(str) // 原字符串不变

substr

substr跟substring差不多,但是该方法要比substring强大一些,它可以有负数,一位参数是截取掉几位字符,二位参数是从哪个位置开始,截取几位,不改变原字符串。

演示:

var str = \'hello 秦司令秦\';
console.log(str.substr(1))  // ello 秦司令秦
console.log(str.substr(1,2)) // el
console.log(str.substr(-4,4)) // 秦司令秦
console.log(str)  //不会改变原字符串

slice

该方法也是截取字符,它跟substring方法几乎一样,只不过该方法也可以写负数,其它的使用方式,都跟substring一样,该方法也不会改变原字符串。

演示:

var str = \'hello 秦司令秦\';
console.log(str.slice(1))  // ello 秦司令秦
console.log(str.slice(1,3)) // el
console.log(str.slice(-4,-2)) // 秦司令秦
console.log(str)  // 不会改变原字符串

split

该方法是字符串分割为数组,参数是以什么方式分割。同样不会改变原字符串。

演示:

var str = \'hello秦司令秦\';
var str1 = \'hello 秦司令\';
console.log(str.split(\'\'))  //["h", "e", "l", "l", "o", "秦", "司", "令", "秦"]
console.log(str1.split(\' \')) //["hello", "秦司令"]
console.log(str1,str) //未发生改变

上面代码中,str变量字符串是整齐的,所以参数内是默认的,然后以每个字符分割了,str1变量字符串中间有个空格,所以参数内是以空格分割了。

toLowerCase

将字符串转换为小写,不会改变原字符串。

演示:

var str1 = \'HELLO\';
console.log(str1.toLowerCase())  // hello

toUpperCase

将字符串转换为大写,不会改变原字符串。

演示:

var str = \'hello秦司令秦\';
console.log(str.toUpperCase())  //HELLO秦司令秦

replace

替换字符串,第一个值为被替换的值,第二个值为替换的值,不会改变原字符串。

演示:

var str = \'hello秦司令秦\';
console.log(str.replace(\'h\',\'秦\'))  //秦ello秦司令秦
console.log(str)  // 未发生改变

match

匹配字符串,查找到返回一个数组对象,数组对象里有 匹配的值 查找字符串的下标 和 原字符串内容,找不到返回null

演示:

var str = \'hello秦司令秦\';        
console.log(str.match(\'秦\'))  // ["秦", index: 5, input: "hello秦司令秦", groups: undefined]
console.log(str.match(\'1\'))     // null

search

该方法跟indexOf一模一样,查找字符串首次出现的位置,如果找到返回该字符串的下标值,下标从0开始查找,找不到返回-1。

演示:

var str = \'hello秦司令秦\';        
console.log(str.search(\'o\'))  //4
console.log(str.search(\'d\'))  //-1

repeat

该方法的参数是复制几遍字符串。不会改变原字符串。

演示:

var str = \'hello秦司令秦\';
console.log(str.repeat(3)) //hello秦司令秦hello秦司令秦hello秦司令秦

includes

该方法返回Boolean值,查找字符串里面有没有该值。第一位参数是 "值" , 第二位参数是下标。

演示:

var str = \'hello秦司令秦\';    
console.log(str.includes(\'秦\')) //true
console.log(str.includes(\'秦\',5)) //true
console.log(str.includes(\'啦\')) //false

startsWith

该方法返回Boolean值,查找字符串开头是不是该值。第一位参数是 "值" , 第二位参数是下标。

演示:

var str = \'hello秦司令秦\';    
console.log(str.startsWith(\'秦\')) //false
console.log(str.startsWith(\'秦\',5)) //true
console.log(str.startsWith(\'h\')) //true

endsWith

该方法返回Boolean值,查找字符串结尾是不是该值。第一位参数是 "值" , 第二位参数是下标,下标必须往后查找一位,如果要找的下标是5,就必须写6

演示:

var str = \'hello秦司令秦\';    
console.log(str.endsWith(\'秦\')) //true
console.log(str.endsWith(\'秦\',6)) //true
console.log(str.endsWith(\'h\')) //false

希望这篇文章能对你有所帮助,如有问题, 请各位大佬指出