Мощные методы JavaScript для эффективной работы со строками: гайд

Пройдите тест, узнайте какой профессии подходите
Сколько вам лет
0%
До 18
От 18 до 24
От 25 до 34
От 35 до 44
От 45 до 49
От 50 до 54
Больше 55

Для кого эта статья:

  • Начинающие программисты и разработчики, желающие улучшить свои навыки в JavaScript
  • Студенты курсов по веб-разработке или программированию
  • Практикующие разработчики, стремящиеся оптимизировать свой код и использовать более продвинутые методы работы со строками

    Строки в JavaScript — один из фундаментальных типов данных, с которым разработчик сталкивается ежедневно. От валидации форм до парсинга API-ответов — манипуляции со строками пронизывают весь стек веб-разработки. Многие начинающие программисты совершают критическую ошибку: используют лишь базовый набор методов, не подозревая, что JavaScript предлагает мощный арсенал инструментов для работы со строками, способный превратить 50 строк запутанного кода в элегантные 5 строк. В этом руководстве я раскрою все ключевые методы и свойства строк, которые сделают ваш код не только компактнее, но и производительнее. 🚀

Осваиваете JavaScript и хотите овладеть всеми тонкостями работы со строками? Обучение веб-разработке от Skypro — это структурированный путь от основ до продвинутых техник. Наши студенты не просто заучивают методы, а применяют их в реальных проектах, работая с опытными наставниками. Вы научитесь не только манипулировать строками, но и создавать полноценные веб-приложения с чистым, оптимизированным кодом.

Фундаментальные свойства строк в JavaScript

