JavaScript字符串的分割

简介: 说完字符串的裁剪,这次来说说字符串的分割。你可能会有所疑惑,裁剪和分割,这两者到底有什么区别呢?裁剪: 一次裁剪一部分子字符串并返回,可使用slice()、substring()和substr()方法实现分割: 一次可将字符串分割成多个子字符串并返回由这些子字符串组成的数组,可使用split()实现好,了解了裁剪和分割的区别之后,我们接下来看看具体如何使用split()方法来实现字符串的分割。

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

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

裁剪: 一次裁剪一部分子字符串并返回,可使用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()
③ 字符串和数组可以自由转换,所以相当于它们所具备的很多方法是可以通用的

相关文章
|
1月前
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
1月前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
8 3
|
4天前
|
存储 JavaScript 前端开发
JavaScript字符串方法详解
JavaScript字符串方法详解
16 0
|
5天前
|
SQL 缓存 JavaScript
深入解析JavaScript中的模板字符串
深入解析JavaScript中的模板字符串
13 1
|
5天前
|
JavaScript 索引
js字符串操作的方法
js字符串操作的方法
11 0
|
5天前
|
JavaScript 前端开发 索引
js关于字符串的方法
js关于字符串的方法
10 0
|
5天前
|
JavaScript 前端开发
js关于字符串的方法
js关于字符串的方法
10 0
|
5天前
|
开发框架 JavaScript .NET
Js字符串操作函数大全
Js字符串操作函数大全
10 1
|
5天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
14 2