JS字符串方法总结

305 阅读5分钟

JS字符串方法.png

1. 获取字符串的长度

JavaScript中的字符串有一个length属性,该属性可以用来获取字符串的长度:

const str = 'hello';
str.length   // 输出结果:5

2. 获取字符串指定位置的值

charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值:

  • charAt() 方法获取到的是指定位置的字符;
  • charCodeAt()方法获取的是指定位置字符的Unicode值。
const str = 'hello';
str.charAt(1)      // 输出结果:e 
str[1]             // 输出结果:e 
str.charCodeAt(1)  // 输出结果:101
str.charAt(5)      // 输出结果:'' 
str[5]             // 输出结果:undefined
str.charCodeAt(5)  // 输出结果:NaN

3. 检索字符串是否包含特定序列

这5个方法都可以用来检索一个字符串中是否包含特定的序列。其中前两个方法得到的指定元素的索引值,并且只会返回第一次匹配到的值的位置。后三个方法返回的是布尔值,表示是否匹配到指定的值。

注意:这5个方法都对大小写敏感!

  • indexOf():查找某个字符串,有则返回第一次匹配到的位置,否则返回-1。
  • lastIndexOf():查找某个字符串,有则返回最后一次匹配到的位置,否则返回-1。
  • includes() :用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true,否则返回 false。
  • startsWith() :用于检测字符串是否以指定的子字符串开始。如果是返回 true,否则 false。
  • endsWith():用来判断当前字符串是否是以指定的子字符串结尾。如果是返回 true,否则 false。
let str = 'Hello world!';

str.indexOf("H")   // 输出结果:0 
str.indexOf("z")   // 输出结果:-1 

str.lastIndexOf("o")  // 输出结果:7
str.lastIndexOf("z")  // 输出结果:-1

str.includes('Hel')   // 输出结果:true

str.startsWith('Hello') // 输出结果:true
str.startsWith('Helle') // 输出结果:false
str.startsWith('wo', 6) // 输出结果:true

str.endsWith('!')       // 输出结果:true
str.endsWith('llo')     // 输出结果:false
str.endsWith('llo', 5)  // 输出结果:true

4. 连接多个字符串

concat() 方法用于连接两个或多个字符串。该方法不会改变原有字符串,会返回连接两个或多个字符串的新字符串。

let str = "abc";
console.log(str.concat("efg"));          //输出结果:"abcefg"
console.log(str.concat("efg","hijk")); //输出结果:"abcefghijk"

虽然concat()方法是专门用来拼接字符串的,但是在开发中使用最多的还是加操作符+,因为其更加简单。

5. 字符串分割成数组

split() 方法用于把一个字符串分割成字符串数组。该方法不会改变原始字符串。

let str = "abcdef";
str.split("c");    // 输出结果:["ab", "def"]
str.split("", 4)   // 输出结果:['a', 'b', 'c', 'd'] 

其实在将字符串分割成数组时,可以同时拆分多个分割符,使用正则表达式即可实现:

const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits);  // 输出结果:["apples", "bananas", "cherries"]

6. 截取字符串

  • slice():用于提取字符串的某个部分,并以新的字符串返回被提取的部分。
  • substr():用于在字符串中抽取从开始下标开始的指定数目的字符。
  • substring() :用于提取字符串中介于两个指定下标之间的字符。 这三个方法都可以对字符串进行截取,并且返回一个新的字符串,也就是不会对原字符串进行修改
let str = "abcdefg";
str.slice(1,6);   // 输出结果:"bcdef" 
str.slice(1);     // 输出结果:"bcdefg" 
str.slice();      // 输出结果:"abcdefg" 
str.slice(-2);    // 输出结果:"fg"
str.slice(6, 1);  // 输出结果:""

str.substr(1,6); // 输出结果:"bcdefg" 
str.substr(1);   // 输出结果:"bcdefg" 相当于截取[1,str.length-1]
str.substr();    // 输出结果:"abcdefg" 相当于截取[0,str.length-1]
str.substr(-1);  // 输出结果:"g"

str.substring(1,6); // 输出结果:"bcdef" [1,6)
str.substring(1);   // 输出结果:"bcdefg" [1,str.length-1]
str.substring();    // 输出结果:"abcdefg" [0,str.length-1]
str.substring(6,1); // 输出结果 "bcdef" [1,6)
str.substring(-1);  // 输出结果:"abcdefg"

substring不支持负值,其他两种方式均支持负数表示,并且是从右边第一位开始计数。substr的第二个参数是长度,这是和其他两种方式最大的不同之处。 slice的方向性比较强,永远是从start=>end对应左=>右

7. 字符串大小写转换

  • toLowerCase():该方法用于把字符串转换为小写。
  • toUpperCase():该方法用于把字符串转换为大写。
let str = "adABDndj";
str.toLowerCase(); // 输出结果:"adabdndj"
str.toUpperCase(); // 输出结果:"ADABDNDJ"

我们可以用这个方法来将字符串中第一个字母变成大写:

let word = 'apple'
word = word[0].toUpperCase() + word.substr(1)
console.log(word) // 输出结果:"Apple"

8. 字符串模式匹配

  • replace():用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
let str="Mr Blue has a blue house and a blue car";
str.replace(/blue/gi, "red");    // 输出结果:'Mr red has a red house and a red car'

如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。
  • match():用于在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]
  • search():用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,只会返回第一次匹配成功的结果。如果没有找到任何匹配的子串,则返回 -1。
let str = "abcdef";
str.search(/bcd/)   // 输出结果:1

9. 移除字符串收尾空白符

trim()、trimStart()和trimEnd()这三个方法可以用于移除字符串首尾的头尾空白符,空白符包括:空格、制表符 tab、换行符等其他空白符等,都不会修改原始字符串。

let str = "  abc  "
str.trim()    // 输出结果:"abc"
str.trimStart()   // "abc  "
str.trimEnd()   // "  abc"

10.重复一个字符串

repeat() 方法返回一个新字符串,表示将原字符串重复n次:

'x'.repeat(3)     // 输出结果:"xxx"
'hello'.repeat(2) // 输出结果:"hellohello"
'na'.repeat(0)    // 输出结果:""

11. 字符串转为数字

parseInt()和parseFloat()方法都用于将字符串转为数字。如果参数字符串的第一个字符不能被解析成为数字,则都会返回 NaN。

parseInt("  60  ")    // 输出结果: 60
parseInt("40 4years")   // 输出结果:40
parseInt("new100")     // 输出结果:NaN

parseFloat("10.00")      // 输出结果:10.00
parseFloat("10.01")      // 输出结果:10.01
parseFloat("-10.01")     // 输出结果:-10.01
parseFloat("40.5 years") // 输出结果:40.5
parseFloat("new40.5")    // 输出结果:NaN

参考资料:

1.segmentfault.com/a/119000001… 2.juejin.cn/post/701092…