Урок 10: Строки и методы строк в JavaScript’е

Cегодня мы погрузимся в увлекательный мир строк в JavaScript. Если вы только начинаете свой путь в программировании, этот урок станет важным шагом. Строки это одна из базовых структур данных и без них невозможно представить разработку. Мы разберем как создавать строки, работать с ними и применять ключевые методы.

Что такое строка в JavaScript?

Строка это последовательность символов, которая используется для представления текста. В JavaScript строки можно создать тремя способами:

1. Одинарные кавычки: 'Привет, мир!'
2. Двойные кавычки: "JavaScript — это круто!"
3. Шаблонные строки (обратные кавычки): `Сегодня ${new Date().toLocaleDateString()}`

Пример:

let greeting = 'Привет, студенты!';
let language = "JavaScript";
let message = `Сегодня мы изучаем ${language}`;

Шаблонные строки особенно удобны, так как позволяют вставлять выражения (как в примере выше) и создавать многострочный текст без символа \n.

Основные свойства и методы строк

Строки в JavaScript имеют множество встроенных методов. Сегодня мы разберем четыре ключевых:

• .length
• .toUpperCase()
• .toLowerCase()
• .includes()

Но сначала поговорим о свойствах и методах в целом.

• Свойство — это характеристика объекта. Например, длина строки.
• Метод — это действие, которое можно выполнить над объектом. Например, преобразовать строку в верхний регистр.

1. Свойство .length

Это свойство возвращает количество символов в строке, включая пробелы и специальные символы.

Пример:

let text = 'Я изучаю JavaScript';
console.log(text.length); // Выведет: 18

Практика:
Попробуйте написать функцию, которая проверяет, является ли строка пустой:

function isEmpty(str) {
  return str.length === 0;
}
console.log(isEmpty('')); // true
console.log(isEmpty('Hello')); // false

2. Метод .toUpperCase()

Этот метод преобразует все символы строки в верхний регистр.

Пример:

let word = 'Максим';
console.log(word.toUpperCase()); // 'МАКСИМ'

Исходная строка не изменяется! Метод возвращает новую строку.

Задача:
Напишите функцию, которая принимает имя и возвращает его в верхнем регистре:

function shoutName(name) {
  return name.toUpperCase();
}
console.log(shoutName('Анна')); // 'АННА'

3. Метод .toLowerCase()

Аналогично, этот метод преобразует строку в нижний регистр.

Пример:

let phrase = 'ЭТО JavaScript!';
console.log(phrase.toLowerCase()); // 'это javascript!'

Практика:
Создайте форму ввода, которая сохраняет данные в нижнем регистре:

let userInput = prompt('Введите ваш email: ');
let normalizedEmail = userInput.toLowerCase();
console.log(normalizedEmail); // например, 'test@mail.ru'

4. Метод .includes()

Этот метод проверяет, содержит ли строка указанную подстроку. Возвращает true или false.

Синтаксис:

строка.includes(искомая_подстрока, позиция_начала_поиска);

Пример:

let text = 'JavaScript — мощный язык';
console.log(text.includes('мощный')); // true
console.log(text.includes('Python')); // false

Особенности:

• Поиск чувствителен к регистру: 'Максим' ≠ 'максим'.
• Можно указать позицию начала поиска.

Задача:
Напишите функцию, которая проверяет, содержит ли комментарий запрещенное слово:

const forbiddenWords = ['спам', 'реклама'];
function hasForbiddenWords(comment) {
  return forbiddenWords.some(word => comment.toLowerCase().includes(word));
}

console.log(hasForbiddenWords('Это реклама!')); // true

Иммутабельность строк

Запомните: строки в JavaScript неизменяемы (иммутабельны). Любой метод, «изменяющий» строку, на самом деле создает новую строку.

Пример:

let original = 'Hello';
let newStr = original.toUpperCase();
console.log(original); // 'Hello'
console.log(newStr); // 'HELLO'

Практические задачи

Задача 1: Проверка палиндрома

Напишите функцию, которая проверяет, является ли строка палиндромом (читается одинаково слева направо и справа налево).

Решение:

function isPalindrome(str) {
  let cleaned = str.toLowerCase().replace(/ /g, '');
  return cleaned === cleaned.split('').reverse().join('');
}

console.log(isPalindrome('А роза упала на лапу Азора')); // true

Задача 2: Форматирование имени

Создайте функцию, которая принимает имя и фамилию и возвращает их в формате «Фамилия, И.».

Решение:

function formatName(firstName, lastName) {
  return `${lastName.toUpperCase()}, ${firstName[0].toUpperCase()}.`;
}

console.log(formatName('Максим', 'Габов')); // 'ГАБОВ, М.'

Задача 3: Поиск email в тексте

Напишите функцию, которая находит все email-адреса в тексте (упрощенный вариант).

function findEmails(text) {
  return text.match(/[\w.-]+@[\w.-]+\.\w+/g) || [];
}

let sampleText = 'Пишите на test@mail.ru или support@google.com';
console.log(findEmails(sampleText)); // ['test@mail.ru', 'support@google.com']

Заключение

Сегодня мы разобрали ключевые методы работы со строками. Это основа, которая пригодится в любом проекте, от валидации форм до сложных текстовых обработок.

Главное запомнить:

• Строки неизменяемы.
• .length — свойство, а не метод.
• .includes() чувствителен к регистру.

Попробуйте модифицировать задачи или создать свои.

Хотите продолжить обучение? Переходите к полному курсу по JavaScript для начинающих. Уроки 1-30 ждут вас!