2024年最全前端开发：JS中截取字符串的用法总结(1)，文末有福利

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

8、

var a = '0123456789’;

a.substring(5,’2.4’); //  start 和 stop 有字符串, 但是最后的输出结果是： “234”

a.substring(5,’hh’) ; // start 和 stop 有字符串, 但是最后的输出结果是： “234”

二、substr()方法

语法： string.substr(start,length)

定义和用法：

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

注意：

substr() 方法不会改变源字符串。

释义：

substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

参数

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

返回值

类型	描述
String	A new string containing the extracted part of the text

说明

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

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

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

3.若length为负值，则会直接当成0处理，最终返回””；

4.若start或者length为小数，则会截取小数部分；

5.若 start 和 length 有字符串，则会先进行parseInt()，若转换结果为NaNa，则就转换为0，其余情况继续按照上述规则执行。

示例：

1、

str.substr(4,6);  // 从第4个字符开始截取6个字符

2、

var str=“Hello world!”;

var n=str.substr(3); //第3个字符开始截取到字符串的最末尾  输出结果：lo world!

3、

var a = '0123456789’;

a.substr(1,5); // 从第1个字符开始截取6个字符， 输出结果：“12345”

a.substr(1,15); //从第1个字符开始截取，只会到最末端，长度写多了也没用， 输出结果：“123456789”

4、

var a = '0123456789’;

a.substr(-4,2); //-4表示从右开始数第4个，就是’6’，然后取2个长度的字符串，就是’67’ ，输出结果：“67”

5、

var a = '0123456789’;

a.substr(4,-2); // length为负值，则会直接当成0处理，  输出结果： “”

6、

var a = '0123456789’;

a.substr(1.2,5.2); // start或者length为小数 ， 输出结果：“12345”

7、

var a = '0123456789’;

a.substr(‘aa’,‘5’) ; // start 和 length 有字符串 ，输出结果：“01234”

三、slice()方法

语法： string.slice(start,end)

定义和用法：

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

注意：

使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。

释义：

slice(start,end) 方法用于提取字符串的某个部分（从参数 start 到 end 位置），并以新的字符串返回被提取的部分。类似 substring()。

参数

参数	描述
start	必须。要抽取的片断的起始下标，第一个字符位置为 0。如果为负数，则从尾部开始截取。
end	可选。紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

返回值

类型	描述
String	提取的字符串

说明

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

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

2.当start或者end为负值时，定位方式和substr()相同，从右往左数，从1开始；

3.start到end的顺序始终是从左到右，如果最终start的位置在end的右边，那么返回“”；

4.其他情况和substring()处理方式相同，这里不再赘述。

示例：

1、

str.slice(4)+“
” ;   // 从第 5 个字符开始截取到末尾

2、

str.slice(4,10); // 从第 5 个字符开始截取到第10个字符

3、

var a = '0123456789’;

a.slice(1,5); // 从第 2个字符开始截取到第5个字符，输出结果：“1234”

4、

var a = '0123456789’;

a.slice(1,-1); //start或者end为负值时，起始点从第1（包括）开始，结束点为从右往左数第1个（不包括） ，输出结果：“12345678”

5、

var a = '0123456789’;

a.slice(2,1); // start 比 stop 大，2所在的位置是’2’，1所在的位置是’1’，方向相反，返回为空，输出结果：“”

a.slice(-2,1); //start或者end为负值时，-2所在的位置是’8’，1所在的位置是’1’，方向相反，返回为空，输出结果：“”

a.slice(-2,-1); //start或者end为负值时，-2所在的位置是’8’，-1所在的位置是’9’，方向正常， 输出结果：“8”

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

/start或者end为负值时，-2所在的位置是’8’，-1所在的位置是’9’，方向正常， 输出结果：“8”

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-bulKzGay-1715052527963)]