js字符串截取的方法详解(slice、substring、substr)

面试中: 请问字符串的截取方法有哪些?各有什么特点?
相信大家都熟悉字符串中的截取方法: slice、 substring 、substr,它们的身影总会出现在面试中、工作中
那么总结一下吧~

咱们先来一段前戏:

字符串是一种基本数据类型,为什么它身上会有这三种方法呢?哈哈,一句老话,“万物皆对象”,其实字符串是一种包装对象类型,每当读取一个基本数据类型值的时候,或者引用了其方法或属性,JavaScript就会将字符串值val通过调用new String(val)的方法转换成对象,那么这个对象继承了字符串的方法,一旦方法使用结束之后,这个新创建的对象就会被销毁(自生自灭~)

来个凉菜:

        var str = 'some string';
        // (1) 创建 String 类型的一个实例;
        // (2) 在实例上调用指定的方法;
       
        // var str = new String('some string');
        // var newStr = str.slice(2);
         
        var newStr = str.slice(2);
        // (3) 销毁这个实例
        // str = null;

开始咱们的翻云覆雨吧~
嘿嘿~ 不过还是先来几个咱们熟悉的姿势~

1. String.slice

语法:
str.slice(start, end);
起始下标(start) <= 截取的范围 < 结束下标(end)
包括起始下标对应字符, but不包括结束下标;

来个’串’

let str = '小贝老师真漂亮!';
  1. 当只传一个参数的时候:默认为start,(start <= 范围 < str.length)
console.log(str.slice(1)); // 贝老师真漂亮!
  1. 当传两个参数的时候:截取的字符串为: start <= 截取范围 < end
console.log(str.slice(1, 4)); // 贝老师

2. String.substring

语法:
str.substring(start, end);
起始下标 <= 截取的范围 < 结束下标
包括起始下标对应字符, 但不包括结束下标;

也来个’串’

let str = '小贝老师真漂亮!';
  1. 当只传一个参数的时候:默认为start,(start <= 范围 < str.length)
console.log(str.substring(1)); // 贝老师真漂亮!
  1. 当传两个参数的时候:截取的字符串为: start <= 截取范围 < end
console.log(str.substring(1, 4)); // 贝老师

3. String.substr

语法:
str.substr(start, length);
起始下标<= 截取的范围 <= 自定义截取的长度
substr方法更直截(直接定义长度)

再来个’串’

let str = '小贝老师真漂亮!';
  1. 当只传一个参数的时候:默认为start, (start<= 截取范围 < str.length)
console.log(str.substr(1)); // 贝老师真漂亮!
  1. 当传两个参数的时候:截取的字符串为: (start <= 截取范围 <= 自定义截取的长度)
console.log(str.substr(1, 4)); // 贝老师真

熟悉的姿势咱们都用过了,试试不常用的姿势了吧~
要进入高潮啦~ 忍住啦~

一. String.slice() 遇上了’辣妹子'(负数)该如何是否?

1. 当起始值start为负数的时候:

let str = '小贝老师真漂亮!';
console.log(str.slice(-1)); // !
console.log(str.slice(-2)); // 亮!
console.log(str.slice(-3)); // 漂亮!

结果为:
反向下标截取
反向的下标<= 截取范围 < 字符串长度

2. 当反向下标的绝对值大于或等于长度的时候呢?

console.log(str.slice(-str.length)); // 小贝老师真漂亮!
console.log(str.slice(-str.length - 1)); // 小贝老师真漂亮!
console.log(str.slice(-str.length - 2)); // 小贝老师真漂亮!

当反向下标的绝对值大于或等于字符串长度,仿佛会置为0,结果截取到了字符串结束

来张纸巾(粗糙的画画)擦擦汗吧~ 反向下标是个啥?

a4tod-4nwzq.jpeg
 
                                                                                                         反向下标.PNG
  1. 反向的下标对应的字符 ~ 截取至字符串结束
  2. 反向下标的绝对值大于了字符串长度会置为0,然后再开始截取

3. ‘软妹子'(正)和’辣妹子'(负)一起上

3.1 起始下标为正数 <= 截取范围 < 结束下标为负数
// 负数的结束下标未超越正数的起始下标
console.log(str.slice(1, -2)); // 贝老师真漂
console.log(str.slice(2, -4)); // 老师
console.log(str.slice(2, -5)); // 老

