JavaScript截取子串首选substring()（不支持负索引）、slice()（支持负索引更安全）和match()（正则提取模式内容），DOM场景应避免直接操作HTML字符串而用临时元素解析。
用 substring() 截取固定位置的子串
JavaScript 里最直接的方式就是 substring()，它按起始和结束索引切字符串，不支持负数索引——这点容易踩坑：传 -1 不会从末尾算，而是被当成 0。
常见错误现象："hello".substring(2, -1) 返回 "he"（不是预期的 "lo"），因为负数会被自动转为 0，实际等价于 substring(2, 0)，而该函数会自动交换参数顺序。
- 要从第 2 位开始取 3 个字符：用
str.substring(2, 5) - 只给一个参数（如
substring(3)）：截取从索引 3 到末尾 - 如果起始 > 结束，函数会自动调换，结果不变；但语义不清，建议避免
用 slice() 处理负数索引更安全
slice() 和 substring() 行为相似，但关键区别是它支持负数索引：-1 表示最后一个字符，-2 是倒数第二个……这个特性在动态提取后缀（比如文件扩展名、URL 路径最后一段）时特别实用。
使用场景：解析 "user/profile/settings" 想拿 "settings"，可以写 path.slice(path.lastIndexOf("/") + 1)；想取最后 4 位（不管总长）就用 str.slice(-4)。
立即学习“前端免费学习笔记（深入）”；
-
"abcde".slice(-2)→"de"，"a".slice(-2)→"a"（不会报错） -
slice()对null或undefined调用会报TypeError: Cannot read property 'slice' of undefined，务必先判空 - IE8+ 支持，现代项目基本无兼容问题
用正则 match() 提取符合模式的部分
当你要的不是“第几个字符”，而是“第一个数字”“邮箱前缀”“双引号里的内容”，就得靠正则。这时候别硬算索引，match() 返回数组，首项是完整匹配，捕获组才是你要的。
容易踩的坑：没加 g 标志时，match() 只返回第一个匹配；但如果你只想要一个结果，反而该用 exec() 或直接解构——因为 match() 对无匹配返回 null，直接取 [1] 会崩。
- 提取引号内文本：
str.match(/"([^"]*)"/)?.[1]（注意可选链防止报错） - 取 URL 中的域名：
url.match(/^https?:\/\/([^\/]+)/)?.[1] - 别写
str.match(/x/g)[0]——万一没匹配到，[0]访问null就挂了
DOM 场景下别直接操作 innerHTML 字符串
如果目标是“从一段 HTML 字符串里提取某个标签的内容”，比如从 hello" 中取 world，千万别用 substring() 去扒标签——结构一变就失效，还容易被 XSS 利用。
正确做法是借 DOM 解析：创建临时元素，设 innerHTML，再用 querySelector 安全提取。虽然多几行，但稳定、可读、防注入。
- 错误示范：
htmlStr.substring(htmlStr.indexOf(">") + 1, htmlStr.lastIndexOf(" - 正确做法：
const temp = document.createElement("div"); temp.innerHTML = htmlStr; const text = temp.querySelector("div")?.textContent; - 注意：如果字符串含多个同级
div，querySelector只取第一个；要全部用querySelectorAll
