js中截取字符串的三个方法 substring()、substr()、slice()

elva 发布于2019-08-23 11:57 / 2504人阅读

摘要：方法用于提取字符串中介于两个指定下标之间的字符。一个非负的整数，规定要提取的子串的第一个字符在中的位置。子串中的字符数。控制台方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

查看原文可以有更好的排版效果哦

js中有三个截取字符的方法，分别是substring()、substr()、slice()，平时我们可能都用到过，但总是会对这些方法有点混淆，特别是substring()和substr()，连方法名都差不多，下面就具体来看一下区别。

相同点

这三个方法都可以对字符串进行截取，并且返回一个新的字符串，也就是不会对原字符串进行修改

//chrome控制台
> var a = "0123456789"
< undefined
> a.substr(1,5)
< "12345"
> a
< "0123456789"  //没有发生改变

不同点

这三个方法的不同之处在于参数不同。

substring

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法

string.substring(start,stop)

参数

参数	描述
start	必需。一个非负的整数，规定要提取的子串的第一个字符在 string 中的位置。
stop	可选。一个非负的整数，比要提取的子串的最后一个字符在 string 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

说明

1.substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substring(1,5)
< "1234"

2.如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substring(1,1)
< ""

3.如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substring(5,1) //=>a.substring(1,5)
< "1234"

4.如果 start 和 stop 有负数，那么会把该参数自动转为0，然后继续上述规则。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substring(5,-1) //=>a.substring(5,0) => a.substring(0,5)
< "1234"

5.如果 start 和 stop 有正小数（负数直接进行第4条），那么会把该参数向下取整，然后继续上述规则。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substring(5,2.5) //=>a.substring(5,2) => a.substring(2,5)
< "234"

6.如果 start 和 stop 有字符串，那么会先进行parseInt()，如果转换结果为NaN，那么就转换为0，其余情况继续上述规则。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substring(5,"2.5") // =>a.substring(5,2) => a.substring(2,5)
< "234"
> a.substring(5,"ss") // =>a.substring(5,2) =>a.substring(5,0) => a.substring(2,5)
< "234"

其他情况就没有一一测试了，当然正常情况下尽量不要这么干，毕竟语法上已经规定了是整数。

substr

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法

string.substr(start,length)

重要事项：ECMAscript 没有对该方法进行标准化，因此反对使用它。

参数

参数	描述
start	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 string 的开始位置到结尾的字串。

说明

该方法与substring()最大的区别在于第二个参数是你需要截取字符串的长度，而不是位置。

1.substr() 方法返回的子串从 start 处的字符开始（包括）往后截取length长度，如果超过最末端就到最末端结束。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substr(1,5)
< "12345"
> a.substr(1,15) //只会到最末端，多了没用
< "123456789"

2.start可以取负值，表示从字符串尾部往头部开始数（从右到左，注意是从1开始，比如-1 指字符串中最后一个字符），但是截取长度还是从左到右，如果超过最末端就到最末端结束。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substr(-4,2) //-4表示从右开始数第4个，就是"6"，然后取2个长度的字符串，就是"67"
< "67"

3.如果length为负值，那么会直接当成0处理，最终返回""。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substr(4,-2) // => a.substr(4,0)
< ""

4.如果start或者length为小数，那么会截取小数部分。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substr(1.2,5.2) // => a.substr(1,5)
< "12345"

5.如果 start 和 length 有字符串，那么会先进行parseInt()，如果转换结果为NaN，那么就转换为0，其余情况继续上述规则。

//chrome控制台
> var a = "0123456789"
< undefined
> a.substr("aa","5") // => a.substr(0,5)
< "01234"

slice

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法

string.slice(start,end)

参数

参数	描述
start	必须。要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end	可选。紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

该方法的两个参数均为位置坐标，和subtring比较像，区别就是该方法支持负数，并且不会交换位置，始终是从start到end，如果该区间不存在，那么返回""。

1.slice() 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。

//chrome控制台
> var a = "0123456789"
< undefined
> a.slice(1,5)
< "1234"

