字符串方法在javascript中如何使用_有哪些实用技巧【教程】

9次阅读

javaScript字符串不可变,所有方法返回新字符串;replace()需/g标志全局替换;includes()/startsWith()/endsWith()语义更清晰;模板字符串支持表达式但保留空白符。

字符串方法在javascript中如何使用_有哪些实用技巧【教程】

字符串方法在 javascript 中不能直接链式调用修改原字符串

JavaScript 字符串是原始类型、不可变的,所有方法(如 toUpperCase()replace()slice())都返回新字符串,不会修改原变量。常见错误是误以为 str.trim() 会改变 str 本身:

  • ❌ 错误写法:let str = " hello "; str.trim(); console.log(str); // 输出 " hello "
  • ✅ 正确写法:let str = " hello "; str = str.trim(); console.log(str); // 输出 "hello"

这个特性影响所有字符串操作——赋值或传参时必须显式接收返回值。

replace() 只替换第一个匹配项,要全局替换得用正则

replace() 默认只处理第一个匹配,即使传入字符串字面量。想替换全部,必须用带 g 标志的正则表达式

  • "aabbcc".replace("b", "x"); // "aaxbcc"
  • "aabbcc".replace(/b/g, "x"); // "aaxxcc"
  • ⚠️ 注意:如果搜索内容来自用户输入,需先转义正则特殊字符,否则可能报错 Invalid regular expression

动态构建正则时可用 new regexp(pattern, "g"),但务必对 pattern 做转义处理(例如用 pattern.replace(/[.*+?^${}()|[]\]/g, "\$&"))。

立即学习Java免费学习笔记(深入)”;

includes()、startsWith()、endsWith() 比 indexOf() 更语义清晰且支持可选参数

过去常用 indexOf() !== -1 判断存在性,现在推荐语义更强、更安全的三个方法:

  • str.includes("foo") —— 是否包含子串(支持第二个参数:起始搜索位置)
  • str.startsWith("Hello") —— 是否以某串开头(支持第二个参数:起始索引)
  • str.endsWith("!") —— 是否以某串结尾(支持第二个参数:检查长度上限)

它们不返回位置索引,避免了 0-1 的真假混淆;且对空字符串行为明确(如 "abc".startsWith("") === true),而 indexOf("") 总是返回 0,容易引发逻辑 bug

模板字符串中嵌入表达式比拼接更安全,但要注意换行和空格

`Hello ${name || 'Guest'}`"Hello " + (name || "Guest") 更简洁、无类型隐式转换风险。但要注意:

  • 模板字符串保留换行和缩进空格,`anb` 真实包含换行符,不像多行字符串拼接那样需要手动加 n
  • 若需去除首尾换行/缩进,可用 String.raw 或函数标签(如 stripIndent 类库),但原生不提供自动 trim 功能
  • 嵌套反引号需转义:`She said: `Hello``

真正容易被忽略的是模板字符串的“标签函数”能力——它把插值前的静态部分和动态值分开传给函数,可用于 sql 转义、国际化等场景,但多数人只当它是个高级拼接工具

text=ZqhQzanResources