字符串截取三姐妹：slice()、substr()、substring()**

2023-11-15 12:55:13

前言

在前端开发中，字符串处理是一个常见且重要的任务。而字符串截取则是字符串处理中最基本的操作之一。在 JavaScript 中，有三个内置函数可以用来截取字符串：slice()、substr() 和 substring()。

这三个函数虽然都能截取字符串，但它们在用法、功能和适用场景上却存在着一定的差异。为了能够熟练使用这三个函数，我们需要深入了解它们的特性。

slice()

slice() 函数是三个函数中最强大的一个。它的语法如下：

string.slice(start, end)

其中：

start：必需。指定截取的起始位置。如果 start 为负数，则从字符串尾部开始计数。
end：可选。指定截取的结束位置。如果 end 为负数，则从字符串尾部开始计数。如果未指定 end，则截取到字符串末尾。

用法：

slice() 函数的用法非常简单，只需指定起始位置和结束位置即可。例如：

const str = 'Hello World';

// 截取从第 0 位到第 4 位的子字符串
const newStr1 = str.slice(0, 4); // 'Hell'

// 截取从第 6 位到字符串末尾的子字符串
const newStr2 = str.slice(6); // 'World'

// 截取从倒数第 3 位到倒数第 1 位的子字符串
const newStr3 = str.slice(-3, -1); // 'or'

特点：

slice() 函数不会修改原字符串。
如果 start 大于 end，则返回空字符串。
如果 start 或 end 超出字符串长度，则会自动调整为字符串长度或 0。

substr()

substr() 函数的语法如下：

string.substr(start, length)

其中：

start：必需。指定截取的起始位置。如果 start 为负数，则从字符串尾部开始计数。
length：必需。指定截取的长度。

用法：

substr() 函数需要指定起始位置和截取长度。例如：

const str = 'Hello World';

// 截取从第 0 位开始的长度为 4 的子字符串
const newStr1 = str.substr(0, 4); // 'Hell'

// 截取从第 6 位开始的长度为 5 的子字符串
const newStr2 = str.substr(6, 5); // 'World'

特点：

substr() 函数不会修改原字符串。
如果 start 大于 end，则返回空字符串。
如果 start 或 length 超出字符串长度，则会自动调整为字符串长度或 0。

substring()

substring() 函数的语法如下：

string.substring(start, end)

其中：

start：必需。指定截取的起始位置。如果 start 为负数，则从字符串尾部开始计数。
end：可选。指定截取的结束位置。如果 end 为负数，则从字符串尾部开始计数。如果未指定 end，则截取到字符串末尾。

用法：

substring() 函数的用法与 slice() 函数非常相似，只需要指定起始位置和结束位置即可。例如：

const str = 'Hello World';

// 截取从第 0 位到第 4 位的子字符串
const newStr1 = str.substring(0, 4); // 'Hell'

// 截取从第 6 位到字符串末尾的子字符串
const newStr2 = str.substring(6); // 'World'

// 截取从倒数第 3 位到倒数第 1 位的子字符串
const newStr3 = str.substring(-3, -1); // 'or'

特点：

substring() 函数不会修改原字符串。
如果 start 大于 end，则返回空字符串。
如果 start 或 end 超出字符串长度，则会自动调整为字符串长度或 0。

区别和适用场景

这三个函数虽然都能截取字符串，但在用法、功能和适用场景上却存在着一定的差异。

特征	slice()	substr()	substring()
截取方式	起始位置和结束位置	起始位置和长度	起始位置和结束位置
起始位置	可以为负数	可以为负数	可以为负数
结束位置	可以为负数	必须为正数	可以为负数
返回值	截取的子字符串	截取的子字符串	截取的子字符串
修改原字符串	否	否	否