Code Copied

JavaScript String对象

在JavaScript字符串是不可变的,String类定义的方法都不能更改字符串的内容。调用String.toUpperCase()这样的方法时,返回的都是全新的字符串,而不是修改原始字符串。

1. JavaScript的常用方法

image

1.1 charAt()方法

charAt()方法可返回指定位置的字符串,该字符串的长度为1。

语法:

stringObject.charAt(index)

参数index是必须的,index应该介于0和字符串的length之间 (index >=0并且index < string.length)。当index的值超出这个范围时,将返回一个length为0的空字符串。

示例代码:

var str = "abcdefg";

document.getElementById('result1').innerHTML = "字符串abcdefg位置3的字符是:" + str.charAt(3);

document.getElementById('result2').innerHTML = "字符串abcdefg位置3的字符是:" +  str.charAt(7); //字符串的长度为0,index的范围应该在0到6之间

结果截图:

image

1.2 charCodeAt()方法

语法:

示例代码:

结果截图:

1.3 fromCharCode()方法

charCodeAt()方法返回指定位置字符的Unicode编码。这个返回值是0 - 65535之间的整数。
该方法和charAt()方法操作类似,只不过charAt()方法返回的是指定位置的字符,而charCodeAt()返回的是字符编码。

语法:

stringObject.charCodeAt(index)

示例代码:

var str = '我在深圳';
document.getElementById('result1').innerHTML = "字符串str位置2的字符的Unicode编码是:" + str.charCodeAt(2);

结果截图:

image

1.4 concat()方法

concat()方法用于连接两个或多个字符串,并返回连接后的新字符串。参与连接的字符串都不会被改变。

当然,实际中我们几乎不会用concat()方法来连接字符串,使用”+”连接运算符会更为简便。

语法:

stringObject.concat(stringX1,stringX2,...,stringXn)

示例代码:

var str = "123";
var result = str.concat("456","789"); // result = "123" + "456" + "789";
document.getElementById('result1').innerHTML = "字符串str是:" + str + "<br />字符串result的值是:" + result;

结果截图:

image

1.5 indexOf()和lastIndexOf方法

indexOf()方法返回某个字符串值在字符串中首次出现的位置。
lastIndexOf方法返回某个字符串值在字符串中最后一次出现的位置。

这两个方法都对大小写敏感,如果要查找的字符串一次都没有出现,则返回-1。

语法:

stringObject.indexOf(searchvalue,fromindex)
stringObject.lastIndexOf(searchvalue,fromindex)

示例代码:

var str = "Hello World!Welcome to work with JavaScript!";
var i = str.indexOf('come');
var j = str.lastIndexOf('or');

document.getElementById('result1').innerHTML = "'come'字符串在字符串str中首次出现的位置是:" + i;
document.getElementById('result2').innerHTML = "'or'字符串在字符串str中最后一次出现的位置是:" + j;

结果截图:

image

image

1.6 match()方法

match()方法可以在指定字符串中查找子串,或者使用正则表达式查找子串。

语法:

stringObject.match(searchvalue)
stringObject.match(regexp)

当match()方法使用字符串匹配时,查找的是单一的字符串。
当使用正则表达式进行匹配时,查找的是字符串数组,如果正则表达式中包含g,则表示将进行全局匹配。
示例代码:

var str = "Hello World!";
var str2 = "1 plus 2 equals 3";
document.getElementById('result1').innerHTML = "字符串匹配:" +str.match('World') ;
document.getElementById('result2').innerHTML = "正则表达式匹配:" + str2.match(/\d+/) ;
document.getElementById('result3').innerHTML = "正则表达式全局匹配:" + str2.match(/\d+/g) ;

结果截图:

image

注意:在使用正则表达式进行匹配时,正则表达式的语法应该为:/\d+/g,而不要写成“/\d+/g”。正则表达式的语法是/regexp/g
javascript的正则表达式可以写到很复杂,本文仅仅描述用法,在以后的博文中我会专门用一篇来描述javascript的正则表达式。

1.7 replace()方法

