浅谈JS字符串的三个方法

smartlion 发布于2019-08-21 14:04 / 2341人阅读

摘要：该方法会改变调用该方法的对象有返回值如的方法，会改变一个数组本身的顺序，并且返回一个按要求排列的数组像的方法是不会改变原对象的方法是否是静态的例如的方法都是静态方法最后一点纯属个人恶趣味，我会把一些明显不符合要求的值传入，看看是否出现异常。

正文

每次遇到某个类型陌生的方法的时候，我通常会思考这样几个问题：

该方法需要的传入参数:

不需要传参数的：诸如Array的pop方法；

有必传参数？默认值是多少？例如前文所诉的parseInt方法;parseInt确实可以不传，但是没什么实际意义，会返回NaN；

但是某些方法如Number的toString方法，可接受一个参数即进制数，不传默认值是10。

该方法会改变调用该方法的对象？有返回值？

如Array的sort方法，会改变一个数组本身的顺序，并且返回一个按要求排列的数组；

像Array的join方法是不会改变原对象的；

方法是否是静态的：

例如Math的方法都是静态方法

最后一点纯属个人恶趣味，我会把一些明显不符合要求的值传入，看看是否出现异常。

今天的故事从String的三个方法说起

他们是slice，substring和subset（注意后面这两货都没有一个大写字母）

方法的日常

为什么单单说这三个？因为它们长得像，用途也像属于殊途同归的方法（其实Array，String的一些方法真心让人容易混长得像，用途迥异的如slice，splice，splite这三，以后找时间再说说他们仨的故事）

String的slice，substring和subsrt方法都能返回一个子字符串并且不改变原字符串，其中：

slice方法：接受两个参数，即起始位置与终点位置；

"Hi Master Yoda".slice(1,3) //"i "

substring方法：接受两个参数，即起始位置与终点位置；

"Hi Master Yoda".substring(1,3) //"i "

substr方法：接受两个参数，即起始位置与字符串长度；

"Hi Master Yoda".substr(1,3) //"i M"

这样看起来slice和substring并没有区别，实则不然，这个我们闷骚后讨论，先来看看第一个变量起始位置这个概念，第一个参数三者都表示起始位置，需要注意的是：

如果不传入参数（默认值是0），则返回值为原字符串；

若传入正数，则返回从该索引处（包含该值）到字符串结尾的子字符串
如上例子

如果传入负数slice，与substr效果相同都返回该索引至字符串终点的子字符串，substring会得到与传入零一样的效果

"May the Force be with you".slice(-10)  
//"e with you"

"May the Force be with you".substring(-10)   
//"May the Force be with you"

"May the Force be with you".substr(-10)   
//"e with you"

这样你就不会再认为slice和substring并没有区别，其实他们三个间的差异还挺多的，不过不急咱们先来看看所谓的负索引，你也可以有自己的一套理解不过一下是我觉得比较容易记得住的方式：

结果返回数值区间内的字符串（ps：负零只是占位用，实际方法是不接受－0的只会得到和0一样的结果）：

对每个函数的负数参数做一下说明

slice

slice方法可接受两个为负值的参数:

"May the Force be with you".slice(-5,-1) //"aste"

但无论有几个参数为负值，第一参数对应字符所在位置必须在第二参数对应字符所在位置的左边，否则返回空字符串（即不能逆向）：

"May the Force be with you".slice(-1,-5)
"May the Force be with you".slice(-1,1)
"May the Force be with you".slice(4,1)

以上均返回 ""

substring

substring方法对任何双负数返回""

"May the Force be with you".substring(-1,-4)  //""

这里的任何至一切顺序的双负数都讲返回""；

substring只返回数值区间内的字符串，没有slice中的逆向问题

"May the Force be with you".substring(5,1)//"ay t"

一下返回相同结果 "May t"

"May the Force be with you".substring(-5,5)
"May the Force be with you".substring(5,-5)

这里可以理解成出现负数时会被自动转成0，该理解对双负数同样适用。具体标准请参考ecma文档15.5.4.10

substring

从语意上理解第二参数不应传入负值，
所以只要第二参数为负值，不论第一参数是什么，均返回""

"May the Force be with you".substr(-5,-5)
"May the Force be with you".substr(0,-5)
"May the Force be with you".substr(5,-5)

总结：

slice接受双负数；

substring不接受双负数（返回""），单负数会转换成0再解析；

subset不接受双负数（返回""），单负数只能是第一个参数，否则返回""

一些补充

当输入的索引数超出字符串长度时，会被解析为所能到达的最大值,长度亦是如此：

"Master".slice(3,1024) //ter
"Master".substring(-1024,3)  //Mas
"Master".substr(3,1024)  //ter

GPU云服务器云服务器 js中的字符串方法 js方法参数为字符串 js三个等于 js 三个点参数

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

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

浅谈Vue.use

摘要：并且接收的参数的限制是两种类型。对于这两种类型有不同的处理。之后给这个插件添加至已经添加过的插件数组中，标示已经注册过最后返回对象。还有一种则是将所有逻辑都编写成一个函数暴露给。个人觉得第一种方式比较合理。先举个? 我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这...

MingjunYang 2019-08-21 17:55 评论0 收藏0
js面向对象浅谈（三）

摘要：还有一个问题，就是不能在创建子类性时，像父类型的构造函数传递参数。组合继承将原型链和借用构造函数组合到一起，发挥两者之长的一张继承模式，下面来看个例子。组合继承最大的问题是无论在什么情况下，都会调用两次父类型构造函数。继承继承是面向对象语言中特别重要的概念，js的继承主要是靠原型链实现的。原型链！！！看到我给标题打了三个叹号吗，这里真的很重要！这里真的很重要！这里真的很重要！j...

awkj 2019-08-20 17:20 评论0 收藏0
浅谈ES6中基本数据类型的操作方法

摘要：值得注意的是，中整数和浮点数采用的是同样的储存方法位双精度浮点数，所以和被视为同一个值。在Javascript中，数据类型分为基本数据类型和引用数据类型两大类，其中，Array和Function在本质上仍然是一种特殊的对象: 基本类型: String / Number / Boolean / Null / Undefined引用类型: Object / Array / Functio...

longmon 2019-08-23 18:24 评论0 收藏0
浅谈JavaScript事件

摘要：浅谈事件事件流的事件流有提出的捕获流的冒泡流以及级事件流。真实的过程取决于事件的目标元素以及各目标元素的祖先元素是否有事件处理函数。事件处理函数需要注意的指的是或后面讨论。两种方法都会给事件处理函数传一个事件对象作为参数。浅谈JavaScript事件事件流 JavaScript的事件流有：Netscape提出的捕获流、IE的冒泡流以及DOM2级事件流。这里只讨论DOM2级事件流。 ...

IamDLY 2019-08-21 11:27 评论0 收藏0
浅谈CDN、SEO、XSS、CSRF

摘要：要钱的简单理解百度的广告就是不用钱的自己配置提高搜索引擎的权重是一种技术，主要是用于提高网站浏览量而做的优化手段为什么需要我们搜一下微信公众号发现排名是有先后的，博客园都是靠前的。 CDN 什么是CDN 初学Web开发的时候，多多少少都会听过这个名词->CDN。 CDN在我没接触之前，它给我的印象是用来优化网络请求的，我第一次用到CDN的时候是在找JS文件时。当时找不到相对应的JS文件...

asoren 2019-06-21 16:10 评论0 收藏0