JavaScript字符串String和Array操作的有趣方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript字符串String和Array操作的有趣方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6414字，纯文字阅读大概需要10分钟。

内容图文

function repeat(str, n) { 
var arr = new Array(n+1); 
return arr.join(str); 
} 
//output: 
//------- 
 
利用n+1个Array元素产生的n个间隙，再以目标字符串来拼接，我们就能得到字符串重复的功能。 
扩展String的prototype使方法应用于所有字符串 
JavaScript的对象继承和方法寻找是基于原型链(prototype chain)，所有使用着的字符串都可以说是继承于String的对象，我们可以为String对象的prototype添加方法或者属性，这样该方法就可以应用到所有我们使用的对象上了。比如上边的repeat方法，就可以改成： 
 代码如下:

String.prototype.repeat = function(n) { 
var arr = new Array(n+1); 
return arr.join(this); 
}; 
document.write('-'.repeat(21)); 
//output: 
//--------------------- 
 
然后，直接通过字符串调用repeat方法，就可以得到跟上边一样的结果。 
这可以让我们实现对字符串方法的扩充，简洁对字符串的操作，但是这会“污染”了JavaScript的String，当代码被转到其他文件但是那个文件下并没有得到这段扩充，就可能会造成找不到该方法；另外，调用prototype扩展方法比直接调用方法要稍微“慢”一些，因为JavaScript会先去在字符串对象自身的方法中尝试寻找，再找到String的prototype的方法；再者也许在将来我们扩充的方法（比如repeat）变成了标准方法了，再使用这代码就会覆盖了标准方法，得到不一致的结果。 

但是忽略这些考虑，扩充JavaScript标准类型的prototype还是会给编程带来许多的遍历。

用Array作StringBuilder 
在很多高级语言中，加号(+)在字符串的操作中被赋予了更多的意义：作为字符串拼接的操作符。不过在Java和C#中，我们也知道如何频繁进行字符串拼接的操作，使用加号(+)就会产生效率问题，因此在这种情况下就会推荐使用StringBuilder。

JavaScript也支持使用加号(+)来进行字符串拼接，那么也会有存在效率问题呢。可是JavaScript并没有提供StringBuilder这样的类。 

其实在Java，C#中使用StringBuilder时，我们多数也是用append方法，而很少会用insert。好在JavaScript的Array是不限大小自动增长的，所以我们就可以利用Array来做StringBuilder，最后再join空字符串来拼接出目标字符串。 
 代码如下:

var sb = []; 
for(var i = 0; i <=21; i++) { 
sb.push(i); 
} 
document.write(sb.join('')); 
//output: 
//0123456789101112131415161718192021 
 
到底是用Array做StringBuilder还是直接字符串拼接，jsPerf上有过很多testcases比较两者的效率，但是因为初始值、环境、字符串长度等原因，所以结果不一。其实字符串内容不是很大，或者可以使用多个加号(+)组合在一起，那么字符串拼接还是可以的；若是在代码不同地方对同一字符串变量进行追加，那么可能使用Array配合join会更好。 

用split替代字符串的子串查找和替换 
在字符串的操作中，很常出现的就是想要从字符串中查找一个子字符串是否存在，然后截取出该字符串，抑或是将该子字符串替换成其它字符串。

比如给一个文件名，希望根据点(.)分割获取基本名和后缀名。先来看看使用标准String方法实现的这些操作： 
 代码如下:

function getBaseName(str) { 
var pos = str.lastIndexOf('.'); 
if(pos < 0)return str; 
return str.substring(0, pos); 
} 
function getExtension(str) { 
var pos = str.lastIndexOf('.'); 
if(pos < 0)return ''; 
return str.substr(pos+1); 
} 
var fileName = 'hello_world.js'; 
document.write(getBaseName(fileName)); 
document.write('<br />'); 
document.write(getExtension(fileName)); 
//output: 
//hello_world 
//js 
 
