概览 - String类型

先快速浏览一下String字符串类型对象的属性以及方法：

• 获取字符串长度 Length
• 字符串转义字符
• indexOf() 方法 - 返回子串第一次出现的起始位置
• lastIndexOf() 方法 - 返回子串最后一次出现的起始位置
• search() 方法 - 返回子串第一次出现的起始位置
• slice( start, end ) - 根据起始和结束位置截取字符串
• substring( start, end ) - 根据起始和结束位置截取字符串
• substr( start, length ) - 根据起始位置，截取指定长度的字符串
• replace()方法 - 字符串替换匹配子串
• toUpperCase()方法 - 将字符串内所有小写字母变成大写字母
• toLowerCase()方法 - 将字符串内所有大写字母变成小写字母
• concat()方法 - 连接字符串
• trim()方法 - 清空首尾部分所有的空格
• 获取字符串中的某个字符
• split()方法 - 根据分隔符号对字符串进行分割

字符串类型 String

字符串是由0个或1个或多个字符构成的。下面这些对象都是字符串类型：

var slogan1 = "fan qing fu ming";
var slogan2 = "反清复明";
var slogan3 = "It's cool!";  // 使用双引号（内部可有单引号）
var slogan4 = 'Please call me "Jerk"!';  // 使用单引号（内部可有双引号）
var slogan5 = "";  // 空字符串也是ok的

运行一下

获取字符串长度 Length

通过String字符串类型的对象，可以通过该对象的length属性获取字符串长度。

var s1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var s1_length = s1.length;  // 等于26
var s2 = "反清复明";
var s2_length = s2.length;  // 等于4

运行一下

字符串转义字符

假设一个字符串中要同时包含单引号和双引号，那该怎么办呢？用转义符号来代替就好啦~

var s = "He said, \"I\'m a jerk!\"";

运行一下

常用的转义字符如下：

转义字符	意义
\'	单引号
\"	双引号
\\	反斜杠
\b	Backspace退格
\f	Form Feed换页
\n	换行
\r	回车
\t	水平制表
\v	垂直制表

Object类型的字符串（不推荐）

如下所示，分别用两种不同的方式来创建字符串，看看有何不同呢：

var x = "Jerk";
var y = new String("Jerk");  // 可行，但极其不推荐使用

// typeof x 会返回x的数据类型为string
// typeof y 会返回y的数据类型为object

运行一下

---

new String()的方式创建字符串，可行，但是极其不推荐。不仅是会占用更多浏览器资源，更是因为Object类型的数据是无法进行正常的比较，同时Object类型的数据比较时，总会返回false；在此就不多举例子了，总之，记住！放弃使用new String()这种方式吧！！！！！！！！

---

indexOf() 方法 - 返回子串第一次出现的起始位置

indexOf()方法是返回的是该字符串中指定子串第一次出现的索引位置，字符串中若不存在指定子串，则返回-1。

var str1 = "I am a jerk! a jerk!";
var pos1 = str1.indexOf( "jerk" );  // 会返回7

var str2 = "反清复明";
var pos2 = str2.indexOf( "反" );  // 会返回0

var str3 = "I am a jerk!";
var pos3 = str3.indexOf( "dog" )  // 不存在dog子串，返回-1

运行一下

lastIndexOf() 方法 - 返回子串最后一次出现的起始位置

lastIndexOf()方法是返回的是该字符串中指定子串最后一次出现的索引位置，字符串中若不存在指定子串，则返回-1。

var str1 = "I am a jerk! a jerk!";
var pos1 = str1.lastIndexOf( "jerk" );  // 会返回15

var str2 = "反清复明";
var pos2 = str2.lastIndexOf( "反" );  // 会返回0

var str3 = "I am a jerk!";
var pos3 = str3.lastIndexOf( "dog" )  // 不存在dog子串，返回-1

运行一下

search() 方法 - 返回子串第一次出现的起始位置

search()方法可返回该字符串中指定子串第一次出现的索引位置，字符串中若不存在指定子串，则返回-1。

var str1 = "I am a jerk! a jerk!";
var pos1 = str1.search( "jerk" );  // 会返回7

