JavaScript取子串方法slice,substr,substring对比表
2024-10-19 01:26:32
在程序语言中，字符串可以说是最常用的一种类型，而在程序中对字符串的操作也是十分频繁。当程序语言自带多种字符串操作的方法时，用该语言编程程序时就有很多的便利性，提高开发的效率。但是当方法过多，甚至目的相似、参数雷同的时候，就容易造成迷惑难以选择的窘境。
在JavaScript中就有这样的情况出现，对于取字符串的子串的操作，JavaScript提供了三种不同的方法：slice，substr，substring。虽然在网上随便搜索一下，就可以找到介绍三者区别的文章，但是每次使用的时候，依然会迷糊无从选择。因此结合网上介绍的区别，在本文中将它们的异同之处罗列在表中，方便参照和区分。
测试字符串: "0123456789"
浏览器：Chrome Version 29.0.1547.76
操作系统：Mac OS X Version 10.8.5
| 参数 | 方法 | ||||
| 参数1 | 参数2 | slice(begin[, end]) | substr(start[, length]) | substring(from[, to]) | |
| 参数/结果 | 7 | 789 | 789 | 789 | |
| 说明 | 只有参数1，省略参数2 | 从参数1指定的坐标截取到字符串结尾 | |||
| 参数/结果 | -3 | 789 | 789 | 0123456789 | |
| 说明 | 参数1为负数 | 从字符串末尾开始计算位置* | 视为0 | ||
| 参数/结果 | 21 | ||||
| 说明 | 参数1大于或等于字符串长度 | 视为字符串长度，即返回空字符串 | |||
| 参数/结果 | “3.21″ | 3456789 | 3456789 | 3456789 | |
| 说明 | 参数1为浮点数或只含数字的字符串 | 类似parseInt()将数值转换成整形 | |||
| 参数/结果 | NaN | 0123456789 | 0123456789 | 0123456789 | |
| 说明 | 参数1非为有效数值 | 非有效数值视为视为0 | |||
| 参数/结果 | 3 | 7 | 3456 | 3456789 | 3456 |
| 说明 | 既有参数1，又有参数2 | 从参数1的位置截取到参数2的位置 | 从参数1的位置截取长度为参数2的字符 | 同slice() | |
| 参数/结果 | 7 | 3 | 789 | 3456 | |
| 说明 | 参数1大于参数2 | 返回空字符串 | 从参数1的位置截取长度为参数2的字符 | 交换参数1和参数2再进行截取 | |
| 参数/结果 | 3 | -3 | 3456 | 012 | |
| 说明 | 参数2为负数 | 负数从字符末尾开始计算位置 | 视为长度0，返回空字符串 | 交换参数，负数视为0 | |
| 参数/结果 | 3 | 21 | 3456789 | 3456789 | 3456789 |
| 说明 | 参数2大于或等于字符串长度 | 视为字符串长度，结果同省略参数2 | |||
| 参数/结果 | 3 | NaN | 012 | ||
| 说明 | 参数2非为有效数值 | 非有效数值视为0，返回空字符串 | 非有效数值视为0，因长度为0返回空字符串 | 非有效数值视为0，交换参数进行截取 | |
| 参数/结果 | -7 | -3 | 3456 | ||
| 说明 | 参数1和参数2都为负数 | 从字符串末尾开始计算位置 | 长度为负数，返回空字符串 | 负数视为0，返回空字符串 | |
| 参数/结果 | -7 | 7 | 3456 | 3456789 | 0123456 |
| 说明 | 参数1为正数，参数2为负数 | (自动套用上边的规则，不解释) | |||
*从字符串末尾开始计算位置：-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推；也可视为字符串长度与负数之和的位置，若结果小于0，则视为0。
从上述表格对比中不难看出，三个方法之间的主要区别如下：
- 三个方法的参数1都代表子串开始位置，参数2在slice和substring中表示结束位置，而在substr中代表的则是子串长度；
- 对于负数态度，当出现在参数1的位置时，slice和substr从末尾开始计算，而substring不支持末尾计数法直接视为0；当出现在参数2位置时，slice和substring的处理同参数1：前者从末尾开始计算，后者转换成0，而substr则视负数长度为0返回空串；
- 对于参数1小于参数2的情况，substring最大的不同在于它会交换两个参数再截取子串，substr因第二参数表示的是长度因此并无异常，slice曽依然正常搜寻子串始末位置，若开始位置在结尾后边则返回空串。
根据MDN对substr的描述，在IE下可能并不支持负数从末尾计算的方式。
最后，自己来试试三个方法的效果吧:
| 字符串 | 参数1 | 参数2 | 运行 | slice | substr | substring |
| iderzheng | iderzheng.com | iderzheng |
//
References:
- String – JavaScript | MDN
- What is the difference between String.slice and String.substring in JavaScript? – Stack Overflow
- Slice vs Substr vs Substring vs [ ] Methods · jsPerf
最新文章
- 【leetcode】Path Sum
- velocity模板引擎学习(2)-velocity tools 2.0
- oracle merge into 的例子
- [LintCode] Segment Tree Build 建立线段树
- WebGL/X3DOM 跑在 iOS
- 设计模式学习之原型模式（Prototype,创建型模式）（5）
- Fragment实现底部Tab，切换可保存状态
- Scrapy安装问题
- dubbo服务者配置说明
- tortoise svn无法识别subversion check向下代码来解决
- 100个精选zencart扩展插件
- Winform DevExpress控件库（三） 使用NavBarControl控件定制导航栏
- bzoj 2588 树上主席树
- Vivado如何使用命令行创建工程
- 解除vnc viewer键盘快捷键的禁用
- vue computed计算属性和watch监听属性解疑答惑
- 未能从程序集“System.Transactions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”中加载类型“System.Transactions.TransactionScopeAsyncFlowOption”
- 使用idea 在springboot添加本地jar包的方法
- centos7.5 安装 redis-4.0.11
- 生物信息学——RNA的剪切过程