时间戳

首页 > 技术文章 > JavaScript基础知识梳理----字符串

JavaScript基础知识梳理----字符串

galaxyxd 2016-09-27 15:28 原文

JavaScript基础知识梳理----字符串

查找方法

字符方法

charAt()

返回字符串中第n个字符

charCodeAt()

返回字符串中第n个字符的Unicode编码

fromCharCode()

根据字符串编码创建字符串

位置方法

indexOf()

从前向后检索字符串，根据制定字符串查找下标位置

lastIndexOf()

从后向前检索字符串，根据制定字符串查找下标位置

匹配方法

match()

找到一个或多个匹配的字符串，返回数组

search()

检索字符串中与正则表达式匹配的子串

replace()

替换一个与正则表达式匹配的子串

split()

根据指定分隔符将字符串分割成多个子串，并返回数组

操作方法

拼接方法

concat()

将多个字符串拼接成一个新的字符串

截取方法

根据下标截取

slice()

截取被操作字符串的子串

substring()

根据长度截取

substr()

空格处理

tirm()

清除前置或后缀的空格

trimLeft()

清除前置的空格

trimRight()

清除后缀的空格

比较方法

localCompare()

 

编码方法

字符串常规编码与解码

escape()

 

unescape()

 

URI字符串编码与解码

encodeURI()

 

decodeURI()

 

URI组件编码与解码

encodeURIComponent()

 

decodeURIComponent()

 

转换方法

大小写转换

转为大写

toUpperCase()

 

toLocaleUpperCase()

 

转为小写

toLowerCase()

 

toLocaleLowerCase()

 

代码转换

代码转换

 

 

1.查找方法

a.字符方法

charAt( n )---功能：返回字符串中第n个字符

                 ---参数：如果超出范围，则返回空字符串

                 ---返回值：string中第n个字符的实际值

charCodeAt( n )---功能：返回字符串中第n个字符的代码

             ---参数：超出范围，返回NaN；

                   ---返回值（内容：string中第n个字符的Unicode编码，范围：0~65535之间的16位整数 ）

fromCharCode( n )---功能：根据字符串编码创建字符串

---参数：0个或多个整数，代表字符的Unicode编码

---返回值：由指定编码字符组成的新字符串

---特性：静态方法，实为构造函数string()的属性

charAt与charCode的共性：都是根据小标查找指定的字符，

charCodeAt与fromCharCode互为反向操作

b.位置方法

indexOf()---从前向后检索字符串，看其是否含有指定字符串

lastIndexOf()---从后向前检索字符串，看其是否含有指定字符串

两者参数: 必选--将要查询的字符串，

             可选--开始查找位置的下标，（如果值为负数，则视为0；为空，从默认起始位开始查找；超出0~length-1，返回-1）

返回值：找到--返回字符串首次出现的下标

           未找到--返回-1

 

c.匹配方法、

match()---功能：找到一个或多个正则表达式的匹配

　　 ---参数：--要进行模式匹配的正则表达式

  　　　　      --非正则表达式-将其传递给RegExp()构造函数，并转换为正则表达式对象

      ---返回值：存放匹配结果的数组---->

              1.有全局标记g--执行全局搜索--找到->返回数组

                                         　　　　--未找到->返回null     

  2.没有全局标记g--执行一次匹配--找到->返回数组

    　　　　　　　　　　　　　　--未找到->返回null

1 var str="hello hao are you! hao old are you.";
2 console.log(str.match("hao"));






 


　　


search()---功能：检索字符串与正则表达式匹配的子串


       　　 ---返回值：--找到->字符串中第一个与正则表达式相匹配的子串的起始位置


           　　　　　　 --未找到->返回-1


  　　　　 ---特性：忽略全局标记g和lastIndex()属性


 




var str="hello hao are you! hao old are you.";
        console.log(str.search(/hao/g));
--->6




 


replace()---功能：替换一个与正则表达式匹配的子串的起始位置


　　　　   ---参数1-->需要进行替换的正则表达式对象或字符串


           　　 参数2-->替换文本或函数


      　　  ---特性：如果参数1仅为字符串则只进行一次匹配替换，若替代所有子串则必须制定全局标记g


                  如果参数2仅为字符串则可使用特殊字符序列


　　　　　　原字符串不会被改变


replace()方法中第二个参数可以是一个函数，在只有一个匹配项的时候，会向这个函数传递三个参数，分别是： 模式匹配项、模式匹配项在字符串中的位置、原始字符串。当通过正则表达式捕获多组匹配项的时候，传入的参数分别是：模式的匹配项，




 


　　　　　　实现替换的另类方法：str.split(replaceStr).join('');




 1 // define    
 2 (function (window) {    
 3     function fn(str) {    
 4         this.str = str;    
 5     }    
 6     fn.prototype.format = function () {    
 7         var arg = ______;    
 8         return this.str.replace(_______, function (a, b) {    
 9             return arg[b] || '';    
10         });    
11     }    
12     window.fn = fn;    
13 })(window);    
14 // use    
15 (function(){    
16     var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');  
17     console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') );    
18 })();  





