JavaScript 字符串的常用方法与技巧

在 JavaScript 开发中，字符串是使用最频繁的数据类型之一。无论是处理用户输入、操作 DOM，还是进行数据格式化，字符串操作都是必不可少的技能。本文将详细介绍 JavaScript 字符串的常用方法，并通过示例帮助你更好地理解和使用它们。

1. 字符串的基本操作

1.1 获取字符串长度：length

length 是字符串的一个属性，用于获取字符串的长度（字符数）。

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

1.2 获取指定位置的字符：charAt() 和 charCodeAt()

• charAt(index)：返回指定索引位置的字符。

• charCodeAt(index)：返回指定索引位置字符的 Unicode 编码。

const str = "Hello, World!";
console.log(str.charAt(7)); // 输出："W"
console.log(str.charCodeAt(7)); // 输出：87（"W" 的 Unicode 编码）

1.3 截取字符串：substring()、slice() 和 substr()

• substring(start, end)：从 start 开始截取，到 end 结束（不包括 end）。

• slice(start, end)：与 substring 类似，但支持负索引。

• substr(start, length)：从 start 开始截取指定长度的字符串。

const str = "Hello, World!";
console.log(str.substring(0, 5)); // 输出："Hello"
console.log(str.slice(7)); // 输出："World!"
console.log(str.substr(7, 5)); // 输出："World"

2. 查找字符串

2.1 查找子字符串的位置：indexOf() 和 lastIndexOf()

• indexOf(searchValue, fromIndex)：从 fromIndex 开始查找子字符串第一次出现的位置。

• lastIndexOf(searchValue, fromIndex)：从 fromIndex 开始反向查找子字符串最后一次出现的位置。

const str = "Hello, World!";
console.log(str.indexOf("World")); // 输出：7
console.log(str.lastIndexOf("o")); // 输出：8

2.2 检查字符串是否包含子字符串：includes()、startsWith() 和 endsWith()

• includes(searchValue, position)：检查字符串是否包含指定的子字符串。

• startsWith(searchValue, position)：检查字符串是否以指定的子字符串开头。

• endsWith(searchValue, length)：检查字符串是否以指定的子字符串结尾。

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

3. 替换字符串

3.1 替换字符串内容：replace() 和 replaceAll()

• replace(searchValue, replacement)：替换字符串中的内容，searchValue 可以是字符串或正则表达式。

• replaceAll(searchValue, replacement)：全局替换字符串中的内容。

const str = "Hello, World!";
console.log(str.replace("World", "Moon")); // 输出："Hello, Moon!"
console.log(str.replaceAll("o", "0")); // 输出："Hell0, W0rld!"

4. 大小写转换

4.1 转换大小写：toLowerCase()、toUpperCase()、toLocaleLowerCase() 和 toLocaleUpperCase()

• toLowerCase() 和 toLocaleLowerCase()：将字符串转换为小写。

• toUpperCase() 和 toLocaleUpperCase()：将字符串转换为大写。

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

5. 格式化字符串

5.1 去除空白字符：trim()、trimStart() 和 trimEnd()

• trim()：移除字符串两端的空白字符。

• trimStart() 和 trimLeft()：移除字符串开头的空白字符。

• trimEnd() 和 trimRight()：移除字符串末尾的空白字符。

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

5.2 填充字符串：padStart() 和 padEnd()

• padStart(targetLength, padString)：在字符串开头填充指定的字符，直到达到目标长度。

• padEnd(targetLength, padString)：在字符串末尾填充指定的字符，直到达到目标长度。

const str = "123";
console.log(str.padStart(5, "0")); // 输出："00123"
console.log(str.padEnd(5, "0")); // 输出："12300"

6. 拆分与组合字符串

6.1 拆分字符串：split()

split(separator, limit)：根据指定的分隔符将字符串拆分为数组。

const str = "Hello, World!";
console.log(str.split(", ")); // 输出：["Hello", "World!"] 两个数组
console.log(str.split()); // 输出：['Hello, World!']  一个数组
console.log(str.split("")); // 输出：["H", "e", "l", "l", "o", ",", " ", "W", "o", "r", "l", "d", "!"]

6.2 组合字符串：join()

join(separator)：将数组的元素连接成一个字符串。

const arr = ["Hello", "World!"];
console.log(arr.join(", ")); // 输出："Hello, World!"

7. 模板字符串