2.当start或者end为负值时，定位方式和substr一直，从右往左数，从1开始。

//chrome控制台
> var a = "0123456789"
< undefined
> a.slice(1,-1)//起始点从第1（包括）开始，结束点为从右往左数第1个（不包括）
< "12345678"

2.start到end的顺序始终是从左到右，如果最终start的位置在end的右边，那么返回""。

//chrome控制台
> var a = "0123456789"
< undefined
> a.slice(2,1)//2所在的位置是"2"，1所在的位置是"1"，从2=>1，方向相反，返回为空
< ""
> a.slice(-2,1)//-2所在的位置是"8"，1所在的位置是"1"，从8=>1，方向相反，返回为空
< ""
> a.slice(-2,-1)//-2所在的位置是"8"，-1所在的位置是"9"，从8=>9，方向正常，返回为"8"
< "8"

3.其他情况和substring处理方式一致

//chrome控制台
> var a = "0123456789"
< undefined
> a.slice("xx","5.5")// => a.slice(0,5)
< "01234"

小节

从上面测试得出结论，substring不支持负值，其他两种方式均支持负数表示，并且是从右边第一位开始计数。
substr的第二个参数是长度，这是和其他两种方式最大的不同之处，slice的方向性比较强，永远是从start=>end对应左=>右。

以上结论均在最新谷歌浏览器上测试，IE和火狐未测试。

GPU服务器私有云 js_substring_substr java的substring方法 js中的字符串方法 js字符串截取域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97738.html

js substr,slice,substring 的用法与区别

摘要：交换参数位置，小的在前。的如果为负数，同样从尾部算起，如果其绝对值超过原字符串长度或者为，返回空字符串。会取和中较小的值为二者相等返回空字符串，任何一个参数为负数被替换为即该值会成为参数。第二个为负值是始终返回控制符串。 slice，substring,substr三个函数都是截取字符串。先看方法的签名 slice(start, end); // 参数可为负数。第二个参数是指定结束位...

Lin_YT 2019-08-23 10:27 评论0 收藏0
字符串之截取

摘要：在该索引以为基数处结束提取字符串。非负数可选一个到字符串长度之间的整数。非负数若和相等，则返回一个空字符串。输出此外对于三者的执行效率，网上有个对一个长度为的字符串做截取测试，地址测试结果如图所示文章首发于在js中，需要经常处理字符串的问题，如果需要截取字符串的话，我们会选择slice、substr以及substring，下面就截取字符串的问题来细说一下。 slice slice(s...

Cruise_Chan 2019-08-20 18:18 评论0 收藏0
字符串方法总结

摘要：传入两个字符串如其实位置大于结束位置，返回空字符串若传入的有负数，则进行字符串长度的相加操作，在进行正数的参数进行操作。 String的操作在平时开发中经常操作现在对字符串中的方法进行一些归纳：1、访问字符串中指定位置的字符：charAt() charCodeAt()都接受一个参数 charAt():返回的是指定位置的字符 charCodeAt():返回指定位置字符的...

xioqua 2019-08-20 15:27 评论0 收藏0
js和es6中的字符串方法总结

摘要：截取字符串用法用数学表达式表达区间的话就是截取和上面结果一样会自动进行掉换，但是和必须要都为正数。 1.substring(start,end) -> 截取字符串用法： 1.substring(start,end) -> 用数学表达式表达区间的话就是截取[start,end);2.substring(start,end),end > start -> 和上面结果一样,会自动进行掉换...

godruoyi 2019-08-23 10:24 评论0 收藏0
js基础数组与字符串

摘要：最近在梳理的基础，首先从数组和字符串开始。如果超出有效范围与字符串长度减一的索引值返回空字符串返回对象内第一次出现子字符串位置。将字符串以参数分割为数组方法返回一个字符串，该字符串中的字母被转换成小写。最近在梳理js的基础，首先从数组和字符串开始。 string 常用方法： 1.substring(start开始位置的索引,end结束位置索引) 截取的位置不包含结束位置的字符,只写一...

liaosilzu2007 2019-08-20 16:55 评论0 收藏0