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

目录
相关文章
|
13天前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
2月前
|
前端开发 JavaScript UED
JavaScript防抖和节流的使用及区别
JavaScript防抖和节流的使用及区别
105 57
|
30天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
71 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
1月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
32 3
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
2月前
|
JavaScript 前端开发
JavaScript中单引号和双引号的效果的一点区别
JavaScript中单引号和双引号的效果的一点区别
|
2月前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
59 4
|
2月前
|
JavaScript 前端开发
JS基础 if和switch区别
本文比较了JavaScript中的`if`语句和`switch`语句的区别,并通过示例代码展示了它们的用法,解释了何时使用`if`更合适以及`switch`语句的特点和应用场景。
19 0
|
2月前
|
存储 JavaScript 前端开发