肉渣教程

JS String字符串

上一节 下一节

概览 - String类型

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

字符串类型 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" ]

运行一下


JS String字符串

上一节 下一节