字符串

字符串方法一览

  1. var str="hello world";
  2. str.charAt(1) //e 返回给定位置的字符
  3. str.charcodeAt(1) //101 返回给定位置字符的字符编码
  4. str[1] //e ie8+
  5. concat() //可以接受任意多个参数拼接成新的字符串,但不会改变原字符串
  6. slice() //截取字符串,接受一或两个参数(开始位置和结束位置),接受负值时会将负值与字符串长度相加
  7. substring() //截取字符串,接受一或两个参数(开始位置和结束位置,会将较小的参数作为起始位置),接受负值时会将负的参数转换为零
  8. substr() //截取字符串,接受一或两个参数(开始位置和截取的字符个数),接受负值时会将第一个负的参数加上字符串长度,将第二个负的参数转换为0
  9. indexOf() //可接受两个参数,要查找的子字符串和查找起点(可选),找到返回位置,找不到返回-1
  10. includes() //判断是否包含指定字符串,返回布尔值
  11. lastIndexOf() //从数组的末尾开始查找
  12. trim() //删除前置和后缀的空格 返回的是字符串的副本,原始字符串不变
  13. toLowerCase() //转小写
  14. toUpperCase() //转大写
  15. toLocaleLowerCase() //转小写,针对地区的方法
  16. toLocaleUpperCase() //转大写,针对地区的方法
  17. match() //接收一个参数,正则表达式或者RegExp对象
  18. search() //接受一个正则,返回字符串中第一个匹配项的索引,没有返回-1
  19. replace() //替换字符串。接受两个参数,第一个是一个字符串或者RegExp对象,
  20. //第二个参数是一个字符串或者函数。如果第一个参数是一个字符串,
  21. //那么只会替换第一个子字符串,要想替换所有唯一的方法就是提供一个
  22. //正则表达式,指定全局g标志
  23. //replace()方法的第二个参数也可以是一个函数
  24. function(match,...,pos,originalText){
  25. match //模式的匹配项
  26. ... //正则表达式定义了多个捕获组的情况下,是第二,三...匹配项
  27. pos //模式的匹配项在字符串中的位置
  28. originalText //原始字符串
  29. }
  30. split() //分割字符串,并返回一个数组。第一个参数接受一个分隔符(可以是字符串或者RegExp对象),
  31. //可选的第二个参数用于指定返回数组的大小
  32. localeCompare() //比较两个字符串,如果字符串在字母表中应该排在字符串参数之前,返回一个负数。相等返回0,之后返回正数
  33. String.fromCharcode() //构造函数本身的静态方法,接收一个或多个字符编码,转换成字符串,与charCodeAt相反
  34. startsWith("xxx") //判断字符串是否以xxx开头,返回布尔值

比较重要的方法

1.split(字符串->数组)

split将字符串转换了数组

split可以将字符串分割为数组

  1. var str = "hello";
  2. var arr = str.split("");
  3. console.log(arr);

image.png

分割带空格间隔的字符串

  1. var str = "win or go home";
  2. var arr = str.split(" ");
  3. console.log(arr);

image.png

将字符串单词反向输出

1.将字符串转换为数组

  1. var str = "win or go home";
  2. var arr = str.split(" ");//["win","or","go","home"]

2.把里面的字符串也转换为数组

  1. arr.forEach(item=>{
  2. var smallArr = item.split(""); //[[w,i,n],[o,r],[g,o],[h,o,m,e]]
  3. })

3.然后将里面数组内容反转,并把里面的数组打开

  1. var newArr = [];
  2. arr.forEach(item=>{
  3. var smallArr = item.split("").reverse().join("");
  4. newArr.push(smallArr);
  5. })
  6. console.log(newArr);

image.png
4.把外面的数组打开

  1. var result = newArr.join(" ");

2.join(数组->字符串)

join是数组的方法

  1. /* 1.["汪峰","赵雷","房东的猫"] */
  2. /* 2. 汪峰/赵雷/房东的猫*/
  3. /* allName = "汪峰/赵雷/房东的猫" */
  4. var obj = [{name:"汪峰",age:10},{name:"赵雷",age:5},{name:"房东的猫",age:6}]
  5. var newArr = obj.map(item=>{
  6. return item.name
  7. })
  8. console.log(newArr.join("/"))

3.slice截取字符串

  1. var str = "123456";
  2. var slice_str = str.slice(0,3); //123

String.charAt() 指定位置的字符

charAt方法返回指定位置的字符,字符在字符串中的编号从零开始的位置计数。例如:

  1. let str = 'teststring';
  2. console.log(str.charAt(3)); // 输出:t

该方法也可以使用数组下标替代:

  1. console.log(str[1]); // 输出:e

如果参数为负数或大于等于字符串的长度,那么该方法返回空字符串。

String.concat() 拼接字符串

concat方法用于将一个或多个字符串与源字符串连接合并,返回一个新字符串,不改变源字符串。例如:



