Как перевернуть строку в JavaScript

Введение

Палиндром — это слово или последовательность символов, которые читаются одинаково в прямом и обратном порядке (например, «РАДАР»). Частая задача на интервью и в реальной практике — проверить, является ли строка палиндромом, для чего обычно сначала создают перевёрнутую копию строки и сравнивают её с оригиналом.

Ниже описаны три основных подхода к реверсу строки в JavaScript, примеры кода, нюансы с Unicode, варианты для продвинутых случаев, критерии приёмки и набор тест-кейсов.

Как перевернуть строку в JavaScript

1. Конвертировать в массив и использовать reverse

Идея: разделить строку на массив символов, развернуть массив и собрать обратно.

Шаги:

1. Разбить строку методом split(“”).
2. Вызвать reverse() у массива.
3. Собрать обратно методом join(“”).

Код-пример (встраиваемый HTML для быстрой проверки):

Великий Переворачиватель!
Текущая строка: "Reverse This String!"
Перевернуть

Краткая запись в одну строку:

var res = str.split("").reverse().join("");

Преимущества: коротко, читаемо, хорошо работает для ASCII и большинства задач. Минусы: не учитывает сложные Unicode-графемы (эмодзи, комбинирующие знаки), поскольку split(“”) разбивает по UTF-16 code units.

2. Использовать цикл for

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

Шаги:

1. Создать пустую строку reverseString.
2. Запустить цикл for от индекса length - 1 до 0.
3. На каждой итерации добавлять текущий символ к результату.

Код-пример:

Великий Переворачиватель!
Текущая строка: "Reverse this String!"
Перевернуть

Преимущества: полная предсказуемость и контроль, работает в старых средах (ES3/ES5). Минусы: на очень длинных строках конкатенация через += может быть медленнее из-за создания промежуточных строк; в V8 и современных движках это обычно оптимизировано.

3. Использовать рекурсию

Идея: рекурсивно обрабатывать подстроку, отсекая первый символ и присоединяя его в конце при возврате.

Алгоритм:

1. Функция принимает строку str.
2. Базовый случай: если строка пустая, вернуть пустую строку.
3. Иначе вернуть reverseString(str.substr(1)) + str.charAt(0).

Код-пример:

Великий Переворачиватель!
Текущая строка: "Reverse this String!"
Перевернуть

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

Ключевые нюансы и когда методы не подходят

Important: При работе со строками в JavaScript всегда помните о Unicode и кодовых единицах UTF-16.

• Проблемы с эмодзи и составными символами: символы, представленные парой суррогатных code units или комбинированные графемы (например, буква + диакритика), будут разбиты некорректно при split(“”) или индексировании по позициям.
• Нормализация: строки в разных формах Unicode (NFC vs NFD) могут вести себя по-разному; для корректного сравнения палиндромов стоит привести строки к одной форме: str.normalize(‘NFC’).
• Большие строки: рекурсия может вызвать RangeError: Maximum call stack size exceeded; цикл или методы с массивом предпочтительнее.
• Производительность в старых браузерах: метод split + reverse + join доступен с ES5 и хорошо поддерживается; синтаксис spread […str] и Array.from лучше работает с Unicode (см. ниже), но доступен не во всех средах.

Альтернативные подходы и улучшения

• Array.from(str).reverse().join(“”) — Array.from корректнее разбивает по Unicode-символам, в том числе для большинства эмодзи и комбинированных символов.

var res = Array.from(str).reverse().join("");

• […str].reverse().join(“”) — spread-оператор похож на Array.from и хорошо работает в современных средах:

var res = [...str].reverse().join("");

• Использовать Intl.Segmenter (в поддерживаемых браузерах) для сегментации по пользовательским границам (слова/графемы), полезно для локализации и сложных скриптов.

• Нормализация перед реверсом:

var normalized = str.normalize('NFC');
var reversed = Array.from(normalized).reverse().join('');

Как выбрать метод — мини-методология

1. Требуется поддержка эмодзи/композитов? — используйте Array.from или spread.
2. Ограничена среда выполнения (старые браузеры)? — используйте цикл for или split/reverse/join (ES5).
3. Важна простота и краткость? — split().reverse().join().
4. Боитесь переполнения стека? — не используйте рекурсию для очень длинных строк.

Тест-кейсы и критерии приёмки

Критерии приёмки:

• Основной функционал: строка полностью реверсируется без потери символов.
• Unicode: единичные эмодзи и составные символы должны сохраняться как единые графемы при использовании Array.from или Intl.Segmenter.
• Производительность: операция для строк до 100k символов не должна приводить к переполнению стека и должна выполняться разумно (время зависит от среды).

Минимальные тесты:

1. ASCII: “hello” → “olleh”.
2. С учётом пробелов: “a b c” → “c b a”.
3. Пустая строка: “” → “”.
4. Эмодзи: “🙂🙃” → “🙃🙂” (проверять с Array.from или spread).
5. Композиция: “ñ” (латинская n + тильда) — проверить нормализацию.
6. Очень длинная строка (например, 1e6 символов) — проверить, не падает ли стек и время выполнения.

Сниппет-чеатшит (короткие варианты)

• Короткий и часто используемый:

const rev = s => s.split('').reverse().join('');

• Лучше для Unicode (графемы):

const revUnicode = s => Array.from(s).reverse().join('');

• Через spread (современные среды):

const revSpread = s => [...s].reverse().join('');

• Через цикл (ES5-совместимо):

function revFor(s) {
  var res = '';
  for (var i = s.length - 1; i >= 0; i--) res += s[i];
  return res;
}

Совместимость и советы по миграции

• split(‘’).reverse().join(‘’) — поддерживается почти повсеместно (ES5+).
• Array.from и spread — ES2015/ES6+, в старых браузерах потребуется полифилл.
• Intl.Segmenter — экспериментальная и не везде доступна (проверяйте caniuse).

Резюме

• Для большинства задач подойдет split().reverse().join().
• Для корректной работы с эмодзи и составными символами используйте Array.from() или spread (…).
• Не используйте рекурсию для очень длинных строк из-за лимитов стека.

Notes: если вы проверяете палиндромы, не забудьте предварительно нормализовать строку и привести к одному регистру: str.normalize(‘NFC’).toLowerCase(). Также удалите пробелы и знаки пунктуации, если нужно сравнивать смысловые палиндромы.

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

[wl_navigator]