JavaScript字符串截取与处理常用方法详解

在开发过程中，字符串的切割与截取操作虽不如基础运算频繁，但因其细节繁多且易混淆，掌握相关技巧有助于提升代码健壮性。此处整理以备日常查阅，确保在实际应用中能够从容应对各种字符串处理需求。

以下示例均基于统一测试环境编写，若发现细微差异或笔误，敬请谅解。部分未列出的相关属性将在后续补充完善。

字符串分割与数组合并

1. 函数：split()

功能描述：该方法通过指定的分隔符将字符串分割，并将结果存储为数组。

示例代码： str = "jpg|bmp|gif|ico|png"; arr = str.split("|"); // 执行后，arr 是一个包含 "jpg"、"bmp"、"gif"、"ico" 和 "png" 五个元素的数组。

2. 函数：join()

功能描述：该方法使用指定的分隔符将一个数组元素合并为一个字符串。

示例代码： var delimitedString = myArray.join(delimiter); var myList = new Array("jpg", "bmp", "gif", "ico", "png"); var portableList = myList.join("|"); // 执行结果为 "jpg|bmp|gif|ico|png"

3. 函数：concat()

功能描述：该方法用于将两个或多个数组连接在一起，生成一个新的数组。

示例代码： arr1 = [1, 2, 3, 4]; arr2 = [5, 6, 7, 8]; alert(arr1.concat(arr2)); // 输出结果为 [1, 2, 3, 4, 5, 6, 7, 8]

字符获取与编码查询

4. 函数：charAt()

功能描述：该方法返回指定索引位置的字符。字符串中首个字符的索引为 0。若提供的 index 参数超出 0 到 string.length-1 的范围，该方法将返回空字符串。

示例代码： var str = 'a,g,i,d,o,v,w,d,k,p'; alert(str.charAt(2)); // 输出结果为 'g'

5. 函数：charCodeAt()

功能描述：该方法返回指定位置字符的 Unicode 编码值，返回值是一个介于 0 到 65535 之间的整数。

说明：charCodeAt() 与 charAt() 操作相似，区别在于前者返回指定位置字符的编码值，而后者直接返回该位置的字符子串。

示例代码： var str = 'a,g,i,d,o,v,w,d,k,p'; alert(str.charCodeAt(2)); // 输出结果为 103，即字符 'g' 的 Unicode 编码为 103

数组与字符串切片方法

6. 函数：slice()

语法：arrayObject.slice(start, end)

参数说明 start：必需。规定选取的起始位置。若为负数，表示从数组尾部倒数计算，例如 -1 代表最后一个元素，-2 代表倒数第二个，依此类推。

参数说明 end：可选。规定选取的结束位置，即数组片断结束处的下标。若省略此参数，则截取从 start 到数组末尾的所有元素。若 end 为负数，同样表示从尾部倒数计算。

返回值：返回一个新数组，包含从 start 到 end（不包含 end 索引处的元素）之间的 arrayObject 元素。

示例代码： var str = 'ahji3o3s4e6p8a0sdewqdasj'; alert(str.slice(2, 5)); // 输出结果为 'ji3'

substring与substr截取详解

7. 函数：substring()

定义与用法：substring 方法用于提取字符串中位于两个指定索引之间的字符。

语法：stringObject.substring(start, stop)

参数 start：必需。一个非负整数，指定子串在 stringObject 中的起始字符位置。

参数 stop：可选。一个非负整数，指定子串结束位置的前一个字符索引（即提取到 stop-1 处的字符）。

若省略 stop 参数，则返回的子串将延伸至字符串末尾。

返回值：返回一个新字符串，包含从 start 处到 stop-1 处的所有字符，长度为 stop 减 start。注意：substring 返回的子串包含 start 处的字符，但不包含 stop 处的字符。若 start 与 stop 相等，返回空字符串（长度为 0）。若 start 大于 stop，该方法会在提取前自动交换这两个参数。若 start 或 stop 为负数，则将其视为 0 处理。

示例代码： var str = 'ahji3o3s4e6p8a0sdewqdasj'; alert(str.substring(2, 6)); // 输出结果为 'ji3o3'

8. 函数：substr

定义与用法：substr 方法用于返回从指定位置开始，具有指定长度的子字符串。

语法：stringObject.substr(start [, length ])

参数 start：必需。子字符串的起始位置，字符串首个字符索引为 0。

参数 length：可选。返回子字符串中包含的字符数量。若 length 为 0 或负数，返回空字符串。若省略此参数，则子字符串延续至 stringObject 末尾。

示例： var str = "0123456789";

测试用例： alert(str.substring(0)); //------------"0123456789" alert(str.substring(5)); //------------"56789" alert(str.substring(10)); //-----------"" alert(str.substring(12)); //-----------"" alert(str.substring(-5)); //-----------"0123456789" alert(str.substring(-10)); //----------"0123456789" alert(str.substring(-12)); //----------"0123456789" alert(str.substring(0, 5)); //---------"01234" alert(str.substring(0, 10)); //--------"0123456789" alert(str.substring(0, 12)); //--------"0123456789" alert(str.substring(2, 0)); //---------"01" alert(str.substring(2, 2)); //---------"" alert(str.substring(2, 5)); //---------"234" alert(str.substring(2, 12)); //--------"23456789" alert(str.substring(2, -2)); //--------"01" alert(str.substring(-1, 5)); //--------"01234" alert(str.substring(-1, -5)); //-------""

substr 和 substring方法的区别

<script type="text/javascript"> 
var str = "0123456789";// 
alert(str.substring(0));//------------"0123456789" 
alert(str.substring(5));//------------"56789" 
alert(str.substring(10));//-----------"" 
alert(str.substring(12));//-----------"" 
alert(str.substring(-5));//-----------"0123456789" 
alert(str.substring(-10));//----------"0123456789" 
alert(str.substring(-12));//----------"0123456789" 
alert(str.substring(0,5));//----------"01234" 
alert(str.substring(0,10));//---------"0123456789" 
alert(str.substring(0,12));//---------"0123456789" 
alert(str.substring(2,0));//----------"01" 
alert(str.substring(2,2));//----------"" 
alert(str.substring(2,5));//----------"234" 
alert(str.substring(2,12));//---------"23456789" 
alert(str.substring(2,-2));//---------"01" 
alert(str.substring(-1,5));//---------"01234" 
alert(str.substring(-1,-5));//--------"" 
alert(str.substr(0));//---------------"0123456789" 
alert(str.substr(5));//---------------"56789" 
alert(str.substr(10));//--------------"" 
alert(str.substr(12));//--------------"" 
alert(str.substr(-5));//--------------"0123456789" 
alert(str.substr(-10));//-------------"0123456789" 
alert(str.substr(-12));//-------------"0123456789" 
alert(str.substr(0,5));//-------------"01234" 
alert(str.substr(0,10));//------------"0123456789" 
alert(str.substr(0,12));//------------"0123456789" 
alert(str.substr(2,0));//-------------"" 
alert(str.substr(2,2));//-------------"23" 
alert(str.substr(2,5));//-------------"23456" 
alert(str.substr(2,12));//------------"23456789" 
alert(str.substr(2,-2));//------------"" 
alert(str.substr(-1,5));//------------"01234" 
alert(str.substr(-1,-5));//-----------"" 
</script>

关于JavaScript字符串截取与切割的技巧介绍至此。如需了解更多JS字符串处理相关内容，建议查阅本站过往文章或继续浏览后续系列教程，感谢支持！