JS 字符串方法

学习 slice/substring/replace/split/trim 等 · 难度：入门 · +10XP

JavaScript 字符串方法大全

字符串是编程中最常用的数据类型之一。无论是处理用户输入、拼接 HTML、解析 URL 还是格式化显示，都离不开字符串操作。JavaScript 提供了非常丰富的方法来处理字符串：查找、截取、替换、分割、大小写转换等。系统掌握这些方法是高效进行文本处理的基础。

创建字符串的三种方式

JavaScript 中字符串可以使用单引号、双引号或反引号（ES6 模板字符串）创建。反引号支持变量插值（用 ${} 语法）和多行文本，功能最为强大。字符串一旦创建就不可变——任何字符串方法都返回新字符串，不会修改原字符串。

// 三种引号
let s1 = 'Hello World';
let s2 = "Hello World";
let s3 = Hello World;  // ES6 模板字符串
// 模板字符串的变量插值
let name = '小明';
let age = 18;
let msg = 我叫${name}，今年${age}岁，明年${age + 1}岁;
console.log(msg); // 我叫小明，今年18岁，明年19岁
// 模板字符串支持多行
let poem = 静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。;
console.log(poem);

基本属性与字符访问

属性/方法	说明	示例	结果
length	字符串长度（字符个数）	"hello".length	5
[index]	通过索引访问字符（从0开始）	"hello"[1]	"e"
charAt(n)	返回索引n处的字符	"hello".charAt(0)	"h"
charCodeAt(n)	返回索引n处字符的Unicode编码	"A".charCodeAt(0)	65

查找与判断方法

查找子串的位置和判断字符串是否包含特定内容是日常工作的高频操作。推荐优先使用 includes/startsWith/endsWith 做布尔判断，用 indexOf 获取精确位置。

let str = 'JavaScript是一门强大的编程语言';
// indexOf —— 查找子串首次出现的位置（未找到返回 -1）
console.log(str.indexOf('编程'));    // 12
console.log(str.indexOf('Python'));  // -1（未找到）
console.log(str.indexOf('a', 2));    // 3（从索引2开始查找）
// lastIndexOf —— 从后往前查找
console.log(str.lastIndexOf('a'));   // 3
// includes —— 判断是否包含（返回布尔值，ES6）
console.log(str.includes('强大'));   // true
console.log(str.includes('弱小'));   // false
// startsWith / endsWith（ES6）
console.log(str.startsWith('Java'));    // true
console.log(str.endsWith('语言'));      // true
// search —— 支持正则表达式
console.log(str.search(/\d+/));     // -1（查找数字）

截取子串 —— 三大方法对比

方法	参数	说明	负数支持
slice(start, end)	起始索引，结束索引（不含）	最推荐使用	支持（从末尾数）
substring(start, end)	起始索引，结束索引（不含）	与 slice 类似	不支持（视为0）
substr(start, length)	起始索引，截取长度	已不推荐使用	start 支持负数

let s = 'HelloWorld';
console.log(s.slice(0, 5));      // "Hello"
console.log(s.slice(5));         // "World"（省略第二个参数 = 到末尾）
console.log(s.slice(-5));        // "World"（负数 = 从末尾倒数）
console.log(s.slice(-5, -1));    // "Worl"（最后一个参数不包含）
// substring vs slice
console.log(s.substring(5, 0));  // "Hello"（自动交换参数，相当于(0,5)）
console.log(s.slice(5, 0));      // ""（不交换，返回空字符串）

大小写与去除空格

let text = '  Hello World  ';
// trim —— 去除首尾空格（最常用）
console.log(text.trim());        // "Hello World"
console.log(text.trimStart());   // "Hello World  "（仅去首部）
console.log(text.trimEnd());     // "  Hello World"（仅去尾部）
// 大小写转换
console.log(text.toUpperCase()); // "  HELLO WORLD  "
console.log(text.toLowerCase()); // "  hello world  "
// 实用例子：用户输入标准化
function normalizeInput(input) {
  return input.trim().toLowerCase();
}
console.log(normalizeInput('  Admin@Email.COM   ')); // "admin@email.com"

替换、分割与连接

let msg = '苹果很好吃，苹果很有营养，我喜欢吃苹果';
// replace —— 替换第一个匹配
console.log(msg.replace('苹果', '香蕉'));
// "香蕉很好吃，苹果很有营养，我喜欢吃苹果"
// replaceAll —— 替换所有匹配（ES2021）
console.log(msg.replaceAll('苹果', '香蕉'));
// "香蕉很好吃，香蕉很有营养，我喜欢吃香蕉"
// 也可以用正则：msg.replace(/苹果/g, '香蕉')
// split —— 分割为数组（最常用）
let csv = '张三,李四,王五,赵六';
let arr = csv.split(',');
console.log(arr); // ['张三', '李四', '王五', '赵六']
// join —— 将数组元素连接为字符串
console.log(arr.join(' | '));    // 张三 | 李四 | 王五 | 赵六
// 分割为单个字符
console.log('JS'.split(''));     // ['J', 'S']

1. 邮箱验证：编写函数 isValidEmail(email)，检查字符串是否包含 @ 和 .，且 @ 必须在 . 之前出现，最后 . 之后至少要有2个字符。分别用 includes 和 indexOf 两种方式实现。
2. 姓名格式化：编写函数 formatName(name)，去除首尾空格，将每个单词的首字母转为大写、其余小写。如 " john DOE " 处理为 "John Doe"。
3. 关键词高亮：编写函数 highlight(text, keyword)，将 text 中所有出现的 keyword 用 <mark>keyword</mark> 包裹，使用 replaceAll 实现。
4. URL 参数解析：给定 url = "https://example.com?page=1&size=10&sort=name"，先用 split 取出参数部分，再将参数部分按 & 分割，最后将每个键值对按 = 分割，解析为对象 {page:"1", size:"10", sort:"name"}。
5. 字符串反转：编写函数 reverseStr(str)，使用 split、reverse、join 三个数组方法组合实现字符串反转。然后升级为 reverseWords(sentence)，将句子中的每个单词单独反转但保持单词顺序不变。