吐槽Javascript系列一：slice()、substr()和 substring()

waltr 发布于2019-08-23 15:10 / 1551人阅读

摘要：点评我们来看这样一个例子给定一个字符串，要求去掉最后一个逗号。大胆假想一下，如果把踢出去，就保留和，你还会懵吗或者更大胆一点，把和都踢出去，就只保留，我反正感觉整个世界都清静了系列链接吐槽系列一和吐槽系列二数组中的和方法吐槽系列三数组的陷阱

实不相瞒，对于字符串中的slice()、substr()和 substring()这三个方法，我自己很长一段时间都是理不清的，每次用都得查一下文档，因为他们长得实在是太像了。

特性

我们先来温习一下，他们的特性如下：

这三个方法都会返回被操作字符串的一个子字符串，而且也都接受一或两个参数

这三个方法都不会改变原字符串

第一个参数指定子字符串的开始位置，第二个参数（在指定的情况下）表示子字符串到哪里结束。具体来说，slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置，而substr()的第二个参数指定的则是返回的字符个数

我们来看几个简单的例子：

const str = "hello world"
console.log(str.slice(3)) // lo world
console.log(str.substring(3)) // lo world
console.log(str.substr(3)) // lo world

console.log(str.slice(3, 7)) // lo w
console.log(str.substring(3, 7)) // lo w
console.log(str.substr(3, 7)) // lo worl

吐槽

substring()：slice()和substr()二位兄台，非在下自大，你们能做的，我都能做！我感觉你们没有存在的必要！
slice()：我们在传入负值的时候，是不一样的。

console.log(str.slice(-3)) // rld
console.log(str.substring(-3)) // hello world

substring()：我们当然是有一些区别，但我想说的是你们能做的，我都能做！
substr()：非在下自大，我感觉你们能做的，我也都能做啊。
slice()：非在下自大，我感觉你们能做的，我也都能做啊。

点评

我们来看这样一个例子：给定一个字符串，要求去掉最后一个逗号。

let str = "a,b,"
let newStr = str.substring(0, str.length - 1)

上面是substring()的写法，我们在来看看slice()的写法：

let str = "a,b,"
let newStr = str.slice(0, str.length - 1)

再来看看substr()的写法：

let str = "a,b,"
let newStr = str.substr(0, str.length - 1)

这三个方法都能做到，并且写法也完全一样，这正是让人容易困惑的地方！
还有一个要命的地方在于，数组中也有slice方法。
大胆假想一下，如果把substr()踢出去，就保留substring()和slice()，你还会懵吗？
或者更大胆一点，把substr()和slice()都踢出去，就只保留substring()，我反正感觉整个世界都清静了！

系列链接

吐槽Javascript系列一：slice()、substr()和 substring()
吐槽Javascript系列二：数组中的splice和slice方法
吐槽Javascript系列三：数组的陷阱

GPU云服务器云服务器 js_substring_substr slice和splice的区别 javascript专题系列 javascript深入系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101622.html

吐槽Javascript系列二：数组中的splice和slice方法

摘要：原来，它的替换功能实际上是通过删除和添加来完成的。在只有一个参数的情况下，方法返回从该参数指定位置开始到当前数组末尾的所有项。它并不改变原数组。吐槽我曾经一直困惑数组中的删除方法，当知道删除这项伟大的任务竟然交给了，我心里是失望的。战斗英雄你当，漂亮媳妇儿你娶，怎么啥好事都被你给占了——《激情燃烧的岁月》谈起这两个方法，新手不蒙，我是不信！正如吐槽Javascript系列一：sli...

lookSomeone 2019-08-23 15:14 评论0 收藏0
【JavaScript】String 对象的方法 slice()、substring() 和 sub

摘要：返回值当和运算符一起作为构造函数使用时，它返回一个新创建的对象，存放的是字符串或的字符串表示。返回值一个新的字符串，包含从的包括所指的字符处开始的个字符。 String 对象的方法 slice()、substring() 和 substr() String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。slice(st...

ztyzz 2019-08-23 11:36 评论0 收藏0
javascript:String对象总结（一）

摘要：长度为长度为，长度为字符串大小写转换删除字符串空格方法删除字符串中前置以及后缀的所有空格，然后返回结果副本。 String对象创建String对象方式声明：String对象的方法也可以在所有基本字符串值中访问到调用构造函数String() var str = new String(); var str = new String(hello world);//初始化str,st...

geekidentity 2019-08-22 10:57 评论0 收藏0
JavaScript 字符串实用常操纪要

摘要：另外如果为负数，则表示从字符串尾部开始算起。将要搜寻的子字符串。从当前字符串的哪个索引位置开始搜寻子字符串默认为。否则则会返回一个数组，数组中存放所有符合要求的子字符串，并且没有和属性。原文链接 JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形，在你处理用户的输入数据的时候，在读取或设置 DOM 对象的属性时，在操作 Cookie 时，在转换各种...

Harpsichord1207 2019-08-20 14:48 评论0 收藏0
javaScript常用内置对象

摘要：和的是子字符串最后一个字符后面的位置。而的第二个参数指定的则是返回字符的个数。 Array 创建数组的基本方式有两种：使用Array构造函数语法：new Array() 例子： var num = new Array(); 使用数组字面量表示法例子：var colors = [red,yellow]; 获取数组长度：arr.length 数组的栈和队列方...

keke 2019-08-23 17:15 评论0 收藏0