JavaScript 字符串方法大全

数组和字符串是笔试题中出现频率最高的两种数据类型，在上一篇博文，我对JavaScript 数组的方法进行了总结，这篇博文我将对字符串的方法进行总结，由于字符串和数组的方法具有相似性，读者可以对比阅读。

String 类型提供了很多方法，用于辅助完成对字符串的解析和操作。操作字符串的方法主要有以下：

1. charAt() 和 charCodeAt()
2. indexOf() 和 lastIndexOf()
3. concat()
4. slice()
5. substr()
6. substring()
7. trim()
8. toLowerCase() 和 toUpperCase()
9. match()
10. search()
11. replace()
12. split()
13. localeCompare()
14. fromCharCode()

下面分别介绍各个方法的具体使用方法。

1、charAt() 和 charCodeAt()

charAt()：接收一个参数：索引位置，返回指定索引位置的字符。需要注意的是：在JavaScript中没有char类型，所以返回的返回的是长度为1的字符串。

charCodeAt()：与charAt()方法类似，不过返回的不是字符而是对应索引位置的字符编码。

var str = "hello world";
console.log(str.charAt(4)); // o

console.log(str.charCodeAt(4)); //111

console.log(str[4]); //o

上述代码通过charAt(4)找到索引为4处的字符“o”，通过charCodeAt(4)找到索引为4处字符“o”的字符编码“111”。 ES5 还定义了另一个访问个别字符的方法，可以使用方括号加数字索引来访问字符串中的特定字符。

2、indexOf() 和 lastIndexOf()

indexOf()：在一个字符串中从字符串的开头向后搜索给定的子字符串，然后返子字符串的位置（如果没有找到该子字符串，则返回-1）。

lastIndexOf()：作用与indexOf()一样，不同的是lastIndexOf()从字符串的末尾向前搜索子字符串。

这两个方法都可以接收两个参数：第一个是需要搜索的子字符串，第二个是从字符串中的哪个位置开始搜索（可选）。

var str = "hello world";

console.log(str.indexOf("l")); //2
console.log(str.lastIndexOf("l")); //9

console.log(str.indexOf("l",4)); //9
console.log(str.lastIndexOf("l",4)); //3

3、concat()

concat()：用于将一或多个字符串拼接起来，返回拼接得到的新字符串。可以接收多个参数，表示需要拼接的字符串。

var str = "hello world";
var strConcat = str.concat("!"," Welcome to my blog!");
console.log(str); // hello world （原字符串不变）
console.log(strConcat); // hello world! Welcome to my blog!

在实际应用中，如果要拼接字符串，我们最常用到的还是加号操作符“+”，这种方法比concat()更简便。

var str = "hello world";
var strConcat2 = str + "!" + " Welcome to my blog!";
console.log(strConcat2); // hello world! Welcome to my blog!

4、slice()

slice()：从字符串中截取一段子字符串，接收两个参数：第一个参数指定子字符串的开始位置，第二个参数指定的是子字符串最后一个字符后面的位置（如果没有指定第二个参数，则一直到字符串结尾）。该方法对原字符串没有影响。

var str = "hello world";
console.log(str.slice(2)); //llo world
console.log(str.slice(2,8)); //llo wo

console.log(str.slice(-9)); //llo world
console.log(str.slice(2,-3)); //llo wo

上述代码中，当传入的参数为负数时，会将该负数加上字符串的长度转换成正数，再进行截取。如果传入的负数的绝对值大于字符串的长度，则用0替代。

5、substr()

substr()：也是从一个字符串中截取一段子字符串，该方法也接收两个参数：一个也是截取的起始位置，第二个参数是截取的子字符串长度（如果不设置的话，截取到字符串最后）。该方法对原字符串没有影响。

var str = "hello world";
console.log(str.substr(2)); //llo world
console.log(str.substr(2,8)); //llo worl

console.log(str.substr(-9)); //llo world
console.log(str.substr(-9,8)); //llo worl
console.log(str.substr(-9,-8)); // 空字符串

当传入两个参数时，第二个参数表示截取子字符串的长度。当第一个参数传入的是负数时，同样将其加上字符串的长度转化成正数，但是第二个参数代表截取字符串的长度，如果传入的是负数，则截取的是空字符串。

6、substring()

substring()：同样是从字符串中截取一段子字符串，接收的参数也和slice()一样，但是如果传入的参数是负数时，处理方式与slice()不一样。该方法对原字符串没有影响。

var str = "hello world";
console.log(str.substring(2)); //llo world
console.log(str.substring(2,8)); //llo wo

console.log(str.substring(-9)); //hello world
console.log(str.substring(-9,8)); //hello wo
console.log(str.substring(-9,-8)); // 空字符串

当传入参数为正数时，结果与slice()方法一样。如果传入的参数是负数时，不论负数为多少，都将负数转变为0。

7、trim()

trim()：该方法是ES5新增方法，用来删除字符串前置及后缀的所有空格。

var str = "   hello world   ";
var strCopy = str.trim();
console.log(str); //"   hello world   "
console.log(strCopy); //"hello world"