// 相同位置 正负下标对应同一个字符
console.log(str.slice(2, -6)); // ''

// 负数的结束下标超越正数的起始下标
console.log(str.slice(2, -7)); // ''

会发现只要end在start右侧才会正常的截取;
当end与start重合或者在start的左侧则变成了空字符串
说明违反了 start <= 截取范围 < end规则(截取的方向是从左至右的),返回的是空字符串

3.2 起始下标为负数<= 截取范围 < 结束下标为正数

当start为负数与0重合或在0的左侧,则会置为0,而重合返回是空字符串,按照start <= 截取范围 < end规则

// 负数的起始下标 -> 0的结束下标
console.log(str.slice(-9, 0)); // ''

// 负数的起始下标 === 0的结束下标
console.log(str.slice(-8, 0)); // ''

// 负数的起始下标 -> 正数的结束下标
console.log(str.slice(-8, 2)); // '小贝'
console.log(str.slice(-8, 8)); // '小贝老师真漂亮!'

当然还得测试一下end在start左侧的时候

结果:返回的是空字符串,(可以看出截取的方向是从左往右: start -> end)

// 负数的起始下标 -> 正数的结束下标 (end在start左侧)
console.log(str.slice(-3, 2)); // ''

二. String.Substring() 遇上了’辣妹子'(负数)又该如何是好?

1. 当起始下标为’辣妹子'(负数)的时候

负数的起始值果断置0~

WeChata6b9f488c2c97fd9364964e930cd430e.png
 
substring-负数.PNG
WeChat3d376272d08412560163f64355bc2a5f.png
 
substring-负数结果.PNG

2.Substring遇上一正一负的时候

2.1 当起始下标为’辣妹子'(负数),结束下标为’软妹子’(正数)

哈哈,果断的man!负数都置为0了,真好~

WeChat27a276c2d49157d7f032b957e460871c.png
 
substring-2.PNG
WeChatd3b77f4d0b11115005eb01745794690d.png
 
substring-2-res.PNG

2.2当起始下标为’辣妹子'(负数),结束下标也为’辣妹子'(负数)的时候~

钢铁直男的果断,负数的结束下标也置0了,导致都是空字符串

WeChataa9bcc707439c222a40c8cb8a8653a69.png
 
substring-3.PNG
WeChat4fa877f07b84371cad7ea75582679729.png
 
substring-3-res.PNG

2.3难不成这个东东就这么硬气吗?遇上负数这个妹子就一点都不懂得变通吗?

请看当起始下标为正数,结束下标为妹子(负数)

WeChatac35765fdececa35c679e67d708532a9.png
 
substring-4.PNG
WeChat0cd29f638abc1ffe6e5c3294e39ccc2d.png
 
substring-4-res.PNG

哈哈,差点单身一辈子了吧~
Substring方法:
当结束下标为负数则置为0,然后与起始下标互换位置;
起始下标正数摇身一变成为了结束下标截取的;
方向依然从左往右

三、给String.substr()一次机会-当它遇上’辣妹子'(负数)又是什么情况呢?

1. 起始值可以为负数,but自定义截取的长度请不要定义为负数

当起始下标为负数时,采取反向下标对应
当截取的长度设置为0或者是负数的时候则返回空字符串

WeChat00f7e140b005a02b90696e81183abd53.png
 
subStr.PNG
WeChat59789e3270073f9879e1370fdc5f7cf0.png
 
subStr-res.PNG

爽过之后,温存一下~

回头看看用过的纸巾~
先记住这个反向下标,然后总结下面几点,咱们就不会混淆啦~

WeChat79a43774dc96bd28a9d06c957be6b998.png
 
反向下标.PNG

1、 Slice

a) 注意截取顺序: 从左至右
b) 结束下标出现在起始下标左侧则返回空字符串

2、 Substring

a) 负数下标会置零,
b) start为正数,end为负数,end置零后会与start互换位置

3、 substr

a) 长度不能为负数
b) Start可为负数,可参考slice方法start为负数

首先很感谢能看到这里,也希望对大家有所帮助,如果问题,请多多赐教~

请登录后发表评论