第190天：js---String常用属性和方法（最全）
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>
