Изучите методы объекта строки в JavaScript

Введение

В этом практическом занятии вы изучите основные методы объекта строки 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, что позволило им эффективно обрабатывать и изменять текстовые данные в своих проектах программирования.