JavaScript字符串常用方法全解析

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript字符串操作及常用方法详解》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

JavaScript字符串不可变，所有方法均返回新字符串；判断子串用includes()更清晰；split()/join()适合分隔符处理；提取片段优先用slice()；注意Unicode安全性。

字符串不可变，所有方法都返回新字符串

JavaScript 中的字符串是原始类型，一旦创建就无法修改。所有所谓“改变字符串”的操作，比如 replace()、toLowerCase()、slice()，实际都是返回一个新字符串，原字符串保持不变。这点常被初学者忽略，导致写成 str.toUpperCase(); console.log(str); 后发现没变——因为没把返回值赋给变量。

• 错误写法：

  let str = "hello";
  str.toUpperCase();
  console.log(str); // "hello"（不是 "HELLO"）

• 正确写法：

  let str = "hello";
  str = str.toUpperCase();
  console.log(str); // "HELLO"

• 链式调用安全：因为每步都返回新字符串，" hello ".trim().toUpperCase().split("") 是完全合法的

判断子串存在用 includes()，不是 indexOf() !== -1

includes() 是 ES6 引入的语义更清晰的方法，专门用于布尔判断。虽然 indexOf() 也能实现，但可读性差、易出错（比如忘记加 !== -1），且不支持正则。

• "abc".includes("b") → true
• "abc".includes("d") → false
• "abc".includes("a", 1) → false（从索引 1 开始找，跳过了 "a"）
• 避免："abc".indexOf("b") >= 0 或 "abc".indexOf("b") !== -1 —— 冗余且容易漏写条件

split() 和 join() 配合处理分隔符场景

这是拆解和拼接字符串最常用的一对方法，尤其适合 CSV 解析、路径处理、参数拼接等。

• "a,b,c".split(",") → ["a", "b", "c"]
• ["x", "y", "z"].join("-") → "x-y-z"
• 空字符串 split("") 可转为字符数组，但注意 Unicode 问题（如 emoji 可能被截断）；更稳妥用 [...str] 或 Array.from(str)
• " x y z ".split(/\s+/).filter(Boolean) 可按空白符分割并去空项，比单纯 split(" ") 更健壮

提取片段优先用 slice()，慎用 substring() 和 substr()

slice() 行为最一致：支持负索引（从末尾计数），不交换参数顺序，且已被所有现代环境广泛支持。

• "hello".slice(1, 4) → "ell"
• "hello".slice(-3) → "llo"（推荐用于取后几位）
• substring() 会自动交换大小参数："hello".substring(4, 1) 等价于 .substring(1, 4)，容易引发隐式逻辑
• substr() 已被标记为废弃（MDN 明确标注 deprecated），第二个参数是长度而非结束索引，语义混淆，不要用

真正容易被忽略的是 Unicode 安全性：像 "?‍?".length 是 2，slice(0, 1) 会切出半个码点。处理 emoji、中文、带音标的字符时，优先考虑 Array.from(str) 或正则 str.match(/./gu) 来获得真正的“字符”数组。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript字符串常用方法全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。