js截取字符串的两种方法及区别详解

当我们需要在JavaScript中处理字符串时，常常需要对字符串进行截取。本篇攻略将会详细讲解js截取字符串的两种方法及其区别。

一、JavaScript中substring()方法

let str = "hello world";
let strNew = str.substring(3);
console.log(strNew);

上述代码实现了字符串声明，截取并输出从索引3开始到字符串结束的子字符串。它的输出结果为 lo world。

substring()方法的完整语法如下：

stringObject.substring(start, end)

其中，start参数表示要截取的子字符串的起始索引，end参数表示要截取的子字符串的结束索引，不包含end位置的字符。如果省略end参数，则会截取从start位置开始到字符串结束的所有字符。

下面是一个截取字符串的示例：

let str = "hello world";
let strNew = str.substring(1, 5);
console.log(strNew);

该示例中，substring()方法会截取从索引1开始到索引5前面的位置，不包括第5个索引位置，输出结果为 ello。

substring()方法的另一个特点是，如果start的索引位置比end的索引位置大，该方法仍会按照start和end正常处理进行截取，并返回一个颠倒的字符串。

下面的示例演示了在start索引大于end索引情况下如何截取字符串。

let str = "hello world";
let strNew = str.substring(7, 2);
console.log(strNew);

上述代码中，substring()方法会截取从索引2到索引7之间的字符，并颠倒排列输出结果为 olle。

二、JavaScript中slice()方法

JavaScript中另一种截取字符串的方法是slice()方法，它也可以截取字符串的一部分，不同的是，slice()方法允许截取负数索引的字符串。

示例代码如下：

let str = "hello world";
let strNew = str.slice(-5);
console.log(strNew);

上述代码中，slice()方法会从字符串的末尾开始截取倒数第5个索引位置到字符串的末尾位置的字符，并输出结果为 world。

slice()方法的完整语法如下：

stringObject.slice(start, end)

其中，start参数表示子字符串的开始索引，而end参数则表示子字符串的结束索引，不包含位置为end的字符。同样，如果省略end参数，则会截取从start位置开始到字符串末尾的所有字符。

下面是一个示例说明slice()方法的用法：

let str = "hello world";
let strNew = str.slice(1, 5);
console.log(strNew);

上述代码中，slice()方法会截取从索引1开始到索引5之间的字符，不包括位置为5的字符，输出结果为 ello。

除了截取字符串，slice()方法还可以使用负数索引截取字符串。

示例如下：

let str = "hello world";
let strNew = str.slice(-5, -1);
console.log(strNew);

上述代码中，slice()方法会从后往前数，截取倒数第5个元素到第3个元素，输出结果为 worl。

三、总结

substring()方法和slice()方法都是常用于JavaScript中截取字符串的方法。它们非常类似，但是还是有一些区别：

1. slice()方法可以使用负数索引截取字符串，而substring()方法不行。

2. 如果起始索引大于结束索引，substring()方法会自动对参数进行调换处理，而slice()方法不会。

两种方法都十分实用，我们需要根据具体需求选择不同的方法。