前端开发让前端飞前端攻城狮

JavaScript字符串的分割

2018-02-13  本文已影响97人  前端王睿

说完字符串的裁剪,这次来说说字符串的分割。

你可能会有所疑惑,裁剪和分割,这两者到底有什么区别呢?

裁剪: 一次裁剪一部分子字符串并返回,可使用slice()substring()substr()方法实现
分割: 一次可将字符串分割成多个子字符串并返回由这些子字符串组成的数组,可使用split()实现

好,了解了裁剪和分割的区别之后,我们接下来看看具体如何使用split()方法来实现字符串的分割。

首先,我们先定义一个字符串:

var str = 'Hello World!';

一、只传一个参数

1. 传入非空字符串

console.log(str.split('l'));    // [ "He","","o Wor","d!" ]

很简单,我们把字符“l”作为分隔符传入split()方法,最后返回被字符"l"分割成的子字符串组成的数组。

2. 传入空字符串

我们也可以将字符串分割成一个个字母组成的数组,只需给split()传入空字符串即可。

console.log(str.split(''));    // [ "H","e","l","l","o","","W","o","r","l","d","!" ]

3. 传入正则表达式

console.log(str.split(/l+/));   // [ "He","o Wor","d!" ]

这个其实就是使用与正则相匹配的子字符串来分割原字符串,而这里匹配到的有两个:“l”和“ll”,所以结果其实就是使用这两个字符串来分割。

二、传入两个参数

第一个参数还是一样,字符串或正则,而第二个参数则是一个数字,用于指定返回数组的大小。例如:

console.log(str.split('',5));   // [ "H","e","l","l","o" ]

这实际就是在str.split('')的基础上又截取了输出数组的前5项,与下面两种方式的运行结果是一样的:

console.log(str.slice(0,5).split(''));   // [ "H","e","l","l","o" ]
console.log(str.split('').slice(0,5));   // [ "H","e","l","l","o" ]

这两种方式,一个是先裁后分,另一个则是先分后裁,最终结果都是一样的。而给split()方法传入第二个参数则相当于是个简化版,效果其实是一样的。

三、逆操作方法

说完了split()的用法,再顺便提一提该方法的逆操作方法——join()

split(): 将字符串分割成数组
join(): 将数组合并成字符串

1. 不传参

console.log(str.split('',5).join());   // "H,e,l,l,o"

默认使用逗号来连接数组的每一项而组成字符串并返回。

2. 传入空字符串

console.log(str.split('',5).join(''));   // "Hello"

直接将数组中的每一项连接起来组成字符串并返回。

3. 传入非空字符串

console.log(str.split('',5).join('|'));   // "H|e|l|l|o"

使用所传字符串参数来连接数组的每一项而组成字符串并返回。

四、活学活用

以上说了这么多,其实真正的内容没多少,关键还是应该掌握如何在实际工作当中去灵活使用。

下面我就随便举个简单的小例子吧~

如何删除字符串中的某个字符或字符串?

实现这个功能的方法可能有很多,但我个人觉得最简单方便的就是同时使用split()join()了。

还是使用最开始的字符串,我们下面将所有的字符 “l” 删除。

console.log(str.split('l').join(''));   // "Heo Word!"

很简单,先分割后合并,不再赘述。

事实上,只要对数组可以实现的功能,在字符串上也能实现,只要先使用split()将字符串转换成数组,使用数组方法处理过后,再用join()将其转换回字符串即可。

本文重点总结:

split() 可以传字符串或正则,也能传第二参数
split() 的逆操作是 join()
③ 字符串和数组可以自由转换,所以相当于它们所具备的很多方法是可以通用的

上一篇下一篇

猜你喜欢

热点阅读