（除了substr和substring外，JavaScript还有slice都可以用来获取字符串的子串，但也正是因为选择太多，常常让我在出现选择恐慌，还有位置是该不该+1，对负数是如何处理也让我揪心。） 

之前看到可以通过join把数组变成字符串，也可以利用String的split的方法把字符串变成数组。对于上边取文件名及扩展名的问题，我们就可以根据“.”把文件名分裂成数组各个部分，那么假如得到的数字大于1（后缀名存在），则所得数字的最后一个元素就是文件的扩展名了： 
 代码如下:

function getBaseName(str) { 
var segs = str.split('.'); 
if(segs.length > 1) segs.pop(); 
return segs.join('.'); 
} 
function getExtension(str) { 
var segs = str.split('.'); 
if(segs.length <= 1)return ''; 
return segs.pop(); 
} 
 
考虑到文件名中可能包含多个“.”，所以我们还是需要用“.”把除了最后一部分外的各个部分join回来。 
看到可以对字符串先split再join，就可以想到，我们可以想到对于这两个方法的参数可以传入不同的字符串，这样就起到了代替String的replace方法进行子串替换的功能了，而且还是全局替换。 
比如希望把所有的下划线(_)替换成横杠(-): 
 代码如下:

var str = 'hello_from_ider_to_world'.split('_').join('-'); 
document.write(str); 
//Output: 
// hello-from-ider-to-world 
 
相对于String的replace方法，该方法的有点在于：可以实现全局替换；而若要让replace能够全局替换，则需要传入正则表达式对象(RegExp)而不能是字符串作为第一参数。 

replace可接受RegExp、Function作为参数 
很多人知道String的replace方法是用来替换字符串子串的，也可能知道它可以接受正则表达式作为第一参数，而且如何要替换所有出现的地方，就必须要用RegExp并包含global标记。 
比如之前的替换操作，用replace就应该是： 
 代码如下:

var str = 'hello_from_ider_to_world'.replace(/_/g, '-'); 
document.write(str); 
 
再比如很常用的trim方法，虽然JavaScript并没有提供我们也可以自己很快的实现： 
 代码如下:

String.prototype.trim = function() { 
return this.replace(/^\s+|\s+$/g, ''); 
}; 
 
我们知道正则表达式一个很强大的功能就是向后引用(Back Reference)，实际上JavaScript的replace不仅在第一个参数内做向后引用，而且在替换字符串上，也可以进行向后引用，只是很多地方可能用反斜杠(\)加数字作为标示而JavaScript则是用美刀($)加数字作为标示。 
 代码如下:

var friends = 'friends of Ider, friend of Angie'; 
var result = friends.replace(/(friends?) of (\w+)/g, "$2's $1"); 
document.write(result); 
//output: 
//Ider's friends, Angie's friend 
 
通过在替换字符串里面进行向后引用，我们很快就把“朋友 of 谁谁谁”变成了“谁谁谁的朋友”。如果还要更复杂点怎么办呢？没有关系，replace还能接受Function作为参数作为回调函数，其中函数的第一个参数是整个匹配中的字符串，之后每一个代表个个向后引用匹配的，函数的返回值则是作为替换的字符串。所以很多使用，函数参数都会用$0, $1, $2来表示。来看个例子： 
 代码如下:

var friends ="friends of mine, friend of her and friends of his"; 
var result = friends.replace(/(friends?) of (\w+)/g, 
function($0, $1, $2) { 
if($2 == 'mine') $2 = 'my'; 
return $2 + ' ' + $1; 
}); 
document.write(result); 
//output: 
//my friends, her friend and his friends 
 
通过回调函数就可以实现很多很负责的字符串匹配了。至于效率，就先不考虑了。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的JavaScript字符串String和Array操作的有趣方法全部内容，希望文章能够帮你解决JavaScript字符串String和Array操作的有趣方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端