你知道slice()、splice()、substr()、substring()的区别吗?

这个问题在我初学js的时候就一直傻傻分不清楚,当时只大概知道有的可以操作字符串、有的可以操作数组、有的可以截取、有的可以插入、有的还能删除,有的是参数截取长度、有的参数是结束位置、有的参数可以是负数、有的不能接受负数参数······用的时候全靠试,瞎猫遇见死耗子,试对了就写上了,用了这么些年了,你要让我一一说出他们的特点,我还真的想一会儿。相信很多同学跟我一样,为了可以更好的记住他们,今天我来好好总结一下他们的区别,加深印象。

slice()

首先Array 对象方法和String 对象方法里都有slice()方法,所以slice()方法既可用于操作数组,也可用于操作字符串。下面我们分开来说一下。

Array 对象方法的slice():

slice() 方法可从已有的数组中返回选定的元素。

语法:

arrayObject.slice(start,end)。

参数:

参数start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。如果不传参数,则当0处理。

参数end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值:

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

说明:

请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

提示和注释:

1.可使用负值从数组的尾部选取元素。

2.如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

3.如果start是正数且大于arrayObject.length,则返回[]空数组。如果start是负数且绝对值大于arrayObject.length,则当0处理。

实例:

var arr = [1, 2, 3, 4, 5];

var arrNew = arr.slice(1,3);

console.log(arr); // [1, 2, 3, 4, 5]

console.log(arrNew); // [2, 3]

console.log(arr.slice(6, 2)); // []

console.log(arr.slice(-6, 2)); // [1, 2]


String 对象方法slice():

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

语法:

stringObject.slice(start,end)。

参数:

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

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

返回值:

一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。

说明:

String 对象的方法 slice()、substring() 和 substr() (不建议使用)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。

还要注意的是,String.slice() 与 Array.slice() 相似。

实例:

var str = "abcde";

var strNew = str.slice(1, 3);

console.log(str); // "abcde"

console.log(strNew); // "bc"


splice()

是Array对象的方法,用来操作数组。

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

语法:

arrayObject.splice(index,howmany,item1,.....,itemX)。

参数:

参数index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。如果不传参数,则当0处理。

参数howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

参数item1,.....,itemX:可选。向数组添加的新项目。

返回值:

返回一个包含被删除项目的新数组,如果有的话。没有被删除项目则返回空数组。

说明:

该方法会改变原始数组。splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

浏览器支持:

所有主流浏览器都支持 splice() 方法。

提示和注释:

请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。splice() 方法的第二个参数是要删除的项目数量,slice() 方法的第二个参数是数组片断结束处的数组下标,且不包括该元素。splice() 方法有第三个参数的话可以添加插入新元素,slice() 方法没有此功能。

实例:

var arr = [1, 2, 3, 4, 5];

var arrNew = arr.splice(1, 3, 9);

console.log(arr); // [1, 9, 5]

console.log(arrNew); // [2, 3, 4]


substr()

是String对象的方法,用来操作字符串。

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

语法:

stringObject.substr(start,length)。

参数:

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

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

返回值:

返回一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

提示和注释

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

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

重要事项:在 IE 4 中,参数 start 的值无效。在这个 BUG 中,start 规定的是第 0 个字符的位置。在之后的版本中,此 BUG 已被修正。

实例:

var str = "abcde";

var strNew = str.substr(1, 3);

console.log(str); // "abcde"

console.log(strNew); // "bcd"


substring()

是String对象的方法,用来操作字符串。

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

语法:

stringObject.substring(start,stop)。

参数:

参数start:必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。如果不传参数或者传负数,则当0处理。

参数stop:可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数,那么返回的子串会一直到字符串的结尾。

返回值:

一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start

说明

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

如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。

提示和注释

重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。如果不传参数,则当0处理,即跟stringObject.substring(0, 0)等同;当参数传入负数,则当0处理,如stringObject.substring(-3, -2)等同于stringObject.substring(0,0),返回“”空字符串。

实例:

var str = "abcde";

var strNew = str.substring(1, 3);

var strEmpty = str.substring();

console.log(str); // "abcde"

console.log(strNew); // "bc"

console.log(strEmpty); // ""


在传递给这些方法的参数是负值的情况下,它们的行为就不尽相同了。其中,slice()方法会将传

入的负值与字符串的长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个

参数转换为 0。最后,substring()方法会把所有负值参数都转换为 0。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容