介绍
在本实验中，你将探索 JavaScript 字符串对象的核心方法，以处理和转换文本数据。通过一系列实际的编码练习，你将学习如何使用内置的 JavaScript 字符串方法来创建字符串、检查其长度、转换大小写、提取字符、替换内容以及查找字符位置。
本实验涵盖了基本的字符串操作技术，例如使用 length 属性来确定字符串的大小，使用 toLowerCase() 和 toUpperCase() 进行大小写转换，使用 charAt() 和 substring() 提取字符，进行字符串替换和分割，以及使用 indexOf() 查找字符串中的特定字符。通过完成这些步骤，你将获得对 JavaScript 编程中至关重要的核心字符串操作的实际经验。
创建字符串并检查其长度
在这一步中，你将学习如何在 JavaScript 中创建字符串并使用 length 属性检查其长度。字符串是 JavaScript 中用于存储和处理文本的基本数据类型。
打开 WebIDE，在 ~/project 目录下创建一个名为 string-basics.js 的新文件。我们将编写 JavaScript 代码来探索字符串的创建和长度检查。
// Creating a string using different methods
let greeting = "Hello, JavaScript!";
let name = "John Doe";
let emptyString = "";
// Checking string length using the length property
console.log("Greeting length:", greeting.length);
console.log("Name length:", name.length);
console.log("Empty string length:", emptyString.length);
当你运行这段代码时，你将看到每个字符串的长度打印到控制台。length 属性返回字符串中的字符数。
示例输出：
Greeting length: 18
Name length: 8
Empty string length: 0
需要记住的几个关键点：
- 字符串可以使用单引号
''或双引号""创建。 length属性适用于任何字符串，包括空字符串。- 空格和标点符号也会被计入字符串长度。
使用 toLowerCase() 和 toUpperCase() 转换字符串大小写
在这一步中，你将学习如何使用两个重要的 JavaScript 字符串方法 toLowerCase() 和 toUpperCase() 来转换字符串的大小写。这些方法可以让你轻松地改变字符串的大小写。
打开 WebIDE，继续在上一步的 ~/project/string-basics.js 文件中工作。添加以下代码来探索大小写转换：
// Original string
let originalText = "Hello, JavaScript Programming!";
// Convert to lowercase
let lowercaseText = originalText.toLowerCase();
console.log("Lowercase:", lowercaseText);
// Convert to uppercase
let uppercaseText = originalText.toLowerCase().toUpperCase();
console.log("Uppercase:", uppercaseText);
// Practical example: username normalization
let username = "JohnDoe";
let normalizedUsername = username.toLowerCase();
console.log("Normalized Username:", normalizedUsername);
当你运行这段代码时，你将看到以下输出：
示例输出：
Lowercase: hello, javascript programming!
Uppercase: HELLO, JAVASCRIPT PROGRAMMING!
Normalized Username: johndoe
关于大小写转换方法的关键点：
toLowerCase()将字符串中的所有字符转换为小写toUpperCase()将字符串中的所有字符转换为大写- 这些方法在字符串比较、规范化和格式化中非常有用
- 原始字符串保持不变；这些方法返回一个新的字符串
使用 charAt() 和 substring() 提取字符和子字符串
在这一步中，你将学习如何使用 JavaScript 中的 charAt() 和 substring() 方法从字符串中提取单个字符和子字符串。
打开 WebIDE，继续在 ~/project/string-basics.js 文件中工作。添加以下代码来探索字符和子字符串的提取：
// Original string
let message = "JavaScript is awesome!";
// Extract a single character using charAt()
let firstChar = message.charAt(0);
let fifthChar = message.charAt(4);
console.log("First character:", firstChar);
console.log("Fifth character:", fifthChar);
// Extract substrings using substring()
let partialString1 = message.substring(0, 10);
let partialString2 = message.substring(11);
console.log("First 10 characters:", partialString1);
console.log("From 11th character:", partialString2);
// Practical example: extracting username from email
let email = "john.doe@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log("Username:", username);
当你运行这段代码时，你将看到以下输出：
示例输出：
First character: J
Fifth character: S
First 10 characters: JavaScript
From 11th character: is awesome!
Username: john.doe
关于字符和子字符串提取的关键点：
charAt(index)返回指定索引处的字符（索引从 0 开始）substring(startIndex, endIndex)提取字符串的一部分- 如果未提供结束索引，
substring()会提取到字符串的末尾 - 索引从 0 开始，因此第一个字符的索引为 0
替换和分割字符串内容
在这一步中，你将学习如何使用 JavaScript 中的 replace() 和 split() 方法来操作字符串。这些方法是修改和分解字符串内容的强大工具。
打开 WebIDE，继续在 ~/project/string-basics.js 文件中工作。添加以下代码来探索字符串替换和分割：
// Original string
let sentence = "Hello, world! Welcome to JavaScript programming.";
// Replace method: replace specific words or characters
let replacedSentence = sentence.replace("world", "JavaScript");
console.log("Replaced sentence:", replacedSentence);
// Global replacement using regular expression
let cleanedSentence = sentence.replace(/[!.]/g, "");
console.log("Cleaned sentence:", cleanedSentence);
// Split method: convert string to an array
let words = sentence.split(" ");
console.log("Words array:", words);
// Split with limit
let limitedWords = sentence.split(" ", 3);
console.log("Limited words:", limitedWords);
// Practical example: parsing CSV-like data
let userData = "John,Doe,30,Developer";
let userDetails = userData.split(",");
console.log("User First Name:", userDetails[0]);
console.log("User Last Name:", userDetails[1]);
当你运行这段代码时，你将看到以下输出：
示例输出：
Replaced sentence: Hello, JavaScript! Welcome to JavaScript programming.
Cleaned sentence: Hello, world Welcome to JavaScript programming
Words array: [ 'Hello,', 'world!', 'Welcome', 'to', 'JavaScript', 'programming.' ]
Limited words: [ 'Hello,', 'world!', 'Welcome' ]
User First Name: John
User Last Name: Doe
关于 replace() 和 split() 的关键点：
replace()用另一个字符串替换字符串的一部分- 使用正则表达式与
replace()进行全局替换 split()根据分隔符将字符串拆分为数组split()可以接受一个可选的限制参数来控制分割的次数
使用 indexOf() 查找字符位置
在这一步中，你将学习如何使用 JavaScript 中的 indexOf() 方法查找字符串中字符或子字符串的位置。该方法在搜索和定位字符串中的特定内容时非常关键。
打开 WebIDE，继续在 ~/project/string-basics.js 文件中工作。添加以下代码来探索字符和子字符串的定位：
// Original string
let message = "Hello, JavaScript is awesome!";
// Find the position of a character
let commaPosition = message.indexOf(",");
let firstJPosition = message.indexOf("J");
console.log("Position of comma:", commaPosition);
console.log("First position of 'J':", firstJPosition);
// Find the position of a substring
let javascriptPosition = message.indexOf("JavaScript");
console.log("Position of 'JavaScript':", javascriptPosition);
// Find a character starting from a specific index
let secondJPosition = message.indexOf("J", commaPosition + 1);
console.log("Second position of 'J':", secondJPosition);
// Handling characters not found
let xPosition = message.indexOf("X");
console.log("Position of 'X':", xPosition);
// Practical example: email validation
let email = "user@example.com";
let atSymbolPosition = email.indexOf("@");
let domainName = email.substring(atSymbolPosition + 1);
console.log("Domain name:", domainName);
当你运行这段代码时，你将看到以下输出：
示例输出：
Position of comma: 5
First position of 'J': 7
Position of 'JavaScript': 7
Second position of 'J': 7
Position of 'X': -1
Domain name: example.com
关于 indexOf() 的关键点：
- 返回指定字符或子字符串首次出现的索引
- 如果未找到字符或子字符串，则返回 -1
- 可以使用可选的第二个参数从特定索引开始搜索
- 在搜索、验证和提取字符串部分时非常有用
总结
在本实验中，参与者探索了 JavaScript 中基本的字符串操作技术，重点介绍了关键方法和属性。实验引导学习者通过创建字符串、检查其长度以及使用 length、toLowerCase() 和 toUpperCase() 等方法执行大小写转换。参与者学习了如何使用不同的语法创建字符串、测量字符串长度以及动态转换文本大小写。
通过实践练习，实验展示了基本的字符串操作，包括字符提取、子字符串操作以及理解字符串索引。通过动手编写代码示例，学生们深入了解了 JavaScript 字符串对象方法，使他们能够在编程项目中有效地处理和修改文本数据。
