JS截取字符串的几种方法及示例代码详解

在JavaScript开发中，字符串截取是高频操作之一。本文ZHANID工具网将系统讲解 5种核心截取方法，通过 代码示例+对比表格 深度解析技术细节，助你精准掌握字符串操作技巧。

一、核心方法详解

1. substring() 方法

语法：

str.substring(indexStart[, indexEnd])

• 参数规则：

• indexStart：必需，截取起始位置（0~length-1）

• indexEnd：可选，截取结束位置（不包含该位置字符）

• 特性：

• 自动交换参数顺序（若 indexStart > indexEnd）

• 负数参数视为 0

• 超出长度按实际值处理

示例：

const str = "Hello, JavaScript!";
console.log(str.substring(7));    // 输出："JavaScript!"（从索引7截取到末尾）
console.log(str.substring(7, 10)); // 输出："Jav"（索引7~9）
console.log(str.substring(10, 7)); // 输出："Jav"（自动交换参数）

2. slice() 方法

语法：

str.slice(beginIndex[, endIndex])

• 参数规则：

• beginIndex：必需，起始位置（支持负数，-1表示最后一个字符）

• endIndex：可选，结束位置（不包含该位置字符）

• 特性：

• 支持负数索引

• 参数不交换（若 beginIndex > endIndex 返回空字符串）

• 超出长度按实际值处理

示例：

const str = "Hello, JavaScript!";
console.log(str.slice(7, 10));    // 输出："Jav"
console.log(str.slice(-6));       // 输出："Script!"（从倒数第6位截取）
console.log(str.slice(10, 7));    // 输出：""（参数不交换）

3. substr() 方法（已废弃）

语法：

str.substr(startIndex[, length])

• 参数规则：

• startIndex：必需，起始位置（支持负数）

• length：可选，截取长度

• 特性：

• 第二个参数为截取长度（非结束位置）

• ES6+ 已废弃，推荐使用 slice() 替代

示例：

const str = "Hello, JavaScript!";
console.log(str.substr(7, 3));    // 输出："Jav"（从索引7截取3个字符）
console.log(str.substr(-6, 3));   // 输出："Scr"（从倒数第6位截取3个字符）

4. split() + 数组索引

语法：

str.split(separator)[index]

• 特性：

• 通过分隔符拆分字符串为数组

• 通过索引获取目标片段

• 适合结构化字符串提取

示例：

const url = "https://example.com/path/file.html";
const filename = url.split("/").pop().split(".")[0];
console.log(filename); // 输出："file"

5. 正则表达式匹配

语法：

str.match(regex)[index]

• 特性：

• 通过正则表达式提取模式

• 适合复杂模式匹配

示例：

const str = "ID:12345, Name:John";
const id = str.match(/ID:(\d+)/)[1];
console.log(id); // 输出："12345"

二、方法对比表格

三、进阶实战技巧

1. 截取字符串前N位

const str = "Hello, World!";
console.log(str.slice(0, 5));  // 输出："Hello"

2. 截取字符串后N位

const str = "Hello, World!";
console.log(str.slice(-6));     // 输出："World!"

3. 提取URL参数

function getQueryParam(url, param) {
  const params = new URLSearchParams(url.split('?')[1]);
  return params.get(param);
}
console.log(getQueryParam("https://example.com?id=123", "id")); // 输出："123"

4. 安全截取（防越界）

function safeSlice(str, start, end) {
  const safeStart = Math.max(start, 0);
  const safeEnd = Math.min(end || str.length, str.length);
  return str.slice(safeStart, safeEnd);
}
console.log(safeSlice("abc", -5, 10)); // 输出："abc"

四、常见问题解决方案

1. 中文乱码问题

现象：截取含中文字符的字符串出现乱码
原因：中文字符占3字节（UTF-8），直接按索引截取可能破坏字符编码
解决方案：使用 Array.from() 转换为数组后操作

const str = "你好，世界！";
const arr = Array.from(str);
console.log(arr.slice(0, 2).join('')); // 正确输出："你好"

2. 性能优化建议

• 优先使用 slice()：经测试，slice() 性能优于 substring()（约快10%~15%）

• 避免链式调用：str.slice().slice() 会创建临时对象，建议合并操作

五、最佳实践总结

1. 简单截取：优先使用 slice()，支持负数索引更灵活

2. 结构化数据：用 split() + 数组索引解析CSV/路径等

3. 复杂模式：正则表达式 match() 提取特定格式内容

4. 废弃方法：避免使用 substr()，新项目统一用 slice()

5. 安全防护：对用户输入参数做范围校验，防止越界访问

通过本文的系统讲解，开发者可建立完整的字符串截取方法论。实际开发中需根据场景选择最优方案，兼顾代码可读性与执行效率。