replace()方法用于替换字符串中的子串或通过正则表达式替换子串,并返回替换后新的字符串。

语法:

stringObject.replace(regexp/substr,replacement)

当replace()方法使用字符串进行替换时,只会替换字符串的第一个匹配。
当使用正则表达式替换时,如果正则表达式包含g(全局),则按照正则表达式进行全局替换;正则表达式不包含g,则替换字符串的第一个匹配。
注意:replace()方法不会更改原字符串。

示例代码:

var str = "Hello World! Green World!";
document.getElementById('result1').innerHTML = "字符串替换:" + str.replace('World', 'Life');
document.getElementById('result2').innerHTML = "正则表达式替换:" + str.replace(/World/, 'Life');
document.getElementById('result3').innerHTML = "正则表达式全局替换:" + str.replace(/World/g, 'Life');

结果截图:

image

1.8 search()方法

search()方法用于查找字符串的位置,它和match(), replace()方法一样,能够通过字符串查找或正则表达式查找。
serach()方法返回的是匹配的第一个字符串的位置,如果没有找到字符串,则返回-1。

语法:

stringObject.search(regexp/substr)

示例代码:

var str = "Hello World! Green World!";
document.getElementById('result1').innerHTML = "字符串查找:" + str.search('World');
document.getElementById('result2').innerHTML = "正则表达式查找:" + str.search(/World/);
document.getElementById('result3').innerHTML = "正则表达式全局查找:" + str.search(/World/g);

结果截图:

image

1.9 slice()方法

slice()方法用于提取字符串的某个部分,并返回提取的新字符串。

语法:

stringObject.slice(start,end)

示例代码:

var str = "Hello World! Green World!";
var result = str.slice(6,15);
document.getElementById('result1').innerHTML = "提取str字符串从6到15的字符:" + result;

结果截图:

image

1.10 substring()方法

substring()方法用于截取字符串中的某一段。

语法:

stringObject.substring(start,stop)

start参数是指要截取的子串的第一个字符在stringObject中的位置,start参数是必须的(start >=0 )。
stop参数是指要截取的子串的最后一个字符在stringObject中的位置,stop是可选参数(stop >=0)。当不指定stop参数时,则截取的字符串是从start到stringObject结尾的。

注意:

substring()方法返回的包含start处的字符,但不包含stop处的字符。
subtring()方法和slice()方法看起来是一样的,但是substring()方法不接受负数参数。

示例代码:

var str = "Hello World! Green World!";
document.getElementById('result1').innerHTML = "提取str字符串从6到15的字符:" + str.substring(6,15);
document.getElementById('result2').innerHTML = "提取str字符串从6到结尾的字符:" + str.substring(6);

结果截图:

image

1.11 substr()方法

substr()方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法:

stringObject.substr(start,length)

start参数是指要截取的子串的第一个字符在stringObject中的位置,start参数是必须的(start >=0 )。
length参数是要截取的长度,可选参数。

注意:

substr()方法可用substring()和slice()方法来代替,由于ECMAscript 没有对该方法进行标准化,因此尽量不要使用substr()方法来进行字符串截取操作。

示例代码:

var str = "Hello World! Green World!";
document.getElementById('result1').innerHTML = "提取str字符串从6开始,长度15的字符:" + str.substr(6, 15);
document.getElementById('result2').innerHTML = "提取str字符串从6到结尾的字符:" + str.substr(6);

结果截图:

image

1.12 toLowerCase()和toUpperCase()方法

toLowerCase()方法是将字符串中的字母都转成小写。
toUpperCase()方法是将字符串中的字母都转成大写。
这2个方法都不会改变原始的字符串,将会返回一个转换后新的字符串。

语法:

stringObject.toLowerCase()
stringObject.toUpperCase()

示例代码:

var str = "Hello World! Green World!";
document.getElementById('result1').innerHTML = "str字符串全部小写:" + str.toLowerCase();
document.getElementById('result2').innerHTML = "str字符串全部大写:" + str.toUpperCase();

结果截图:

image