在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()方法来使用的。