在JavaScript中,我们可以使用split()方法把一个字符串分割成一个数组,这个数组存放的是原来字符串的所有字符片段。有多少个片段,数组元素个数就是多少。

这一节由于涉及数组对象,所以建议小伙伴们跳过这一节,等学了“第6章 数组对象”再返回来看一下这一节。因为技术这东西嘛,很多时候两两之间都是有着藕断丝连的关系,而往往一刀切开来介绍是做不到的。了解到这一点非常重要。小伙伴们在学任何技术时,发现有些东西看不懂,继续学下去就对了。学到后面,知识就串起来了,然后返回来再看,之前纠结半天的知识突然就懂了。这跟我们一直强调这个教程至少要看两遍的道理是一样的。

语法:

字符串名.split("分割符")

说明:

分割符可以是一个字符、多个字符或一个正则表达式。此外,分割符并不作为返回数组元素的一部分。有点难理解?还是先看一个例子来得直观些。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var str = "HTML,CSS,JavaScript"; var arr = str.split(","); document.write("数组第1个元素是:" + arr[0] + "<br/>"); document.write("数组第2个元素是:" + arr[1] + "<br/>"); document.write("数组第3个元素是:" + arr[2]); </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

str.split(",")表示使用英文逗号作为分割符,然后来分割str这个字符串,最后会得到一个数组:["HTML","CSS","JavaScript"]。我们再把这个数组赋值给变量arr保存起来。

可能就有人问了:为什么分割字符串之后,系统会让这个字符串转换成一个数组?其实这是因为转换成数组之后,我们才能用到数组的方法来更好地进行操作。当然,我们还是先学了数组才会知道。

上面这个例子,也可以使用for循环来输出,实现代码如下:

var str = "HTML,CSS,JavaScript"; var arr = str.split(","); for (var i = 0; i < arr.length; i++) { document.write("数组第" + (i + 1) + "个元素是:" + arr[i] + "<br/>"); }

举例:str.split(" ")(有空格)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var str = "I love lvye"; var arr = str.split(" "); document.write("数组第1个元素是:" + arr[0] + "<br/>"); document.write("数组第2个元素是:" + arr[1] + "<br/>"); document.write("数组第3个元素是:" + arr[2]); </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

str.split(" ")表示用空格来分割字符串。在字符串中,空格也是作为一个字符来处理的。

str.split(" ")两个引号之间是有一个空格的。str.split(" ")(有空格)是带有一个字符的字符串。

str.split("")(无空格)是一个带有0个字符的字符串,也叫空字符串。两者是不一样的,我们可以通过下面这个例子对比一下。

举例:str.split("")(无空格)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var str = "lvye"; var arr = str.split(""); document.write("数组第1个元素是:" + arr[0] + "<br/>"); document.write("数组第2个元素是:" + arr[1] + "<br/>"); document.write("数组第3个元素是:" + arr[2] + "<br/>"); document.write("数组第4个元素是:" + arr[3] + "<br/>"); </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

注意,split(" ")split("")是不一样的!前者两个引号之间是有空格的,所以表示用空格作为分割符来分割。后者两个引号之间是没有空格的,所以可以用来分割字符串每一个字符。这个技巧非常棒,也用得很多,小伙伴们可以记一下。

实际上,split()方法有两个参数:第1个参数表示分割符;第2个参数表示获取分割之后截取的前n个元素。不过第2个参数我们很少用,了解一下即可。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var str = "2017-03-15-08-30"; var arr = str.split("-", 3); document.write(arr); </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

只有我们学了“字符串对象”和“数组对象”,才会真正掌握split()方法。数组join()方法一般都是配合字符串的split()方法来使用的。