面试官：JS截取字符串的方法有哪些？

大家好，欢迎来到IT知识分享网。

还记得几年前我去找前端工作的时候，那时候才初入职场，有一次去面试，然后被面试官问过一个面试题，JS截取字符串的方法有哪几种？记得当时只回答了一张方法，这么多年过去了，今天想起来总结一下这个问题，以后再也不用担心面试官问这个问题了。

JavaScript 提供了多种方法来截取字符串，其中 substring()、substr() 和 slice() 是最常用的三个方法。每个方法都有其特定的用途和行为，接下来详细解释这三个方法的用法和区别。

1. substring()

substring() 方法返回一个字符串中的一部分，该部分从 beginSlice 索引开始，到 endSlice 索引结束（不包括 endSlice）。

• 如果 beginSlice 大于 endSlice，则这两个参数的位置会被交换。
• 如果 beginSlice 或 endSlice 超出字符串的边界，它们会被调整到字符串的开头或结尾。

语法：

str.substring(beginSlice, endSlice) 

示例：

let str = "Hello World"; console.log(str.substring(1, 5)); // "ello"（从索引1开始到索引5结束，不包括索引5） console.log(str.substring(10, 1)); // "o"（参数交换，从索引1开始到索引10结束） console.log(str.substring(0, 100)); // "Hello World"（超出字符串边界，返回整个字符串） 

2. substr()

substr() 方法返回一个字符串中的一部分，该部分从 start 索引开始，长度为 length。

• 如果 start 索引超出字符串的边界，它会调整到字符串的开头或结尾。
• 如果 length 是负数，substr() 会返回整个字符串。

语法：

str.substr(start, length) 

示例：

let str = "Hello World"; console.log(str.substr(1, 4)); // "ello"（从索引1开始，长度为4） console.log(str.substr(10, 4)); // "World"（从索引10开始，长度为4） console.log(str.substr(0, 100)); // "Hello World"（超出字符串边界，返回整个字符串） console.log(str.substr(-3, 3)); // "rld"（负数索引，从字符串末尾开始） 

3. slice()

slice() 方法返回一个字符串中的一部分，该部分从 beginSlice 索引开始，到 endSlice 索引结束（不包括 endSlice）。

• slice() 不会像 substring() 那样交换参数，如果 beginSlice 大于 endSlice，返回结果为空字符串。
• slice() 可以接收负数索引，表示从字符串末尾开始计数。

语法：

str.slice(beginSlice, endSlice) 

示例：

let str = "Hello World"; console.log(str.slice(1, 5)); // "ello"（从索引1开始到索引5结束，不包括索引5） console.log(str.slice(10, 1)); // ""（不交换参数，返回空字符串） console.log(str.slice(0, 100)); // "Hello World"（超出字符串边界，返回整个字符串） console.log(str.slice(-5, -1)); // "orld"（负数索引，从字符串末尾开始计数） 

总结

• substring() 和 slice() 都可以接受负数索引，但 substring() 会交换参数，而 slice() 不会。
• substr() 接受长度参数，而 substring() 和 slice() 不接受。
• substr() 的行为在处理负数索引时与其他两个方法不同。

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦。