JavaScript字符串处理：substring与indexOf高效组合

1. 字符串处理在JavaScript中的核心地位

作为前端开发中最基础也最频繁使用的数据类型，字符串处理能力直接决定了代码质量和开发效率。在真实业务场景中，我们经常需要：

• 从URL中提取特定参数
• 解析用户输入的复杂格式
• 处理服务端返回的嵌套数据
• 实现动态内容的高亮与截断

这些场景往往需要组合使用多个字符串方法才能完美解决。其中substring和indexOf这对组合拳，能解决80%的字符串截取和定位需求。但很多开发者只停留在基础用法，未能发挥它们的真正威力。

2. substring与indexOf方法深度解析

2.1 substring的隐藏特性

与slice不同，substring有两个鲜为人知但极其有用的特性：

javascript复制// 特性1：自动参数交换
'example'.substring(3, 1) // 等价于 substring(1, 3) → "xa"

// 特性2：负值自动转为0
'example'.substring(-2, 3) // 等价于 substring(0, 3) → "exa"

2.2 indexOf的搜索策略

indexOf的第二个参数fromIndex经常被忽略：

javascript复制const text = "apple,orange,apple,banana";
let pos = -1;
while ((pos = text.indexOf("apple", pos + 1)) !== -1) {
  console.log(`Found at ${pos}`); 
}
// 输出两次匹配位置

3. 经典组合技实战演示

3.1 URL参数提取器

javascript复制function getUrlParam(url, key) {
  const start = url.indexOf(key + '=');
  if (start === -1) return null;
  
  const valueStart = start + key.length + 1;
  const end = url.indexOf('&', valueStart);
  
  return end === -1 
    ? url.substring(valueStart)
    : url.substring(valueStart, end);
}

// 示例：提取token
const url = "https://example.com?token=abc123&expire=3600";
console.log(getUrlParam(url, "token")); // "abc123"

3.2 动态高亮关键词

javascript复制function highlight(text, keyword, tag = 'strong') {
  let result = '';
  let lastIndex = 0;
  let index;
  
  while ((index = text.indexOf(keyword, lastIndex)) !== -1) {
    result += text.substring(lastIndex, index) +
              `<${tag}>${keyword}</${tag}>`;
    lastIndex = index + keyword.length;
  }
  
  return result + text.substring(lastIndex);
}

// 示例：高亮"JavaScript"
highlight("Learn JavaScript and JavaScript frameworks", "JavaScript");

4. 性能优化与边界处理

4.1 内存优化技巧

频繁的字符串操作会产生大量临时对象。对于大规模文本处理：

javascript复制// 反模式：连续substring
let result = '';
for (let i = 0; i < largeText.length; i += 100) {
  result += largeText.substring(i, i + 100); // 产生中间字符串
}

// 优化方案：使用数组join
const chunks = [];
for (let i = 0; i < largeText.length; i += 100) {
  chunks.push(largeText.substring(i, i + 100));
}
result = chunks.join('');

4.2 多字节字符处理

当字符串包含emoji或中文等多字节字符时：

javascript复制"👋你好".substring(0, 3); // 可能截断emoji

解决方案：

javascript复制Array.from("👋你好").slice(0, 3).join(''); // 正确截取

5. 现代JavaScript的替代方案

虽然substring/indexOf组合依然有效，但ES6+提供了更优雅的替代：

5.1 模板字符串解析

javascript复制const [_, token] = /token=([^&]+)/.exec(url) || [];

5.2 includes与startsWith

javascript复制if (path.startsWith('/api') && !path.includes('private')) {
  // API路由处理
}

实际项目中，我建议根据场景选择：

• 简单判断：使用includes/startsWith
• 精确定位：保持indexOf
• 复杂解析：优先考虑正则表达式

6. 真实项目中的经验教训

在一次处理用户输入时，我遇到过这样的坑：

javascript复制// 用户输入可能包含HTML标签
const userInput = "<script>alert(1)</script>Hello";
const preview = userInput.substring(0, 20);

// 直接渲染会导致XSS漏洞

解决方案：

javascript复制function safePreview(text, length) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.textContent.substring(0, length);
}

另一个常见问题是连续空格处理：

javascript复制"Hello    world".substring(6, 11); // "   wo"

实际可能需要先标准化：

javascript复制"Hello    world".replace(/\s+/g, ' ').substring(6, 8); // "wo"

字符串处理看似简单，但魔鬼藏在细节中。经过多次踩坑后，我现在会坚持：

1. 始终考虑输入边界情况
2. 处理前先规范化字符串
3. 对用户输入永远做转义处理
4. 性能敏感场景避免频繁截取