那么就由一道笔试题引入吧,已知有字符串a=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”;

var a = "get-element-by-id";
function change(obj){
  //先将字符串按照“-”进行切割为数组
  var arr = obj.split("-");
  for(var i=;i<arr.length;i++){
    //由于get不需要转大写,所以从下标1开始,对第一位字母转大写,并拼接后面的小写字母
    arr[i] = arr[i].charAt().toUpperCase()+arr[i].substring();
  }
  //对改造完毕的数组元素进行无缝拼接
  console.log(arr.join(""));
}
//调用完成
change(a);

这里substring(1)的意思就是从下标1开始一直到字符串结尾处。但是参考写法提供的此处代码是substr(1,arr[i].length-1)

好吧,我承认虽然知道substring和substr都是对字符串进行截取操作,但两者之间的细化区别确实比较模糊,那么这里除了这两个小兄弟,也带上slice与splice就做个使用汇总吧。

一、关于substring()

substring(start,stop)表示返回从start开始到stop处之间的新字符串,其长度为stop减 start。包含start,但不包含stop,且不修改原字符串。这一点与slice的含头不含尾相近。例如:

var str = "";
console.log(str.substring(,))//"1234" length为5-1
console.log(str.substring(,),str)//"012345678" "0123456789"

其中start是必填项,stop为选填项,如果stop不填,那表示从start截取到字符串结尾,例如:

var str = "";
console.log(str.substring())//"123456789"

如果 start比stop大,那么方法在执行前会先交换这两个参数。例如:

var str = "";
console.log(str.substring(,))//"4567"

如果 start与stop相等,那么会返回一个空的字符串。例如:

var str = "";
console.log(str.substring(,))//""

如果 start或stop为负数,那么方法在执行前会先将负数变为0。例如:

var str = "";
console.log(str.substring(-,))//"012345"
console.log(str.substring(,-))//"01"
console.log(str.substring(-,-))//""

二、关于substr()

substr(start,length)表示返回从start开始包含length长度的新字符串,包含start,且不修改原字符串,与substring相比,第二个参数由代表结束的下标stop变成了规定新字符串长度的length,例如:

var str = "";
console.log(str.substr(,))//"12345" length为5
console.log(str.substr(,),str)//"234567" "0123456789"

其中start是必填项,length为选填项,如果length不填,那表示从start截取到字符串结尾,例如:

var str = "";
console.log(str.substr())//"123456789"

如果start为负数,那么start=str.length+start,例如:

var str = "";
console.log(str.substr(-))//"9"
console.log(str.substr(-,))//"456"

如果length为负数或者0,那么返回空字符串,例如:

var str = "";
console.log(str.substr(,))//""
console.log(str.substr(-,-))//""
console.log(str.substr(-,))//""

三、关于slice()

首先要说的是,slice可操作数组和字符串,但substring和substr只能操作字符串,splice只能操作数组。

slice(start,stop)表示截取从下标start 到下标stop(不包括该元素)的之间的元素,并返回新数组/新字符串,并不修改原数组/原字符串,这点上面说了,与substring很相似。例如:

var str = "";
arr = [,,,,,,,,,];
console.log(str.slice(,))//"12345"
console.log(arr.slice(,))//[1,2,3,4,5]

其中start是必填项,stop为选填项,如果stop不填,那表示从start截取到数组结尾/字符串结尾,例如:

var str = "";
arr = [,,,,,,,,,];
console.log(str.slice())//"123456789"
console.log(arr.slice())//[1,2,3,4,5,6,7,8,9]

如果 start比stop大(不会互换),或start与stop相等,则截取的为空,例如:

var str = "";
arr = [,,,,,,,,,];
console.log(str.slice(,))//""
console.log(arr.slice(,))//[]
console.log(str.slice(,))//""
console.log(arr.slice(,))//[]

需要特别注意的是,如果 start或者stop为负数,那么负数的选项从数组尾部开始算起的位置,最后一个数字为-1,倒数第二个数字为-2,依次类推。例如:

var str = "";
console.log(str.slice(,-))//"678"
console.log(str.slice(-,-))//"45678"
console.log(str.slice(-,))//"4567"

四、关于splice()

还是再强调一遍,slice可操作字符串和数组,但是splice不能操作字符串,会报错。

splice(start,length,items)表示从下标start处截取length长度(与substr有点像)的元素后,在start处为原数组添加items,并返回被截取的新数组,splice会直接修改原数组,例如:

var arr = [,,,,,,,,,];
console.log(arr.splice(,,,,))//[1,2,3]
console.log(arr);//[0,2,3,4,4,5,6,7,8,9] 原数组被截取走了1,2,3,并加入了2,3,4

其中start和length为必填项,items为选填项,如果length为0或者负数,则返回空数组(这里与substr相似),例如:

