JavaScript 截取字符串

在 JavaScript 中，如果想要截取字符串的一部分，常用的有以下 2 种方法。

slice()。
substring()。

注意: 除了 slice() 和 substring() 之外，还有一个 substr() 方法。不过该方法在最新的 ECMAScript 中已经被废弃了，小伙伴们就不要继续使用了。

使用 slice() 截取字符串

在 JavaScript 中，我们可以使用 slice() 方法来截取字符串的一部分。其中，slice() 会返回截取的部分。

语法：

str.slice(start, end)

说明：

slice() 方法接收以下 2 个参数。

start（可选）：截取的开始下标（包含）。如果省略，则表示从下标 0 开始。
end（可选）：截取的结束下标（不含）。如果省略，则表示截取到末尾。

str.slice(start, end) 截取的范围是：[start, end)，包含 start 但不包含 end。

示例 1：slice() 的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "www.lvyenet.com";

       // 从下标 4 开始截取到末尾
        const result1 = str.slice(4);
        console.log(result1)

       // 截取范围：[4, 11)
        const result2 = str.slice(4, 11);
        console.log(result2)
    </script>
</body>
</html>

运行结果如下。

lvyenet.com
lvyenet

分析：

str.slice(4) 截取的范围是：下标 4 到结尾。而 str.slice(4, 11) 截取的范围是：[4, 11)，也就是包含下标 4，但不包含下标 11。

示例 2：slice() 索引为负数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "logo.jpg";

        const result1 = str.slice(-3);
        console.log(result1)

        const result2 = str.slice(0, -4);
        console.log(result2)
    </script>
</body>
</html>

运行结果如下。

jpg
logo

分析：

str.slice(-3) 表示截取的范围是：倒数第 3 个元素到结尾，包含倒数第 3 个元素。

str.slice(0, -4) 表示截取的范围是：第 1 个元素到倒数第 4 个元素，包含第 1 个元素，但不包含倒数第 4 个元素。

提示: 关于 slice() 更详细的用法，另请参阅：JavaScript 字符串 slice() 方法。

使用 substring() 截取字符串

substring() 方法与 slice() 方法语法是非常相似的，关键区别在于：它们如何处理 “负数下标” 和 “起始下标大于结束下标” 的情况是不同的。

语法：

str.substring(start, end)

说明：

substring() 方法接收以下 2 个参数。

start（可选）：截取的开始下标（包含）。如果省略，则表示从下标 0 开始。
end（可选）：截取的结束下标（不含）。如果省略，则表示截取到末尾。

substring(start, end) 截取范围为：[start, end)，也就是 “包含 start 但不包含 end” 。其中，end 可以省略。

substring() 与 slice() 关键区别在于：

负数参数：substring() 不支持负数下标。任何负数下标都会被视为 0。
参数交换：如果 start 大于 end，substring() 会自动交换这两个参数，确保始终从较小的下标截取到较大的下标。

示例 3：substring() 不支持负数下标

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "logo.jpg";
        const result = str.substring(-3);
        console.log(result)
    </script>
</body>
</html>

运行结果如下。

logo.jpg

分析：

substring() 方法不支持负数下标，任何负数下标都会被视为 0。因此 str.substring(-3) 等价于 str.substring(0)，也就是截取范围为：0 到结尾。

示例 4：substring() 交换下标

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "logo.jpg";
        const result = str.substring(4, 0);
        console.log(result)
    </script>
</body>
</html>

运行结果如下。

logo

分析：

对于 substring(start, end) 来说，如果 start 大于 end，那么 substring() 就会交换它们的位置。对于这个例子来说，str.substring(4, 0) 等价于 str.substring(0, 4)。

而对于 slice(start, end) 来说，如果 start 大于 end ，此时 slice() 方法不会交换两个参数的位置，而是返回一个空字符串。

提示: 关于 substring() 更详细的用法，另请参阅：JavaScript 字符串 substring() 方法。

最后，可能有小伙伴会问：“既然 slice() 和 substring() 这两个方法都能截取字符串，那么我到底应该优先用哪个呢？” 在实际开发中，我们强烈推荐优先使用 slice()，主要是因为：

它的行为更统一（数组也有 slice 方法，用法一致）。
它支持负数索引，截取倒数及末尾字符非常方便。
substring 的 “自动交换参数” 特性，有时会掩盖代码逻辑错误。