var str2 = "反清复明";
var pos2 = str2.search( "反" );  // 会返回0

var str3 = "I am a jerk!";
var pos3 = str3.search( "dog" )  // 不存在dog子串，返回-1

运行一下

indexOf()方法 和 search()方法 对比

通过上述的例子可以看出，search()方法似乎和indexOf()方法很像，确实很像，但是，indexOf()方法比search()方法更加强大：

• indexOf()方法可以接受更多的参数，能玩出更多的花样
• indexOf()方法可以接受正则表达式

因此，尽量习惯去用indexOf()方法就好啦~

---

截取字符串

JavaScript中有如下三种方法来截取字符串以获得指定子串：

• slice( start, end )
• substring( start, end )
• substr( start, length )

---

slice() 方法

slice()方法可以根据起始的索引位置，来截取字符串以获得指定字符串子串。

slice()方法语法：

slice( start, end )

该方法有2个参数，start代表待截取子串的开始位置（该索引位置的字符会包含在子串内被截取），end代表待截取子串的结束位置（该索引位置的字符不会被包含在子串中）。start是必选参数，end是非必须参数，如果end参数缺省，就从start开始，截取字符串的剩下部分。（包含start位置的字符）

另外，start和end都可以是负整数，则代表从后向前计算索引位置。

var str1 = "zhuanfou.com";
var res1 = str1.slice(5, 8);   // 会返回fou

var str2 = "zhuanfou.com";
var res2 = str2.slice(5, -4);  // 会返回fou

var str3 = "zhuanfou.com";
var res3 = str3.slice(5);      // 会返回fou.com

运行一下

substring() 方法

substring()方法与slice()方法近乎相同，唯一不同的substring()方法，不接受负整数作为参数。

var str1 = "zhuanfou.com";
var res1 = str1.substring(5, 8);   // 会返回fou

var str2 = "zhuanfou.com";
var res2 = str2.substring(5, 6);  // 会返回f

var str3 = "zhuanfou.com";
var res3 = str3.substring(5);      // 会返回fou.com

运行一下

substr() 方法

substr()方法可以根据开始的索引位置，来截取指定长度的子串。

substr()方法语法：

substr( start, length )

该方法有2个参数，start代表待截取子串的开始位置（该索引位置的字符会包含在子串内被截取），length代表欲截取子串的长度。start参数是必选参数，length参数是非必须参数；若length参数缺省，则从start位置开始，截取字符串的剩下部分。

start参数可以是负整数，则代表从后向前计算索引位置。

var str1 = "zhuanfou.com";
var res1 = str1.substr(5, 3);   // 会返回fou

var str2 = "zhuanfou.com";
var res2 = str2.substr(-7, 3);  // 会返回fou

var str3 = "zhuanfou.com";
var res3 = str3.substr(5);      // 会返回fou.com

运行一下

---

replace()方法 - 字符串替换匹配子串

replace()方法可以将原字符串中指定子串替换成另外一个子串，然后返回新的字符串。（但是，原字符串不会发生改变，只是返回一个新的替换过的字符串）

var str1 = "反清复明 Fan Qing Fu Ming";
var str2 = str.replace( "Fan Qing Fu Ming", "干翻传销" );

运行一下

注意！默认情况下，replace()方法只会替换第一个符合匹配的子串。

var str1 = "反清复明 Fan Qing Fu Ming Fan Qing Fu Ming";
var str2 = str.replace( "Fan Qing Fu Ming", "干翻传销" );

运行一下

如果想一次性替换所有的子串，可以用正则表达式/要替换的词/g搞定。（该正则表达式的含义是全局匹配）

var str1 = "反清复明 Fan Qing Fu Ming Fan Qing Fu Ming";
var str2 = str.replace( /Fan Qing Fu Ming/g, "干翻传销" );

运行一下

默认情况下，replace()方法对大小写是敏感的，但可以通过正则表达式/要替换的词/i的方式强行无视大小写。

var str1 = "反清复明 Fan Qing Fu Ming";
var str2 = str.replace( /FAN QING FU MING/i, "干翻传销" );