let str1 = ‘hello-‘, str2 = ‘world-‘, str3 = ‘thanks-‘;const newStr = str1.concat(str2, str3, str1);console.log(newStr); // 输出:hello-world-thanks-hello-

出于性能考虑,建议使用赋值操作符(+、+=)代替concat方法。

String.slice() 提取子串

slice方法用于从源字符串中取出子字符串并返回,不改变源字符串。
语法:string.slice(beginIndex[, endIndex])。从beginIndex索引处开始提取源字符串中的字符,直到endIndex索引处(可选)结束提取。注意:

  • 如果beginIndex为负值,会被当做sourceLength + beginSlice看待,也就是从末位倒数。例如: | 123 | let str = ‘abcdefghigklmnopqrstuvwxyz’;console.log(str.slice(-3)); // 输出 xyz// 这里beginIndex = str.length + (-3) = 26 - 3 = 23; 从倒数第三个开始提取字符串,得出xyz。 | | :—- | :—- |


  • endIndex省略,则会从beginIndex开始一直提取到源字符串末尾。
  • 如果endIndex为负数,则被看做是sourceLength + endLength。 | 1 | console.log(str.slice(-6, -3)); // 输出:uvw | | :—- | :—- |


注意:slice()方法提取新字符串从beginIndex开始,到endIndex结束,但是不包括endIndex的字符。例如:

1 console.log(str.slice(1, 2)); // 输出:b

beginxIndex=1的字符为b,endIndex=2处的字符为c,但是返回的新字符串为b,不是bc

String.substring() 提取子串

