知识篇 -- JS字符串：文本处理

Ray Shine 2024/2/18 JavaScript基础知识

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在JavaScript中，字符串是用于表示文本数据的数据类型。无论是用户输入、显示信息还是网络通信，字符串都无处不在。掌握字符串的创建方式、各种内置方法以及ES6+带来的新特性，能够让你更高效、更灵活地处理文本数据。

# 一、字符串的创建方式基础

# 1. 字符串字面量 (String Literal) 常用

最常用、最简洁的创建字符串的方式，使用单引号 ' '、双引号 " " 或反引号 `。

const singleQuote = 'Hello, World!';
const doubleQuote = "Hello, JavaScript!";

# 2. 模板字符串 (Template Literals) (ES6新增) ES6

使用反引号 ` 定义，允许嵌入表达式和多行文本，极大地增强了字符串的灵活性。

const name = "Alice";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Hello, my name is Alice and I am 30 years old.

const multiLine = `
    This is a
    multi-line
    string.
`;
console.log(multiLine);

# 3. `new String()` 构造函数不推荐

使用 String 构造函数创建字符串对象。

const strObj = new String("Hello");
console.log(typeof strObj); // object
console.log(strObj == "Hello"); // true (值相等)
console.log(strObj === "Hello"); // false (类型不同)

注意：通常不推荐使用 new String()，因为它会创建一个字符串对象而不是基本字符串值，这可能导致一些意外行为。在大多数情况下，直接使用字符串字面量即可。

# 二、字符串的常用方法核心

JavaScript提供了丰富的字符串方法来处理文本数据。

# 1. 查找与定位定位

indexOf(substring, fromIndex): 返回子字符串第一次出现的索引，如果不存在则返回 -1。
lastIndexOf(substring, fromIndex): 返回子字符串最后一次出现的索引。
includes(substring, position) (ES6新增): 判断字符串是否包含某个子字符串，返回布尔值。
startsWith(substring, position) (ES6新增): 判断字符串是否以某个子字符串开头。
endsWith(substring, position) (ES6新增): 判断字符串是否以某个子字符串结尾。

示例：

const sentence = "The quick brown fox jumps over the lazy dog.";
console.log(sentence.indexOf("fox")); // 16
console.log(sentence.includes("cat")); // false
console.log(sentence.startsWith("The")); // true

# 2. 截取与提取提取

slice(startIndex, endIndex): 截取从 startIndex 到 endIndex (不包含) 的部分。支持负数索引。
substring(startIndex, endIndex): 截取从 startIndex 到 endIndex (不包含) 的部分。不支持负数索引，会自动调整参数顺序。
substr(startIndex, length) (已废弃，不推荐使用): 截取从 startIndex 开始的 length 个字符。
charAt(index): 返回指定索引位置的字符。
charCodeAt(index): 返回指定索引位置字符的Unicode编码。

示例：

const str = "JavaScript";
console.log(str.slice(0, 4));    // "Java"
console.log(str.substring(4, 8)); // "Scri"
console.log(str.charAt(0));      // "J"

# 3. 替换与分割转换

replace(searchValue, replaceValue): 替换字符串中匹配 searchValue 的部分。searchValue 可以是字符串或正则表达式。只会替换第一个匹配项，除非使用正则表达式的 g 标志。
replaceAll(searchValue, replaceValue) (ES2021新增): 替换字符串中所有匹配 searchValue 的部分。
split(separator, limit): 将字符串分割成子字符串数组。separator 可以是字符串或正则表达式。

示例：

const text = "Hello World, Hello JavaScript!";
console.log(text.replace("Hello", "Hi")); // "Hi World, Hello JavaScript!"
console.log(text.replaceAll("Hello", "Hi")); // "Hi World, Hi JavaScript!"
console.log(text.split(", ")); // ["Hello World", "Hello JavaScript!"]

# 4. 大小写转换格式化

toLowerCase(): 将字符串转换为小写。
toUpperCase(): 将字符串转换为大写。

示例：

const word = "Example";
console.log(word.toLowerCase()); // "example"
console.log(word.toUpperCase()); // "EXAMPLE"

# 5. 去除空白清理

trim(): 移除字符串两端的空白字符。
trimStart() / trimLeft() (ES2019新增): 移除字符串开头的空白字符。
trimEnd() / trimRight() (ES2019新增): 移除字符串末尾的空白字符。

示例：

const padded = "   Hello World   ";
console.log(padded.trim()); // "Hello World"

# 6. 其他常用方法辅助

concat(str1, str2, ...): 连接两个或多个字符串。通常使用 + 运算符或模板字符串更方便。
repeat(count) (ES6新增): 重复字符串 count 次。
padStart(targetLength, padString) (ES2017新增): 在字符串开头填充指定字符，直到达到目标长度。
padEnd(targetLength, padString) (ES2017新增): 在字符串末尾填充指定字符，直到达到目标长度。

# 三、字符串与数组的转换互转

字符串转数组：使用 split() 方法。
数组转字符串：使用 join() 方法。

示例：

const sentence = "apple,banana,orange";
const fruitsArray = sentence.split(','); // ["apple", "banana", "orange"]

const newSentence = fruitsArray.join(';'); // "apple;banana;orange"

掌握JavaScript字符串的各种操作方法，能够让你在处理文本数据时游刃自如，无论是数据清洗、格式化还是用户界面的动态展示，都能高效完成。

← 数组排序运算符 →

一ξひβθ光 i