JavaScript 字符串方法详解：substr 与 substring 与 slice（最佳实践）

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍

JavaScript 是现代 Web 开发中必不可少的编程语言。尤其是字符串操作，常用于数据格式化、解析以及动态 UI 更新等场景。

本文详细阐述了三种常用的 JavaScript 字符串方法——substr、substring 和 slice。由于这些方法的功能相似，了解它们之间的差异有助于在不同情境下选择最合适的实现方式。

我们还将讨论 substr 为什么被废弃，介绍推荐的替代方案，并提供实用建议，使你的代码符合现代 JavaScript 的最佳实践。

2. 各方法的基本概述与用法

本节将详细说明 substr、substring 和 slice 的基本语法与使用方式。通过对每个方法的理解，你可以选取最合适的方案，从而提升代码的可读性和可维护性。

2.1 substr 方法

语法：

string.substr(start, length)

描述：

• start：指定提取的起始位置（索引），索引从 0 开始。
• length：指定要提取的字符数量。如果省略，则从起始位置一直提取到字符串末尾。

示例：

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

重要说明：
substr 方法已被 废弃，在现代 JavaScript 开发中不推荐使用。请改用 slice 或 substring 作为替代方案。

替代示例（使用 slice）：

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 substring 方法

语法：

string.substring(start, end)

描述：

• start：指定提取的起始位置。
• end：指定结束位置（该索引对应的字符不包括在内）。

示例：

let str = "JavaScript";
console.log(str.substring(0, 4));  // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

关键点：

1. 参数顺序会自动调整： 如果写成 substring(10, 4)，会自动解释为 substring(4, 10)。
2. 负数会被忽略： 若传入负值，会被当作 0 处理。

需要负数时的替代方案（使用 slice）：

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 slice 方法

语法：

string.slice(start, end)

描述：

• start：指定提取的起始位置。
• end：指定结束位置（该索引对应的字符不包括在内）。

示例：

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

关键点：

1. 支持负数： 负数会被解释为相对于字符串末尾的偏移量。
2. 适用于字符串和数组： 由于 slice 也可用于数组，它是一种高度通用的方法。

3. 各方法的对比表

使用场景选择指南：

• 提取字符串的短片段： → slice
• 需要负索引时： → slice
• 兼容旧代码： → 避免使用 substr，迁移到现代替代方案

4. 实用代码示例

基础字符串操作

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

从特定模式中提取值

let url = "https://example.com/index.html";

// Get the filename
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. 处理已弃用的方法

在 JavaScript 中，substr 方法被视为 已弃用。这是因为它已在最新的 ECMAScript 规范中被正式归类为不推荐使用的方式。本节将说明 substr 的问题、可用的替代方案以及实际的迁移策略。

5.1 为什么 substr 被弃用？

1. 可读性低：

• substr 方法将要提取的字符数作为第二个参数，这与其他使用起始和结束位置的方式不同。这种不一致会让代码一眼看上去更难理解。

2. 因规范变更可能导致的未来兼容性问题：

• 在 ECMAScript 标准化过程中，旧特性可能会被标记为已弃用。因此，为了确保长期兼容性，新的代码应避免使用 substr。

3. 不支持负值：

• substr 不支持负值，而 slice 完全支持负索引，能够更灵活地进行字符串提取。

5.2 如何迁移到替代方法

案例 1：提取固定长度的子字符串

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"

// Recommended code (slice)
console.log(str.slice(0, 4)); // Output: "Java"

案例 2：提取字符串的结尾部分

// Deprecated code
console.log(str.substr(-6)); // Error (negative values are not supported)

// Recommended code (slice)
console.log(str.slice(-6)); // Output: "Script"

案例 3：提取 URL 或文件名的一部分

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // Output: "index.html"

// Recommended code (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // Output: "index.html"

5.3 对遗留代码的重构建议

1. 运行代码扫描：

• 使用 ESLint 等工具检测代码库中出现的 substr 调用。

2. 提升测试覆盖率：

• 通过单元测试验证重构后的行为，确保更改不会引入回归问题。

3. 逐步迁移：

• 优先处理代码库中的关键部分，分步替换已弃用的方法。

5.4 迁离 substr 的好处

1. 提升可读性和可维护性：

• 代码意图更加清晰，便于协作和长期维护。

2. 符合现代规范：

• 遵循 ECMAScript 标准可确保后续更新和兼容性更加顺畅。

3. 灵活处理负值：

• 使用 slice 可以轻松从字符串的开头或结尾进行提取，使代码更简洁、更具表达力。

6. 常见问题解答 (FAQ)

本节汇总了与 JavaScript 字符串操作方法相关的常见问题及答案，帮助读者快速解决典型疑惑。

Q1: substr 还能使用吗？

A:
是的，substr 在大多数现代浏览器中仍然可用。但由于它在 ECMAScript 规范中 已被弃用，在新项目或考虑长期兼容性时应避免使用它。

推荐的替代方案：

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"

Q2: slice 与 substring 有何区别？

A:
下表概括了 slice 与 substring 的主要区别。

示例：

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3: 继续使用已弃用方法有哪些风险？

A:
继续使用已弃用方法可能会导致以下风险。

1. 浏览器支持结束： 在未来，substr 可能不再被浏览器支持。
2. 维护成本增加： 处理由已弃用方法引起的错误或警告会增加不必要的开销。
3. 代码质量下降： 未能与现代规范保持一致会降低可读性和可维护性。

