字符串（String）是 JavaScript 中最基础、使用频率最高的引用数据类型，JS 中字符串是「不可变的」 → 所有字符串方法执行后，都不会修改原字符串本身，只会返回一个新的字符串 / 布尔值 / 数组等结果，这是字符串的核心特性，务必牢记。

本文专门整理字符串的所有方法，分为 ES5 原生基础方法（所有浏览器兼容） + ES6 及以上新增方法（现代开发高频） 两大板块，全部按「功能分类 + 高频优先」排序，附核心用法、参数说明、使用场景，无冗余内容，既是学习笔记，也是开发速查手册，非常实用！

一、JavaScript ES5 字符串 核心方法（基础必备，全兼容） ES5 字符串方法是原生基础，所有浏览器无条件兼容，是前端开发的根基，以下全部为高频必用，按功能划分，条理清晰。

✅ 1. 字符 / 索引 查找类（获取字符 / 查找位置）

1. str.charAt(index) 作用：返回字符串中 指定索引位置 的单个字符 参数：index 数字类型，字符的下标（从 0 开始） 补充：如果索引越界（超出字符串长度），返回空字符串 示例：'hello'.charAt(1) → 'e'
2. str.charCodeAt(index) 作用：返回字符串中指定索引位置字符的 Unicode 编码值 场景：判断字符类型（如判断是否是数字 / 字母） 示例：'A'.charCodeAt(0) → 65 、 'a'.charCodeAt(0) → 97
3. str.indexOf(searchVal, startIndex) 作用：从字符串中查找指定的子串 / 字符，返回首次出现的索引值 参数：searchVal 要查找的内容；startIndex 可选，从哪个索引开始查找（默认从 0 开始） 核心补充：找不到匹配内容时，返回 -1，这是判断字符串是否包含某内容的经典写法 示例：'abcabc'.indexOf('b') → 1 、 'abc'.indexOf('d') → -1
4. str.lastIndexOf(searchVal) 作用：从字符串末尾向前查找指定的子串 / 字符，返回最后一次出现的索引值 补充：找不到同样返回 -1 示例：'abcabc'.lastIndexOf('b') → 4 ✅ 2. 字符串 截取 / 切割类（提取指定片段）
5. str.slice(start, end) ✨【推荐，最常用】 作用：截取字符串中指定区间的内容，返回新字符串 参数：start 起始索引（必传）；end 结束索引（可选） 核心规则：含头不含尾 → 包含 start 索引的字符，不包含 end 索引的字符 超级特性：支持负数索引，负数表示「从字符串末尾开始计数」（-1 = 最后 1 位，-2 = 倒数第 2 位） 示例： js

'javascript'.slice(0,4) → 'java' 'javascript'.slice(4) → 'script' // 只传start，截取到字符串末尾 'javascript'.slice(-6,-2) → 'crip' // 负数索引，倒数第6位到倒数第2位 AI写代码 2. str.substring(start, end) 作用：和 slice 功能一致，截取字符串指定区间内容，返回新字符串 区别（重点）： 不支持 负数索引，传入负数会自动转为 0； 如果 start > end，会自动交换两个参数的位置，不会返回空。 示例：'javascript'.substring(4,0) → 'java' 、 'abc'.substring(-1,2) → 'ab' 3. str.substr(start, length) 作用：按「起始索引 + 截取长度」截取字符串，返回新字符串 参数：start 起始索引（必传，支持负数）；length 可选，要截取的字符个数，不传则截取到末尾 场景：明确知道要截取多少个字符时，用这个方法最方便 示例： js

'hello world'.substr(0,5) → 'hello' 'hello world'.substr(-5) → 'world' // 从倒数第5位，截取到末尾 AI写代码 ✅ 3. 大小写 转换类

1. str.toUpperCase() 作用：将字符串 全部转为大写，返回新字符串 场景：验证码校验、统一格式、忽略大小写匹配 示例：'Hello JS'.toUpperCase() → 'HELLO JS'
2. str.toLowerCase() 作用：将字符串 全部转为小写，返回新字符串 示例：'Hello JS'.toLowerCase() → 'hello js' ✅ 4. 内容 替换 / 分割类
3. str.replace(oldVal, newVal) 作用：将字符串中 第一个匹配到 的 oldVal 替换成 newVal，返回新字符串 核心重点：默认只替换一次，如果需要全局替换，必须搭配「正则表达式 + g 修饰符」 示例： js

'aabbcc'.replace('a', 'x') → 'xab bcc' // 只替换第一个a 'aabbcc'.replace(/a/g, 'x') → 'xxbbcc' // 全局替换所有a AI写代码 2. str.split(separator, limit) ✨【高频】 作用：将字符串 按照指定分隔符切割，转为一个数组返回 参数： separator：分隔符（字符串 / 正则），按什么内容切割；如果传空字符串 ''，会把每个字符拆分为数组的每一项 limit：可选，数字，限制返回数组的长度，超出部分舍弃 核心场景：字符串转数组、按规则拆分内容（如时间、地址、标签） 示例： js