var arr = [,,,,,,,,,];
console.log(arr.splice(,,,,))//[]
console.log(arr);//[0,2,3,4,1,2,3,4,5,6,7,8,9] 直接在原数组下标0处并加入了2,3,4
var arr = [,,,,,,,,,];
console.log(arr.splice(,-,,,))//[]
console.log(arr);//[0,2,3,4,1,2,3,4,5,6,7,8,9] 直接在原数组下标0处并加入了2,3,4

如果start为负数,则原理和slice负数从右往左截取,最后一位数字为-1,倒数第二位为-2,依次类推,例如:

var arr = [,,,,,,,,,];
console.log(arr.splice(-,,,,))//[9]
console.log(arr);//[0,1,2,3,4,5,6,7,8,2,3,4] 从右往左截取1位,也就是9,并加入2,3,4

嗯....貌似四个对比的都说完了,一次对比汇总,多多感受吧。

 

【JS点滴】substring和substr以及slice和splice的用法和区别。的更多相关文章

  1. (转)substring和substr以及slice和splice的用法和区别

    转载地址:https://www.cnblogs.com/echolun/p/7646025.html 那么就由一道笔试题引入吧,已知有字符串a=”get-element-by-id”,写一个func ...

  2. javascript字符串截取的substring、substr和slice

    本文详细的介绍了javascript中substring().substr()和slice()三个JS字符串截取的方法,substring()方法用于提取字符串中介于两个指定下标之间的字符.subst ...

  3. js中substring和substr的用法

    js中substring和substr的用法 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数    ...

  4. javascript中substring()、substr()、slice()的区别

    在js字符截取函数有常用的三个slice().substring().substr()了,下面我来给大家介绍slice().substring().substr()函数在字符截取时的一些用法与区别吧. ...

  5. 不要再混淆js的substring和substr了!(附js所有字符串方法)

    一.字符串操作方法 js中字符串方法操作有很多:concat.indexOf.... 这里只要介绍两种经常混淆的字符串截取方法:substring.substr 二.从例子入手 let str = ' ...

  6. js中substring与substr的学习。

    今天在工作的过程中,看到js中两个双胞胎函数.分别是substring与substr.顿时被两个可恶的家伙给迷惑住了,不知道具体有什么作用.. 先来看看substring手册是怎么介绍的. 手册解释的 ...

  7. substring()、 substr() 、slice()的区别:

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符.start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObjec ...

  8. js中substring和substr的用法比较

    推荐使用substring 方法   stringObject.substring(start,stop)   stringObject.substr(start,length)   定义和用法 提取 ...

  9. js中substring和substr的用法 (转)

    1.substring 方法 定义和用法 substring 方法用于提取字符串中介于两个指定下标之间的字符. 语法 stringObject.substring(start,stop) 参数     ...

随机推荐

  1. kafka_shell操作

    单机版 开启进程: ./bin/kafka-server-start.sh config/server.properties 查看topic列表: ./bin/kafka-topics.sh --li ...

  2. 冲刺博客NO.1

    今天小组开了一个会议来对APP进行模块分析,从客户需求 隐私问题到  界面设计大致定了一个方向并分工. 做的内容:对自己负责的模块进行了粗略的划分和认识,学会了如何页面跳转. 我负责的是登录界面,主界 ...

  3. CSS 基础 例子 水平 & 垂直对齐

    一.元素居中对齐 margin:auto 水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100% ...

  4. DevExpress GridControl 关于使用CardView的一点小结

    最近项目里需要显示商品的一系列图片,打算用CardView来显示,由于第一次使用,遇到许多问题,发现网上这方面的资源很少,所以把自己的一点点实际经验小结一下,供自己和大家以后参考. 1.选择CardV ...

  5. C# 子线程调用主线程窗体的解决方法

    摘自其他人博客,自己试过确实解决问题.(如在自己定义的线程里面给textbox赋值) 由于Windows窗体控件本质上不是线程安全的.因此如果有两个或多个线程适度操作某一控件的状态(set value ...

  6. WinForm企业级框架实战项目演练

    一.课程介绍 我们都知道在软件架构方式分为:C/S和B/S两类.这里阿笨不谈论两种软件架构的优劣之分,因为它们各有千秋,用于不同场合.一位伟大的讲师曾经说过一句话:事物存在即合理!录制这堂课程的目的就 ...

  7. 【js】关于正则表达式

    正则表达式描述了字符的模式对象 语法: var patt=new RegExp(pattern,modifiers); 或更简单的方法 var patt=/pattern/modifiers; 模式描 ...

  8. Lily-一个埋点管理工具

    本文来自网易云社区 前言 在很多项目中,埋点数据使用表格来统计的,随着项目的进行,数据量越来越复杂,越来越难以维护.所以很多公司都已经开发了一整套系统,从埋点的录入到代码的输出. 我们项目中iOS和A ...

  9. 协程 coroutine

    参考链接: http://manual.luaer.cn/2.11.html http://www.cnblogs.com/riceball/archive/2008/01/03/1025158.ht ...

  10. 深入理解String类

    1.String str = "eee" 和String str = new String("eee")的区别 先看一小段代码, public static v ...