模板字符串是 ES6 引入的一种新语法，使用反引号（`）定义，支持多行字符串和嵌入表达式。

const name = "Alice";
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // 输出："Hello, my name is Alice and I am 25 years old."

8. 更多字符串方法

除了上述常用方法外，JavaScript 还提供了其他一些字符串方法，用于特定场景：

8.1 repeat(count)

重复字符串指定次数。

const str = "Hello";
console.log(str.repeat(3)); // 输出："HelloHelloHello"

8.2 normalize(form)

对字符串进行 Unicode 标准化。

const str = "é";
console.log(str.normalize("NFC")); // 输出："é"

8.3 codePointAt(index)

获取指定索引位置字符的 Unicode 编码（支持 Unicode 扩展字符）。

JavaScript复制

const str = "Hello";
console.log(str.codePointAt(0)); // 输出：72

8.4 toLocaleLowerCase(locale) 和 toLocaleUpperCase(locale)

根据本地环境将字符串转换为小写或大写。

JavaScript复制

const str = "Hello";
console.log(str.toLocaleLowerCase("en-US")); // 输出："hello"
console.log(str.toLocaleUpperCase("en-US")); // 输出："HELLO"

8.5 JavaScript 字符串方法总结表

方法	功能描述	语法	示例	输出
length	获取字符串的长度（字符数）	str.length	const str = "Hello";<br>console.log(str.length);	5
charAt(index)	获取指定索引位置的字符	str.charAt(index)	const str = "Hello";<br>console.log(str.charAt(1));	"e"
charCodeAt(index)	获取指定索引位置字符的 Unicode 编码	str.charCodeAt(index)	const str = "Hello";<br>console.log(str.charCodeAt(1));	101
substring(start, end)	截取字符串的一部分，从 start 开始到 end 结束（不包括 end）	str.substring(start, end)	const str = "Hello World";<br>console.log(str.substring(0, 5));	"Hello"
slice(start, end)	截取字符串的一部分，支持负索引	str.slice(start, end)	const str = "Hello World";<br>console.log(str.slice(6));	"World"
substr(start, length)	从 start 开始截取指定长度的字符串	str.substr(start, length)	const str = "Hello World";<br>console.log(str.substr(6, 5));	"World"
indexOf(searchValue)	查找子字符串第一次出现的位置	str.indexOf(searchValue, fromIndex)	const str = "Hello World";<br>console.log(str.indexOf("World"));	6
lastIndexOf(searchValue)	查找子字符串最后一次出现的位置	str.lastIndexOf(searchValue, fromIndex)	const str = "Hello World";<br>console.log(str.lastIndexOf("o"));	7
includes(searchValue)	检查字符串是否包含指定的子字符串	str.includes(searchValue, position)	const str = "Hello World";<br>console.log(str.includes("Hello"));	true
startsWith(searchValue)	检查字符串是否以指定的子字符串开头	str.startsWith(searchValue, position)	const str = "Hello World";<br>console.log(str.startsWith("Hello"));	true
endsWith(searchValue)	检查字符串是否以指定的子字符串结尾	str.endsWith(searchValue, length)	const str = "Hello World";<br>console.log(str.endsWith("World"));	true
replace(searchValue, replacement)	替换字符串中的内容	str.replace(searchValue, replacement)	const str = "Hello World";<br>console.log(str.replace("World", "Moon"));	"Hello Moon"
replaceAll(searchValue, replacement)	全局替换字符串中的内容	str.replaceAll(searchValue, replacement)	const str = "Hello World";<br>console.log(str.replaceAll("o", "0"));	"Hell0 W0rld"
toLowerCase()	将字符串转换为小写	str.toLowerCase()	const str = "Hello World";<br>console.log(str.toLowerCase());	"hello world"
toUpperCase()	将字符串转换为大写	str.toUpperCase()	const str = "Hello World";<br>console.log(str.toUpperCase());	"HELLO WORLD"
trim()	移除字符串两端的空白字符	str.trim()	const str = " Hello World ";<br>console.log(str.trim());	"Hello World"
trimStart()	移除字符串开头的空白字符	str.trimStart()	const str = " Hello World";<br>console.log(str.trimStart());	"Hello World"
trimEnd()	移除字符串末尾的空白字符	str.trimEnd()	const str = "Hello World ";<br>console.log(str.trimEnd());	"Hello World"
padStart(targetLength, padString)	在字符串开头填充指定字符，直到达到目标长度	str.padStart(targetLength, padString)	const str = "123";<br>console.log(str.padStart(5, "0"));	"00123"
padEnd(targetLength, padString)	在字符串末尾填充指定字符，直到达到目标长度	str.padEnd(targetLength, padString)	const str = "123";<br>console.log(str.padEnd(5, "0"));	"12300"
split(separator)	根据指定的分隔符将字符串拆分为数组	str.split(separator, limit)	const str = "Hello, World";<br>console.log(str.split(", "));	["Hello", "World"]
repeat(count)	重复字符串指定次数	str.repeat(count)	const str = "Hello";<br>console.log(str.repeat(3));	"HelloHelloHello"
normalize(form)	对字符串进行 Unicode 标准化	str.normalize(form)	const str = "é";<br>console.log(str.normalize("NFC"));	"é"
codePointAt(index)	获取指定索引位置字符的 Unicode 编码（支持扩展字符）	str.codePointAt(index)	const str = "Hello";<br>console.log(str.codePointAt(0));	72

---

表格说明

1. 功能描述：简要说明该方法的作用。

2. 语法：提供方法的基本语法格式。

3. 示例：给出一个具体的代码示例。

4. 输出：展示示例代码的运行结果。

总结

JavaScript 提供了丰富的字符串方法，能够满足我们日常开发中的各种需求。通过掌握这些方法，我们可以更高效地处理字符串，编写出更简洁、更强大的代码。希望本文的内容对你有所帮助，如果你还有其他问题，欢迎在评论区留言讨论！