JavaScript:在JS中截取字符串的方法
这篇主要说一说截取字符串的方法,用于帮助自己缕清方法的作用,参数的意义,返回值,是否对于原来的字符串进行了操作等。
在javascript中,常见的截取字符串的方法有slice()、substring()、substr()这三种方法,我主要为了捋清楚这三种方法的相同点与不同点,在什么情况下适用于哪一种。优雅的代码都是从一点一滴开始的。
slice()
首先,我在百度上面搜索了一下slice()方法,给出的链接是Javascript Array对象的 slice()方法,是对数组的操作。作用是从已有的数组中返回选定的元素,返回值是一个数组,并且不会对原先的数组产生影响。
然后我有上了W3schoole查找slice()方法,找到了Javascript String 对象的slice()方法。用于提取字符串的片段,并在新的字符串中返回被提取的部分。返回值是一个字符串,并且不会对原先的字符串产生影响。
虽然作用对像不一样,但是我个人觉得是一个东西。都是从原先对象里面截取出来新的东西,并且不对原先的对象有操作,返回值是根据原先的对象的类型来决定的。
slice()有两个参数,第一个参数可以为需要截取的起始点,第二个参数可以为截取结束的点。如果第二个参数不传输的画,默认情况下会截取到当前对象的最后。
代码示例:
JavaScript Array
<script type="text/javascript">
var zhanShi = ["冲锋","断筋","巨人打击","压制","斩杀"];
console.log(zhanShi);
console.log(zhanShi.slice(1,2));
console.log(zhanShi.slice(1));
</script>
下面是这段代码在谷歌浏览器上面显示的结果:

JavaScript String
<script type="text/javascript">
var wuqiZhan = "我叫武器战,打架开电扇。CD一分半,转完就完蛋。";
console.log(wuqiZhan);
console.log(wuqiZhan.slice(2,5));
console.log(wuqiZhan.slice(6));
</script>
下面是这段代码在谷歌浏览器上面显示的结果:

当然,我们现在传输的都是正数,我闲的无聊,然后我就给传了负数当作参数:
<script type="text/javascript">
var str = "所以说很无奈";
console.log(str.slice(-3));
var arr = ["你看","传了","负数"];
console.log(arr.slice(-2));
</script>

substring()
substring()是用于提取字符串中介于两个指定下标之间的字符,两个参数,其中第一个参数是必须的,第二个参数是可选的。如果不传第二个参数,默认情况下会提取到最后。返回值是一个新的字符串。准确的说,返回的额字符串包含了第一个参数位置的字符串,而不包含第二个参数位置的元素。
上代码,其他都是空谈,看了代码就明白了:
<script type="text/javascript">
var bingFa = "寒冰箭呀biubiubiu,五个冰刺一发脑残箭";
console.log(bingFa.substring(4,13));
</script>

slice可以传负数,substring可不可以呢?不可以!明确的告诉你不可义,但是却不会报错,只会把整个字符串都输出出来。可是,如果你给前面的参数传输的比较大,后面的参数比较小,那样会出现什么情况呢?
<script type="text/javascript">
var bingFa = "寒冰箭呀biubiubiu,五个冰刺一发脑残箭";
console.log(bingFa.substring(13,4));
</script>

看的出来,即使你把前面的参数传输的比后面的参数大,但是substring会自动的调整两个参数的位置,也就是大的参数总是在后面。
substr()
substr()用于在字符串中从第一个参数位置起,截取到第二个指定的参数。其中第一个参数是必须的,第二个参数是可选的。如果不传输第二个参数的话,默认会截取到字符串最后。返回值是一个新的字符串,这个方法同样不会对原先的字符串进行修改。这个方法并没有被标准话,所以说,使用与否看个人吧。
代码:
<script type="text/javascript">
var shuShi = "一发脑残箭,天人相隔永不见";
console.log(shuShi.substr(2,3));
console.log(shuShi.substr(-3,3));
</script>

