js的引用类型之String类型

1. 概念

String类型是字符串的对象包装类型

1
2
3
4
5
6
var objectString = new String("hello world!");
console.log( objectString.valueOf() );//hello world!
console.log( objectString.toLocaleString() );//hello world!
console.log( objectString.toString() );//hello world!

console.log( objectString.length );//12

2. String类型提供的方法

用于辅助完成ECMAScript中字符串的解析和操作

2.1 字符方法

charAt() charCodeAt() []

1
2
3
4
5
var strValue = "hello world!";
console.log( strValue.charAt(1) );//e
console.log( strValue.charCodeAt(1) );//101
//输出字符编码
console.log( strValue[1] );//e

2.2 字符串操作方法

2.2.1 concat()

用于将一个或者多个字符串拼接起来,返回拼接得到的新字符串。

实践中使用更多的还是加号操作符(+)

1
2
3
var strValue = "hello";
var rst = strValue.concat(" world","!");
console.log(rst);//"hello world!"

2.2.2 三个基于子字符串创建新字符串的方法slice() substr() substring()

三个方法都会返回被操作字符串的一个子字符串,而且也都接受一或两个参数。

左闭右开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//第一个参数指定子字符串的开始位置
//第二个参数不写默认到最后
var strValue = "hello world!";
//对于slice和substring,第二个参数表示子字符串到哪里结束
console.log(strValue.slice(3, 7));//"lo w"
console.log(strValue.substring(3, 7));//"lo w"

//对于substr的第二个参数指定的则是返回的字符个数
console.log(strValue.substr(3, 7));//"lo worl"

//!!!!!!!!
//一旦传参有负数,则行为就很不一样了

var str1Value = "0123456789";
//对于slice,是字符串长度加上负参数
//相当于slice(str1Value.length-4, str1Value.length-3)
console.log(str1Value.slice(-4));//"6789"
console.log(str1Value.slice(-4,-3));//"6"

//对于substr,是第一个参数加上字符串长度,第二个负参数设置为0
//相当于slice(str1Value.length-4)
console.log(str1Value.substr(-4));//"6789"

//下面语句相当于substr((str1Value.length-4,0),即[6,0),左大右小即为空字符串
console.log(str1Value.substr(-4,-3));//""


//对于substring,是把所有负值都转换为0
//相当于substring(0)
console.log(str1Value.substring(-4));//"0123456789"

//下面语句相当于substring((0,0),即[0,0)
console.log(str1Value.substring(-4,-3));//""

ie8以及ie8之前的substr在传递负值的情况下存在问题

2.2.3 字符串位置方法indexOf() lastIndexOf()

从一个字符串中搜索给定的字符串,然后返回子字符串的位置,如果找不到,则返回-1

第一个参数是需要查找的字符串,第二个是从第几个开始查找,不设置默认为到最后

区别是一个从前向后,一个从后向前。并且都是找到就停止,不会继续再找。

1
2
var strValue = "hello world";
console.log(strValue.indexOf("o"));//4

2.2.3 trim()方法

ECMAScript5新定义的方法。会创建一个字符串的副本,删除前置以及后缀的所有空格,然后返回结果。

trimLeft() trimRight()需要高级游览器支持

2.2.4 字符串大小写转换方法

1
2
3
4
5
6
var strValue = "hello world!";
console.log(strValue.toLocaleUpperCase());//HELLO WORLD!
console.log(strValue.toUpperCase());//HELLO WORLD!
console.log(strValue);//hello world!
console.log(strValue.toLocaleLowerCase());//hello world!
console.log(strValue.toLowerCase());//hello world!

在不知道代码将在哪个地区运行时,建议使用toLocaleUpperCase() toLocaleLowerCase()

2.2.5 字符串的模式匹配方法

2.2.5.1 match()

只接受一个参数,要么是正则表达式要么是RegExp对象

本质上与调用RegExp的exec()方法相同。

返回索引值

参数与match()相同

