js 字符串截取（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，字符串操作是日常编码中不可或缺的技能之一。无论是处理用户输入、解析 API 返回的数据，还是格式化显示内容，字符串截取都是开发者最常使用的技巧之一。然而，由于 JavaScript 提供的字符串方法众多，且部分方法的参数规则容易混淆，许多开发者在实际使用时会遇到逻辑错误或性能问题。本文将系统性地梳理 JavaScript 中字符串截取的核心方法，并通过形象的比喻和实际案例，帮助读者快速掌握这一技能。

一、基础概念与核心方法解析

1.1 字符串的“珠子串”比喻

可以将字符串想象成一条由字符组成的珠子串。例如字符串 "Hello, World!" 可以分解为 13 个字符（包括空格和标点），每个字符对应珠子串上的一个位置。字符串截取的操作，本质上就是从这条珠子串中“剪下”特定位置的子串。

1.2 JavaScript 核心截取方法对比

JavaScript 提供了三种核心字符串截取方法：slice()、substring() 和 substr()。它们的参数规则和行为差异较大，需根据场景灵活选择。以下是它们的对比表格：

二、方法详解与实战案例

2.1 slice()：灵活的负数支持

原理与规则

slice() 方法允许使用负数索引，例如：

const str = "JavaScript";  
console.log(str.slice(-8, -4)); // 输出 "Scrp"（从倒数第8位开始，到倒数第4位结束）  

形象比喻：
想象你站在珠子串的末尾，负数索引就像倒着数珠子的位置，方便快速定位尾部字符。

典型应用场景

• 截取文件扩展名：

function getFileExtension(filename) {  
  return filename.slice(filename.lastIndexOf(".") + 1);  
}  
console.log(getFileExtension("photo.jpg")); // 输出 "jpg"  

• 处理 URL 参数中的片段标识符（# 后内容）：

const url = "https://example.com/page#section";  
const fragment = url.slice(url.indexOf("#") + 1);  
console.log(fragment); // 输出 "section"  

2.2 substring()：参数自动修复的“安全网”

核心特性

该方法会自动将负数参数转为 0，且若 start > end，会交换参数顺序。例如：

const str = "Hello";  
console.log(str.substring(1, 3));    // 输出 "el"  
console.log(str.substring(3, 1));    // 输出 "el"（参数自动交换为 1,3）  
console.log(str.substring(-5, 2));   // 输出 "He"（-5 转为 0）  

实用案例：提取手机号中间部分

function maskPhone(phone) {  
  return phone.substring(0, 3) + "****" + phone.substring(7);  
}  
console.log(maskPhone("13812345678")); // 输出 "138****5678"  

2.3 substr()：基于起始位置和长度的截取

参数逻辑

第二个参数表示截取的字符数，而非结束索引。例如：

const str = "Hello World";  
console.log(str.substr(6, 5)); // 输出 "World"（从第6位开始，截取5个字符）  

高级用法：分页显示文本

function paginateText(text, pageSize = 10) {  
  const pages = [];  
  for (let i = 0; i < text.length; i += pageSize) {  
    pages.push(text.substr(i, pageSize));  
  }  
  return pages;  
}  
console.log(paginateText("1234567890abcdef")); // 输出 ["1234567890", "abcdef"]  

三、进阶技巧与常见误区

3.1 负数索引的巧妙运用

通过 slice() 的负数参数，可以轻松实现“截取末尾 N 个字符”的需求：

function getLastNChars(str, n) {  
  return str.slice(-n); // 直接使用负数参数  
}  
console.log(getLastNChars("2023-10-05", 2)); // 输出 "05"（日期的“日”部分）  

3.2 动态截取与可变长度

在需要根据字符串长度动态调整截取范围时，可结合 length 属性：

function truncateText(text, maxLength = 10) {  
  return text.length > maxLength  
    ? text.slice(0, maxLength) + "..."  
    : text;  
}  
console.log(truncateText("Hello, World!", 8)); // 输出 "Hello..."  

3.3 常见错误与解决方案

• 错误 1：混淆 substring() 和 substr() 的第二个参数含义

  // 错误写法：意图截取 5 个字符，实际得到从索引3到末尾  
  "abcdef".substring(3, 5); // 输出 "de"  
  "abcdef".substr(3, 5);    // 输出 "def"  
  

• 错误 2：忽略字符串长度越界问题

  const str = "JS";  
  // 正确写法：使用 Math.min 避免越界  
  const safeSlice = str.slice(0, Math.min(str.length, 5)); // 输出 "JS"  
  

四、综合案例：构建一个多功能字符串处理工具

4.1 需求场景

假设需要实现一个函数，根据用户输入的字符串和参数，返回以下格式化结果：

• 如果字符串长度超过 15 字符，截取前 15 字符并添加 ...
• 否则直接返回原字符串
• 同时将结果转换为全大写字母

4.2 代码实现

function formatText(input) {  
  let result = input;  
  if (input.length > 15) {  
    result = input.slice(0, 15) + "..."; // 使用 slice 处理前15字符  
  }  
  return result.toUpperCase(); // 转换为大写  
}  
console.log(formatText("This is a very long text")); // 输出 "THIS IS A VERY..."  
console.log(formatText("Short")); // 输出 "SHORT"  

五、性能优化与最佳实践

5.1 方法性能对比

根据 MDN 文档和性能测试数据：

• slice() 和 substring() 性能相近，均优于 substr()
• 当需要负数索引或需处理参数顺序时，优先选择 slice()

5.2 代码可维护性建议

• 明确注释：在复杂截取逻辑中添加注释，说明截取意图
• 模块化封装：将高频使用的截取逻辑封装为复用函数

  // 封装提取邮箱用户名的函数  
  function extractEmailUser(email) {  
    return email.substring(0, email.indexOf("@"));  
  }  
  

六、结论

通过本文的讲解，读者可以掌握 JavaScript 中字符串截取的核心方法及其差异，并通过实际案例理解如何在不同场景下选择最佳方案。无论是基础的 slice()、substring()，还是需要特殊处理的 substr()，理解它们的底层逻辑和参数规则是避免错误的关键。建议开发者在日常编码中多加练习，并结合工具函数提升代码的可维护性。

在 JavaScript 开发中，字符串截取不仅是技术操作，更是一种思维方式的体现——通过精准定位和灵活组合，开发者可以像拼接珠子一样，构建出符合需求的字符串结构。