最近在浏览一些阿里的前端面试题，其中有一题涉及了javascript中replace( )方法的使用，下面是原题：


“说出以下函数的作用是？空白区域应该填写什么？”


以下是分析过程（感觉还是弄个编号，个人觉得比较有条理一些）


1、因为本题也涉及了到其它的知识点，如匿名函数、原型等知识点，但不是本次讨论的重点。


2、根据题面，我们知道，该题的源码类似于写一个模板引擎。将模板里的‘{1}'之类的占位符替换成传给它的参数。所以arg应该就是arguments。但是！！！由于arg不是数组，而是一个类数组对象（不懂的可自行百度(u_u)），所以我们需要进行一些转换，


var arg=Array.prototype.slice.call(arguments,0);


3、等号右边也就是第一空的答案了。说了这么多，那么接下来第二空就是我们要讨论的重点了~~~~~~我们都知道第二空是要通过正则找出占位符，并根据占位符内的数字将其替换成arg数组内的字符串，说实话replace方法的第二个参数为函数的情况很少遇到，一般我们遇到都是这样的，看下面的代码：


    

  1. var pattern=/8(.*)8/;  
    2. 

  2. var str='This is a 8baidu8';  
    3. 

  3. document.write(str.replace(pattern,'<strong>$1</strong>'));   
    4. 



4、由于replace第二个参数是函数的情况比较少，那么我们就来重点谈谈第二个参数为函数的情形。


 


首先这是replace函数的语法：stringobject.replace(regexp/substr,replacement)


其中regexp/substr必需。规定字符串或要替换的模式的regexp对象。(请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 regexp 对象。) replacement必需。一个字符串值。规定了替换文本或生成替换文本的函数。最后返回一个新的字符串，是用replacement替换了regexp的第一次匹配或所有匹配之后得到的。


5、ECMAScript规定，replace（）方法的参数replacement可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将替换文本使用。第一个参数表示匹配到的字符，第二个参数表示匹配到的字符最小索引位置（RegExp.index），第三个参数表示被匹配的字符串（RegExp.input）。


6、所以第二空可以这样写：/\{(\d+)\}/g，放在语句中完整为：


    

  1. return this.str.replace(/\{(\d+)\}/g, function (a, b) {    
    2. 

  2.     return arg[b] || '';    
    3. 

  3. });  
    4. 



执行第一次匹配时，{0}被替代为arg[0]


 


执行第一次匹配时，{1}被替代为arg[1]


执行第一次匹配时，{2}被替代为arg[2]


7、以上就是js字符串方法replace()的第二个参数为函数讲解（有不完善的地方，自行补充）,当然这道面试题也解决了~~~~~




 


split()---功能：根据指定分隔符将字符串分割成多个子串，并返回数组


     　  ---参数-->必须---指定分隔符


             　　 -->可选---指定数组的长度


2.操作方法


　　a.拼接方法：concat()-->string.concat(v1,v1,,,,,,v3);


　　　　　　　　把所有参数都链接成字符串，并返回连接后的新字符串，原字符串没有改变        


　　b.截取方法：slice()--参数是负值，则与字符串长度相加


    substring()--参数是负值，转换为0


    substr()--参数2--返回字符个数


                  负值 （参数1-与字符串长度相加，参数2，转换为0）


   共性--->参数1--指定子串的开始位置


             省略参数2--以字符串长度为结束位置






 


v1




v2




v1为负数




v2为空




v2为负数




v1,v2为正，v1<v2








slice(v1,v2)




指定子字符串开始的位置（包含起始位置的字符）




指定子字符串最后一个字符后面的位置（即不包含v2位置的字符）




负值与字符串长度相加




默认结束位置为字符串的长度




负值与字符串长度相加




返回空








substring(v1,v2)




转化为0




转化为0




将较小值作为起始位置








substr(v1,v2)




指定返回字符个数




负值与字符串长度相加




转化为0




返回空








c.空格处理： trim()--清除前置或后置空格


　　　　　　trimLeft()----trimRight()


　　d.比较方法-localeCompare()---功能：用本地特定顺序比较两个字符串


                               ---参数：原字符串进行比较的字符串


---返回值：  


负数：原字符串<参数字符串


0：原字符串=参数字符串


正数：原字符串>参数字符串


 


3.编码方法


字符串常规编码与解码：escape()


 　　　　　　　　　　  Unescape()


URI字符串编码与解码： encodeURI()


                               decodeUR


URI组件编码与解码：encodeURIComponent()


                           decodeURIComponent()


4.转换方法


大小写转换--转为大写---toUpperCase()


　　　　　　　　     ---toLocaleUpperCase()


--转为小写---toLowerCase()


              ---toLocaleLowerCase()


用js动态格式化html，不具语义性


 







	

		


推荐阅读