在程序语言中，字符串可以说是最常用的一种类型，而在程序中对字符串的操作也是十分频繁。当程序语言自带多种字符串操作的方法时，用该语言编程程序时就有很多的便利性，提高开发的效率。但是当方法过多，甚至目的相似、参数雷同的时候，就容易造成迷惑难以选择的窘境。

在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:

  1. String – JavaScript | MDN
  2. What is the difference between String.slice and String.substring in JavaScript? – Stack Overflow
  3. Slice vs Substr vs Substring vs [ ] Methods · jsPerf

 

JavaScript取子串方法slice,substr,substring对比表的更多相关文章

  1. JavaScript中,提取子字符串方法:Slice、Substring、Substr的比较。

    在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. // slice // 语法: string.slice(beginSlice [, e ...

  2. slice splice(数组) 和 slice substr substring split (字符串)的区别

    array.slice(start,end)slice()如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾如果两个参数中的任何一个是负数,array.length会和它们相加 stri ...

  3. JS-字符串截取方法slice、substring、substr的区别

    一.使用 slice() 截取 1,函数说明 slice() 方法可通过指定的开始和结束位置,提取字符串的某个部分,并以新的字符串返回被提取的部分.语法如下: stringObject.slice(s ...

  4. [javascript string] slice();substr();substring();之间的区别

    今天遇到这个问题,发现ぜんぜんわすねまます3个方法,直接上代码吧,[网络版本较多就不注明参考过哪些了 -0- ] var test = 'hello world'; //均一位参数测试 console ...

  5. JavaScript截取字符串的Slice、Substring、Substr函数简单比较还有indexof函数应用

    //截取字符,一看就明白!!! var str = "0123456789"; alert(str.substring(5)); 弹出 //56789 alert(str.subs ...

  6. js截取字符串方法整理slice(), substr(), substring(), split()

      substr(start,length) stringObject.substr(start,length) //start,截取起始下标,-1 指字符串最后一个字符,-2 指倒数第二个字符开始 ...

  7. javascript中String 对象slice 和substring 区别

      1.slice(start,stop)和substring(start,stop)  方法都是用于提取字符串中从start开始到stop-1间的字符(因为字符串索引是从0开始).其中 start必 ...

  8. slice,substr,substring

    var s = '0123456789';   //slice 遇负数,则此负数值等同于 s.length + (负数) s.slice(3,6); //"345", 从位置3开始 ...

  9. slice,substr,substring的区别

    <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...

随机推荐

  1. R----dplyr包介绍学习

    dplyr包:plyr包的替代者,专门面对数据框,将ddplyr转变为更易用的接口 %>%来自dplyr包的管道函数,其作用是将前一步的结果直接传参给下一步的函数,从而省略了中间的赋值步骤,可以 ...

  2. 向txt文件中写入换行

    char ret[2];//向记事本中写入这个char数组可以实现换行 ret[0] = 13;// \r ret[1] = 10;// \n fwrite(ret, 2, 1, pFile);

  3. stoneniqiu 理想就是自己喜欢做,并对社会和他人都有意义的事情！

    H5嵌入原生开发小结----兼容安卓与ios的填坑之路 2016-11-19 08:29 by stoneniqiu, 1038 阅读, 8 评论, 收藏, 编辑 一开始听说开发H5,以为就是做适配现 ...

  4. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

  5. js实现手机号码和身份证号码校验

    <script type="text/javascript"> function checkform() { var re; var ss = document.get ...

  6. JQuery基础核心

    一.代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的. 而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执 ...

  7. OpenCV图像处理中常用函数汇总（2）

    // 霍夫线变换 hough vector<Vec2f> lines;//定义一个矢量结构lines用于存放得到的线段矢量集合 HoughLines(dstImage,lines,,CV_ ...

  8. Security » Authorization » 简单授权

    Simple Authorization¶ 简单授权 82 of 86 people found this helpful Authorization in MVC is controlled thr ...

  9. 用hasOwnProperty获取对象自身的属性排除原型链

    今天遇到一个多层级的object. 需要判定每一层级的data下是否有title属性.在下图中展开的data自身其实是没有title的,但由于受到原型链__proto__的影响,在获取parent.d ...

  10. Load Runner11录制脚本出现乱码的解决方法

    方法一: 1.录制的脚本出现乱码 Go to Vugen -> Tools -> Recording Options -> Advancedb)   Check the option ...