JS截取字符串的三种方法-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

JS截取字符串的三种方法

[导读]:JS中有三个截取字符串的方法,分别是substring()、substr()、slice()。相同点:对字符串进行截取,并且返回一个新的字符串,不会对原字符串进行修改。不同点:参数不同。1、substring()用于提取字符串中介于两个指定下标之间的字符。语法:string.substring(start,stop)参...

JS中有三个截取字符串的方法,分别是substring()、substr()、slice()。

    相同点:对字符串进行截取,并且返回一个新的字符串,不会对原字符串进行修改。

    不同点:参数不同。

1、substring()

用于提取字符串中介于两个指定下标之间的字符。

语法:string.substring(start,stop)

参数:

    start必需。一个非负的整数 ,规定要提取的子串的第一个字符在string中的位置。 

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

说明:

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

var a = '0123456789';
console.log(a.substring(1,5)); // 1234

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

var a = "0123456789";
console.log(a.substring(1,1)); // ""

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

var a = '0123456789';
console.log(a.substring(5,1)); // 1234

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

var a = '0123456789';
console.log(a.substring(5,-1)); // 01234
console.log(a.substring(5,0)); // 01234
console.log(a.substring(0,5)); // 01234

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

var a = '0123456789';
console.log(a.substring(5,2.5)); // 234
console.log(a.substring(5,2)); // 234
console.log(a.substring(2,5)); // 234

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

var a = '0123456789';
console.log(a.substring(5,'2.5')); // 234
console.log(a.substring(5,2)); // 234
console.log(a.substring(2,5)); // 234
console.log(a.substring(5,'ss')); // 01234
console.log(a.substring(5,NaN)); // 01234
console.log(a.substring(5,0)); // 01234
console.log(a.substring(0,5)); // 01234

2、substr()

在字符串中抽取从start下标开始的指定数目的字符。

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

语法:string.substr(start,length)

参数:

    start必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。

    length可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从string的开始位置到结尾的字串。

说明:

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

var a = '0123456789';
console.log(a.substr(1,5)); // 12345
console.log(a.substr(1,15)); // 123456789
// 只会到最末端,多了没用

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

var a = '0123456789';
console.log(a.substr(-4,2)); // 67
// -4表示从右开始数第4个,就是'6',然后取2个长度的字符串,就是'67'

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

var a = '0123456789';
console.log(a.substr(4,-2)); // ""
console.log(a.substr(4,0)); // ""

(4)如果start或者length为小数,那么会截取小数部分。

var a = '0123456789';
console.log(a.substr(1.2,5.2)); // 12345
console.log(a.substr(1,5)); // 12345

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

var a = '0123456789';
console.log(a.substr('aa','5')); // 01234
console.log(a.substr(0,5)); // 01234

3、slice()

可提取字符串的某个部分,并以新的字符串返回被提取的部分。

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

语法:string.slice(start,end)

参数:

    start必须。要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。    

    end可选。紧接着要抽取的片段的结尾下标。若未指定此参数,则要提取的子串包括start到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

说明:

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

var a = '0123456789';
console.log(a.slice(1,5)); // 1234

(2)当start或者end为负值时,定位方式和substr一样,从右往左数,从1开始。

var a = '0123456789';
console.log(a.slice(1,-1)); // 12345678
//起始点从第1(包括)开始,结束点为从右往左数第1个(不包括)

(3)start到end的顺序始终是从左到右,如果最终start的位置在end的右边,那么返回''"。

var a = '0123456789';
console.log(a.slice(2,1)); // ""
//2所在的位置是'2',1所在的位置是'1',从2=>1,方向相反,返回为空
console.log(a.slice(-2,1)); // ""
//-2所在的位置是'8',1所在的位置是'1',从8=>1,方向相反,返回为空
console.log(a.slice(-2,-1)); // 8
//-2所在的位置是'8',-1所在的位置是'9',从8=>9,方向正常,返回为'8'

(4)其他情况和substring处理方式一致 。

var a = '0123456789';
console.log(a.slice('xx','5.5')); // 01234
// => a.slice(0,5)

总结:

  • substring()不支持负值,其他两种方法均支持负数表示,并且是从右边第一位开始计数。

  • substr()的第二个参数是长度。

  • slice()是从start->end

image.png

本文来自阿习进阶博客,如若转载,请注明出处:http://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