JavaScript中的substring()、substr()、slice()到底有啥区别

·  阅读 1818

这三个方法作用都是为了【截取】字符串,既然都有相同的作用,那为啥还需要搞这么多个方法呢?今天我们就来探讨一下它们的区别:

substring()

substring()方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

语法

str.substring(start, stop)

参数描述
start必需,需要截取的第一个字符的索引,访索引位置的字符作为返回的字符串的首字母
stop可选,一个0到字符串长度之间的整数,以该数字为索引的字符串不包含在截取的字符串内
var str = 'abcdefg';

str.substring(0, 3) // abc; [包含0,不包含3]
str.substring(3, 0) // abc; [会把小的值当成start, 大的值当成stop]
str.substringn(3, -3) // abc; [不允许负值,负值会自动变成0]
str.substring(3, NaN) // abc; [非数值转成0]
str.substring(3, 3) // '' [start === stop,返回空字符串]
str.substring(0, 7) // abcdefg
str.substring(0, 10) // abcdefg [超出str的总长度,取整个长度]

substr()

substr()方法返回一个字符串中从指定位置开始到指定字符数的字符。

语法

str.substr(start, length)

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

注意第二个参数是length, 而substring是stop, 从这字面意思应该也能意会出一些差别吧!

var str = 'abcdefghij';

str.substr(1, 2) // bc [从第一位开始,往取两个值]
str.substr(-3, 2) // hi [start为-3, 就是倒数第三个字符(或者可以理解为str.length - 3)的索引位置]
str.substr(-3) // hij [省略了leng,则从起始位置取到尾]
str.substr(3, 0); str.substr(3, -2); // '' [如果 length 为 0 或负值,则 substr 返回一个空字符串]
// **注意length为 0 和 省略 是有区别的哦!**
str.substr(-20, 2); str.substr(-19, 2) // ab [如果start为负值,超出了字符串总长度,则算作从0开始]
str.substr(11, 2) // '' [start 超出了字符串总长度,返回空字符串]

PS: 警告: 尽管 String.prototype.substr(…) 没有严格被废弃 (as in "removed from the Web standards"), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非JavaScript核心语言的一部分,未来将可能会被移除掉。如果可以的话,使用 substring() 替代它。

slice()

slice()方法提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串。

语法

str.slice(start, end)

参数描述
start必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
var str = 'The morning is upon us.'; // str 的长度 length 是 23。

str.slice(1, 8); // he morn [包含1,不包含8]
str.slice(4, -2); // morning is upon u [end 为负值就会取 23-2=21,所以相当于slice(4, 21)]
str.slice(12); // is upon us. [省略end,则取到尾]
str.slice(30); // '' [start超出了字符串长度,则返回空字符串]

str.slice(-3); // 'us.' [start为负值,length-3,所以相当于slice(20)]
str.slice(-3, -1); // 'us' [相当于slice(20, 22)]

对了,顺便说一下数组也有slice

这就是它们的区别,请自行取用... 请记住官方已经想废弃 substr() 所以还是请谨慎使用吧...

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改