【JS点滴】substring和substr以及slice和splice的用法和区别。
那么就由一道笔试题引入吧,已知有字符串a=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”;
var a = "get-element-by-id"; function change(obj){//先将字符串按照“-”进行切割为数组var arr = obj.split("-");for(var i=1;i<arr.length;i++){//由于get不需要转大写,所以从下标1开始,对第一位字母转大写,并拼接后面的小写字母arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].substring(1);}//对改造完毕的数组元素进行无缝拼接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 = "0123456789"; console.log(str.substring(1,5))//"1234" length为5-1 console.log(str.substring(0,9),str)//"012345678" "0123456789"
其中start是必填项,stop为选填项,如果stop不填,那表示从start截取到字符串结尾,例如:
var str = "0123456789"; console.log(str.substring(1))//"123456789"
如果 start比stop大,那么方法在执行前会先交换这两个参数。例如:
var str = "0123456789"; console.log(str.substring(8,4))//"4567"
如果 start与stop相等,那么会返回一个空的字符串。例如:
var str = "0123456789"; console.log(str.substring(6,6))//""
如果 start或stop为负数,那么方法在执行前会先将负数变为0。例如:
var str = "0123456789"; console.log(str.substring(-2,6))//"012345" console.log(str.substring(2,-6))//"01" console.log(str.substring(-2,-6))//""
二、关于substr()
substr(start,length)表示返回从start开始包含length长度的新字符串,包含start,且不修改原字符串,与substring相比,第二个参数由代表结束的下标stop变成了规定新字符串长度的length,例如:
var str = "0123456789"; console.log(str.substr(1,5))//"12345" length为5 console.log(str.substr(2,6),str)//"234567" "0123456789"
其中start是必填项,length为选填项,如果length不填,那表示从start截取到字符串结尾,例如:
var str = "0123456789"; console.log(str.substr(1))//"123456789"
如果start为负数,那么start=str.length+start,例如:
var str = "0123456789"; console.log(str.substr(-1))//"9" console.log(str.substr(-6,3))//"456"
如果length为负数或者0,那么返回空字符串,例如:
var str = "0123456789"; console.log(str.substr(1,0))//"" console.log(str.substr(-1,-1))//"" console.log(str.substr(-1,0))//""
三、关于slice()
首先要说的是,slice可操作数组和字符串,但substring和substr只能操作字符串,splice只能操作数组。
slice(start,stop)表示截取从下标start 到下标stop(不包括该元素)的之间的元素,并返回新数组/新字符串,并不修改原数组/原字符串,这点上面说了,与substring很相似。例如:
var str = "0123456789";arr = [0,1,2,3,4,5,6,7,8,9]; console.log(str.slice(1,6))//"12345" console.log(arr.slice(1,6))//[1,2,3,4,5]
其中start是必填项,stop为选填项,如果stop不填,那表示从start截取到数组结尾/字符串结尾,例如:
var str = "0123456789";arr = [0,1,2,3,4,5,6,7,8,9]; console.log(str.slice(1))//"123456789" console.log(arr.slice(1))//[1,2,3,4,5,6,7,8,9]
如果 start比stop大(不会互换),或start与stop相等,则截取的为空,例如:
var str = "0123456789";arr = [0,1,2,3,4,5,6,7,8,9]; console.log(str.slice(3,3))//"" console.log(arr.slice(3,3))//[] console.log(str.slice(6,5))//"" console.log(arr.slice(6,5))//[]
需要特别注意的是,如果 start或者stop为负数,那么负数的选项从数组尾部开始算起的位置,最后一个数字为-1,倒数第二个数字为-2,依次类推。例如:
var str = "0123456789"; console.log(str.slice(6,-1))//"678" console.log(str.slice(-6,-1))//"45678" console.log(str.slice(-6,8))//"4567"
四、关于splice()
还是再强调一遍,slice可操作字符串和数组,但是splice不能操作字符串,会报错。
splice(start,length,items)表示从下标start处截取length长度(与substr有点像)的元素后,在start处为原数组添加items,并返回被截取的新数组,splice会直接修改原数组,例如:
var arr = [0,1,2,3,4,5,6,7,8,9]; console.log(arr.splice(1,3,2,3,4))//[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 = [0,1,2,3,4,5,6,7,8,9]; console.log(arr.splice(1,0,2,3,4))//[] console.log(arr);//[0,2,3,4,1,2,3,4,5,6,7,8,9] 直接在原数组下标0处并加入了2,3,4
var arr = [0,1,2,3,4,5,6,7,8,9]; console.log(arr.splice(1,-9,2,3,4))//[] 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 = [0,1,2,3,4,5,6,7,8,9]; console.log(arr.splice(-1,1,2,3,4))//[9] console.log(arr);//[0,1,2,3,4,5,6,7,8,2,3,4] 从右往左截取1位,也就是9,并加入2,3,4
嗯....貌似四个对比的都说完了,一次对比汇总,多多感受吧。
转载于:https://www.cnblogs.com/echolun/p/7646025.html
【JS点滴】substring和substr以及slice和splice的用法和区别。相关推荐
- substring、substr以及slice、splice用法和区别
关于substring() substring(start,stop)表示返回从start开始到stop处之间的新字符串,其长度为stop减 start. 特点: 包含start,但不包含stop 且 ...
- js中substring()、substr() 、slice()的用法
substring() 方法用于提取字符串中介于两个指定下标之间的字符. substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字 ...
- html5 截取字符串,JS截取字符串之substring、substr和slice详解
本文详细的介绍了JavaScript中substring().substr()和slice()三个js字符串截取的方法,substring()方法用于提取字符串中介于两个指定下标之间的字符.subst ...
- js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
- javascript中substring()、substr()、slice()的区别
1.stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. (1) start必需.一个非负的整数,规定要提取的子串的第一个字符在 str ...
- substring与substr与slice的用法
1.substring 方法 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数 描述 sta ...
- js中substring和substr的用法
substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数 描述 start 必需.一个非负的 ...
- js 字符和html和数值拼接,js中substring和substr的用法(获取字符串为整个html页面中的某个数值)...
substring 方法用于提取字符串中介于两个指定下标之间的字符html substring(start,end)正则表达式 开始和结束的位置,从零开始的索引spa 参数 描述 start ...
- JS - 4 - 数组 Array - API(slice、splice、shift、)
https://www.w3school.com.cn/jsref/jsref_obj_array.asp 文章目录 # (ES5)API - 总览 slice splice # (ES6) 数组 # ...
最新文章
- Linux命令find的35个实例
- linux C实现mkdir功能
- IOS原生地图与高德地图
- traceroute命令的用法实例
- 初学java小白的疑惑梳理
- mysql star item 失败_解决CentOS7下MySQL服务启动失败的问题.md
- 协作:一份来自RChain的倡议书(上篇)
- WWF中Conditioned Activity Group的子Activity扩展CAG的WhenCondition属性代码解析
- 苹果市值破万亿,iPhone 会涨价吗?
- 打造健康的程序员-饮食篇
- 论剑大数据技术,效率为王!天善智能掘金数据技术沙龙【上海站 12.09】
- springboot打jar包部署在linux(阿里云)服务器上项目启动成功但页面访问时提示无法访问此网站
- 全球及中国车载定位模块行业发展格局与运营动向分析报告2022版
- qt android图片自适应大小,Qt on Android:怎样适应不同的屏幕尺寸
- ERROR: Failed to open zip file. Gradle‘s dependency cache may be corrupt (this sometimes occurs afte
- Git之深入解析如何借助Git的配置方法和钩子机制来自定义Git需求
- 看地理标志产品苏尼特羊肉如何投放广告宣传打造品牌
- tableau高级绘图(四)-tableau绘制蜡烛图
- HLSL CG 与glsl着色器编译及其原理
- Zookeeper安装配置(单机)
热门文章
- mysql 查询 更新属性值_MySQL-在一个查询中更新具有不同值的多行
- python3打包app_python3打包脚本
- select * from data where 姓名_SQL基础where
- c语言 不显示dos窗口,运行DOS批处理不显示DOS窗口的方法
- selenium 示例_Selenium findElement和findElements示例
- jquery概述_jQuery事件方法概述
- python字典_Python字典
- motion filter_Android Motion布局
- swift 脚本_Swift脚本和命令行参数
- web前端开发示例_40多个针对Web开发人员HTML5教程和示例