【JavaScript】slice()、substring()、substr()的区别

简介:

JavaScript中String 对象的slice()、substring()、substr()方法都能提取字符串的一部分,但使用时有所区别。

 

  • stringObject.slice(startIndex,endIndex)

返回字符串 stringObject 从 startIndex 开始(包括 startIndex )到 endIndex 结束(不包括 endIndex )为止的所有字符。

1)参数 endIndex 可选,如果没有指定,则默认为字符串的长度 stringObject.length 。

  var stringObject = "hello world!" ;
  alert(stringObject.slice(
3)); // lo world! 

  alert(stringObject.slice(3,stringObject.length)); // lo world!

【注1】字符串中第一个字符的位置是从【0】开始的,最后一个字符的位置为【stringObject.length-1】,所以slice()方法返回的字符串不包括endIndex位置的字符。

2)startIndex 、endIndex 可以是负数。如果为负,则表示从字符串尾部开始算起。即-1表示字符串最后一个字符。

  var stringObject = "hello world!" ;
  alert(stringObject.slice(
-3)); // ld! 

  alert(stringObject.slice(-3,stringObject.length)); // ld! 
  alert(stringObject.slice(-3,-1)); // ld

 【注2】合理运用负数可以简化代码

3)startIndex、endIndex 都是可选的,如果都不填则返回字符串 stringObject 的全部,等同于slice(0)

  var stringObject = "hello world!" ;
  alert(stringObject.slice()); 
// hello world! 

  alert(stringObject.slice(0)); // hello world!

 

4)如果startIndex、endIndex 相等,则返回空串

【注3】String.slice() 与 Array.slice() 相似

 

 

  • stringObject.substring(startIndex、endIndex)

返回字符串 stringObject 从 startIndex 开始(包括 startIndex )到 endIndex 结束(不包括 endIndex )为止的所有字符。

1)startIndex  是一个非负的整数,必须填写。endIndex 是一个非负整数,可选。如果没有,则默认为字符串的长度stringObject.length 。

  var stringObject = "hello world!" ;
  alert(stringObject.substring(
3)); // lo world! 

  alert(stringObject.substring(3,stringObject.length)); // lo world! 
  alert(stringObject.substring(3,7)); // lo w,空格也算在内[l][o][ ][w]

 

2)如果startIndex、endIndex 相等,则返回空串。如果startIndex 比 endIndex 大,则提取子串之前,调换两个参数。即stringObject.substring(startIndex,endIndex)等同于stringObject.substring(endIndex,startIndex)

  var stringObject = "hello world!" ;
  alert(stringObject.substring(
3,3)); // 空串 

  alert(stringObject.substring(3,7)); // lo w 
  alert(stringObject.substring(7,3)); // lo w

 【注4】substring()相比,slice()更灵活,可以接收负参数。

 stringObject.substr(startIndex,length)

返回字符串 stringObject 从 startIndex 开始(包括 startIndex )指定数目(length)的字符字符。

1)startIndex 必须填写,可以是负数。如果为负,则表示从字符串尾部开始算起。即-1表示字符串最后一个字符。

2)参数 length 可选,如果没有指定,则默认为字符串的长度 stringObject.length 。

  var stringObject = "hello world!" ;
  alert(stringObject.substr(
3)); // lo world! 

  alert(stringObject.substr(3,stringObject.length)); // lo world! 
  alert(stringObject.substr(3,4)); // lo w

 3)substr()可以代替slice()和substring()来使用,从上面代码看出 stringObject.substr(3,4) 等同于stringObject.substring(3,7)

【注5】ECMAscript 没有对该方法进行标准化,因此尽量少使用该方法。 

本文转自BlogJavaOo缘来是你oO的博客,原文链接:【JavaScript】slice()、substring()、substr()的区别,如需转载请自行联系原博主。


相关文章
|
20天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
23 3
|
21天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
19 0
|
3天前
|
移动开发 JavaScript 前端开发
uni-app和Vue.js二者之间有什么区别?
1. uni-app是一个使用Vue.js开发所有前端应用的框架,支持一次编译多端运行。开发者编写的基础代码只需进行一次编写,就可以发布到多个平台,包括App、H5、微信小程序等。 2. Vue.js是一个渐进式JavaScript框架,用于构建用户界面。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。
4 0
|
4天前
|
Web App开发 JavaScript 前端开发
Ecmascript 和javascript的区别
Ecmascript 和javascript的区别
8 0
|
6天前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
12 0
|
15天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
15天前
|
存储 前端开发 JavaScript
【Web 前端】JS数据类型有哪些?区别?
【4月更文挑战第22天】【Web 前端】JS数据类型有哪些?区别?
|
15天前
|
JavaScript 前端开发 数据安全/隐私保护
【专栏】JavaScript中的`==`和`===`运算符有重要区别,本文将从三个部分详细探讨
【4月更文挑战第29天】JavaScript中的`==`和`===`运算符有重要区别。`==`进行类型转换后比较,而`===`不转换类型,要求完全相等。在比较对象时,`==`只比较引用,`===`比较内容。推荐使用`===`以确保准确性,但在需要类型转换时可谨慎使用`==`。注意特殊值如`null`和`undefined`的比较。在数据验证、类型判断和条件判断等场景中,应根据需求选择合适的运算符。理解两者差异能提升代码质量和稳定性。
|
15天前
|
JavaScript 前端开发
【专栏】Javascript 对象的深浅拷贝的区别以及如何实现它们
【4月更文挑战第29天】JavaScript中的对象拷贝分为浅拷贝和深拷贝。浅拷贝仅复制对象引用,修改拷贝会影响原始对象,如使用直接赋值、`Object.assign()`、扩展运算符和`Array.prototype.concat()`。深拷贝则创建独立副本,修改不影响原始对象,可通过递归、`JSON.stringify()`和`JSON.parse()`、Lodash的`cloneDeep()`或jQuery的`jQuery.extend()`实现。
|
17天前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中,`let` 和 `const` 是新增的变量声明关键字,与 `var` 存在显著差异。`let` 允许重新赋值,而 `const` 不可,且两者都具有块级作用域。`var` 拥有函数级作用域,并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化,而 `var` 不需。根据需求选择使用:局部作用域用 `let`/`const`,全局或函数范围用 `var`,不可变值用 `const`。
24 2