JavaScript数组与字符串处理：join、splice、slice、split用法详解
本文详细介绍JavaScript中四个常用处理函数：join()用于将数组元素合并为字符串，split()用于将字符串分割为数组，slice()用于提取数组子集，splice()用于增删数组元素。通过具体代码示例解析各函数的参数、返回值及副作用，帮助开发者掌握数组与字符串的高效操作技巧。
本文通过具体实例，详细解析JavaScript中join()、splice()、slice()和split()四个函数的使用方法，供读者参考学习。
join()连接数组为字符串
join()函数
调用join()方法，可以将数组中的所有元素连接成一个字符串。
连接时，元素之间会使用指定的分隔符进行分隔。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(
arr.join()
)
</script>
执行结果如下：
George,John,Thomas
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(
arr.join(".")
)
</script>
若指定分隔符，执行结果如下：
George.John.Thomas
split()分割字符串为数组
split()函数
调用split()方法，可以将一个字符串按照指定规则分割，返回一个字符串数组。
<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>
执行结果如下：
How,are,you,doing,today? H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? How,are,you
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]
"hello".split("") //可返回 ["h", "e", "l", "l", "o"]
"hello".split("", 3) //可返回 ["h", "e", "l"]
slice()截取数组子集
slice()函数
调用slice()方法，可以从现有数组中截取并返回选定的元素序列。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(
arr.slice(1)
+ "<br />")
document.write(arr)
</script>
执行结果如下：
George,John,Thomas John,Thomas George,John,Thomas
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(
arr.slice(2,4)
+ "<br />")
document.write(arr)
</script>
若指定起始和结束索引，执行结果如下：
George,John,Thomas,James,Adrew,Martin Thomas,James George,John,Thomas,James,Adrew,Martin
splice()增删数组元素
splice()函数
调用splice()方法，可以向数组中添加或删除项目，并返回被删除的项目列表。
注意：splice()方法会直接修改原始数组。
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
</script>
仅添加元素（不删除）的执行结果如下：
George,John,Thomas,James,Adrew,Martin George,John,William,Thomas,James,Adrew,Martin
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)
</script>
添加并替换一个元素的执行结果如下：
George,John,Thomas,James,Adrew,Martin George,John,William,James,Adrew,Martin
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)
</script>
添加并替换多个元素的执行结果如下：
George,John,Thomas,James,Adrew,Martin George,John,William,Martin
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试运行一下文中所述代码。
更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《JavaScript字符与字符串操作技巧总结》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数组操作技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09