JavaScript 字符串处理方法总结

发布于:2025-08-01 ⋅ 阅读:(20) ⋅ 点赞:(0)

原因:使用了slice和split,想总结一下

1. 字符串截取方法

slice()

提取字符串的一部分并返回新字符串,不改变原字符串。

const str = "Hello, World!";
​
// 从索引2开始到结束
console.log(str.slice(2)); // "llo, World!"
​
// 从索引2到索引7(不包括7)
console.log(str.slice(2, 7)); // "llo, "
​
// 负数表示从末尾开始计算
console.log(str.slice(-6)); // "World!"
console.log(str.slice(-6, -1)); // "World"

substring()

slice() 类似,但不接受负数参数。

javascript

const str = "Hello, World!";
​
console.log(str.substring(2)); // "llo, World!"
console.log(str.substring(2, 7)); // "llo, "

substr()

已废弃,不推荐使用,但需要了解。

2. 字符串分割方法

split()


const str = "apple,banana,orange";
​
// 按逗号分割
const fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "orange"]
​
// 限制分割数量
const limitedSplit = str.split(",", 2);
console.log(limitedSplit); // ["apple", "banana"]
​
// 按每个字符分割
const chars = str.split("");
console.log(chars); // ["a", "p", "p", "l", "e", ",", "b", ...]
​
// 使用正则表达式分割
const sentence = "Hello World! How are you?";
const words = sentence.split(/\s+/);
console.log(words); // ["Hello", "World!", "How", "are", "you?"]

将字符串分割成数组。

3. 其他常用字符串方法

includes()

检查字符串是否包含指定的子字符串。

javascript

const str = "Hello, World!";
console.log(str.includes("World")); // true
console.log(str.includes("world")); // false (区分大小写)

indexOf() / lastIndexOf()

查找子字符串的位置。

const str = "Hello, World! World!";
​
console.log(str.indexOf("World")); // 7
console.log(str.indexOf("world")); // -1 (未找到)
console.log(str.lastIndexOf("World")); // 14 (从末尾查找)

replace()

替换字符串中的内容。

const str = "Hello, World!";
​
// 简单替换
console.log(str.replace("World", "JavaScript")); // "Hello, JavaScript!"
​
// 使用正则表达式全局替换
const multiStr = "apple apple orange";
console.log(multiStr.replace(/apple/g, "banana")); // "banana banana orange"

toUpperCase() / toLowerCase()

转换大小写。

const str = "Hello, World!";
console.log(str.toUpperCase()); // "HELLO, WORLD!"
console.log(str.toLowerCase()); // "hello, world!"

trim() / trimStart() / trimEnd()

去除空白字符。


const str = "   Hello, World!   ";
console.log(str.trim()); // "Hello, World!"
console.log(str.trimStart()); // "Hello, World!   "
console.log(str.trimEnd()); // "   Hello, World!"

padStart() / padEnd()

填充字符串到指定长度。


const str = "5";
console.log(str.padStart(3, "0")); // "005"
console.log(str.padEnd(3, "0")); // "500"

startsWith() / endsWith()

检查字符串是否以特定子字符串开头或结尾。


const str = "Hello, World!";
console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("!")); // true

4. 综合示例

// 处理用户输入的标签字符串
function processTags(input) {
  // 去除前后空格,转换为小写
  const cleaned = input.trim().toLowerCase();
  
  // 按逗号分割,过滤空标签,去除每个标签的空格
  const tags = cleaned.split(",")
    .map(tag => tag.trim())
    .filter(tag => tag.length > 0);
  
  // 去重
  const uniqueTags = [...new Set(tags)];
  
  // 返回处理后的标签数组
  return uniqueTags;
}
​
const userInput = "  JavaScript, HTML, CSS, javascript, html , , CSS  ";
console.log(processTags(userInput)); 
// ["javascript", "html", "css"]