1
2
3
4
5
6
7
8
var strValue = "cat, mat, aat";
var reg = /.at/;

var rst = strValue.match(reg);
console.log(rst);//["cat", index: 0, input: "cat, mat, aat"]

var rst1 = strValue.search(reg);
console.log(rst1);//0

2.2.5.3 replace()

第一个参数可以是RegExp对象或者一个字符串;第二个参数可以是一个字符串或者一个函数

1
2
3
4
5
var strValue = "cat, mat, aat";

console.log(strValue.replace("at", "con"));//"ccon, mat, aat"
console.log(strValue);//"cat, mat, aat"
console.log(strValue.replace(/at/g, "con"));//"ccon, mcon, acon"

如果第二次参数是字符串,还可以使用一些特殊的字符序列。
|字符序列|替换文本|
|:——|:——|
|$$|$|
|$&|匹配整个模式的子字符串。与RegExp.lastMatch的值相同|
|$’|匹配的子字符串之前的子字符串。与RegExp.leftContext的值相同|
|$`|匹配的子字符串之后的子字符串。与RegExp.rightContext的值相同|
|$n|匹配第n个捕获组的子字符串,其中n=0~9。|
|$$|匹配第nn个捕获组的子字符串,nn=01~99。|

1
2
3
var strValue = "cat, mat, aat";

console.log(strValue.replace(/(.at)/g, "word($1)"));//"word(cat), word(mat), word(aat)"

第二次参数是函数的情况下,这个函数会被传递3个参数:

  • 模式的匹配项
  • 模式匹配项在字符串中的位置
  • 原始字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
function replace(str) {
return str.replace(/[<>]/g, function (match, pos, str) {
switch(match) {
case "<":
return "&lt";
case ">":
return "&gt";
}
}
)
}

console.log(replace("<p>"));//"&ltp&gt"

2.2.5.4 split()

基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组里。

第一个参数可以是RegExp对象或者一个字符串;第二个参数绝对数组的大小

1
2
3
4
5
6
var str = "red, blue, orange";

console.log(str.split(",", 2));//["red", " blue"]

//根据非逗号来分割,则red前面还有一个空字符串,orange后面也有
console.log(str.split(/[^\,]+/));//["", ",", ",", ""]

2.2.6 localeCompare()

1
2
3
4
5
6
7
8
var str = "yellow";

console.log(str.localeCompare("brick"));//1
//yellow排在brick之后
console.log(str.localeCompare("yellow"));//0
//一样
console.log(str.localeCompare("zoo"));//-1
//yellow排在zoo之前

2.2.7 fromCharCode()

接受一或者多个字符编码,把它们转换成一个字符串。

本质上和charCodeAt()相反

1
2
console.log(String.fromCharCode(104, 101, 108, 108, 111));//"hello"
console.log("hello".charCodeAt(1,2,3,4));//"hello"

字符串方法合集

方法 功能 参数个数 参数详解 是否影响被操作字符串
charAt() charCodeAt() 输出指定字符或者字符编码 一个 需要指定的位置从0开始
concat() 合并字符串 一个或多个 拼接的字符串
slice() substr() substring() 截取字符串 一个或两个 第一个指定字符串开始的位置 第二个表示到哪里结束(substr()的第二个是到第几个字符串结束)
indexOf() lastIndexOf() 查找字符串位置 一个或两个个 第一个数需要查找的字符串 第二个是从第几个开始
trim() 去除两边空格
toLocaleUpperCase() toUpperCase() toLocaleLowerCase() toLowerCase() 转换大小写
match() search() 前一个返回匹配值 后一个返回索引值 一个 正则表达式或者RegExp对象
replace() 替代匹配到的字符串 两个 第一个参数可以是RegExp对象或者一个字符串;第二个参数可以是一个字符串或者一个函数
split() 分割字符串 一个或两个 第一个参数可以是RegExp对象或者一个字符串;第二个参数绝对数组的大小
localeCompare() 比较字符串 一个 字符串