3个 JavaScript 字符串截取方法

简介: 笔记

image.png

在 JavaScript 中,可以使用 substr()slice()substring() 方法截取字符串。


substring()


substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引直到字符串的末尾的一个子集。语法如下:

str.substring(indexStart[, indexEnd])

参数说明:

  • indexStart:需要截取的第一个字符的索引,该索引位置的字符作为返回的字符串的首字母。
  • indexEnd:可选。一个 0 到字符串长度之间的整数,以该数字为索引的字符不包含在截取的字符串内。

如果 startIndex 大于 endIndex,则会交换它们的位置。来看一段示例代码:

let str = "深耕WEB开发10+年,拥有一颗工匠的心";
console.log(str.substring(7)); // 10+年,拥有一颗工匠的心
console.log(str.substring(0, 5)); // 深耕WEB
console.log(str.substring(7, 5)); // 开发
console.log(str.substring(5, 5)); // 空

substr()


substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。语法如下:

str.substr(start[, length])

第一个参数是截取开始的位置,第二个参数是截取的长度。如下代码:

let str = "深耕WEB开发10+年,拥有一颗工匠的心";
let result = str.substr(1, 4);
console.log(result); // 耕WEB

上述代码的 1 表示从第二个字符开始截取,4 表示截取的长度为 4 个字符。

substr() 方法在截取字符串时是基于字符位置的,如果截取长度超过了字符串的长度,它会一直截取到字符串的末尾。如果第一个参数是负数,则从字符串的末尾开始计数。

如果可以的话,建议使用 substring() 来取代 substr()


slice()


slice() 方法提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串,与 substring() 方法类似。语法如下:

str.slice(startIndex, endIndex)

其中,startIndex 表示要截取的子字符串的起始位置(包含该位置),endIndex 表示要截取的子字符串的结束位置(不包含该位置)。如果只传入 startIndex,则会从该位置一直截取到字符串末尾。如果 startIndex 大于 endIndex,则会返回空字符串。例如:

let str = "深耕WEB开发10+年,拥有一颗工匠的心";
console.log(str.slice(7)); // 10+年,拥有一颗工匠的心
console.log(str.slice(0, 5)); // 深耕WEB
console.log(str.slice(7, 5)); // ""
console.log(str.slice(5, 5)); // ""


substring()substr() 的区别


substring()substr() 都是截取字符串的方法,但它们有以下区别:

  1. 参数不同substring() 方法的第一个参数是起始位置,第二个参数是终止位置(不包括该位置的字符);substr() 方法的第一个参数是起始位置,第二个参数是截取的长度。
  2. 负数处理不同substring() 方法不接受负数参数,如果传入负数,会被自动转换为0substr() 方法可以接受负数参数,表示倒数计数。
  3. 返回值不同substring() 方法返回从起始位置到终止位置之间的字符;substr()方法返回从起始位置开始指定长度的字符。

ES6中新增了 slice() 方法,但它和 substring() 方法非常相似,也是接受起始位置和终止位置作为参数,不同之处是slice() 方法可以接受负数参数,表示从字符串末尾开始计数。substr() 虽然没有被完全遗弃,但还是建议使用 substring() 来取代 substr()


目录
打赏
0
0
0
0
20
分享
相关文章
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
302 62
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
124 63
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
55 13
js中BOM中的方法
【10月更文挑战第31天】
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
87 5
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
44 2
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
45 1
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
75 7

热门文章

最新文章