在 JavaScript 中，字符串（String） 是一种原始数据类型，用于表示文本数据。除了字符串字面量（例如 "Hello" 或 'World'）外，JavaScript 还提供了 String 对象来处理字符串的相关方法和属性。与大多数 JavaScript 原始类型不同，String 对象提供了许多可以调用的方法。

1. 创建字符串对象

字符串可以直接通过字面量创建，或者通过 String 构造函数创建。

// 字面量方式创建字符串
const str1 = "Hello, World!";
const str2 = 'JavaScript';

// 使用 String 构造函数创建字符串对象
const str3 = new String("Hello, JavaScript!");
console.log(str3);  // 输出：String { 'Hello, JavaScript!' }

注意：

• 字符串字面量（例如 "Hello"）是原始类型（primitive）。
• 使用 new String() 创建的对象是 String 类型的对象（对象封装类型），而且具有对象的特性。

2. String 的静态属性和方法

静态属性

• String.length：返回字符串的字符数。

const str = "Hello";
console.log(str.length);  // 输出：5

静态方法

• String.fromCharCode()：接受一系列 Unicode 值并返回对应字符的字符串。

console.log(String.fromCharCode(65, 66, 67));  // 输出："ABC"

• String.fromCodePoint()：接受一系列 Unicode 代码点并返回对应字符的字符串。适用于超出 fromCharCode 范围的字符。

console.log(String.fromCodePoint(0x1F600));  // 输出： "😀"

3. String 的实例方法

字符串对象提供了很多有用的方法来操作和处理字符串。

3.1 字符提取和查找方法

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

const str = "Hello, World!";
console.log(str.charAt(0));  // 输出： "H"

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

console.log(str.charCodeAt(0));  // 输出：72（H 的 Unicode 编码）

• indexOf(searchValue, fromIndex)：返回 searchValue 第一次出现的位置，如果未找到则返回 -1。

console.log(str.indexOf("World"));  // 输出：7
console.log(str.indexOf("Java"));   // 输出：-1

• lastIndexOf(searchValue, fromIndex)：返回 searchValue 最后一次出现的位置。

const str2 = "Hello, World! Hello!";
console.log(str2.lastIndexOf("Hello"));  // 输出：14

3.2 字符串切割和替换

• slice(beginIndex, endIndex)：提取字符串的一个子字符串，返回新字符串。

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

• substring(beginIndex, endIndex)：返回两个索引之间的子字符串。

console.log(str.substring(0, 5));  // 输出： "Hello"
console.log(str.substring(7, 12)); // 输出： "World"

• substr(startIndex, length)：返回从 startIndex 开始指定长度的子字符串。

console.log(str.substr(7, 5));  // 输出： "World"

• replace(searchValue, newValue)：替换字符串中第一个匹配的内容。

console.log(str.replace("World", "JavaScript"));  // 输出： "Hello, JavaScript!"

• replaceAll(searchValue, newValue)：替换字符串中所有匹配的内容（ES2021 引入）。

console.log(str2.replaceAll("Hello", "Hi"));  // 输出： "Hi, World! Hi!"

3.3 字符串大小写转换

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

console.log(str.toLowerCase());  // 输出： "hello, world!"

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

console.log(str.toUpperCase());  // 输出： "HELLO, WORLD!"

• toLocaleLowerCase() 和 toLocaleUpperCase()：根据区域设置转换大小写。

3.4 修剪和填充

• trim()：去除字符串两端的空格。

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

• padStart(targetLength, padString)：在字符串前面填充指定字符，直到达到指定长度。

console.log("5".padStart(3, "0"));  // 输出： "005"

• padEnd(targetLength, padString)：在字符串后面填充指定字符，直到达到指定长度。

console.log("5".padEnd(3, "0"));  // 输出： "500"

3.5 字符串分割与连接

• split(separator, limit)：将字符串分割成一个数组，分隔符可以是字符串或正则表达式。

const str4 = "apple,banana,orange";
const fruits = str4.split(",");
console.log(fruits);  // 输出： ["apple", "banana", "orange"]

• concat(string2, string3, ...)：连接两个或更多字符串。

const str5 = "Hello";
const str6 = " World!";
console.log(str5.concat(str6));  // 输出： "Hello World!"

3.6 字符串的其它方法

• includes(searchValue)：判断字符串中是否包含指定的子字符串。

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

• startsWith(searchValue)：判断字符串是否以指定的子字符串开头。

console.log(str.startsWith("Hello"));  // 输出： true

• endsWith(searchValue)：判断字符串是否以指定的子字符串结尾。

console.log(str.endsWith("!"));  // 输出： true

• repeat(count)：返回一个新的字符串，表示原字符串重复 count 次。

console.log("abc".repeat(3));  // 输出： "abcabcabc"

3.7 模板字符串 (Template Literals)

ES6 引入了模板字符串，它是使用反引号 ` 包裹的字符串，支持嵌入表达式。

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting);  // 输出： "Hello, Alice!"

4. 字符串实例化和原始字符串比较

尽管你可以使用 new String() 创建字符串对象，但通常不推荐这样做，因为它会返回一个对象，而不是原始字符串。并且在比较时也有不同的行为：

const strObj = new String("Hello");
const strPrim = "Hello";

console.log(strObj == strPrim);    // true（比较值）
console.log(strObj === strPrim);   // false（比较对象与原始值）

5. 实战案例：字符串操作

假设你正在开发一个简单的文本处理工具，要求能够执行以下操作：

1. 清除文本两端的空格。
2. 将文本转换为大写。
3. 统计文本中的单词数。

function processText(input) {
  const cleaned = input.trim();
  const uppercased = cleaned.toUpperCase();
  const wordCount = cleaned.split(/\s+/).length;  // 使用正则拆分单词

  return {
    cleanedText: cleaned,
    uppercasedText: uppercased,
    wordCount: wordCount
  };
}

const result = processText("   Hello world, this is JavaScript!   ");
console.log(result);
// 输出：
// {
//   cleanedText: "Hello world, this is JavaScript!",
//   uppercasedText: "HELLO WORLD, THIS IS JAVASCRIPT!",
//   wordCount: 6
// }

总结

JavaScript 的 String 类型是非常灵活和强大的，可以帮助你轻松处理和操作文本数据。通过上述方法，你可以完成字符串的基本操作、查找、替换、格式化等多种任务。理解这些方法将极大地提升你在前端开发中的效率和能力。

更多详细内容请关注掐相关文章！