Мощные методы JavaScript для эффективной работы со строками: гайд
Для кого эта статья:
- Начинающие программисты и разработчики, желающие улучшить свои навыки в 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, которое возвращает количество символов в строке. Важно понимать, что это свойство, а не метод, поэтому скобки не нужны:
const greeting = "Привет, мир!";
console.log(greeting.length); // 12
Строки в JavaScript также являются индексируемыми, что позволяет обращаться к отдельным символам с помощью квадратных скобок, но стоит помнить: индексация начинается с 0.
console.log(greeting[0]); // "П"
console.log(greeting[7]); // "м"
Следует отметить, что при работе с Юникод-символами могут возникнуть особые случаи. Например, эмодзи и другие составные символы требуют специального подхода:
const emoji = "👨👩👧👦";
console.log(emoji.length); // Может вернуть значение больше 1
| Свойство/особенность | Описание | Пример |
|---|---|---|
| Иммутабельность | Строки нельзя изменить после создания | str[0] = 'X'; // Не изменит строку |
| Индексация | Доступ к символам по индексу | str[2]; // Третий символ |
| Юникод | Полная поддержка Unicode | '😊'.length; // 2 (суррогатная пара) |
| Литералы | Три способа записи | 'строка', "строка", `строка` |
При работе со строками необходимо помнить о следующих ключевых особенностях:
- Примитивный тип данных: строки — примитивы, но JavaScript автоматически преобразует их в объекты String при вызове методов.
- Сравнение: строки сравниваются посимвольно в лексикографическом порядке.
- Escape-последовательности: специальные символы обозначаются с помощью
`, например,\n` для новой строки. - Шаблонные строки: обратные кавычки позволяют создавать многострочные строки и встраивать выражения с помощью
${выражение}.
Понимание этих фундаментальных свойств — основа эффективной работы со строками в JavaScript. 🔍

Базовые методы для трансформации строк
Трансформация строк — ежедневная задача JavaScript-разработчика. Правильный выбор метода может значительно упростить код и повысить его читаемость. Рассмотрим ключевые методы для трансформации строк, которыми должен владеть каждый.
Изменение регистра
Два базовых метода для изменения регистра — toLowerCase() и toUpperCase() — незаменимы при нормализации данных и сравнениях без учёта регистра:
const text = "JavaScript Методы Строк";
console.log(text.toLowerCase()); // "javascript методы строк"
console.log(text.toUpperCase()); // "JAVASCRIPT МЕТОДЫ СТРОК"
Для сравнения строк без учёта регистра используется такой паттерн:
if (userInput.toLowerCase() === expectedValue.toLowerCase()) {
console.log("Строки совпадают без учёта регистра");
}
Удаление пробельных символов
Методы trim(), trimStart() и trimEnd() убирают пробелы, табуляции и переносы строк с начала/конца строки:
const input = " данные от пользователя ";
console.log(input.trim()); // "данные от пользователя"
console.log(input.trimStart()); // "данные от пользователя "
console.log(input.trimEnd()); // " данные от пользователя"
Эти методы особенно полезны при валидации форм, предотвращая ошибки из-за случайных пробелов.
Замена подстрок
Метод replace() заменяет первое вхождение подстроки, а replaceAll() — все вхождения:
const text = "JavaScript — это язык JavaScript";
console.log(text.replace("JavaScript", "TypeScript"));
// "TypeScript — это язык JavaScript"
console.log(text.replaceAll("JavaScript", "TypeScript"));
// "TypeScript — это язык TypeScript"
Метод replace() также принимает регулярное выражение в качестве первого аргумента, что делает его чрезвычайно гибким:
// Замена всех цифр на X
const code = "Код доступа: 12345";
console.log(code.replace(/\d/g, "X")); // "Код доступа: XXXXX"
Форматирование строк
Современный JavaScript предлагает элегантный способ форматирования строк — шаблонные литералы с интерполяцией:
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 существует несколько ключевых методов:
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():
// Поиск первого вхождения
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 предоставляет три основных метода для извлечения части строки:
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() разбивает строку на массив подстрок по указанному разделителю:
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-параметров или обработке пользовательского ввода.
Практические примеры поиска и извлечения
Рассмотрим несколько типичных задач:
// Извлечение параметров из 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:
// Литеральная нотация
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
// Конструктор RegExp
const dynamicRegex = new RegExp(`^${username}\\d+$`);
Литеральная нотация предпочтительнее в большинстве случаев, но конструктор RegExp полезен, когда паттерн создается динамически на основе переменных.
Методы строк для работы с регулярными выражениями
JavaScript предлагает несколько методов строк, которые принимают регулярные выражения:
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
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
Группы захвата и обратные ссылки
Скобки () в регулярных выражениях создают группы захвата, которые можно использовать для извлечения частей совпадения или для обратных ссылок:
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, "") |
Практические советы по использованию регулярных выражений
- Начинайте с малого: сначала создавайте и тестируйте простые части выражения, постепенно наращивая сложность.
- Используйте инструменты тестирования: такие сайты как regex101.com позволяют визуально отлаживать регулярные выражения.
- Оптимизируйте для производительности: избегайте вложенных квантификаторов (* и +) и обратных ссылок в больших текстах.
- Комментируйте сложные выражения: используйте флаг x для режима с комментариями или поясняйте в коде.
- Учитывайте границы: \b помогает найти целые слова, а не части слов.
Регулярные выражения — один из тех инструментов, который с практикой становится все более мощным. Не пытайтесь запомнить все синтаксические конструкции — важнее понимать основные принципы и уметь находить решения для конкретных задач. 🔧
Практические задачи со строками: от простого к сложному
Лучший способ освоить методы и свойства строк в JavaScript — это решение практических задач. В этом разделе я предлагаю набор упражнений возрастающей сложности, которые помогут закрепить изученный материал и продемонстрируют практическое применение строковых операций. 💡
Базовые задачи со строками
Задача 1: Инвертирование строки
Напишите функцию, которая переворачивает строку. Например, "Привет" должно стать "тевирП".
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: Подсчёт гласных
Напишите функцию, которая подсчитывает количество гласных в строке.
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: Проверка палиндрома
Напишите функцию, которая определяет, является ли строка палиндромом (читается одинаково в обоих направлениях), игнорируя пробелы, знаки препинания и регистр.
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 цифры видимыми.
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://, если он отсутствует.
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-строки в массив объектов, используя первую строку как заголовки.
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} на значения из объекта.
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 на токены (идентификаторы, числа, операторы, строки).
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 — это фундаментальный навык, который отличает обычного кодера от мастера. Освоив весь арсенал строковых методов и свойств, вы не только сокращаете количество кода, но и делаете его более читаемым и производительным. Помните, что большинство реальных задач программирования так или иначе связаны с обработкой текста — от валидации форм до анализа данных. Инвестируйте время в глубокое понимание строковых операций, и это многократно окупится в вашей карьере разработчика.