Строки в JavaScript — это неизменяемые (иммутабельные) последовательности символов, заключенные в одинарные (''), двойные ("") или обратные (`) кавычки. Эта иммутабельность означает, что любая операция со строкой создаёт новую строку, а не модифицирует существующую — ключевой момент для понимания производительности.

Алексей Петров, Senior JavaScript Developer

Работая над оптимизацией корпоративного дашборда, я столкнулся с проблемой: страница с отчётами загружалась целых 8 секунд. Анализ показал, что 60% времени занимала обработка и форматирование текстовых данных. Разработчик, создавший этот код, использовал множественные конкатенации в цикле для формирования таблиц — классическая ошибка:

JS
Скопировать код
let report = '';
for(let i = 0; i < 10000; i++) {
report += data[i].name + ': ' + data[i].value + '\n';
}

Замена на массив строк с последующим join() сократила время выполнения в 5 раз:

JS
Скопировать код
let reportLines = [];
for(let i = 0; i < 10000; i++) {
reportLines.push(`${data[i].name}: ${data[i].value}`);
}
let report = reportLines.join('\n');

Понимание иммутабельности строк критически важно для производительности.

Основное свойство строки в JavaScript — length, которое возвращает количество символов в строке. Важно понимать, что это свойство, а не метод, поэтому скобки не нужны:

JS
Скопировать код
const greeting = "Привет, мир!";
console.log(greeting.length); // 12

Строки в JavaScript также являются индексируемыми, что позволяет обращаться к отдельным символам с помощью квадратных скобок, но стоит помнить: индексация начинается с 0.

JS
Скопировать код
console.log(greeting[0]); // "П"
console.log(greeting[7]); // "м"

Следует отметить, что при работе с Юникод-символами могут возникнуть особые случаи. Например, эмодзи и другие составные символы требуют специального подхода:

JS
Скопировать код
const emoji = "👨‍👩‍👧‍👦";
console.log(emoji.length); // Может вернуть значение больше 1

Свойство/особенность Описание Пример
Иммутабельность Строки нельзя изменить после создания str[0] = 'X'; // Не изменит строку
Индексация Доступ к символам по индексу str[2]; // Третий символ
Юникод Полная поддержка Unicode '😊'.length; // 2 (суррогатная пара)
Литералы Три способа записи 'строка', "строка", `строка`

При работе со строками необходимо помнить о следующих ключевых особенностях:

  • Примитивный тип данных: строки — примитивы, но JavaScript автоматически преобразует их в объекты String при вызове методов.
  • Сравнение: строки сравниваются посимвольно в лексикографическом порядке.
  • Escape-последовательности: специальные символы обозначаются с помощью `, например, \n` для новой строки.
  • Шаблонные строки: обратные кавычки позволяют создавать многострочные строки и встраивать выражения с помощью ${выражение}.

Понимание этих фундаментальных свойств — основа эффективной работы со строками в JavaScript. 🔍

Пошаговый план для смены профессии

Базовые методы для трансформации строк

Трансформация строк — ежедневная задача JavaScript-разработчика. Правильный выбор метода может значительно упростить код и повысить его читаемость. Рассмотрим ключевые методы для трансформации строк, которыми должен владеть каждый.

Изменение регистра

Два базовых метода для изменения регистра — toLowerCase() и toUpperCase() — незаменимы при нормализации данных и сравнениях без учёта регистра:

JS
Скопировать код
const text = "JavaScript Методы Строк";
console.log(text.toLowerCase()); // "javascript методы строк"
console.log(text.toUpperCase()); // "JAVASCRIPT МЕТОДЫ СТРОК"

Для сравнения строк без учёта регистра используется такой паттерн:

JS
Скопировать код
if (userInput.toLowerCase() === expectedValue.toLowerCase()) {
console.log("Строки совпадают без учёта регистра");
}

Удаление пробельных символов

Методы trim(), trimStart() и trimEnd() убирают пробелы, табуляции и переносы строк с начала/конца строки:

JS
Скопировать код
const input = " данные от пользователя ";
console.log(input.trim()); // "данные от пользователя"
console.log(input.trimStart()); // "данные от пользователя "
console.log(input.trimEnd()); // " данные от пользователя"

Эти методы особенно полезны при валидации форм, предотвращая ошибки из-за случайных пробелов.

Замена подстрок

Метод replace() заменяет первое вхождение подстроки, а replaceAll() — все вхождения:

JS
Скопировать код
const text = "JavaScript — это язык JavaScript";
console.log(text.replace("JavaScript", "TypeScript")); 
// "TypeScript — это язык JavaScript"

console.log(text.replaceAll("JavaScript", "TypeScript")); 
// "TypeScript — это язык TypeScript"

Метод replace() также принимает регулярное выражение в качестве первого аргумента, что делает его чрезвычайно гибким:

JS
Скопировать код
// Замена всех цифр на X
const code = "Код доступа: 12345";
console.log(code.replace(/\d/g, "X")); // "Код доступа: XXXXX"

Форматирование строк

Современный JavaScript предлагает элегантный способ форматирования строк — шаблонные литералы с интерполяцией:

JS
Скопировать код
const name = "Алексей";
const score = 42;

// Старый способ
const message1 = "Игрок " + name + " набрал " + score + " очков";

// Современный способ
const message2 = `Игрок ${name} набрал ${score} очков`;

Иван Соколов, Frontend Team Lead

На проекте по созданию административной панели для интернет-магазина мы столкнулись с проблемой: клиент требовал мгновенного форматирования цен по мере ввода. Обычный подход с регулярными выражениями оказался громоздким:

JS
Скопировать код
function formatPrice(price) {
return price.replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₽";
}

Код работал, но его поддержка вызывала трудности. Мы применили методы строк для создания более читаемого решения:

JS
Скопировать код
function formatPrice(price) {
// Удаляем нечисловые символы и конвертируем в число
const cleanNumber = Number(price.replace(/[^\d]/g, ''));

// Форматируем с разделителями тысяч и валютой
return new Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'RUB',
minimumFractionDigits: 0
}).format(cleanNumber);
}

Производительность улучшилась, а код стал понятнее для новых членов команды. Этот случай научил нас: иногда стоит отказаться от "умных" регулярных выражений в пользу более читаемых встроенных методов.

Метод Применение Совместимость Особенности
toLowerCase() Приведение к нижнему регистру Все браузеры Учитывает локаль
toUpperCase() Приведение к верхнему регистру Все браузеры Учитывает локаль
trim() Удаление пробелов с обеих сторон ES5+ Не меняет исходную строку
replace() Замена первого вхождения Все браузеры Поддерживает регулярные выражения
replaceAll() Замена всех вхождений ES2021+ Требует полифил для старых браузеров
padStart()/padEnd() Дополнение строки до нужной длины ES8+ Удобно для выравнивания текста

Дополнительные методы для трансформации, которые стоит знать:

  • padStart(length, padString) и padEnd(length, padString) — дополняют строку до указанной длины
  • repeat(count) — повторяет строку указанное количество раз
  • concat(str1, str2, ...) — соединяет строки (хотя оператор + обычно предпочтительнее)
  • toString() — преобразует другие типы в строку

Освоение этих методов значительно упрощает манипуляции со строками. Вместо сложных алгоритмов используйте встроенные методы — ваш код станет чище и производительнее. 💪

Поиск и извлечение подстрок: эффективные техники

Поиск и извлечение информации из строк — это задача, с которой разработчики сталкиваются постоянно: от парсинга URL-параметров до обработки пользовательского ввода. JavaScript предлагает набор мощных методов, специально созданных для этих целей. 🔍

Методы поиска в строках

Для обнаружения подстрок в JavaScript существует несколько ключевых методов:

JS
Скопировать код
const text = "JavaScript — мощный язык для веб-разработки";

// Проверка наличия подстроки
console.log(text.includes("JavaScript")); // true
console.log(text.includes("Python")); // false

// Определение,startsWith ли строка с подстроки
console.log(text.startsWith("Java")); // true

// Определение, заканчивается ли строка подстрокой
console.log(text.endsWith("разработки")); // true

Для поиска позиции подстроки используются методы indexOf() и lastIndexOf():

JS
Скопировать код
// Поиск первого вхождения
const firstPos = text.indexOf("язык");
console.log(firstPos); // 19

// Поиск последнего вхождения
const text2 = "JavaScript использует JavaScript-синтаксис";
const lastPos = text2.lastIndexOf("JavaScript");
console.log(lastPos); // 18

// Проверка наличия (альтернатива includes)
if (text.indexOf("Python") === -1) {
console.log("Подстрока не найдена");
}

Извлечение подстрок

JavaScript предоставляет три основных метода для извлечения части строки:

JS
Скопировать код
const url = "https://example.com/path/to/resource?param=value";

// substring(start, end) – извлекает символы между start и end
const domain = url.substring(8, 19);
console.log(domain); // "example.com"

// slice(start, end) – похож на substring, но поддерживает отрицательные индексы
const protocol = url.slice(0, 5);
console.log(protocol); // "https"

const extension = url.slice(-5); // 5 символов с конца
console.log(extension); // "value"

// substr(start, length) – извлекает length символов, начиная с позиции start
// Устаревший метод, не рекомендуется к использованию
const pathPart = url.substr(20, 10);
console.log(pathPart); // "path/to/re"

Важно отметить различия между этими методами:

  • substring() — не принимает отрицательные индексы и автоматически меняет местами аргументы, если start > end
  • slice() — более гибкий, поддерживает отрицательные индексы (отсчет от конца строки)
  • substr() — устаревший метод, который все еще работает, но лучше использовать substring() или slice()

Разделение строк

Метод split() разбивает строку на массив подстрок по указанному разделителю:

JS
Скопировать код
const csvLine = "John,Doe,35,New York";
const data = csvLine.split(",");
console.log(data); // ["John", "Doe", "35", "New York"]

// Ограничение количества элементов
const limitedData = csvLine.split(",", 2);
console.log(limitedData); // ["John", "Doe"]

// Разбиение на символы
const chars = "Hello".split("");
console.log(chars); // ["H", "e", "l", "l", "o"]

Метод split() особенно полезен при парсинге данных формата CSV, разборе URL-параметров или обработке пользовательского ввода.

Практические примеры поиска и извлечения

Рассмотрим несколько типичных задач:

JS
Скопировать код
// Извлечение параметров из URL
function getUrlParam(url, param) {
const queryString = url.split('?')[1] || '';
const params = queryString.split('&');

for (const p of params) {
const [key, value] = p.split('=');
if (key === param) {
return value;
}
}
return null;
}

const testUrl = "https://example.com/search?query=javascript&page=2&limit=10";
console.log(getUrlParam(testUrl, "query")); // "javascript"
console.log(getUrlParam(testUrl, "page")); // "2"

// Извлечение имени файла из пути
function getFileName(path) {
// Находим последний слеш
const lastSlash = path.lastIndexOf('/');
if (lastSlash === -1) {
return path; // Слешей нет, возвращаем всю строку
}

return path.slice(lastSlash + 1);
}

console.log(getFileName("/users/documents/report.pdf")); // "report.pdf"

При работе со строками важно помнить о производительности, особенно при обработке больших объемов текста:

  • Методы indexOf() и includes() быстрее, чем регулярные выражения для простого поиска.
  • При множественных операциях со строками используйте промежуточные массивы и join(), а не конкатенацию в цикле.
  • Для сложных задач поиска и извлечения лучше использовать регулярные выражения.

Эффективное использование методов поиска и извлечения подстрок поможет вам писать более чистый и производительный код. 🚀

Регулярные выражения в обработке строковых данных

Регулярные выражения (RegExp) — мощный инструмент для работы со строками, который значительно расширяет возможности поиска и обработки текста. Хотя многие разработчики избегают регулярных выражений из-за их сложного синтаксиса, овладение ими открывает двери к элегантным решениям сложных задач обработки текста. 🧠

Основы регулярных выражений в JavaScript

В JavaScript регулярные выражения создаются либо с помощью литерального синтаксиса, либо с помощью конструктора RegExp:

JS
Скопировать код
// Литеральная нотация
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

// Конструктор RegExp
const dynamicRegex = new RegExp(`^${username}\\d+$`);

Литеральная нотация предпочтительнее в большинстве случаев, но конструктор RegExp полезен, когда паттерн создается динамически на основе переменных.

Методы строк для работы с регулярными выражениями

JavaScript предлагает несколько методов строк, которые принимают регулярные выражения:

JS
Скопировать код
const text = "Контактные данные: email@example.com, телефон: +7 (123) 456-78-90";

// match() – возвращает массив совпадений
const emails = text.match(/[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}/g);
console.log(emails); // ["email@example.com"]

// matchAll() – возвращает итератор всех совпадений с группами захвата
const phoneRegex = /\+(\d+)\s*\((\d+)\)\s*(\d+)-(\d+)-(\d+)/g;
const phones = [...text.matchAll(phoneRegex)];
console.log(phones[0][0]); // "+7 (123) 456-78-90"
console.log(phones[0][1]); // "7" (код страны)

// search() – возвращает индекс первого совпадения или -1
const emailPos = text.search(/email/);
console.log(emailPos); // 19

// replace() – заменяет совпадения
const censored = text.replace(/\d/g, "*");
console.log(censored); // "Контактные данные: email@example.com, телефон: +* (***) ***-**-**"

// split() с регулярным выражением
const words = text.split(/[,:\s]+/);
console.log(words); // ["Контактные", "данные", "email@example.com", "телефон", "+7", "(123)", "456-78-90"]

Флаги регулярных выражений

Флаги модифицируют поведение регулярных выражений:

  • g (global) — поиск всех совпадений, а не только первого
  • i (ignore case) — игнорирование регистра
  • m (multiline) — ^ и $ соответствуют началу и концу каждой строки, а не всего текста
  • s (dotall) — . соответствует также символам новой строки
  • u (unicode) — включает поддержку Unicode
  • y (sticky) — поиск с точного положения lastIndex
JS
Скопировать код
const text = `Строка 1
Строка 2
Строка 3`;

// Без флага m
console.log(/^Строка/.test(text)); // true (совпадает только первая строка)
console.log(/^Строка 2/.test(text)); // false

// С флагом m
console.log(/^Строка 2/m.test(text)); // true (работает для каждой строки)

// Флаг i для игнорирования регистра
console.log(/строка/i.test("Строка")); // true

Группы захвата и обратные ссылки

Скобки () в регулярных выражениях создают группы захвата, которые можно использовать для извлечения частей совпадения или для обратных ссылок:

JS
Скопировать код
const htmlTag = "<div class='container'>Содержимое</div>";

// Извлечение атрибутов и содержимого
const tagRegex = /<(\w+)\s+class='([^']+)'>(.+?)<\/\1>/;
const match = htmlTag.match(tagRegex);

console.log(match[1]); // "div" (имя тега)
console.log(match[2]); // "container" (значение атрибута class)
console.log(match[3]); // "Содержимое" (содержимое тега)

// Замена с использованием групп захвата
const swapNames = "Иванов Иван";
const swapped = swapNames.replace(/(\w+)\s+(\w+)/, "$2 $1");
console.log(swapped); // "Иван Иванов"

Задача Регулярное выражение Пример использования
Проверка email /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,6}$/ emailRegex.test("user@example.com")
Извлечение URL /https?://[^\s]+/g text.match(urlRegex)
Валидация пароля /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/ passwordRegex.test("Passw0rd!")
Форматирование телефона /(\d{3})(\d{3})(\d{4})/ "1234567890".replace(phoneRegex, "($1) $2-$3")
Удаление HTML-тегов /<[^>]*>/g html.replace(stripTagsRegex, "")

Практические советы по использованию регулярных выражений

  1. Начинайте с малого: сначала создавайте и тестируйте простые части выражения, постепенно наращивая сложность.
  2. Используйте инструменты тестирования: такие сайты как regex101.com позволяют визуально отлаживать регулярные выражения.
  3. Оптимизируйте для производительности: избегайте вложенных квантификаторов (* и +) и обратных ссылок в больших текстах.
  4. Комментируйте сложные выражения: используйте флаг x для режима с комментариями или поясняйте в коде.
  5. Учитывайте границы: \b помогает найти целые слова, а не части слов.

Регулярные выражения — один из тех инструментов, который с практикой становится все более мощным. Не пытайтесь запомнить все синтаксические конструкции — важнее понимать основные принципы и уметь находить решения для конкретных задач. 🔧

Практические задачи со строками: от простого к сложному

Лучший способ освоить методы и свойства строк в JavaScript — это решение практических задач. В этом разделе я предлагаю набор упражнений возрастающей сложности, которые помогут закрепить изученный материал и продемонстрируют практическое применение строковых операций. 💡

Базовые задачи со строками

Задача 1: Инвертирование строки

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

JS
Скопировать код
function reverseString(str) {
// Решение 1: Преобразуем в массив, переворачиваем и соединяем
return str.split('').reverse().join('');

// Решение 2: Через цикл (более производительное)
// let result = '';
// for (let i = str.length – 1; i >= 0; i--) {
// result += str[i];
// }
// return result;
}

console.log(reverseString("JavaScript")); // "tpircSavaJ"

Задача 2: Подсчёт гласных

Напишите функцию, которая подсчитывает количество гласных в строке.

JS
Скопировать код
function countVowels(str) {
const vowels = "аеёэоуыиюяaeiou";
let count = 0;

// Преобразуем строку в нижний регистр для сравнения
const lowerStr = str.toLowerCase();

for (let char of lowerStr) {
if (vowels.includes(char)) {
count++;
}
}

return count;
}

console.log(countVowels("Привет, мир!")); // 3
console.log(countVowels("JavaScript")); // 3

Задачи среднего уровня

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

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

JS
Скопировать код
function isPalindrome(str) {
// Удаляем не-буквенные символы и приводим к нижнему регистру
const cleanStr = str.replace(/[^a-zA-Zа-яА-Я0-9]/g, '').toLowerCase();

// Сравниваем с перевёрнутой версией
const reversedStr = cleanStr.split('').reverse().join('');

return cleanStr === reversedStr;
}

console.log(isPalindrome("А роза упала на лапу Азора")); // true
console.log(isPalindrome("JavaScript")); // false
console.log(isPalindrome("level")); // true

Задача 4: Форматирование номера кредитной карты

Напишите функцию, которая маскирует номер кредитной карты, оставляя только последние 4 цифры видимыми.

JS
Скопировать код
function maskCreditCard(cardNumber) {
// Удаляем все нечисловые символы
const digitsOnly = cardNumber.replace(/\D/g, '');

// Оставляем последние 4 цифры видимыми
const lastFour = digitsOnly.slice(-4);
const maskedPart = '*'.repeat(digitsOnly.length – 4);

return maskedPart + lastFour;
}

console.log(maskCreditCard("4111-1111-1111-1111")); // "************1111"
console.log(maskCreditCard("4111 1111 1111 1111")); // "************1111"

Продвинутые задачи

Задача 5: Валидация и форматирование URL

Напишите функцию, которая проверяет, является ли строка действительным URL, и форматирует его, добавляя протокол http://, если он отсутствует.

JS
Скопировать код
function validateAndFormatURL(url) {
// Регулярное выражение для проверки URL
const urlRegex = /^(https?:\/\/)?([a-zA-Z0-9][-a-zA-Z0-9]*(\.[a-zA-Z0-9][-a-zA-Z0-9]*)+)(\/[a-zA-Z0-9\-._~:/?#[\]@!$&'()*+,;=]*)?$/;

if (!urlRegex.test(url)) {
return "Недействительный URL";
}

// Добавляем протокол, если отсутствует
if (!url.startsWith("http://") && !url.startsWith("https://")) {
return "http://" + url;
}

return url;
}

console.log(validateAndFormatURL("example.com")); // "http://example.com"
console.log(validateAndFormatURL("https://example.com")); // "https://example.com"
console.log(validateAndFormatURL("invalid url")); // "Недействительный URL"

Задача 6: Парсинг CSV-данных

Напишите функцию для разбора CSV-строки в массив объектов, используя первую строку как заголовки.

JS
Скопировать код
function parseCSV(csvString, delimiter = ',') {
const lines = csvString.trim().split('\n');
const headers = lines[0].split(delimiter);
const result = [];

for (let i = 1; i < lines.length; i++) {
const values = lines[i].split(delimiter);
const obj = {};

for (let j = 0; j < headers.length; j++) {
// Обрезаем возможные кавычки и пробелы
const header = headers[j].trim().replace(/^["'](.*)["']$/, '$1');
let value = values[j] ? values[j].trim().replace(/^["'](.*)["']$/, '$1') : '';

// Пытаемся преобразовать числовые значения
if (!isNaN(value) && value !== '') {
value = Number(value);
}

obj[header] = value;
}

result.push(obj);
}

return result;
}

const csvData = `name,age,city
Alice,25,New York
Bob,30,London
Charlie,22,Paris`;

console.log(parseCSV(csvData));
/*
[
{ name: 'Alice', age: 25, city: 'New York' },
{ name: 'Bob', age: 30, city: 'London' },
{ name: 'Charlie', age: 22, city: 'Paris' }
]
*/

Экспертный уровень

Задача 7: Шаблонизатор

Создайте простой шаблонизатор, который заменяет плейсхолдеры вида ${name} на значения из объекта.

JS
Скопировать код
function render(template, data) {
// Используем регулярное выражение для поиска всех плейсхолдеров
return template.replace(/\${([^{}]*)}/g, (match, key) => {
// Разбиваем ключ на части для доступа к вложенным свойствам
const keys = key.trim().split('.');
let value = data;

// Проходим по цепочке свойств
for (const k of keys) {
if (value === undefined || value === null) {
return match; // Возвращаем оригинальный плейсхолдер, если путь неверный
}
value = value[k];
}

return value !== undefined ? value : match;
});
}

const template = `
<div>
<h1>${title}</h1>
<p>${user.name} (${user.email})</p>
<ul>
${user.skills.map(skill => `<li>${skill}</li>`).join('')}
</ul>
</div>
`;

const data = {
title: "Профиль пользователя",
user: {
name: "Иван Петров",
email: "ivan@example.com",
skills: ["JavaScript", "HTML", "CSS"]
}
};

console.log(render(template, data));

Задача 8: Лексический анализатор

Напишите функцию-токенайзер, которая разбивает строку кода JavaScript на токены (идентификаторы, числа, операторы, строки).

JS
Скопировать код
function tokenize(code) {
const tokens = [];
let current = 0;

while (current < code.length) {
let char = code[current];

// Пропускаем пробельные символы
if (/\s/.test(char)) {
current++;
continue;
}

// Числа
if (/[0-9]/.test(char)) {
let value = '';
while (/[0-9\.]/.test(char)) {
value += char;
char = code[++current];
}
tokens.push({ type: 'number', value });
continue;
}

// Строки в кавычках
if (char === '"' || char === "'" || char === '`') {
const quote = char;
let value = '';
char = code[++current];

while (char !== quote) {
if (char === '\\') {
// Обработка экранированных символов
char = code[++current];
}
value += char;
char = code[++current];
}

tokens.push({ type: 'string', value });
current++;
continue;
}

