JavaScript 字符串截取方法解析与对比

JavaScript 字符串截取方法简介

在页面数据处理的过程中都会不可避免的使用字符串的截取操作，有三种方式可以选择，分别是 slice、substr 和 substring。下面详细介绍下使用这三种方式进行截取字符串。

slice()

slice() 方法是 JavaScript 中最常用的字符串截取方法。它接受两个参数：

• start：要截取的字符串的起始位置（从 0 开始）。
• end：要截取的字符串的结束位置（不包括在内）。

例如，以下代码将从字符串 "Hello, world!" 中截取从第 7 个字符到第 12 个字符（不包括第 12 个字符）：

const str = "Hello, world!";
const newStr = str.slice(7, 12);
console.log(newStr); // 输出：world

如果 start 和 end 参数都省略，则 slice() 方法将截取整个字符串。

const str = "Hello, world!";
const newStr = str.slice();
console.log(newStr); // 输出：Hello, world!

substr()

substr() 方法与 slice() 方法非常相似，但它还有第三个可选参数：

• length：要截取的字符串的长度。

例如，以下代码将从字符串 "Hello, world!" 中截取从第 7 个字符开始的 5 个字符：

const str = "Hello, world!";
const newStr = str.substr(7, 5);
console.log(newStr); // 输出：world

如果 length 参数省略，则 substr() 方法将截取从 start 参数指定的位置到字符串结尾的字符。

const str = "Hello, world!";
const newStr = str.substr(7);
console.log(newStr); // 输出：world!

substring()

substring() 方法与 slice() 方法非常相似，但它有两个不同之处：

• substring() 方法不会接受负数参数。
• substring() 方法将 start 和 end 参数的顺序颠倒过来。

例如，以下代码将从字符串 "Hello, world!" 中截取从第 7 个字符到第 12 个字符（不包括第 12 个字符）：

const str = "Hello, world!";
const newStr = str.substring(7, 12);
console.log(newStr); // 输出：world

如果 start 和 end 参数都省略，则 substring() 方法将截取整个字符串。

const str = "Hello, world!";
const newStr = str.substring();
console.log(newStr); // 输出：Hello, world!

这三种方法的异同

方法	参数	行为
slice()	start, end	从 start 位置开始截取到 end 位置结束（不包括 end 位置）的子字符串。如果省略 start 和 end 参数，则截取整个字符串。
substr()	start, length	从 start 位置开始截取指定长度的子字符串。如果省略 length 参数，则截取从 start 位置到字符串结尾的子字符串。
substring()	start, end	从 start 位置开始截取到 end 位置结束（不包括 end 位置）的子字符串。如果省略 start 和 end 参数，则截取整个字符串。

使用场景

• slice() 方法最适用于当您知道要截取的子字符串的起始位置和结束位置时。
• substr() 方法最适用于当您知道要截取的子字符串的起始位置和长度时。
• substring() 方法最适用于当您知道要截取的子字符串的起始位置和结束位置时，但您不确定子字符串的长度。

总结

slice()、substr() 和 substring() 方法都是 JavaScript 中截取字符串的常用方法。每种方法都有其自己的优势和劣势，您需要根据实际情况选择最合适的方法。