Q4: 处理长字符串的最佳方法是什么？

A:
在处理长字符串时，slice 是最佳选择，因为它具有灵活性和对负索引的支持。

示例：

let longText = "This is a very long text string used for testing purposes.";

// Get the first 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Get the last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: 如何使用负值从末尾计数？

A:
虽然 slice 支持负值，但 substring 将负值视为 0，因此需要谨慎使用。

示例：

let str = "JavaScript";

// Extract from the end using slice
console.log(str.slice(-6));  // "Script"

// substring treats negative values as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: 有什么性能差异吗？

A:
在现代浏览器中，slice、substring 和 substr 之间没有显著的性能差异。由于它们都是作为原生函数实现的，建议 优先考虑可读性和可维护性而非性能。

7. 总结和推荐的最佳实践

本文解释了 JavaScript 字符串操作方法——substr、substring 和 slice——从基本用法到关键差异、实际示例以及处理已弃用方法的策略。

本节总结了每种方法，并基于现代 JavaScript 标准突出了推荐的最佳实践。

7.1 每种方法的总结

7.2 选择正确方法的实际标准

1. 用于简单范围提取的 substring：

• 当处理短字符串且不需要负值时推荐使用。示例：

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. 选择 slice 以获得最大灵活性：

• 由于它支持负索引并提供更大的多功能性，slice 是现代代码中最推荐的选项。示例：

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. 尽早替换 substr：

• 在遗留代码库中，主动将 substr 替换为 slice 或 substring 。

7.3 现代最佳实践

1. 优先考虑可读性：

• 编写清晰简洁的代码可以提高长期可维护性。

2. 消除已弃用方法：

• 由于 substr 可能在未来的更新中被移除，积极迁移到 slice 或 substring 。

3. 需要负值时使用 slice：

• slice 提供灵活的向后提取，使其成为许多实际用例的理想选择。

7.4 编码风格示例

最后，这里有一些以干净且可维护的编码风格编写的现代字符串操作示例。

// Example: Extracting the domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Extracting a file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 读者的行动计划

1. 进行代码审查：

• 检查现有项目中 substr 的使用，并在适当的地方将其替换为 slice 或 substring 。

2. 在新代码中应用最佳实践：

• 遵循现代规范，并考虑可读性和负索引处理来设计代码。

3. 利用评论和问题：

• 鼓励对不清楚的点或具体使用案例提出问题和讨论，以在社区内分享知识。

结论

本文使用基本语法、使用示例和对比表格解释了 JavaScript 字符串方法 substr、substring 和 slice。

• substr 应该避免使用，因为它已被弃用。
• substring 适用于简单的使用场景。
• slice 是最灵活且推荐使用的方法。

使用这些知识编写高效、可读且易于维护的 JavaScript 代码。

8. 相关链接和参考资料

为了进一步加深对 substr、substring 和 slice 的理解，本节提供有用的链接和参考资料。官方文档和学习资源将帮助您跟上最新规范和高级技术的步伐。

8.1 官方文档

1. MDN Web Docs – JavaScript 字符串对象

• 链接： String – MDN Web Docs
• 描述： JavaScript String 对象的官方参考文档，包含每个方法的详细规范和示例。

2. ECMAScript 规范（ECMA-262）

• 链接： ECMAScript 官方规范
• 描述： 官方 ECMAScript 规范，详细说明 JavaScript 语言特性，包括已弃用的方法和最新更新。

8.2 学习网站和教程

1. JavaScript.info – 字符串方法

• 链接： JavaScript.info
• 描述： 对字符串操作的全面解释，从基础到高级使用案例，配有实用示例。

2. Progate – JavaScript 学习课程

• 链接： Progate
• 描述： 面向初学者的交互式学习平台，通过动手编码覆盖 JavaScript 基础。

3. Dotinstall – JavaScript 初学者课程

• 链接： Dotinstall
• 描述： 基于视频的学习平台，帮助快速直观地理解 JavaScript 概念。

8.3 实用示例代码资源

1. GitHub – JavaScript 示例项目

• 链接： GitHub
• 描述： 通过开源项目学习真实场景的 JavaScript 模式和最佳实践。

2. CodePen – 交互式代码练习场

• 链接： CodePen
• 描述： 一个实时分享和实验 JavaScript 代码的平台。

8.4 推荐书籍

1. JavaScript: The Definitive Guide, 7th Edition (O’Reilly)

• 概述： 包含 JavaScript 基础到最新语言特性的全面参考。

2. Modern JavaScript Development Guide (Revised Edition)

• 概述： 聚焦现代 JavaScript 语法和实际开发技术的实用指南。

8.5 社区和论坛

1. Stack Overflow

• 链接： Stack Overflow
• 描述： 面向编程相关问题和故障排除的全球问答社区。

2. Qiita

• 链接： Qiita
• 描述： 日本的技术文章平台，提供大量实用的 JavaScript 示例。

3. Teratail

• 链接： Teratail
• 描述： 日本的问答网站，开发者可以用日语提问。

小结

本节介绍了与 JavaScript 字符串操作相关的官方参考、学习资源、示例代码仓库以及开发者社区。

关键要点：

1. 使用官方文档验证规范：

• 养成检查最新规范和使用指南的习惯。

2. 通过教程和示例代码加强实践技能：

• 动手编码既能巩固理论理解，又能应用于实际场景。

3. 通过开发者社区分享知识：

• 参与讨论有助于拓展专业知识和人脉网络。