字符串方法总结

Posted 2020-09-23

　　前端中对字符串的操作还是非常多的，尤其是对于query string等，所以牢固掌握字符串方法还是很有必要的 ，总结如下：

1. 获取字符串长度。

var str = "hello";
console.log(str.length) // 6

 

 

2. 访问特定的字符 -- charAt()和charCodeAt()

var stringValue = "hello world";
alert(stringValue.charAt(1)); // "e"


var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); // ‘101‘

　注意： 他们接受的位置都是从0开始的。 charAt() 会返回相应的字符，而charCodeAt() 会返回相应的字符编码。

 

3. 访问特定的字符 --- 方括号加数组索引

var stringValue = "hello world";
alert(stringValue[1]); // "e"

这种使用方法除了IE8以下的浏览器不支持以外，其他的浏览器都能很好的支持。

 

 

4. 拼接字符 --- concat()方法

var stringValue = "hello";
var result = stringValue.concat(" world");
alert(result); // ‘hello world‘
alert(stringValue); // ‘hello‘

可以看到 --- 原来的字符串不会改变，而使用concat()方法之后会返回一个新的字符串。

注意： concat方法可以接受任意多个参数。 

 

5. slice、substr和substring方法

这三种方法都会返回一个字符串的子字符串，和concat一样，他们都不会改变原来的字符串。

他们都接收一个或者两个参数。第一个参数都是执行子字符串的开始位置， 第二个参数（在指定的情况下）返回的都是子字符串到哪里结束。

具体的说：slice和substring的第二个参数指定的是子字符串最后一个字符后面的位置。 而substr的第二个参数指定的则是返回的字符个数。

如果没有给这些方法传递第二个参数，那么将字符串的末尾作为结束位置。 

 

 

6. 字符串位置方法 --- indexOf()和lastIndexOf()  

这两个方法都是从一个字符串中搜索给定的子字符串，然后返回子字符串的位置。如果没有找到这个子字符串，就返回 -1。

这两个方法的区别在于：前者是从字符串的开头开始向后搜索子字符串，而lastIndexOf()方法是从字符串的末尾向前搜索子字符串。 

var str = "you are the best";
var pos = str.indexOf("are");
alert(pos); // 4

var pos = str.lastIndexOf("are");
alert(pos); // 4

可以看到，无论是使用indexOf()还是lastIndexOf()，最终得到的结果都是一样的, 即两者返回相同的位置。 

这两种方法都会接受第二个参数，这个参数表示从字符串的哪个位置开始搜索。 换句话说， indexOf()会从该参数指定的位置向后搜索，忽略该位置之前的所有字符； 而lastIndexOf() 会从指定的位置向前搜索， 忽略该位置之后的所有字符。 

 

 

7. trim方法

　　这个方法会创建一个字符串的副本并删除掉一个字符串的前置和后缀的所有空格，然后返回结果。 

　　由于 trim() 方法返回的时字符串的副本，所以原始字符串的前置和后缀空格会保持不变。IE9以下不支持，但是可以使用非标准的 trimLeft() 和 trimRight()方法来兼容。 

 

 

8. 字符串大小写转化方法 --- toLowerCase()、toLocalLowerCase()、toUpperCase()、toLocalUpperCase()

　　其中的toLowerCase()和toUpperCase()是借鉴自java.lang.String中的同名方法。 而其他两个是针对特定地区的实现。 

　　一般来说，在不知道自己的代码在哪种语言环境中运行的情况下，还是使用针对地区的方法更加稳妥一些。

 

 

9. 字符串的模式匹配方法 --- match

　　 match和RegExp的exec()方法是相同的。 match方法只接受一个参数，要么是一个正则表达式，要么是一个RegExp对象, 当然也可以是一个字符串， 如下所示：

var text = "hello world";
var res = text.match(‘world‘); // ‘world‘

　   我们还可以匹配为一个数组，如下所示：

var text = "85uuu5312uuu15uuu92666";
var res = text.match(/\d{1,5}/g);
console.log(res); //  ["85", "5312", "15", "92666"]

　　这样，我们就容易拿到这个数组了。match方法还是很好用的。

 

 

 

10. 字符串的模式匹配方法 --- search

　　这个方法同样接受的参数和match是一样的，返回的字符串中出现参数的最开始的位置，如下所示：

var text = "hat cat bat";
var pattern = /at/;
var res = text.search(pattern);
alert(res); // 1

　　即从左往右，首先遇到了hat中的at，于是返回1。

 

11.  字符串替换 ---  replace

　　首先，最简单的就是接收两个字符串作为参数，如下:

var str = "hello world";
var res = str.replace("world", "Wayne");
alert(res); // "hello Wayne"

　　当然，第一个参数还可以是一个正则表达式，如下所示：

var text = "cat, bat, sat, fat";
var res = text.replace("at", "ond");
alert(res);  // ‘cond, bat, sat, fat‘

res = text.replace(/at/g, "ond");
alert(res); // ‘cond bond sond fond‘

　　即，如果希望全部替换，就要使用正则表达式的g（全局标志）。

　　replace的第二个参数也可以是一个函数。 

 

 

12. 字符串分割 split() 方法。

　　这个方法可以基于指定的分割符将一个字符串分割成多个字符串，并将结果放在一个数组中， 分隔符可以是字符串，也可以是一个RegExp对象， split方法可以接受第二个参数，用于指定数组的大小， 以确保返回的数组不会超过既定大小。 如下所示：

var str = "45d8645d465d654d56d8";
var res = str.split("d");
alert(res); // ["45", "8645", "465", "654", "56", "8"]

res = str.split("d", 3); //  ["45", "8645", "465"]

 

 　　

13. localeCompare方法

　　这个方法接收两个字符串， 并且返回下列值中的一个：

• 如果字符串应该在字符串参数之前，返回负数（多为-1）。
• 如果字符串等于字符串参数，返回0。
• 如果字符串应该排在字符串参数之后，返回正数（多为1）。　　

 

14. fromCharCode() 方法

　　这个方法是由String构造函数所具有的。 这个方法与 charCodeAt() 是相反的执行操作。

alert(String.fromCharCode(104, 101, 108, 108, 111)); // "hello"