这篇文章主要介绍了 JavaScript 中 split 与 join 函数的进阶使用技巧, split 和 join 通常被用来操作数组和字符串之间的转换, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Javascript 拥有两个相当强大而且受开发者喜爱的函数:split 与 join 俩对立的函数。这俩函数能让 string 与 array 两种类型互换,也就是数组能被序列化为字符串,反之亦然。我们能把这俩函数发挥得淋漓尽致。下面就来探索里面的一些有趣的应用, 首先介绍一下这两个函数:
String.prototype.split(separator, limit)
separator 把字符串分割为数组,可选参数 limit 定义了生成数组的最大 length。
- "85@@86@@53".split('@@'); //['85','86','53'];
- "banana".split(); //["banana"]; //( thanks peter (-: )
- "president,senate,house".split(',',2); //["president", "senate"]
- Array.prototype.join(separator)
可选参数 separator 把数组转换为一个字符串。如果不提供 separator, 那么就会把逗号做为这个参数值(就跟数组的 toString 函数一样)。
- ["slugs","snails","puppy dog's tails"].join(' and '); //"slugs and snails and puppy dog's tails"
- ['Giants', 4, 'Rangers', 1].join(' '); //"Giants 4 Rangers 1"
- [1962,1989,2002,2010].join();
下面来看这些应用:
replaceAll
这个简单的函数不像原生的 replace 函数,它能作为一个全局的子字符串替换而不需要使用正则表达式。
- String.prototype.replaceAll = function(find, replaceWith) {
- return this.split(find).join(replaceWith);
- }
- "the man and the plan".replaceAll('the','a'); //"a man and a plan"
对于小的字符串,它比单个字符替换的原生函数性能要弱一些(这里指的是正则表达式的两个额外的函数),但是在 mozilla 下,如果这个字符超过 2 个或 3 个字符话,这种使用函数要比正则表达式运行得更快。
occurences
该函数能取到子字符串匹配的个数。而且这种函数很直接不需要正则。
- String.prototype.occurences = function(find, matchCase) {
- var text = this;
- matchCase || (find = find.toLowerCase(), text = text.toLowerCase());
- return text.split(find).length-1;
- }
- document.body.innerhtml.occurences("div"); //google home page has 114
- document.body.innerHTML.occurences("/div"); //google home page has 57
- "England engages its engineers".occurrences("eng",true); //2
- repeat
该函数是从 prototype.js 借鉴而来:
- String.prototype.repeat = function(times) {
- return new Array(times+1).join(this);
- }
- "go ".repeat(3) + "Giants!"; //"go go go Giants!"
它的美妙之处就在于 join 函数的使用。焦点就在这个 separator 参数值,然后这个基础数组仅仅包含了一些未定义的 value 值。为了更清楚的说明这点,我们来重造一下上面的实例:
- [undefined,undefined,undefined,undefined].join("go ") + "Giants
记住在 join 之前每个数组元素都会转换为一个字符串(这里就是一个空字符串)。这个 repeat 函数的应用是通过数组字面量定义数组的为数不多的不可行的应用。
使用 limit 参数
我很少使用 split 函数的 limit 可选参数,下面介绍一个使用这个 limit 的实例:
- var getDomain = function(url) {
- return url.split('/',3).join('/');
- }
- getDomain("http://www.aneventapart.com/2010/seattle/slides/");
- //"http://www.aneventapart.com"
- getDomain("https://addons.mozilla.org/en-US/firefox/bookmarks/");
- //"https://addons.mozilla.org"
修改数值成员
如果我们将正则混合起来使用,join,split 就能很容易的修改数组成员了。但是这个函数也没有想象的难,它的主要功能是去掉给定数组的每个 member 前面指定的字符串。
- var beheadMembers = function(arr, removeStr) {
- var regex = RegExp("[,]?" + removeStr);
- return arr.join().split(regex).slice(1);
- }
- //make an array containing only the numeric portion of flight numbers
- beheadMembers(["ba015","ba129","ba130"],"ba"); //["015","129","130"]
不幸的是,这种函数在 IE 中失效,因为他们从 split 中错误的去掉了第一个空成员。现在来修正这种函数:
- var beheadMembers = function(arr, removeStr) {
- var regex = RegExp("[,]?" + removeStr);
- var result = arr.join().split(regex);
- return result[0] && result || result.slice(1); //IE workaround
- }
我们为什么要用这个技巧而不用 Emascript 5 中 array 的 map 函数呢?
- ["ba015","ba129","ba130"].map(function(e) {
- return e.replace('ba','')
- }); //["015","129","130"]
在实际的运用中,在可行的时候,我通常使用原生的 map 函数(在 IE<9 以下不可用)。下面的例子仅仅作为学习的工具,但是值得注意的是,join 与 split 的调用语法更简洁更直接一些。最有趣的是,它也非常高效,尤其是对于很小的数组,在 FF 与 Safari 中它表现为更为高效。对于大数组来说,map 函数就更合适一些。(在所有的浏览器中),join 与 split 函数的函数调用会少一些。
- //test 1 - using join/split
- var arr = [],
- x = 1000;
- while (x--) {
- arr.push("ba" + x);
- }
- var beheadMembers = function(arr, regex) {
- return arr.join().split(regex).slice(1);
- }
- var regex = RegExp("[,]?" + 'ba');
- var timer = +new Date,
- y = 1000;
- while (y--) {
- beheadMembers(arr, regex);
- }; + new Date - timer;
- //FF 3.6 733ms
- //Ch 7 464ms
- //Sa 5 701ms
- //IE 8 1256ms
- //test 2 - using native map function
- var arr = [],
- x = 1000;
- while (x--) {
- arr.push("ba" + x);
- }
- var timer = +new Date,
- y = 1000;
- while (y--) {
- arr.map(function(e) {
- return e.replace('ba', '')
- });
- } + new Date - timer;
- //FF 3.6 2051ms
- //Cr 7 732ms
- //Sf 5 1520ms
- //IE 8 (Not supported)
模式匹配
数组需要不断的去执行模式匹配,但是字符串不会。正则表达式能在字符串中运用,但是在数组中不会。把数组转为字符串用于模式匹配的强悍之处远远超越这篇文章讲述的范围。让我们来看看它的一个简单应用。
假设竞走的比赛结果需要保存到数组中。目的就是将竞赛者与他们的记录时间交替的放在数组中。我们可以用 join 与正则表达式来验证这种存储模式是否正确。下面的代码就是通过查找两个连续的名字来找出记录时间被漏掉的情况。
- var results = ['sunil', '23:09', 'bob', '22:09', 'carlos', 'mary', '22:59'];
- var badData = results.join(',').match(/[a-zA-Z]+,[a-zA-Z]+/g);
- badData; //["carlos,mary"]
来源: http://www.phperz.com/article/17/0301/266030.html