substringslice相似,不同的是参数的处理方式,先看语法: str.substring(indexStart[, indexEnd])。即提取从索引位置1到索引位置2处(不包括)截止的字符串。
substring处理的特殊情况:

  • 如果任一参数小于0或为NAN,则被当做0来处理。
  • 如果任一参数大于源字符串长度,则被当做源字符串长度处理。
  • 如果indexStart大于indexEnd,则执行的结果等效于两个参数调换的结果。
  • 如果indexStart等于indexEnd,则返回空。

    String.substr() 提取字符串

    substr方法用于从源字符串中提取子串,和slicesubstring方法相同。看看语法:str.substr(start[, length])substr的第二个参数是偏移量,但是substring第二个参数是源字符串的索引,即从索引start处开始,截取长度为length的字符串。如果start为负值,则被看做是源字符串的长度+start。
    substr处理的特殊情况:

  • 如果start为正值,且大于或等于字符串的长度,则返回一个空字符串

  • 如果start为负值,则处理为从字符串末尾开始的一个索引(如果start为负值,且绝对值大于字符串的长度,则处理为0.
  • 如果length为0或负值,则返回一个空字符串
  • 如果忽略length,则提取到字符串的末尾。 | 12 | const str = ‘abcdefghijklomn’;console.log(str.substr(-3)); // 输出:omn | | :—- | :—- |

String.indexOf() 查找字符串第一次出现的位置

indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置,返回结果是匹配开始的位置。如果返回-1,表示没找到:

12 const str = ‘abcdefghijklomn’;console.log(str.indexOf(‘def’)); // 输出:3

indexOf方法还可以接受第二个参数,表示从该位置开始向后匹配:

123 const str = ‘abcdefghijklomn’;console.log(str.indexOf(‘def’, 2)); // 输出3console.log(str.indexOf(‘def’, 4)); // 输出-1,没找到

第二个参数只是指定从某个位置,开始向后匹配,但里面字符的位置索引还是一样的。
lastIndexOf()方法和indexOf()方法的功能一样,但是区别是lastIndexOf从尾部开始匹配,indexOf则是从头部开始匹配;而且lastIndexOf()的第二个参数表示从该位置起向前匹配:

1234 const str = ‘01234567890123456789’;console.log(str.lastIndexOf(‘9’)); // 输出19console.log(str.lastIndexOf(‘9’, 10)); // 输出9console.log(str.lastIndexOf(‘9’, 1)); // 输出-1

String.trim() 去除字符串两侧的空白字符

trim()方法用来删除字符串两侧的空白字符,空白字符包括:空格、制表符(\t \v)、换行符(\n)、回车符(\r)。该方法生成新的字符串,源字符串不受改变。

12 const str = ‘ 01234567890123456789 \n’;console.log(str.trim()); // 输出:01234567890123456789

String.toLowerCase() 转换为小写 String.toUpperCase() 转化为大写

toLowerCase()方法将字符串的字母全部转换为小写。toUpperCase()方法将字符串的字符全部转换为大写。他们都创建新的字符串,不改变原有字符串。

123 const str = ‘To, or not to be. 2014’console.log(str.toUpperCase()); // TO, OR NOT TO BE. 2014console.log(str.toLowerCase()); // to, or not to be. 2014

String.split() 分割字符串

split方法按照给定的规则分割字符串,返回一个由分割字符串分割出来的子字符串组成的数组。该方法还可以接受第二个参数,限定返回数组的最大成员数,例如:

123 const str = ‘|test|base|coin|def|’console.log(str.split(‘|’)); // 输出:[ ‘’, ‘test’, ‘base’, ‘coin’, ‘def’, ‘’ ]console.log(str.split(‘|’, 3)); // 输出:[ ‘’, ‘test’, ‘base’ ]

需要注意的点:

  • 如果分割字符串为空字符串,则返回的数组成员是源字符串的每一个字符串
  • 如果省略分割字符串,则返回的数组只有一个源字符串
  • 如果满足分割规则的两个部分相邻(分割字符串中间没有其他字符串),则返回数组之中会有一个空字符串
  • 如果满足分割规则的部分位于字符串的开头或结尾,则返回数组的第一个或最后一个成员是一个空字符串

split方法的分割字符串也可以为正则表达式,如果分割符为包含括号的正则表达式,则每次分割符匹配时,捕获括号的结果(包括任何未定义的结果)将被拼接到输出数组中(但是并不是所有浏览器都支持此功能)。例如:

12 const str = ‘1.test;2.local;3.admin’;console.log(str.split(/(\d)/)); // 输出:[ ‘’, ‘1’, ‘.test;’, ‘2’, ‘.local;’, ‘3’, ‘.admin’ ]

String.match() 匹配子字符串

match方法用于确定源字符串是否匹配某个子字符串,返回一个数组。如果没有匹配,则返回null:

123 const str = ‘1.test;2.local;3.admin’;console.log(str.match(‘test’)); // 输出:[ ‘test’, index: 2, input: ‘1.test;2.local;3.admin’ ]console.log(str.match(‘test1’)); // 输出:null

可以看到,如果匹配成功的话,返回的数组还有index属性和input属性,分别表示匹配字符串开始的位置和原始字符串。
注意,match方法的参数需要的事一个正则表达式对象,如果传入的是一个非正则表达式对象,则会隐式调用new RegExp(obj)对象来将其转换为一个RegExp。例如:

12345 const str = ‘NaN number 33 null’;console.log(str.match(NaN)); // 输出:[ ‘NaN’, index: 0, input: ‘NaN number 33 null’ ]console.log(str.match(+33)); // 输出:[ ‘33’, index: 11, input: ‘NaN number 33 null’ ]console.log(str.match(-33)); // 输出:nullconsole.log(str.match(null)); // 输出:[ ‘null’, index: 14, input: ‘NaN number 33 null’ ]

如果正则表达式包含g标志,则该方法返回一个数组,它包含所有匹配的子字符串而不是匹配对象。捕获租不会被返回(不会返回index和input),如果没匹配到,则返回null;

12 const str = ‘NaN number 33 null 44 55’;console.log(str.match(/(\d\d)/g)); // 输出:[ ‘33’, ‘44’, ‘55’ ]

String.prototype.replace() 替换

replace()方法返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串,也可以是一个正则表达式。替换值可以是一个字符串或者一个每次匹配都要调用的函数。注意:源字符串不会改变。在进行全局的搜索替换时,正则表达式需要包含g标志。
语法:

1 str.replace(regexp | substr, newSubStr | function)

使用字符串作为参数

替换字符串可以插入下面的特殊变量名:
| 变量名 | 代表的值 |
| —— | —— |
| $$ | 插入一个$ |
| $& | 插入匹配的子串 |
| $ | 插入当前匹配的子串左边的内容 |
| $' | 插入当前匹配的子串右边的内容 |
| $n | 如果第一个参数是正则匹配,那么插入第n个括号匹配的字符串。|

1234 const str = ‘left-33-right’;console.log(str.replace(‘33’, “$&”)); // 输出:left-33-rightconsole.log(str.replace(‘33’, “$`”)); // 输出:left-left—rightconsole.log(str.replace(‘33’, “$’”)); // 输出:left—right-right

指定一个函数为参数

可以指定一个函数作为第二个参数,当匹配执行后,该函数就会执行,函数的返回值作为替换字符串。如果第一个参数为正则表达式,那么这个方法将会调用多次。函数的参数为:
| 变量名 | 代表的值 |
| —— | —— |
| match | 匹配的字符串(对应上面变量的$&)|
| p1,p2,p3…. | 如果第一个参数是正则表达式,那么pn代表第n个括号匹配的字符串。例如,正则表达式为/(\a+)(\b+)/,那么对应的p1就是匹配\a+,p2就是匹配的\b+。|
| offset | 匹配到的子字符串在源字符串中的偏移量 |
| string | 被匹配的源字符串 |

12345 const str = ‘abc12345#$%’;console.log(str.replace(/([^\d])(\d)([^\w])/, function(match, p1, p2, p3, offset, string) { return [p1, p2, p3].join(‘ - ‘);}));// 输出:abc - 12345 - #$*%

对常用的字符串操作的一个整理。
参考文章:
String 对象
MDN String