上面的代码包含的第一个参数为负值的情况。
也许我的这些东西你看着很浅显,但这就像一砖一瓦,慢慢来嘛。我已经尽力写的很详细了,希望对你会有帮助。
JavaScript:在JS中截取字符串的方法的更多相关文章
- shell中截取字符串的方法总结
shell中截取字符串的方法有很多种, ${expression}一共有9种使用方法. ${parameter:-word} ${parameter:=word} ${parameter:?word} ...
- 【JavaScript】JS 中 原始字符串 和 HTML 字符转换
参考资料:http://www.sjyhome.com/javascript/js-html-escape.html JS转换HTML转义符 SJY • 发表于:2013年10月05日 17:04 • ...
- js中替换字符串(replace方法最简单的应用)
replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也 ...
- shell截取字符串的方法
参考文献: linux中shell截取字符串方法总结 [Linux]如何在Shell脚本中计算字符串长度? 截取字符串的方法一共有八种,主要为以下方法 shell中截取字符串的方法有很多中, ${ex ...
- linux 中截取字符串
shell中截取字符串的方法有很多中,${expression}一共有9种使用方法.${parameter:-word}${parameter:=word}${parameter:?word}${pa ...
- javascript 高效按字节截取字符串
做为一个前端开发人员在网页展示中经常会碰到,标题过长,需要截取字符串,用CSS的实现的话各种兼容问题,各种坑. 让后台程序截一下,又各种推托,让后台按字节截一下更是和要了后台老命一样,最后可能只会安字 ...
- js中Json字符串如何转成Json对象(4种转换方式)
js中Json字符串如何转成Json对象(4种转换方式) 一.总结 一句话总结:原生方法(就是浏览器默认支持的方法) 浏览器支持的转换方式(Firefox,chrome,opera,safari,ie ...
- paip.截取字符串byLastDot方法总结uapi python java php c# 总结
paip.截取字符串byLastDot方法总结uapi python java php c# 总结 ========uapi left_byLastDot right_byLastDot 目前 ...
- JS中清空字符串前后空格
在JS 操作的时候 长期会有对字符串的操作, 但是在JS 中不像在C#中 有字符串的方法 Trim() 来对字符串进行处理 . 所以自己写一个对字符串前后清楚空格的方法还是有必要的 以免以后忘记了 ...
随机推荐
- Kettle文本文件输出和输入控件使用中,换行符导致的问题处理
1.如下图通过输入控件从数据库读取数据然后生成TXT文本文件,TXT文件生成原则是每一条数据生成一行数据,第二条数据换行保存 2.如下图所示,使用文本文件输入控件读入上图生成的文件,文件读入原则是按行 ...
- MySQL(十四)之数据备份与还原
前言 上一篇分享了关于MySQL事务的知识,在我们数据库中最重要的就是数据了,所以数据的备份就显的特别的重要! 为什么要备份数据? 在生产环境中我们数据库可能会遭遇各种各样的不测从而导致数据丢失, 大 ...
- 【转载】quickLayout.css-快速构建结构兼容的web页面
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=4 ...
- 【学习】js学习笔记:对象的一些基础知识
1.创建对象 //构造函数方法 function fun1(){} var obj=new fun1(); //Object方法,O要大写 var obj1=new Object(); //json方 ...
- Linux计划任务-at命令
第一部分:at命令 1. at命令:在一个指定的时间执行一个指定任务,只能执行一次,且需要开启atd进程(ps -ef | grep atd查看, 开启用/etc/init.d/atd start ...
- Java这些冷知识你知道吗?
1)jvm有很多种,其实jvm是一个标准,sun做的那个叫hotspot,作者就是后来v8的作者lars bak,其他公司也做过jvm,其中做得比较好的有bea的jrockit,其他的包括ibm的r9 ...
- 博客收藏--sailing的博客
http://blog.sina.com.cn/sailingxr free:这个博客主页的内容不错 PC的足迹 arm与x86 浅谈PCIe体系架构 浅谈cache memory
- ASP.NET Core 2.0 in Docker on Windows Container
安装Docker for Windows https://store.docker.com/editions/community/docker-ce-desktop-windows 要想将一个ASP. ...
- JAVA基础知识总结:七
一.面向对象编程 1.什么是面向对象? 万物皆对象 案例一:我想吃大盘鸡 面向过程 面向对象 1.我自己去买一只鸡 1.委托一个会砍价的人去帮忙买鸡 2.我自己宰鸡 2.委托一个胆大的人宰鸡 3.我自 ...
- 相对定位的div没有出现纵向滚动条
在一个相对定位的div中绝对定位很多html元素,纵向没有滚动条出现.原因:我们期望作为原点的点在窗口原点的下方,但是滚动条以窗口原点作为原点,所以没有出现滚动条.解决:在div外面再套一个div,o ...