Js常用的字符串处理

所有字符串方法都不会修改原字符串,只会返回新字符串,这是 JS 字符串的核心特性。

charAt(index)
  • 作用:返回字符串中指定位置的字符。

  • 语法str.charAt(index)

  • 说明

    • index 是 0 到 str.length - 1 的整数。
    • 如果 index 超出范围,返回空字符串 ""(和 str[index] 不同,后者会返回 undefined)。
  • 示例

    js 复制代码
    const str = "Hello";
    console.log(str.charAt(1)); // "e"
    console.log(str.charAt(10)); // ""
  • 使用场景:需要获取字符串中某一位字符时,比如验证输入的首字母是否为大写。

concat(str1, str2, ...)
  • 作用 :连接两个或多个字符串,返回新字符串(原字符串不变)。

  • 语法str.concat(str1, str2, ...)

  • 示例

    js 复制代码
    const str1 = "Hello";
    const str2 = " World";
    const str3 = "!";
    const res = str1.concat(str2, str3);
    console.log(res); // "Hello World!"
  • 使用场景 :拼接多个字符串片段,不过实际开发中更推荐用 模板字符串 ${a}${b}+ 运算符,可读性更好。

substring(startIndex, endIndex)
  • 作用 :提取字符串中两个指定下标之间的字符,返回新字符串 (不包含 endIndex 位置的字符)。

  • 语法str.substring(startIndex, endIndex)

  • 说明

    • 如果省略 endIndex,则提取到字符串末尾。
    • 如果 startIndex > endIndex,会自动交换两者位置。
    • 不接受负数参数(负数会被当作 0 处理)。
  • 示例

    js 复制代码
    const str = "Hello World";
    console.log(str.substring(0, 5)); // "Hello"
    console.log(str.substring(6));    // "World"
    console.log(str.substring(5, 0)); // 等价于 substring(0,5) → "Hello"
  • 使用场景 :需要按索引范围截取字符串,比如截取用户名前 10 个字符。


substr(startIndex, length)
  • 作用 :从指定位置开始提取指定长度的字符,返回新字符串

  • 语法str.substr(startIndex, length)

  • 说明

    • startIndex 可以是负数,表示从字符串末尾开始计数(如 -1 是最后一个字符)。
    • 如果省略 length,则提取到字符串末尾。
    • ⚠️ 注意 :该方法是遗留方法 ,ES 规范推荐优先使用 substringslice
  • 示例

    js 复制代码
    const str = "Hello World";
    console.log(str.substr(6, 5)); // "World"
    console.log(str.substr(-6, 5)); // "World"(从倒数第6位开始取5个)
  • 使用场景:需要从某个位置开始取固定长度字符,比如截取手机号后 4 位。


indexOf(searchValue, fromIndex)
  • 作用 :返回某个子字符串在字符串中第一次出现的位置 ,如果没找到则返回 -1

  • 语法str.indexOf(searchValue, fromIndex)

  • 说明

    • fromIndex 是可选参数,指定开始查找的位置,默认是 0。
    • 区分大小写。
  • 示例

    js 复制代码
    const str = "Hello World";
    console.log(str.indexOf("o")); // 4
    console.log(str.indexOf("o", 5)); // 7(从第5位开始找"o")
    console.log(str.indexOf("x")); // -1
  • 使用场景

    • 检查字符串是否包含某个子串(if(str.indexOf("keyword") !== -1))。
    • 定位关键词位置,比如文本高亮、替换。

trim()
  • 作用 :去除字符串两端的空白字符(空格、制表符 \t、换行符 \n 等),返回新字符串(原字符串不变)。

  • 语法str.trim()

  • 示例

    js 复制代码
    const str = "  Hello World  \n";
    console.log(str.trim()); // "Hello World"
  • 使用场景:处理用户输入,比如表单提交前清除用户名、密码前后的多余空格。

  • 扩展 :ES6 还提供了 trimStart()(只去开头)和 trimEnd()(只去结尾)。


split(separator, limit)
  • 作用 :把字符串分割成数组 ,根据指定的分隔符 separator 来分割。

  • 语法str.split(separator, limit)

  • 说明

    • separator 可以是字符串或正则表达式。
    • limit 是可选参数,限制返回数组的长度。
    • 如果 separator 是空字符串 "",则把每个字符都拆分成数组元素。
  • 示例

    js 复制代码
    const str = "a,b,c,d";
    console.log(str.split(",")); // ["a", "b", "c", "d"]
    console.log(str.split(",", 2)); // ["a", "b"]
    console.log("Hello".split("")); // ["H", "e", "l", "l", "o"]
  • 使用场景

    • 解析 CSV 格式数据、URL 参数。
    • 把长文本按句子、单词或字符拆分处理。
slice (start, end)
  • 作用 :从字符串中截取一段内容 ,返回新字符串不修改原字符串

  • 语法 :str.slice(startIndex, endIndex)

  • 说明

    • startIndex:开始截取的位置(必填)

    • endIndex:结束截取的位置(可选,省略 endIndex → 截取到字符串末尾)

    • 支持负数 :负数表示从末尾倒数

      • -1 = 最后一个字符
      • -2 = 倒数第二个字符
  • 示例

js 复制代码
const str = "Hello World";

// 1. 正常截取
str.slice(0,5);    // "Hello" (0到5,不包含5)

// 2. 只写开始位置
str.slice(6);      // "World"

// 3. 负数(最强大!)
str.slice(-5);     // "World" (取最后5个字符)
str.slice(0, -1);  // "Hello Worl" (去掉最后1个字符)
  • 使用场景
    • 截取手机号后 4 位
    • 截取文件后缀
    • 截取字符串末尾内容(负数超方便)
    • 比 substring /substr 更好用,优先用 slice!

includes (searchValue)
  • 作用 : 判断字符串里是否包含某个子字符串,返回 true / false

  • 语法 : str.includes(要找的内容)

  • 示例

js 复制代码
const str = "I love JavaScript";

str.includes("JavaScript");  // true
str.includes("Java");        // true
str.includes("Python");      // false
  • 使用场景

    • 搜索功能
    • 关键词判断
    • 表单内容校验
    • 字符串过滤
相关推荐
程序员-Benothing24 分钟前
如何实现高并发系统订单30分钟自动关闭?
开发语言·c#·wpf
郝学胜-神的一滴1 小时前
Python 高级编程 026:内置数据结构之骈文纵论
开发语言·数据结构·python·程序人生·软件工程
Mh8 小时前
别再只会 `find` 了:Map 在前端业务里的真实用法
前端·javascript
陈随易8 小时前
FFmpeg 9.0 发布,代号 Lei,音视频处理再升级
前端·后端·程序员
爱丶狸9 小时前
Grafana_Zabbix_ImageRenderer_部署与前端操作手册
linux·前端·zabbix·grafana·kylin
隐积9 小时前
3.1.7.Qt容器大家族(3):QVariant——万能盒子
开发语言·qt
用户0595401744611 小时前
把AI对话记忆存储测试从手工改成Playwright+pytest,覆盖率从20%提到96%,回归时间缩短90%
前端·css
kyriewen11 小时前
别再这样写TypeScript了——Code Review中最常见的8个反模式
前端·javascript·typescript
名字还没想好☜12 小时前
Next.js ‘use client‘ 到底加在哪:Server/Client Components 边界与常见报错
开发语言·前端·javascript·react·next.js
午安~婉12 小时前
GitHub Token/ GitHub Stats统计显示图异常
前端·github·vercel·github token