javascript中如何使用substr()方法

# JavaScript中如何使用substr()方法

## 概述

`substr()`是JavaScript字符串操作中常用的方法之一，用于从字符串中提取指定位置的子字符串。虽然ES6之后推荐使用`substring()`和`slice()`方法，但理解`substr()`的用法对维护旧代码或特定场景仍有重要意义。

## 语法

```javascript
str.substr(start[, length])

• start：必需，开始提取的位置（索引从0开始）
• length：可选，要提取的字符数。若省略则提取到字符串末尾

参数详解

start参数

• 正数：从字符串开头计算的索引（0表示第一个字符）
• 负数：从字符串末尾计算的索引（-1表示最后一个字符）
• 超出字符串长度：
  • 正数超出：返回空字符串
  • 负数超出：视为0

length参数

• 正数：提取指定数量的字符
• 负数：自动转换为0（返回空字符串）
• 省略：提取到字符串末尾
• 超过剩余字符数：提取到字符串末尾

返回值

返回一个新的字符串，包含从原字符串提取的子串，不修改原字符串。

基础示例

示例1：基本用法

const str = "Hello, World!";
console.log(str.substr(7));      // "World!"
console.log(str.substr(7, 5));   // "World"

示例2：负数索引

const str = "JavaScript";
console.log(str.substr(-3));     // "ipt"（最后3个字符）
console.log(str.substr(-6, 4));  // "Scri"

示例3：边界情况

const str = "Example";
console.log(str.substr(10));      // ""（超出长度）
console.log(str.substr(-10, 2));  // "Ex"（负数超出视为0）
console.log(str.substr(2, 0));    // ""（长度为0）

与相似方法的对比

substr() vs substring()

substr() vs slice()

实际应用场景

场景1：文件扩展名提取

function getFileExtension(filename) {
  const dotIndex = filename.lastIndexOf('.');
  return dotIndex === -1 ? '' : filename.substr(dotIndex + 1);
}

场景2：手机号中间四位隐藏

function hidePhoneNumber(phone) {
  return phone.substr(0, 3) + '****' + phone.substr(7);
}

场景3：长文本截取预览

function getPreview(text, maxLength) {
  return text.length > maxLength 
    ? text.substr(0, maxLength) + '...' 
    : text;
}

注意事项

1. 非标准方法：substr()未被纳入ECMAScript规范，属于遗留功能
2. 编码问题：对多字节字符（如中文）可能产生意外结果：

   
   "中文测试".substr(1, 2) // 可能返回乱码
   

3. 性能考虑：在循环中频繁调用可能影响性能

替代方案建议

使用substring()

// 等效于str.substr(2, 4)
str.substring(2, 2 + 4)

使用slice()

// 等效于str.substr(-3)
str.slice(-3)

ES6字符串解构

const [first, ...rest] = str;
const firstThree = [...str].slice(0, 3).join('');

浏览器兼容性

• 所有主流浏览器完全支持
• 更推荐在新项目中使用slice()和substring()

总结

虽然substr()方法在JavaScript中仍然可用，但考虑到它是非标准方法且存在更现代的替代方案，建议： 1. 新项目优先使用slice()和substring() 2. 维护旧代码时需理解其特性 3. 处理Unicode字符时考虑使用Array.from(str).slice()等方案

掌握substr()方法有助于更好地理解JavaScript字符串操作的演变过程，但在实际开发中应根据具体情况选择最合适的工具。 “`

注：本文实际约1000字，可通过以下方式扩展： 1. 增加更多边界案例 2. 添加性能测试对比数据 3. 详细说明Unicode处理方案 4. 补充历史背景知识