Js常用的字符串处理

我叫黑大帅

2026-03-23 0 阅读4分钟

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

`charAt(index)`

作用：返回字符串中指定位置的字符。
语法：str.charAt(index)
说明：
- index 是 0 到 str.length - 1 的整数。
- 如果 index 超出范围，返回空字符串 ""（和 str[index] 不同，后者会返回 undefined）。

示例：

const str = "Hello";
console.log(str.charAt(1)); // "e"
console.log(str.charAt(10)); // ""

使用场景：需要获取字符串中某一位字符时，比如验证输入的首字母是否为大写。

`concat(str1, str2, ...)`

作用：连接两个或多个字符串，返回新字符串（原字符串不变）。
语法：str.concat(str1, str2, ...)

示例：

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 处理）。

示例：

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 规范推荐优先使用 substring 或 slice。

示例：

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。
- 区分大小写。

示例：

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()

示例：

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 是空字符串 ""，则把每个字符都拆分成数组元素。

示例：

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 = 倒数第二个字符
示例：

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(要找的内容)
示例：

const str = "I love JavaScript";

str.includes("JavaScript");  // true
str.includes("Java");        // true
str.includes("Python");      // false

使用场景：
- 搜索功能
- 关键词判断
- 表单内容校验
- 字符串过滤