JavaScript ES5 + ES6+ 字符串 (String) 所有方法大全

字符串（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. 字符串 截取 / 切割类（提取指定片段）

1. 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位

2. str.substring(start, end)

• 作用：和 slice 功能一致，截取字符串指定区间内容，返回新字符串
• 区别（重点）：
  1. 不支持 负数索引，传入负数会自动转为 0；
  2. 如果 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位，截取到末尾

✅ 3. 大小写 转换类

1. str.toUpperCase()

• 作用：将字符串 全部转为大写，返回新字符串
• 场景：验证码校验、统一格式、忽略大小写匹配
• 示例：'Hello JS'.toUpperCase() → 'HELLO JS'

2. str.toLowerCase()

• 作用：将字符串 全部转为小写，返回新字符串
• 示例：'Hello JS'.toLowerCase() → 'hello js'

✅ 4. 内容 替换 / 分割类

1. str.replace(oldVal, newVal)

• 作用：将字符串中 第一个匹配到 的 oldVal 替换成 newVal，返回新字符串

• 核心重点：默认只替换一次，如果需要全局替换，必须搭配「正则表达式 + g 修饰符」

• 示例： js

  'aabbcc'.replace('a', 'x') → 'xab bcc' // 只替换第一个a
  'aabbcc'.replace(/a/g, 'x') → 'xxbbcc' // 全局替换所有a

2. str.split(separator, limit) ✨【高频】

• 作用：将字符串 按照指定分隔符切割 ，转为一个数组返回

• 参数：

  1. separator：分隔符（字符串 / 正则），按什么内容切割；如果传空字符串 ''，会把每个字符拆分为数组的每一项
  2. limit：可选，数字，限制返回数组的长度，超出部分舍弃

• 核心场景：字符串转数组、按规则拆分内容（如时间、地址、标签）

• 示例： js

  '2026-01-16'.split('-') → ['2026','01','16']
  'a,b,c,d'.split(',',2) → ['a','b']
  'hello'.split('') → ['h','e','l','l','o']

✅ 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开始查找

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'

✅ 2. 重复拼接类

str.repeat(n)

• 作用：将原字符串 重复拼接 n 次，返回拼接后的新字符串

• 参数：n 数字类型，必须是 ≥0 的整数；如果是小数会自动取整，传 0 返回空字符串

• 场景：生成重复占位符、重复文本内容

• 示例： js

  '★'.repeat(5) → '★★★★★'
  'ab'.repeat(2) → 'abab'
  'a'.repeat(0) → ''

✅ 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--'

✅ 4. 空格清除增强类（ES2019 新增）

ES5 的 trim() 只能清除首尾空格，ES2019 新增 2 个精准清除方法，按需使用即可。

1. str.trimStart() / str.trimLeft()

• 作用：只清除字符串开头的所有空白符，返回新字符串，两个方法等价

2. str.trimEnd() / str.trimRight()

• 作用：只清除字符串末尾的所有空白符，返回新字符串，两个方法等价

示例：

js

'  hello  '.trimStart() → 'hello  '
'  hello  '.trimEnd() → '  hello'

---

三、ES6 字符串 重磅语法糖：模板字符串 「``」（反引号）✨✨ 必用

这不是字符串的「方法」，而是 ES6 为字符串新增的 全新书写语法 ，彻底解决了 ES5 字符串的两大痛点：繁琐的拼接 、无法换行书写 ，是目前开发中绝对的主流写法，优先级最高，必须掌握！

✅ 模板字符串 核心特性

1. 语法：用 反引号（``） 包裹内容，替代原来的单引号 ('')/ 双引号 ("")
2. 支持 直接嵌入变量 / 表达式 ：语法 ${变量名/表达式}，自动解析内容
3. 支持 原生换行书写：代码里写的换行，就是最终的换行效果，无需拼接 \n
4. 支持 嵌套使用：模板字符串可以嵌套模板字符串，处理复杂拼接场景

✅ 对比示例（一目了然，差距巨大）

❌ ES5 字符串拼接（繁琐、易出错）

js

let name = '前端';
let age = 5;
let str = '这是' + name + '技术，已经发展了' + (age + 10) + '年\n是前端的核心基础';

✅ ES6 模板字符串（简洁、优雅、不易出错）

js

let name = '前端';
let age = 5;
let str = `这是${name}技术，已经发展了${age + 10}年
是前端的核心基础`;

✅ 嵌套使用示例（复杂场景）

js

let a = 10;
let b = 20;
let str = `结果：${ a > b ? `${a}大于${b}` : `${a}小于${b}` }`;
console.log(str); // 结果：10小于20

---

四、字符串 核心补充（必记知识点，避坑必备）

✅ 1. 字符串的不可变性（重中之重，面试常问）

再次强调：JavaScript 中字符串的值是不可变的。所有字符串方法的执行，本质都是「创建一个新的字符串」，原字符串的内容永远不会被修改。示例：

js

let str = 'hello';
let newStr = str.toUpperCase();
console.log(str); // 'hello' 原字符串不变
console.log(newStr); // 'HELLO' 新字符串

✅ 2. 字符串可被「类数组」访问

字符串可以通过 索引下标 直接获取对应字符，等价于 charAt(index)，语法更简洁，开发中常用。

js

let str = 'javascript';
console.log(str[0]); // 'j'
console.log(str[4]); // 's'

注意：通过下标只能「获取」字符，不能修改字符，因为字符串不可变。

✅ 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']

---

总结

✅ 字符串方法 核心梳理（精华版，快速记忆）

1. 字符串是 不可变类型，所有方法不修改原字符串，只返回新结果；
2. ES5 是基础，重点掌握：indexOf、slice、split、trim、replace、toUpperCase/toLowerCase；
3. ES6+ 是升级，优先使用：includes（替代 indexOf）、startsWith/endsWith、模板字符串，极大提升开发效率；
4. 截取字符串优先用 slice（支持负数索引），切割转数组用 split，判断包含用 includes。

✅ 高频方法 开发优先级

日常开发中，80% 的场景只会用到这些高频方法，记牢即可应对绝大多数业务需求：includes > slice > split > trim > replace > indexOf > padStart > 模板字符串

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

👉 **觉得有用的点点关注谢谢~**