String常用属性和方法
一、string对象构造函数
1 /*string对象构造函数*/
2 console.log('字符串即对象');//字符串即对象
3 //传统方式 - 背后会自动将其转换成对象
4 // 所以我们才可以访问string对象中方法
5 var zhangsan ='张三'
6 zhangsan.length;
7 //通过对象形式
8 var lisi = new String('李四');
9 console.log(zhangsan);//张三
10 console.log(lisi);//String
11
12 //使用对象中的方法
13 console.log(lisi.charAt(0));//李
14 console.log(lisi.concat(['张领','王占一']));//李四张领,王占一
二、字符串对象属性和方法概述
- 获取字符串长度Length属性
- 连接字符串：concat
- 获取索引值：indexOf()
- 根据索引值获取单个字符：charAt()
1、concat方法 连接字符串
1 console.log('concat用法')
2
3 var s1="a";
4 var s2="b";
5 var s3="c";
6 console.log(s1.concat(s2,s3));//abc
7 // 等同于：result = s1 + s2 + ... + s
8 // 关联记忆：数组中的concat
9 var arr = [1, 2, 3];
10 console.log(arr.concat(4, 5));//[1,2,3,4,5]
2、indexOf 找到匹配项返回索引值，如果没找到返回-1
1 /*indexOf 找到匹配项返回索引值，如果没找到返回-1*/
2 console.log('indexOf用法')
3
4 // 获取索引值indexOf
5 // 常用方法：找到匹配项返回索引值，如果没找到返回-1
6 var myString="JavaScript";
7 var a1=myString.indexOf("v");//2
8 var a2=myString.indexOf("S");//4
9 var a3=myString.indexOf("Script");//4
10 var a4=myString.indexOf("key");
11
12 //如果没有匹配项返回 -1
13 console.log(a1)//2
14 console.log(a2)//4
15 console.log(a3)//4
16 console.log(a4)//-1
17
18 // 完整的indexof用法：
19 // 可以传入第二个参数：indexOf（str，fromIndex）
20 // 表示从索引位置fromIndex开始查找，如果fromIndex省略，则表示默认从起始索引0开始查找；
21 // 若fromIndex为负，则从索引0开始查找。
22 var b1 = myString.indexOf("v",5);// 从下标5开始查找，而v在索引2，所以找不到，返回-1
23 var b2 = myString.indexOf("v",1);//-2
24 console.log(b1)//-1
25 console.log(b2)//-2
3、charAt 返回指定索引位置的字符，若索引越界，返回空字符串。
1 //返回指定索引位置的字符
2 //(因为Javascript中没有字符类型，所以返回的是长度为1的字符串)。
3 myString="JavaScript";
4 console.log(myString.charAt(1));//a
5 console.log(myString.charAt(1000000));//若索引越界，返回空字符串
6 console.log(myString.charAt(-1));//若索引越界，返回空字符串 -- ""
7 console.log(myString.charAt(-10000000000));//若索引越界，返回空字符串 ""
4、substr(fromIndex,length) 获取部分字符串
1 /*substr(fromIndex,length) 获取部分字符串
2 从起始索引fromIndex开始截取长度length的字符串*/
3 console.log('substr用法')
4
5 //从起始索引fromIndex开始截取长度length的字符串 - 正向截取
6 myString="JavaScript";
7 console.log(myString.substr(1,1));//a 表示从第1个索引值开始截取，截取1个字符
8 console.log(myString.substr(1,2));//av 表示从第1个索引值开始截取，截取2个字符
9 console.log(myString.substr(1,3));//ava 表示从第1个索引值开始截取，截取3个字符
10 console.log(myString.substr(1,4));//avaS 表示从第1个索引值开始截取，截取4个字符
11
12 //若不指定length或者length超过可截取的最大长度，则截取到结尾。
13 console.log(myString.substr(1));//avaScript
14 console.log(myString.substr(1,4000000));//avaScript
15
16
17 //反向截取
18 //若起始索引为负，则从右往左开始截取 -1表示倒数第一个， -2表示倒数第二个
19 myString="JavaScript";
20 console.log(myString.substr(-1,1));//t 表示从倒数第一个开始截取，截取1个字符
21 console.log(myString.substr(-2,1));//p 表示从倒数第二个开始截取，截取1个字符
22 console.log(myString.substr(-3,1));//i 表示从倒数第三个开始截取，截取1个字符
23 console.log(myString.substr(-4,1));//r 表示从倒数第四个开始截取，截取1个字符
24 console.log(myString.substr(-5,1));//c 表示从倒数第五个开始截取，截取1个字符
25 console.log(myString.substr(-6,1));//S 表示从倒数第六个开始截取，截取1个字符
26 console.log(myString.substr(-7,1));//a 表示从倒数第七个开始截取，截取1个字符
27
28 myString="JavaScript";
29 console.log(myString.substr(-6,1));//S 表示从倒数第6个开始截取，截取1个字符
30 console.log(myString.substr(-6,2));//Sc 表示从倒数第6个开始截取，截取2个字符
31 console.log(myString.substr(-6,3));//Scr 表示从倒数第6个开始截取，截取3个字符
32 console.log(myString.substr(-6,4));//Scri 表示从倒数第6个开始截取，截取4个字符
33 console.log(myString.substr(-6,5));//Scrip 表示从倒数第6个开始截取，截取5个字符
34 console.log(myString.substr(-6,6));//Script 表示从倒数第6个开始截取，截取6个字符
35
36 //从倒数的方式开始截取，获取av
37 myString="JavaScript";
38 console.log(myString.substr(-9,2));//av 表示从倒数第9个开始截取，截取2个字符
39
40 //整数的方式获取曲线S
41 //首先思考 我要获取几个字符，则后面的参数就确定了
42 myString="JavaScript";
43 console.log(myString.substr(4,1));//S 表示从索引值4开始截取，截取1个字符
44 console.log(myString.substr(-6,1));//S 表示从倒数第6个开始截取，截取1个字符
5、substring(startIndex,endIndex) 获取部分字符串
1 /*substring(startIndex,endIndex)获取部分字符串
2 截取 起始索引startIndex 到 结束索引endIndex的子字符串，
3 结果包含startIndex处的字符，不包含endIndex处的字符。
4 */
5 console.log('substring用法')
6 //获取av
7 myString="JavaScript";
8 console.log(myString.substring(1,3));//av
9
10 //获取曲线S
11 myString="JavaScript";
12 console.log(myString.substring(4,5));//S
13
14 //其他小点：
15 //如果省略个数,则自动获取后面所有
16 console.log(myString.substring(4));//Script
17 //若startIndex或者endIndex为负，则会被替换为0。
18 console.log(myString.substring(-1,1));//J
19 //若startIndex = endIndex，则返回空字符串。
20 console.log(myString.substring(3,3));// 返回空
21 //若startIndex > endIndex，则执行方法时，两个值会被交换。
22 console.log(myString.substring(3,1));//av 等价于myString.substring(1,3)
6、slice(startIndex,endIndex) 获取部分字符串
1 /*slice(startIndex,endIndex)获取部分字符串
2 截取 起始索引startIndex 到 结束索引endIndex的子字符串，
3 结果包含startIndex处的字符，不包含endIndex处的字符。
4 */
5 console.log('slice(startIndex,endIndex)用法');
6 myString="JavaScript";
7 console.log(myString.slice(1,3)) //av
8 console.log(myString.slice(4,5)) //S
9 console.log(myString.slice(4)) //Script //如果省略个数,则自动获取后面所有
10
11 // 基本用法和substring用法一样，不同点如下：
12
13 // stringObj.slice(start, [end])
14 // 如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度。
15 console.log(myString.slice(-1,2));
16 // 如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度。
17 console.log(myString.slice(2,-3));//vaScr
18 // 如果省略 end ，那么 slice 方法将一直复制到 arrayObj 的结尾。
19 // 如果 end 大于 start，不复制任何元素到新数组中。
20 //
21 // strVariable.substring(start, end)
22 // 如果 start 或 end 为 NaN 或者负数，那么将其替换为0。
23 // 子字符串的长度等于 start 和 end 之差的绝对值。例如，在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。
24 // slice可以对数组操作，substring不行。。。
7、split() 分割
1 /*split()分割
2 按给定字符串分割，返回分割后的多个字符串组成的字符串数组。
3 */
4 console.log('split()用法')
5 var s="a,bc,d";
6 console.log(s.split(","));//["a", "bc", "d"]
7 s="a1b1c1d1";
8 console.log(s.split("1"));//["a", "b", "c", "d", ""]
8、join()合并
1 /*join()合并 使用您选择的分隔符将一个数组合并为一个字符串*/
2 console.log('join用法')
3 var myList=new Array("jpg","bmp","gif","ico","png");
4 var imgString=myList.join("|");//结果是jpg|bmp|gif|ico|png
5 console.log(imgString);
6
7
8 //split()还可以结合正则表达式
9 myString = 'javascript is a good script language';
10 console.log(myString.split(/\s/)); //javascript,is,a,good,script,language
11 //传入\s表示要匹配空格，我们将字符串分割为一个数组，如果你要访问某一个，那么可以明确指出：
12 console.log(myString.split(/\s/)[3]); //good
9、字符串大小写转换
1 /*字符串大小写转换
2 使用您选择的分隔符将一个数组合并为一个字符串
3 */
4 console.log('字符串大小写转换');
5
6 myString="JavaScript";
7 myString = myString.toLowerCase();
8 console.log(myString);//javascript
9 myString = myString.toUpperCase();
10 console.log(myString);//JAVASCRIPT
10、replace用法
1 /*replace用法1 - 基础用法
2 最核心的易错点：如果要替换全部匹配项，需要传入一个 RegExp 对象并指定其 global 属性。
3 */
4 console.log('replace基本用法');
5
6 //基本用法：
7 myString = "javascript is a good script language";
8 //在此我想将字母a替换成字母A
9 console.log(myString.replace("a","A"));//jAvascript is a good script language
10 // 我想大家运行后可以看到结果，它只替换了找到的第一个字符，如果想替换多个字符怎么办？
11 // 答案：结合正则表达式，这也是replace的核心用法之一！
12
13
14 //将字母a替换成字母A 正确的写法 /g表示匹配所有
15 myString = "javascript is a good script language";
16 console.log(myString.replace(/a/g,"A"));//jAvAscript is A good script lAnguAge
17
18
19
20 /*replace用法2 - 高级用法 特殊标记$*/
21
22
23 //replace高级技巧 - 特殊标记$
24 console.log('replace功能4 - 特殊标记$');
25
26 // 对于正则replace约定了一个特殊标记符$：
27 // 1.$i (i:1-99) : 表示从左到右正则子表达式所匹配的文本。
28 // 2.$&:表示与正则表达式匹配的全文本。
29 // 3.$`(`:切换技能键)：表示匹配字符串的左边文本。
30 // 4.$'(‘:单引号)：表示匹配字符串的右边文本。
31 // 5.$$：表示$转移。
32
33
34 // $i (i:1-99) : 表示从左到右正则子表达式所匹配的文本
35
36 //案例1- 匹配后替换
37 console.log('replace功能1 - 匹配后替换');
38 //在本例中，我们将把所有的花引号替换为直引号：
39 myString = '"a", "b"';
40 myString = myString.replace(/"([^"]*)"/g, "'$1'");// 寻找所有的"abb"形式字符串，此时组合表示字符串，然后用'$1'替换
41 console.log(myString);//'a', 'b'
42
43
44
45 //案例2- 匹配后替换
46 myString= "javascript is a good script language";
47 console.log(myString.replace(/(javascript)\s*(is)/g,"$1 $2 fun. it $2"));//javascript is fun. it is a good script language
48
49
50
51 //案例3 - 分组匹配后颠倒
52 console.log('replace功能2 - 颠倒');
53 //在本例中，我们将把 "baidu,com" 转换为 "com baidu" 的形式：
54 myString = "baidu , com";
55 myString = myString.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
56 console.log(myString);//com baidu
57
58
59 //案例4 - 分组匹配后颠倒
60 myString = "boy & girl";
61 myString.replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1")
62 console.log(myString);//girl & boy
63
64
65
66 // $&:表示与正则表达式匹配的全文本。
67 myString = "boy";
68 myString.replace(/\w+/g,"$&-$&");
69 console.log(myString);// boy-boy
70
71 // $`(`:切换技能键)：表示匹配字符串的左边文本。
72 myString = "javascript";
73 myString.replace(/script/,"$& != $`");
74 console.log(myString); //javascript != java
75
76 // $'(‘:单引号)：表示匹配字符串的右边文本。
77 myString = "javascript";
78 myString.replace(/java/,"$&$' is ");
79 console.log(myString);// javascript is script
80
81
82
83 /*replace用法2 - 高级用法 第二个参数可以是函数 - 最常用 必考点*/
84
85 //无敌的函数 - replace第二个参数可以传递函数
86 //如果第二参数是一个函数的话，那么函数的参数是什么呢？
87 console.log('replace功能5 - 无敌的函数 - replace第二个参数可以传递函数');
88 myString = "bbabc";
89 myString.replace(/(a)(b)/g, function(){
90 console.log(arguments); // ["ab", "a", "b", 2, "bbabc"]
91 });
92 // 参数将依次为：
93 // 1、整个正则表达式匹配的字符。
94 // 2、第一分组匹配的内容、第二分组匹配的内容…… 以此类推直到最后一个分组。
95 // 3、此次匹配在源自符串中的下标（位置）。
96 // 4、源自符串
97 // 所以例子的输出是 ["ab", "a", "b", 2, "bbabc"]
98
99
100 //用法举例 首字母大写 -- 一个参数 表示匹配的整个字符串
101 console.log('replace功能3 - 将首字符转为大写');
102
103 //在本例中，我们将把字符串中所有单词的首字母都转换为大写：
104 myString = 'aaa bbb ccc';
105 myString=myString.replace(/\b\w+\b/g, function(word){
106 return word.substring(0,1).toUpperCase()+word.substring(1);}
107 );
108 console.log(myString);//Aaa Bbb Ccc
109
110
111
112 //用法举例 首字母大写 -- 多个参数 - 第一个表示匹配的整个字符串，后面的表示分组中的内容
113 function capitalize(str){
114 return str.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
115 } );
116
117 };
118 myString = "i am a boy !"
119 console.log(capitalize(myString)) //I Am A Boy！
11、正则表达式基础知识
1 //正则表达式基础知识
2
3 //星号(*) : 星号代表匹配它前面一个字符任意遍(0或任意次)
4
5 //加号(+): 加号是一个与星号(*)类似的通配符，它也是数量词，表示匹配前面的字符一次或多次（至少一次).
6 //它与星号的差别就在这里，星号可以匹配0次，加号则必须一次以上。
7
8 //问号(?): 问号也是一个数量词，它代表匹配前一个字符0或1次。
9
10
11 //中括号[]： 中括号用来表示一个字符集合，
12 //如果这个集合有很多元素，如26个字母，数字等，一个个地写在中括号里，未免太麻烦太蠢笨，
13 //这时可以用连字符(hyphen)来表示一个范围，
14 // 如:[a-z]表示小写字母的集合，
15 // [a-zA-Z]表示大小写字母的集合。
16 // 脱字符^ (caret).
17 // 这种写法表示，匹配任何不在该集合中的字符，与上面的用法刚好相反
18
19
20 //特殊字符：
21 // \w -- (小写w) 表示字母或数字，等价于 [a-zA-Z0-9]
22 // \W -- (大写W)非字母且非数字，与\w相反 等价于 '[^A-Za-z0-9_]'
23 // \s -- (小写s)匹配一个空格字符，包括：空格，换行，回车,tab,等价于[ \n\r\t\f]
24 // \S -- (大写S)匹配非空格字符，\s的相反 等价于 [^ \f\n\r\t\v]。
25 // \d -- 表示10进制数字，等价于 [0-9]
26 // \D -- 匹配一个非数字字符。等价于 [^0-9]。
27
28 // \f 匹配一个换页符。等价于 \x0c 和 \cL。
29 // \n 匹配一个换行符。等价于 \x0a 和 \cJ。
30 // \r 匹配一个回车符。等价于 \x0d 和 \cM。
31 // \t 匹配一个制表符。等价于 \x09 和 \cI。
32 // \v 匹配一个垂直制表符。等价于 \x0b 和 \cK。
33
34
35
36 // 大括号:{}
37 // 大括号的作用是指定重复前面一个字符多少遍:
38 // {N} 重复N遍
39 // {n,m} 重复 n~m 遍
40 // {n,} 至少重复n遍
41 // {,m} 至多重复m遍
42
43
44 //定位符：
45 // ^ 匹配输入字符串的开始位置。
46 // $ 匹配输入字符串的结束位置。
47 // \b 匹配一个单词边界，也就是指单词和空格间的位置。//例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
48 // \B 和\b相反，匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
12、常用字符串扩充
封装框架
1 //定义一个对象 - 名字是$
2 var $$ = function() {
3
4 };
5 //第二种写法
6 $$.prototype = {
7 init:function(){
8 this.stringExtend();
9 this.MathExtend();
10 },
11 stringExtend:function(){
12
13 /*新增一个方法*/
14 String.prototype.formateString=function(data){
15 return this.replace(/@\((\w+)\)/g, function(match, key){
16 return typeof data[key] === "undefined" ? '' : data[key]});
17 }
18
19 /*trim是ES5新增的，以前的版本不支持，一般我们在编程的时候不会直接使用ES5，所以必须自己扩充*/
20 String.prototype.trim = function() {
21 return this.replace(/(^\s*)|(\s*$)/g, "");
22 }
23
24 /*字符串-去掉前空白字符 */
25 String.prototype.ltrim = function(){
26 return this.replace(/(^\s*)/g, "");
27 }
28
29 /**
30 *字符串-去掉后空白字符
31 */
32 String.prototype.rtrim = function(){
33 return this.replace(/(\s*$)/g, "");
34 }
35
36 /**
37 * 将一个字符串的首字母大写，其它字符小写
38 */
39 String.prototype.capitalize= function() {
40 return this.trim().replace(/^(\w{1})(.*)/g, function(match, g1, g2) {
41 return g1.toUpperCase() + g2.toLowerCase();
42 });
43 }
44
45 /**
46 * 将字符串中的下划线转换成中划线
47 */
48 String.prototype.dashString = function() {
49 return this.replace(/\_/g, '-');
50 }
51
52 /**
53 * 检测字符串是否是空串
54 */
55 String.prototype.isEmpty = function() {
56 return this.length === 0;
57 }
58
59 /**
60 * 检测字符串是否包含特定的字符串
61 */
62 String.prototype.contains = function(target) {
63 return this.indexOf(target) !== -1;
64 }
65
66 /**
67 * 对字符串中的特殊字符进行转义，避免XSS
68 */
69 String.prototype.escapeHTML=function() {
70 //转义后的字符是可以直接设置成innerHTML的值。
71 //replace(/&/g, '&')这条replace()调用一定要写在所有的特殊字符转义的前面，不然转换后有&符号的会再被转一次
72 return this.replace(/&/g, '&')
73 .replace(/\</g, '<')
74 .replace(/\>/g, '>')
75 .replace(/\'/g, ''')
76 .replace(/\"/g, '"');
77 },
78
79 /**
80 * 对字符串进行反转义
81 */
82 String.prototype.unescapeHTML = function() {
83 return this.replace(/&/, '&')
84 .replace(/</g, '<')
85 .replace(/>/g, '>')
86 .replace(/'/g, '\'')
87 .replace(/"/g, '\"')
88 .replace(/&#(\d+)/g, function($0, $1) {
89 return String.formCharCode(parseInt($1, 10));
90 });
91 }
92
93
94 /**
95 * 取得字符串的逆序
96 */
97 String.prototype.reverse = function() {
98 return (this.toString()).split('').reverse().join('');
99 }
100
101 },
102 MathExtend:function(){
103
104 },
105 $id:function(id){
106 return document.getElementById(id)
107 },
108 //去除左边空格
109 ltrim:function(){
110 return str.replace(/(^\s*)/g,'');
111 },
112 //去除右边空格
113 rtrim:function(){
114 return str.replace(/(\s*$)/g,'');
115 },
116 //去除空格
117 trim:function(){
118 return str.replace(/(^\s*)|(\s*$)/g, '');
119 }
120
121 }
//在框架中实例化，这样外面使用的使用就不用实例化了
122 $$ = new $$();
123 $$.init();
实例：
1 <script>
2 /*去除空格*/
3 var str = ' 百度一下'
4 console.log(str.trim());//百度一下
5
6 /*首字母大写*/
7 var baidu = 'baidu'
8 console.log(baidu.capitalize());//Baidu
9
10 /*下划线转成中划线*/
11 var str = '1_2_3_4'
12 console.log(str.dashString());//1-2-3-4
13
14 /*判断是否为空*/
15 str = ''
16 console.log(str.isEmpty());//true
17
18 /*判断是否包含指定字符串*/
19 str = '我们一起走，一起唱歌，你妹，祖宗'
20 console.log(str.contains('祖宗'));//true
21
22
23 /*html编码和解码*/
24 str = '<div>hello</div>'
25 console.log(str.escapeHTML());//<div>hello</div>
26 console.log(str.unescapeHTML());//<div>hello</div>
27
28 /*获取逆序*/
29 str = 'abcdefg'
30 console.log(str.reverse());//gfedcba
31 </script>
13、获取随机数
1 <script>
2
3 //随机选取
4 //获取10个10-100之间的随机数，并从小到大排序放到一个数组中
5 function getRandom (begin,end){
6 return Math.floor(Math.random()*(end-begin))+begin;
7 }
8
9
10 function getRandomList(){
11 var iArray = [];
12 for(var i=0; i<10; i++){
13 iArray.push(getRandom(10,100));
14 }
15 iArray.sort();
16 return iArray
17
18 }
19
20 var arr = getRandomList()
21 console.log(arr);
22 //Array(10)
23 //0:20
24 //1:22
25 //2:23
26 //3:28
27 //4:56
28 //5:61
29 //6:63
30 //7:70
31 //8:73
32 //9:97
33 //length:10
34 </script>
