JavaScript 字符串魔法：实用技巧——WEB开发系列45
这篇文章，探讨一下 JavaScript 中的字符串操作。字符串是编程中的基本数据类型之一，它们无处不在，几乎在所有的代码中都需要处理。了解字符串的基础知识、常用的内置方法，通过实例来学习高效地操作字符串。
一、什么是字符串？
字符串（string）是一种用于表示文本的数据类型。它是由一系列字符组成的，可以包含字母、数字、符号等内容。我们通常使用单引号（''）、双引号（""）或反引号（`）来表示字符串。
let greeting = 'Hello, World!';
let message = "JavaScript is awesome!";
let multiline = `This is
a multi-line
string.`;二、把字符串当作对象
字符串既是基础类型（primitive type），又可以像对象一样使用。为什么呢？这是因为当调用字符串方法时，JavaScript 会将字符串自动转换为一个String对象，从而允许使用字符串对象的内置方法。以下是常用的几种操作：
1. 获取字符串的长度
要获取字符串的长度，我们可以使用 .length 属性。
let text = "JavaScript";
console.log(text.length); // 输出: 10length 属性返回字符串中的字符数，包括空格和标点符号。
2. 检索特定字符串字符
通过索引号来访问字符串中的特定字符。字符串的索引从 0 开始。
let char = text[0]; // 获取第一个字符 'J'
console.log(char); // 输出: J我们也可以使用 .charAt() 方法来获取指定位置的字符。
let char2 = text.charAt(4); // 获取第5个字符 'S'
console.log(char2); // 输出: S3. 在字符串中查找子字符串并提取
JavaScript 提供了多种方法来查找和提取子字符串。
-
indexOf(): 返回子字符串首次出现的索引。如果未找到，返回 -1。
let str = "Hello, World!";
let index = str.indexOf("World"); // 查找 'World'
console.log(index); // 输出: 7-
substring(): 提取字符串的子字符串，基于起始和结束索引。
let subStr = str.substring(0, 5); // 提取 'Hello'
console.log(subStr); // 输出: Hello4. 转换大小写
你可以轻松地将字符串中的字符转换为大写或小写。
-
toUpperCase(): 转换为大写。
let upperCaseStr = str.toUpperCase();
console.log(upperCaseStr); // 输出: HELLO, WORLD!-
toLowerCase(): 转换为小写。
let lowerCaseStr = str.toLowerCase();
console.log(lowerCaseStr); // 输出: hello, world!5. 替换字符串的某部分
replace() 方法允许我们替换字符串中的某个子字符串。
let newStr = str.replace("World", "JavaScript");
console.log(newStr); // 输出: Hello, JavaScript!值得注意的是，replace() 只会替换第一个匹配的字符串。如果需要替换所有匹配的字符串，我们可以使用正则表达式的全局模式。
let sentence = "Cats are great, cats are cute!";
let newSentence = sentence.replace(/cats/gi, "dogs"); // 替换所有匹配
console.log(newSentence); // 输出: Dogs are great, dogs are cute!三、处理字符串的实际操作
让我们通过一些实例来更加深入地了解字符串的操作方式。
示例 1: 过滤问候消息
在这个练习中，我们有一个字符串数组，包含一些节日问候的消息。我们的任务是找出其中包含 "春节" 的消息。
let greetings = [
"元旦快乐！",
"春节快乐！",
"元宵节节快乐！",
"端午节快乐！"
];
for (let greeting of greetings) {
if (greeting.includes("春节")) {
console.log(greeting); // 输出: 春节快乐！
}
}代码中使用了 includes() 方法来检查每条消息是否包含 "春节"。
示例 2: 大写修正
现在我们有一个英国城市名称的数组，但这些名字的大小写搞乱了。我们需要把它们修正成首字母大写，其余部分小写的形式。
let cities = ["london", "bIrMInGham", "MANCHESTER"];
for (let city of cities) {
let lowerCity = city.toLowerCase(); // 全部转为小写
let fixedCity = lowerCity.charAt(0).toUpperCase() + lowerCity.slice(1);
console.log(fixedCity); // 输出: London, Birmingham, Manchester
}代码中首先使用 toLowerCase() 方法将城市名全部转为小写，然后使用 charAt(0) 获取第一个字符，并将其转换为大写。最后，将处理好的首字母与剩下的字符串拼接起来。
示例 3: 提取火车站信息
我们有一个包含青岛火车站信息的数组，数据格式为站代码 + 数据项 + 可读站名。要提取站点代码和站名。
let stationInfo = [
"QCH12345;青岛站",
"JN12345;济南站",
"BJ12345;北京站"
];
for (let info of stationInfo) {
let stationCode = info.slice(0, 3); // 提取站代码
let stationName = info.slice(info.indexOf(";") + 1); // 提取站名
let result = stationCode + " - " + stationName;
console.log(result); // 输出: QCH - 青岛站, JN - 济南站, BJ - 北京站
}使用了 slice() 和 indexOf() 方法分别提取站点代码和站名。
四、主动学习
为了进一步增强大家对字符串操作的理解，可以尝试以下练习：
- 给定一个字符串数组，过滤掉其中所有包含敏感词的字符串。
- 将用户输入的电子邮件地址转换为小写，并去掉前后空格。
- 创建一个字符串模板，接收用户的名字，并生成一条个性化的欢迎消息。
示例代码：
// 过滤敏感词
let comments = ["我讨厌这个产品", "这个产品真棒", "不要买这个"];
let filteredComments = comments.filter(comment => !comment.includes("讨厌"));
console.log(filteredComments); // 输出: ["这个产品真棒", "不要买这个"]
// 格式化电子邮件
let email = " USER@EXAMPLE.com ";
let formattedEmail = email.trim().toLowerCase();
console.log(formattedEmail); // 输出: user@example.com
// 个性化欢迎消息
let userName = "Alice";
let welcomeMessage = `Hello, ${userName}! Welcome to our website.`;
console.log(welcomeMessage); // 输出: Hello, Alice! Welcome to our website.
如有表述错误及欠缺之处敬请各位佬批评补充。