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
  • 使用场景

    • 搜索功能
    • 关键词判断
    • 表单内容校验
    • 字符串过滤
相关推荐
Spliceㅤ2 小时前
项目:基于qwen的点餐系统
开发语言·人工智能·python·机器学习·自然语言处理
huabiangaozhi2 小时前
spring-boot-starter和spring-boot-starter-web的关联
前端
ZHOUPUYU2 小时前
PHP与WebSocket实时通信的原理到生产级应用
开发语言·html·php
宝耶2 小时前
Java面试2:final、finally、finalize 的区别?
java·开发语言·面试
umeelove352 小时前
Spring boot整合quartz方法
java·前端·spring boot
码云数智-大飞2 小时前
生死时速:高并发秒杀系统的架构设计与防超卖实战
开发语言
DREW_Smile2 小时前
数据在内存中的存储
c语言·开发语言
吴声子夜歌2 小时前
JavaScript——对象
开发语言·javascript·ecmascript
小码哥_常2 小时前
Android 开发探秘:View.post()为何能获取View宽高
前端
爱学习的程序媛2 小时前
【Web前端】WebAssembly详解
前端·web·wasm