Введение
В этом практическом занятии вы изучите основные методы объекта строки JavaScript для манипулирования и преобразования текстовых данных. С помощью серии практических заданий по программированию вы научитесь создавать строки, проверять их длину, изменять регистр, извлекать символы, заменять содержимое и искать позиции символов с использованием встроенных методов строки JavaScript.
В практическом занятии рассматриваются фундаментальные методы манипулирования строками, такие как использование свойства length для определения размера строки, toLowerCase() и toUpperCase() для изменения регистра, charAt() и substring() для извлечения символов, замена и разделение строк, а также indexOf() для поиска определенных символов в строке. Решив эти задачи, вы получите практический опыт в работе с основными операциями над строками, которые важны для эффективной обработки текста в JavaScript-программировании.
Создайте строку и проверьте ее длину
В этом шаге вы научитесь создавать строки в JavaScript и проверять их длину с использованием свойства length. Строки являются основными типами данных в JavaScript, используемыми для хранения и манипулирования текстом.
Откройте WebIDE и создайте новый файл с именем string-basics.js в директории ~/project. Мы напишем наш код на JavaScript для изучения создания строк и проверки длины.
// Создание строки с использованием различных методов
let greeting = "Hello, JavaScript!";
let name = "John Doe";
let emptyString = "";
// Проверка длины строки с использованием свойства length
console.log("Длина приветствия:", greeting.length);
console.log("Длина имени:", name.length);
console.log("Длина пустой строки:", emptyString.length);
При запуске этого кода вы увидите длину каждой строки, напечатанной в консоль. Свойство length возвращает количество символов в строке.
Пример вывода:
Длина приветствия: 18
Длина имени: 8
Длина пустой строки: 0
Несколько важных моментов, которые нужно запомнить:
- Строки можно создавать с использованием одинарных кавычек
''или двойных кавычек"". - Свойство
lengthработает с любой строкой, включая пустые строки. - Пробелы и знаки препинания учитываются при подсчете длины строки.
Преобразуйте регистр строки с использованием toLowerCase() и toUpperCase()
В этом шаге вы научитесь преобразовывать регистр строк с использованием двух основных методов строки JavaScript: toLowerCase() и toUpperCase(). Эти методы позволяют легко изменить регистр строк.
Откройте WebIDE и продолжайте работу в файле ~/project/string-basics.js из предыдущего шага. Добавьте следующий код, чтобы изучить преобразование регистра:
// Исходная строка
let originalText = "Hello, JavaScript Programming!";
// Преобразовать в нижний регистр
let lowercaseText = originalText.toLowerCase();
console.log("Нижний регистр:", lowercaseText);
// Преобразовать в верхний регистр
let uppercaseText = originalText.toLowerCase().toUpperCase();
console.log("Верхний регистр:", uppercaseText);
// Практический пример: нормализация имени пользователя
let username = "JohnDoe";
let normalizedUsername = username.toLowerCase();
console.log("Нормализованное имя пользователя:", normalizedUsername);
При запуске этого кода вы увидите следующий вывод:
Пример вывода:
Нижний регистр: hello, javascript programming!
Верхний регистр: HELLO, JAVASCRIPT PROGRAMMING!
Нормализованное имя пользователя: johndoe
Основные моменты о методах преобразования регистра:
toLowerCase()преобразует все символы в строке в нижний регистрtoUpperCase()преобразует все символы в строке в верхний регистр- Эти методы полезны для сравнения строк, нормализации и форматирования
- Исходная строка остается неизменной; эти методы возвращают новую строку
Извлеките символы и подстроки с использованием charAt() и substring()
В этом шаге вы научитесь извлекать отдельные символы и подстроки из строки с использованием методов charAt() и substring() в JavaScript.
Откройте WebIDE и продолжайте работу в файле ~/project/string-basics.js. Добавьте следующий код, чтобы изучить извлечение символов и подстрок:
// Исходная строка
let message = "JavaScript is awesome!";
// Извлечь отдельный символ с использованием charAt()
let firstChar = message.charAt(0);
let fifthChar = message.charAt(4);
console.log("Первый символ:", firstChar);
console.log("Пятый символ:", fifthChar);
// Извлечь подстроки с использованием substring()
let partialString1 = message.substring(0, 10);
let partialString2 = message.substring(11);
console.log("Первые 10 символов:", partialString1);
console.log("Начиная с 11-го символа:", partialString2);
// Практический пример: извлечение имени пользователя из электронной почты
let email = "john.doe@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log("Имя пользователя:", username);
При запуске этого кода вы увидите следующий вывод:
Пример вывода:
Первый символ: J
Пятый символ: S
Первые 10 символов: JavaScript
Начиная с 11-го символа: is awesome!
Имя пользователя: john.doe
Основные моменты о извлечении символов и подстрок:
charAt(index)возвращает символ по указанному индексу (индексация начинается с 0)substring(startIndex, endIndex)извлекает часть строки- Если не указать конечный индекс,
substring()извлекает до конца строки - Индексы начинаются с 0, поэтому первый символ имеет индекс 0
Замените и разделите содержимое строки
В этом шаге вы научитесь манипулировать строками с использованием методов replace() и split() в JavaScript. Эти методы являются мощными инструментами для изменения и разбиения содержимого строки.
Откройте WebIDE и продолжайте работу в файле ~/project/string-basics.js. Добавьте следующий код, чтобы изучить замену и разделение строк:
// Исходная строка
let sentence = "Hello, world! Welcome to JavaScript programming.";
// Метод replace(): заменить конкретные слова или символы
let replacedSentence = sentence.replace("world", "JavaScript");
console.log("Замененная строка:", replacedSentence);
// Глобальная замена с использованием регулярного выражения
let cleanedSentence = sentence.replace(/[!.]/g, "");
console.log("Очищенная строка:", cleanedSentence);
// Метод split(): преобразовать строку в массив
let words = sentence.split(" ");
console.log("Массив слов:", words);
// Разделение с ограничением
let limitedWords = sentence.split(" ", 3);
console.log("Ограниченные слова:", limitedWords);
// Практический пример: разбор данных в стиле CSV
let userData = "John,Doe,30,Developer";
let userDetails = userData.split(",");
console.log("Имя пользователя:", userDetails[0]);
console.log("Фамилия пользователя:", userDetails[1]);
При запуске этого кода вы увидите следующий вывод:
Пример вывода:
Замененная строка: Hello, JavaScript! Welcome to JavaScript programming.
Очищенная строка: Hello, world Welcome to JavaScript programming
Массив слов: [ 'Hello,', 'world!', 'Welcome', 'to', 'JavaScript', 'programming.' ]
Ограниченные слова: [ 'Hello,', 'world!', 'Welcome' ]
Имя пользователя: John
Фамилия пользователя: Doe
Основные моменты о replace() и split():
replace()заменяет часть строки на другую строку- Используйте регулярные выражения с
replace()для глобальных замен split()разбивает строку на массив на основе разделителяsplit()может принимать необязательный параметр ограничения для контроля количества разделений
Найдите позиции символов с использованием indexOf()
В этом шаге вы научитесь искать позицию символов или подстрок в строке с использованием метода indexOf() в JavaScript. Этот метод важен для поиска и определения конкретного содержимого в строках.
Откройте WebIDE и продолжайте работу в файле ~/project/string-basics.js. Добавьте следующий код, чтобы изучить позиционирование символов и подстрок:
// Исходная строка
let message = "Hello, JavaScript is awesome!";
// Найти позицию символа
let commaPosition = message.indexOf(",");
let firstJPosition = message.indexOf("J");
console.log("Позиция запятой:", commaPosition);
console.log("Первая позиция 'J':", firstJPosition);
// Найти позицию подстроки
let javascriptPosition = message.indexOf("JavaScript");
console.log("Позиция 'JavaScript':", javascriptPosition);
// Найти символ начиная с определенного индекса
let secondJPosition = message.indexOf("J", commaPosition + 1);
console.log("Вторая позиция 'J':", secondJPosition);
// Обработка символов, которые не найдены
let xPosition = message.indexOf("X");
console.log("Позиция 'X':", xPosition);
// Практический пример: проверка электронной почты
let email = "user@example.com";
let atSymbolPosition = email.indexOf("@");
let domainName = email.substring(atSymbolPosition + 1);
console.log("Доменное имя:", domainName);
При запуске этого кода вы увидите следующий вывод:
Пример вывода:
Позиция запятой: 5
Первая позиция 'J': 7
Позиция 'JavaScript': 7
Вторая позиция 'J': 7
Позиция 'X': -1
Доменное имя: example.com
Основные моменты о indexOf():
- Возвращает первый индекс, где найден указанный символ или подстрока
- Если символ/подстрока не найдена, возвращает -1
- Может начинать поиск с определенного индекса с использованием необязательного второго параметра
- Полезен для поиска, проверки и извлечения частей строк
Резюме
В этом практическом занятии участники изучали основные методы манипуляции строками в JavaScript, сосредоточившись на ключевых методах и свойствах. Практическое занятие помогало ученикам создавать строки, проверять их длину и выполнять преобразования регистра с использованием методов, таких как length, toLowerCase() и toUpperCase(). Участники узнали, как создавать строки с разной синтаксисом, измерять длину строк и динамически преобразовывать регистр текста.
Практические упражнения демонстрировали важные операции со строками, включая извлечение символов, манипуляцию подстроками и понимание индексирования строк. Решив задачи по написанию кода, студенты приобрели практические навыки в использовании методов объекта строк в JavaScript, что позволило им эффективно обрабатывать и изменять текстовые данные в своих проектах программирования.
