js中substring()和substr()的使用及区别

简介: 在JavaScript中,通常会用到截取,那所谓截取呢,其实就是要获得被截取元素的某个位置到某个位置的内容,那么JS给我提供了substring()和substr()这两种方法,这两种截取的方式有什么区别呢?

一、substring()

1.1 定义

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

1.2语法

stringObject.substring(start[,stop])
参数 描述
start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数,规定要提取的子串的截止位置,包头不包尾。
说明
  • 包头不包尾,即:返回的子串包括 start 处的字符,但不包括 stop 处的字符。
  • 如果省略stop该参数,那么返回的子串会一直到字符串的结尾。
  • stop不能接受负的参数,直接返回了整个字符串。
  • 如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)
  • 如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。

1.3 返回值

返回一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。

1.4 测试

var str = '0123456789';
var str1 = str.substring(1,4);
var str2 = str.substring(2);
var str3 = str.substring(4,2);
var str4 = str.substring(4,4);
var str5 = str.substring(-2);
var str6 = str.substring(11);
console.log("str1: "+str1+"\nstr2: "+str2+"\nstr3: "+str3+"\nstr4: "+str4+"\nstr5: "+str5+"\nstr6: "+str6)

image.png

二、substr()

2.1 定义

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

2.2 语法

stringObject.substr(start[,len])
参数 描述
start 必需。要抽取的子串的起始下标。必须是数值。
length 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。
说明
  • start必须是数值。
  • start如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
  • 如果省略了length该参数,那么返回从 stringObject 的开始位置到结尾的字串。
  • 重要事项:ECMAscript 没有对该方法进行标准化,因此反对使用它。在某些浏览器中start下标使用负值,直接返回了全部字符串。

2.3 返回值

返回一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 len 个字符。如果没有指定 len,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

2.4 测试

var str = '0123456789';
var str1 = str.substr(1,4);
var str2 = str.substr(2);
var str3 = str.substr(4,2);
var str4 = str.substr(4,4);
var str5 = str.substr(-2);
var str6 = str.substr(11);
console.log("str1: "+str1+"\nstr2: "+str2+"\nstr3: "+str3+"\nstr4: "+str4+"\nstr5: "+str5+"\nstr6: "+str6)

image.png

目录
相关文章
|
11月前
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
337 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
9月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
223 1
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
467 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
269 2
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
235 3
|
JavaScript 前端开发
JavaScript中单引号和双引号的效果的一点区别
JavaScript中单引号和双引号的效果的一点区别

热门文章

最新文章