// Идентификаторы
if (/[a-zA-Z_$]/.test(char)) {
let value = '';
while (/[a-zA-Z0-9_$]/.test(char)) {
value += char;
char = code[++current];
}

// Проверяем, является ли идентификатор ключевым словом
const keywords = ['let', 'const', 'var', 'function', 'return', 'if', 'else', 'for', 'while'];
if (keywords.includes(value)) {
tokens.push({ type: 'keyword', value });
} else {
tokens.push({ type: 'identifier', value });
}
continue;
}

// Операторы
if (/[+\-*\/=<>!&|^%]/.test(char)) {
let value = char;
const nextChar = code[current + 1];

// Проверяем двухсимвольные операторы
if (nextChar && /[=<>&|]/.test(nextChar) && 
((char === '=' && nextChar === '=') || 
(char === '!' && nextChar === '=') ||
(char === '<' && nextChar === '=') ||
(char === '>' && nextChar === '=') ||
(char === '&' && nextChar === '&') ||
(char === '|' && nextChar === '|'))) {
value += nextChar;
current += 2;
} else {
current++;
}

tokens.push({ type: 'operator', value });
continue;
}

// Разделители
if (/[(){}\[\],;:.]/.test(char)) {
tokens.push({ type: 'punctuation', value: char });
current++;
continue;
}

// Неизвестный символ
tokens.push({ type: 'unknown', value: char });
current++;
}

return tokens;
}

const code = 'const greeting = "Hello, " + name + "!";';
console.log(tokenize(code));

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

Работа со строками в JavaScript — это фундаментальный навык, который отличает обычного кодера от мастера. Освоив весь арсенал строковых методов и свойств, вы не только сокращаете количество кода, но и делаете его более читаемым и производительным. Помните, что большинство реальных задач программирования так или иначе связаны с обработкой текста — от валидации форм до анализа данных. Инвестируйте время в глубокое понимание строковых операций, и это многократно окупится в вашей карьере разработчика.

Загрузка...