字符串常用方法（处理文字）

12.1 字符串长度：length

length 属性用于获取字符串的长度，即字符串中字符的个数。

const str = "Hello, JavaScript!";
console.log(str.length); // 输出：18

// 空字符串的长度为 0
const emptyStr = "";
console.log(emptyStr.length); // 输出：0

// 包含空格和特殊字符的字符串
const specialStr = "你好，World! 🌍";
console.log(specialStr.length); // 输出：11（注意： emoji 表情算作一个字符）

12.2 查找 / 截取 / 替换字符串

查找字符串

indexOf() 方法

indexOf() 方法用于查找子字符串在原字符串中首次出现的位置，如果找不到则返回 -1。

const str = "Hello, JavaScript!";

console.log(str.indexOf("Hello")); // 输出：0
console.log(str.indexOf("JavaScript")); // 输出：7
console.log(str.indexOf("x")); // 输出：-1

// 从指定位置开始查找
console.log(str.indexOf("a", 8)); // 输出：8（从索引 8 开始查找 "a"）

lastIndexOf() 方法

lastIndexOf() 方法用于查找子字符串在原字符串中最后一次出现的位置，如果找不到则返回 -1。

const str = "Hello, Hello, JavaScript!";

console.log(str.lastIndexOf("Hello")); // 输出：7
console.log(str.lastIndexOf("x")); // 输出：-1

includes() 方法

includes() 方法用于检查字符串是否包含指定的子字符串，返回布尔值。

const str = "Hello, JavaScript!";

console.log(str.includes("Hello")); // 输出：true
console.log(str.includes("JavaScript")); // 输出：true
console.log(str.includes("Python")); // 输出：false

// 从指定位置开始检查
console.log(str.includes("JavaScript", 8)); // 输出：true

截取字符串

slice() 方法

slice() 方法用于截取字符串的一部分，返回一个新的字符串，不会修改原字符串。

const str = "Hello, JavaScript!";

// 从索引 7 开始截取到末尾
console.log(str.slice(7)); // 输出：JavaScript!

// 从索引 7 开始截取到索引 18（不包含 18）
console.log(str.slice(7, 18)); // 输出：JavaScript!

// 使用负数索引（从字符串末尾开始计算）
console.log(str.slice(-11)); // 输出：JavaScript!
console.log(str.slice(7, -1)); // 输出：JavaScript

substring() 方法

substring() 方法与 slice() 方法类似，但不支持负数索引。

const str = "Hello, JavaScript!";

console.log(str.substring(7)); // 输出：JavaScript!
console.log(str.substring(7, 18)); // 输出：JavaScript!

substr() 方法

substr() 方法用于从指定位置开始截取指定长度的字符串（注意：此方法已被废弃，建议使用 slice()）。

const str = "Hello, JavaScript!";

// 从索引 7 开始截取 11 个字符
console.log(str.substr(7, 11)); // 输出：JavaScript!

替换字符串

replace() 方法

replace() 方法用于替换字符串中的子字符串，返回一个新的字符串，不会修改原字符串。

const str = "Hello, JavaScript! JavaScript is fun!";

// 替换第一个匹配的子字符串
console.log(str.replace("JavaScript", "Python")); // 输出：Hello, Python! JavaScript is fun!

// 使用正则表达式替换所有匹配的子字符串
console.log(str.replace(/JavaScript/g, "Python")); // 输出：Hello, Python! Python is fun!

// 使用函数进行替换
const str2 = "Hello, World!";
console.log(str2.replace("World", (match) => match.toUpperCase())); // 输出：Hello, WORLD!

12.3 大小写转换

toUpperCase() 方法

toUpperCase() 方法用于将字符串转换为大写。

const str = "Hello, JavaScript!";
console.log(str.toUpperCase()); // 输出：HELLO, JAVASCRIPT!

toLowerCase() 方法

toLowerCase() 方法用于将字符串转换为小写。

const str = "Hello, JavaScript!";
console.log(str.toLowerCase()); // 输出：hello, javascript!

12.4 分割字符串：split()

split() 方法用于将字符串分割成数组，返回一个新的数组，不会修改原字符串。

const str = "apple,banana,orange";

// 使用逗号分割
console.log(str.split(",")); // 输出：["apple", "banana", "orange"]

// 使用空格分割
const str2 = "Hello World JavaScript";
console.log(str2.split(" ")); // 输出：["Hello", "World", "JavaScript"]

// 不指定分隔符，将整个字符串作为数组的一个元素
console.log(str.split()); // 输出：["apple,banana,orange"]

// 指定空字符串作为分隔符，将字符串分割成单个字符
console.log(str.split("")); // 输出：["a", "p", "p", "l", "e", ",", "b", "a", "n", "a", "n", "a", ",", "o", "r", "a", "n", "g", "e"]

// 限制分割的数量
console.log(str.split(",", 2)); // 输出：["apple", "banana"]

12.5 实战：用户名验证 / 文字截取

实战 1：用户名验证

function validateUsername(username) {
  // 检查用户名长度（3-12个字符）
  if (username.length < 3 || username.length > 12) {
    return "用户名长度必须在 3-12 个字符之间";
  }
  
  // 检查用户名是否只包含字母、数字和下划线
  const regex = /^[a-zA-Z0-9_]+$/;
  if (!regex.test(username)) {
    return "用户名只能包含字母、数字和下划线";
  }
  
  // 检查用户名是否以字母开头
  const firstChar = username[0];
  if (!/[a-zA-Z]/.test(firstChar)) {
    return "用户名必须以字母开头";
  }
  
  return "用户名验证通过";
}

// 测试用户名验证
console.log(validateUsername("user123")); // 输出：用户名验证通过
console.log(validateUsername("u")); // 输出：用户名长度必须在 3-12 个字符之间
console.log(validateUsername("123user")); // 输出：用户名必须以字母开头
console.log(validateUsername("user@123")); // 输出：用户名只能包含字母、数字和下划线

实战 2：文字截取

function truncateText(text, maxLength) {
  if (text.length <= maxLength) {
    return text;
  }
  return text.slice(0, maxLength) + "...";
}

// 测试文字截取
const longText = "这是一段很长的文字，需要被截取以便在有限的空间内显示。";
console.log(truncateText(longText, 10)); // 输出：这是一段很长的文字...
console.log(truncateText(longText, 20)); // 输出：这是一段很长的文字，需要被截取...
console.log(truncateText("短文字", 10)); // 输出：短文字

实战 3：字符串操作综合示例

function formatPhoneNumber(phone) {
  // 移除所有非数字字符
  const cleanPhone = phone.replace(/\D/g, "");
  
  // 检查手机号长度
  if (cleanPhone.length !== 11) {
    return "请输入有效的11位手机号";
  }
  
  // 格式化手机号：XXX-XXXX-XXXX
  return cleanPhone.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
}

// 测试手机号格式化
console.log(formatPhoneNumber("13812345678")); // 输出：138-1234-5678
console.log(formatPhoneNumber("138 1234 5678")); // 输出：138-1234-5678
console.log(formatPhoneNumber("1381234567")); // 输出：请输入有效的11位手机号

小结

• length 属性：获取字符串长度
• 查找方法：indexOf(), lastIndexOf(), includes()
• 截取方法：slice(), substring(), substr()
• 替换方法：replace()
• 大小写转换：toUpperCase(), toLowerCase()
• 分割方法：split()
• 这些方法都返回新的字符串，不会修改原字符串
• 字符串方法在处理用户输入、数据验证、文本格式化等场景中非常实用