'2026-01-16'.split('-') → ['2026','01','16'] 'a,b,c,d'.split(',',2) → ['a','b'] 'hello'.split('') → ['h','e','l','l','o'] AI写代码 ✅ 5. 首尾 空格 处理类 str.trim() ✨【高频】 作用：去除字符串 首尾的所有空白符（空格、换行符、制表符），中间的空格保留 核心场景：表单输入框内容校验（用户输入的用户名 / 手机号首尾的无效空格） 示例：' hello world '.trim() → 'hello world' ✅ 6. 字符串 拼接类 str.concat(str1, str2, ...strN) 作用：拼接 1 个或多个字符串，返回拼接后的新字符串 补充：等价于字符串的 + 拼接符，功能一致；多字符串拼接时可读性稍好 示例：'hello'.concat(' ', 'world') → 'hello world' ✅ 7. 正则 匹配类 str.match(regexp) 作用：让字符串匹配指定的「正则表达式」，返回匹配结果的数组；无匹配内容则返回 null 核心场景：正则校验（如手机号、邮箱、提取指定内容） 示例：'123abc456'.match(/\d+/g) → ['123','456'] （提取所有数字） 二、JavaScript ES6+ 字符串 新增方法（重中之重，现代开发高频） ES6 (ES2015) 及 ES7~ES13 为字符串新增了一系列实用方法，这些方法 极大提升开发效率、优化代码可读性，是目前企业开发的标配写法。兼容性：现代浏览器（Chrome/Firefox/Edge）全部原生支持，项目中配合 Babel 可兼容所有低版本浏览器。

核心特性：所有新增方法 同样不会修改原字符串，遵循字符串不可变的规则。

✅ 1. 包含判断类（替代 indexOf，语义化拉满）✨✨ 最推荐 ES5 判断字符串是否包含某内容，需要写 str.indexOf(val) !== -1，可读性差；ES6 新增 3 个包含判断方法，全部返回布尔值，语义清晰，开发中优先使用！

1. str.includes(searchVal, start) ✨【最高频】 作用：判断当前字符串 是否包含指定的子串 / 字符，返回 true / false 参数：searchVal 要查找的内容；start 可选，从哪个索引开始检测（默认 0） 示例： js

'hello world'.includes('world') → true 'hello world'.includes('java') → false 'hello world'.includes('llo',2) → true // 从索引2开始查找 AI写代码 2. str.startsWith(searchVal, start) 作用：判断字符串 是否以指定的子串开头，返回 true / false 参数：start 可选，指定开始检测的位置（默认从索引 0 开始） 场景：判断链接协议（http/https）、文件后缀、手机号开头等 示例：'https://baidu.com'.startsWith('https') → true 3. str.endsWith(searchVal, length) 作用：判断字符串 是否以指定的子串结尾，返回 true / false 参数：length 可选，指定检测的字符串长度（相当于只检测前 N 位） 场景：判断文件格式（如 .txt/.jpg/.pdf）、数据后缀等 示例： js

'test.jpg'.endsWith('jpg') → true 'hello world'.endsWith('llo',5) → true // 只检测前5个字符 'hello' AI写代码 ✅ 2. 重复拼接类 str.repeat(n) 作用：将原字符串 重复拼接 n 次，返回拼接后的新字符串 参数：n 数字类型，必须是 ≥0 的整数；如果是小数会自动取整，传 0 返回空字符串 场景：生成重复占位符、重复文本内容 示例： js

'★'.repeat(5) → '★★★★★' 'ab'.repeat(2) → 'abab' 'a'.repeat(0) → '' AI写代码 ✅ 3. 补全填充类（字符串补位，实用）

1. str.padStart(targetLength, padString) 作用：从字符串的开头 填充指定内容，直到字符串的长度达到 targetLength，返回补全后的新字符串 参数： targetLength：必填，补全后字符串的总长度 padString：可选，要填充的内容，默认填充「空格」 场景：数字补零（如时间补 0：01 分、09 秒）、编号补位（001、002）
2. str.padEnd(targetLength, padString) 作用：从字符串的末尾 填充指定内容，直到字符串的长度达到 targetLength，返回补全后的新字符串 参数和规则和 padStart 一致 经典示例（开发常用）： js

// 数字补零：1 → '01' 9 → '09' 10 → '10' '1'.padStart(2, '0') → '01' '9'.padStart(2, '0') → '09' '10'.padStart(2, '0') → '10'

// 末尾补位 'name'.padEnd(6, '-') → 'name--' AI写代码 ✅ 4. 空格清除增强类（ES2019 新增） ES5 的 trim() 只能清除首尾空格，ES2019 新增 2 个精准清除方法，按需使用即可。