由于是ES5新增的方法，使用时需要注意浏览器的兼容性：目前支持这个方法的浏览器版本有IE9+、 Firefox 3.5+、 Safari 5+、 Opera 10.5+和 Chrome，另外，Firefox 3.5+、 Safari 5+和 Chrome 8+还支持非标准的 trimLeft()和 trimRight()方法，分别用于删除字符串开头和末尾的空格。

8、toLowerCase() 和 toUpperCase()

toLowerCase() ：将整个字符串转成小写字母。
toUpperCase()：将整个字符串转成大写字母。

另外还有两个方法：toLocaleLowerCase()和 toLocaleUpperCase()方法则是针对特定地区的实现。对大部分地区来说，针对地区的方法与其通用方法得到的结果相同，但少数语言（如土耳其语）会为 Unicode 大小写转换应用特殊的规则，这时候就必须使用针对地区的方法来保证实现正确的转换。因此，在不知道自己的代码将在哪种语言环境中运行的情况下，还是使用针对地区的方法更稳妥一些。

var str = "HellO WoRlD"; 
console.log(str.toLowerCase()); //hello world
console.log(str); //HellO WoRlD(原字符串不变)
console.log(str.toLocaleLowerCase()); //hello world

console.log(str.toUpperCase()); //HELLO WORLD
console.log(str.toLocaleUpperCase()); // HELLO WORLD

9、match()

match()：检查一个字符串是否匹配一个正则表达式。只在第一个匹配发生被返回。如果没有找到匹配，将返回空值。

var myString = "welcome to my blog blog blog...";
var myPattern = /.og/;
var myResult = myString.match(myPattern); 
console.log(myResult);// ["log", index: 15, input: "welcome to my blog blog blog..."] 
console.log(myResult[0]); // "log"
console.log(myResult.index);// 15 
console.log(myResult.input);// "welcome to my blog blog blog..."

var myPattern2 = /.oog/;
var myResult2 = myString.match(myPattern2);
console.log(myResult2); //null

上述代码中的 match()方法返回了一个数组：数组的第一项是与整个模式匹配的字符串，第二项是该匹配字符串的索引，第三项是原始输入的字符串。该方法与 RegExp 对象的 exec()方法相似。有关正则表达式的内容将在下一博文中介绍。

10、search()

search()：该方法与 match()方法类似，传入一个字符串或一个正则表达式，来进行匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。与match()方法不同的是：search()方法只返回一个数值而不是一个数组。

var myString = "welcome to my blog blog blog...";
var myPattern = /.og/;
var myResult = myString.search(myPattern); 
console.log(myResult);// 15

11、replace()

replace()：用来查找匹配的字符串，然后使用新字符串代替匹配的字符串。这个方法接受两个参数：第一个参数可以是一个 RegExp 对象或者一个字符串（这个字符串不会被转换成正则表达式），第二个参数可以是一个字符串或者一个函数。

如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，唯一的办法就是提供一个正则表达式，而且要指定全局（g）标志。

var str = "cat, bat, sat, fat";
var result = str.replace("at", "ond");
console.log(result); //"cond, bat, sat, fat"
result = str.replace(/at/g, "ond");
console.log(result); //"cond, bond, sond, fond"

replace()方法的第二个参数也可以是一个函数。该函数接受 3 个参数：模式的匹配项、模式匹配项在字符串中的位置和原始字符串。

var str = "cat, bat, sat, fat";
str.replace("at", function(match, index, originalText){
    console.log(match+":"+index+":"+originalText);
});
// at:1:cat, bat, sat, fat

str.replace(/at/g, function(match, index, originalText){
    console.log(match+":"+index+":"+originalText);
});
// at:1:cat, bat, sat, fat
// at:6:cat, bat, sat, fat
// at:11:cat, bat, sat, fat
// at:16:cat, bat, sat, fat

12、split()

split()：基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。该方法是将字符串转成数组常用的方法。split()方法接收两个参数：第一个参数是分隔符，可以是字符串，也可以是一个 RegExp 对象（这个方法不会将字符串看成正则表达式）；第二个参数是返回数组的大小。

var str = "cat, bat, sat, fat";
var strArr = str.split(",");
console.log(strArr); // ["cat", " bat", " sat", " fat"]
var strArr2 = str.split(",",2);
console.log(strArr2); // ["cat", " bat"]

13、localeCompare()

localeCompare()：比较两个字符串，并根据比较结果返回一个值。该方法接收一个参数，即要与之比较的字符串参数。

• 如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（大多数情况下是-1）
• 如果字符串等于字符串参数，则返回 0；
• 如果字符串在字母表中应该排在字符串参数之后，则返回一个正数（大多数情况下是 1）

var str = "sean";
console.log(str.localeCompare("lily")); // 1
console.log(str.localeCompare("sean")); // 0
console.log(str.localeCompare("Tom"));  // -1

14、fromCharCode()

fromCharCode()：接收一或多个字符编码，然后将它们转换成一个字符串。该方法是String 构造函数本身的静态方法。该方法与前面介绍的charCodeAt()方法作用正好相反。

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