运行一下

---

JS字符串的大小写转换

通过toUpperCase()方法可以把字符串中所有的小写字符全都替换成大写字母。

var text1 = "Hello Zhuanfou!";    // String
var text2 = text1.toUpperCase();  // text2是把text1而转换成全部大写的结果

运行一下

通过toLowerCase()方法可以把字符串中所有的大写字符全都替换成小写字母。

var text1 = "Hello Zhuanfou!";    // String
var text2 = text1.toLowerCase();  // text2是把text1而转换成全部小写的结果

运行一下

---

concat()方法 - 连接字符串

concat()方法可用来连接两个或者更多字符串：

var text1 = "反清复明";
var text2 = "干翻传销";
var text3 = text1.concat(" ", text2);  // text3会等于"反清复明 干翻传销"

运行一下

当然也可以直接用加号来搞定连接字符串的事情：

// 这两种方式是效果是一样的
var text1 = "反清复明" + " " + "干翻传销" + " 666!";
var text2 = "反清复明".concat(" ", "干翻传销", " 666!");

运行一下

---

trim()方法 - 清空首尾部分所有的空格

trim()方法可以清除指定字符串首尾部分所有的空格。看例：

var str = "  反清复明 干翻传销        ";
alert( str.trim() );

运行一下

---

IE8及以下版本不支持trim()方法，可用str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '')这种正则表达式的方式达到同样目的。但是呢？汝需要去妥协呢？汝不需要去妥协！落后的东西就该消亡，不应该让千千万万的前端工程师都耗费精力在兼容IE8上；如果用户依然使用IE8，他就应该为使用过时的浏览器而付出代价，而不是让开发者来迁就；开发者的使命是创造。

---

获取字符串中的某个字符

有三种方式获取字符串中的某个字符（下方的i代表指定字符的索引位置）：

• charAt(i)方法
• charCodeAt(i)方法
• str[i]

---

charAt() 方法

charAt()方法会返回字符串指定索引位置的字符。

var str = "zhuanfou.com";
str.charAt(0);  // 返回字符z

运行一下

charCodeAt() 方法

charCodeAt()方法会返回字符串指定索引位置的字符的ASCII码值。

var str = "zhuanfou.com";
str.charCodeAt(0);  // 返回字符z的ASCII码值

运行一下

str[i]

最佳实践方式就是直接使用str[i]这种写法即可，i为指定字符的索引。

var str = "zhuanfou.com";
str[0];    // 返回字符z

运行一下

但是要注意，这种方式只能获取指定字符，但是无法赋值与修改这个位置的字符。

var str = "zhuanfou.com";
str[0] = "k";  // 呵呵，没用的，赋值不会成功的
str[0];    // 返回字符z

运行一下

---

split()方法 - 根据分隔符号对字符串进行分割

split()方法可以根据指定分隔符号对字符串进行分割，分割处理得到的结果，以Array数组的形式返回结果。

var txt1 = "a,b,c,d,e";   
txt1.split( "," );  // 会返回[ "a", "b", "c", "d", "e" ]

var txt2 = "a|b|c|d|e";   
txt2.split( "|" );  // 会返回[ "a", "b", "c", "d", "e" ]

var txt3 = "a b c d e";   
txt3.split( " " );  // 会返回[ "a", "b", "c", "d", "e" ]

var txt4 = "a反清复明b反清复明c反清复明d反清复明e";   
txt4.split( "反清复明" );  // 会返回[ "a", "b", "c", "d", "e" ]

var txt5 = "a,b,c,d,e,";   
txt5.split( "," );  // 会返回[ "a", "b", "c", "d", "e", "" ]

运行一下

若代表指定分隔符号的参数为空字符串""，则字符串会被分隔成每个单独的字符而构成的数组。

var txt1 = "abcde";   
res = txt1.split( "" );  // 会返回[ "a", "b", "c", "d", "e" ]

var txt2 = "zhuanfou";
res = txt2.split( "" );  // 会返回[ "z", "h", "u", "a", "n", "f", "o", "u" ]

运行一下