1. str.trimStart() / str.trimLeft() 作用：只清除字符串开头的所有空白符，返回新字符串，两个方法等价
2. str.trimEnd() / str.trimRight() 作用：只清除字符串末尾的所有空白符，返回新字符串，两个方法等价 示例： js

' hello '.trimStart() → 'hello ' ' hello '.trimEnd() → ' hello' AI写代码 三、ES6 字符串 重磅语法糖：模板字符串 「``」（反引号）✨✨ 必用 这不是字符串的「方法」，而是 ES6 为字符串新增的 全新书写语法，彻底解决了 ES5 字符串的两大痛点：繁琐的拼接、无法换行书写，是目前开发中绝对的主流写法，优先级最高，必须掌握！

✅ 模板字符串 核心特性 语法：用 反引号（``） 包裹内容，替代原来的单引号 ('')/ 双引号 ("") 支持 直接嵌入变量 / 表达式：语法 ${变量名/表达式}，自动解析内容 支持 原生换行书写：代码里写的换行，就是最终的换行效果，无需拼接 \n 支持 嵌套使用：模板字符串可以嵌套模板字符串，处理复杂拼接场景 ✅ 对比示例（一目了然，差距巨大） ❌ ES5 字符串拼接（繁琐、易出错） js

let name = '前端'; let age = 5; let str = '这是' + name + '技术，已经发展了' + (age + 10) + '年\n是前端的核心基础'; AI写代码 ✅ ES6 模板字符串（简洁、优雅、不易出错） js

let name = '前端'; let age = 5; let str = 这是${name}技术，已经发展了${age + 10}年 是前端的核心基础; AI写代码 ✅ 嵌套使用示例（复杂场景） js

let a = 10; let b = 20; let str = 结果：${ a > b ?${a}大于${b}:${a}小于${b}}; console.log(str); // 结果：10小于20 AI写代码 四、字符串 核心补充（必记知识点，避坑必备） ✅ 1. 字符串的不可变性（重中之重，面试常问） 再次强调：JavaScript 中字符串的值是不可变的。所有字符串方法的执行，本质都是「创建一个新的字符串」，原字符串的内容永远不会被修改。示例：

js

let str = 'hello'; let newStr = str.toUpperCase(); console.log(str); // 'hello' 原字符串不变 console.log(newStr); // 'HELLO' 新字符串 AI写代码 ✅ 2. 字符串可被「类数组」访问 字符串可以通过 索引下标 直接获取对应字符，等价于 charAt(index)，语法更简洁，开发中常用。

js

let str = 'javascript'; console.log(str[0]); // 'j' console.log(str[4]); // 's' AI写代码 注意：通过下标只能「获取」字符，不能修改字符，因为字符串不可变。

✅ 3. 字符串转数组 两种常用方式 js

let str = 'hello'; // 方式1：split('') 推荐，兼容性最好 str.split('') → ['h','e','l','l','o'] // 方式2：Array.from() ES6新增，更语义化 Array.from(str) → ['h','e','l','l','o'] AI写代码 总结 ✅ 字符串方法 核心梳理（精华版，快速记忆） 字符串是 不可变类型，所有方法不修改原字符串，只返回新结果； ES5 是基础，重点掌握：indexOf、slice、split、trim、replace、toUpperCase/toLowerCase； ES6+ 是升级，优先使用：includes（替代 indexOf）、startsWith/endsWith、模板字符串，极大提升开发效率； 截取字符串优先用 slice（支持负数索引），切割转数组用 split，判断包含用 includes。 ✅ 高频方法 开发优先级 日常开发中，80% 的场景只会用到这些高频方法，记牢即可应对绝大多数业务需求：includes > slice > split > trim > replace > indexOf > padStart > 模板字符串

本文整理了字符串的所有方法，没有冗余内容，建议收藏备查，开发中随用随查，熟能生巧，字符串的操作就再也不是难点啦！ ✨

👉 觉得有用的点点关注谢谢~ ———————————————— 版权声明：本文为CSDN博主「萌新梦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/2503_92319969/article/details/157022386 https://infogram.com/9862pdf-1h0n25opqj80z4p https://infogram.com/9862pdf-1h7v4pd0lqn584k https://infogram.com/9862pdf-1hnp27eqdj3yn4g https://infogram.com/9862pdf-1h984wv15g3md2p https://infogram.com/9862pdf-1h1749wqzjvlq2z https://infogram.com/9862pdf-1h0n25opqjyyl4p https://infogram.com/9862pdf-1h7v4pd0lqw9j4k https://infogram.com/9862pdf-1hxj48mqgjpr52v https://infogram.com/9862pdf-1h0r6rzwyqpkw4e https://infogram.com/9862pdf-1h1749wqzjv0l2z