JS: Массивы
2026-02-26 17:17 Diff
https://ru.hexlet.io/courses/js-arrays/lessons/build-strings/theory_unit

Генерация строк в циклах — задача, часто возникающая на практике. Разберем на примере функции, которая генерирует список дел. Функция принимает на вход массив дел и возвращает строку, представляющую итоговый список. Немного усложним задачу, добавив к списку заголовок и напоминание:

Как можно решить эту задачу в лоб:

  1. Создать переменную result и записать в нее Список дел на сегодня:
  2. Пройтись циклом по элементам коллекции и дописать в результирующую строку очередной элемент начинающийся с перевода строки и *
  3. Добавить в конце напоминание и вернуть result из функции

Такой способ вполне рабочий, но для большинства языков программирования максимально неэффективный. Дело в том, что конкатенация и интерполяция порождают новую строчку вместо старой. Подобная ситуация повторяется на каждой итерации. Причем строка становится все больше и больше. Копирование строк приводит к серьезному расходу памяти и может влиять на производительность. Конечно, для большинства приложений данная проблема неактуальна из-за малого объема прогоняемых данных, но более эффективный подход не сложнее в реализации и обладает рядом плюсов. Поэтому стоит сразу приучить себя работать правильно.

Правильно, в случае с динамическими языками – формировать массив, который затем с помощью метода join() можно превратить в строку:

Размер кода практически не изменился, но способ формирования результата стал другим. Вместо строки, сначала собирается массив, который затем превращается в строку с помощью метода join(). У такого подхода есть и дополнительные плюсы:

  • Такой код проще отлаживать. Данные, представленные массивом, легче вычленять визуально и программно
  • Массив — это структура, с ним можно производить дополнительные манипуляции. С готовой строкой уже ничего особо не сделать

Регулируя разделитель, строки можно объединять разными способами. Например, через запятую с пробелом:

Если каждое слово надо вывести на новой строчке, то в качестве разделителя используем символ перевода строки '\n':

Последний пример особенно важен. Новички часто допускают ошибку и добавляют перевод строки в момент формирования массива, а не в join(). Посмотрите на пример с нашей функцией buildHTMLList():