Как преобразовать массив в строку с запятыми в JavaScript

Вы можете использовать встроенную функцию в прототипе массива, чтобы объединить массив в виде строки, разделенной запятыми в JavaScript.

Объединение элементов массива в виде строки в JavaSript

Одним из наиболее полезных встроенных методов массива JavaScript является .join () (Array.prototype.join()), который возвращает строковый примитив.

Метод join() создает и возвращает новую строку, объединяя все элементы в массиве (или« подобном массиву объекту ), разделенных запятыми или указанной строкой-разделителем». - MDN Docs

Вы можете использовать любой разделитель, какой захотите. Фактически, разделительной строкой может быть что угодно, любое количество символов.

Это означает, что ваш массив JavaScript легко превратить в формат списка, разделенного запятыми, независимо от того, хотите ли вы добавить только запятую или запятую и пробел.

Строка с запятыми

Если вы хотите, чтобы в качестве разделителя между элементами в списке использовалась только запятая (,), используйте .join(",") для преобразования массива в строку.

Как видите, после последнего элемента никогда не будет лишней запятой, что означает, что весь ваш массив теперь объединен в одну строку.

Строка с запятой и пробелом

Фактически вы можете указать любой разделитель, который хотите использовать между элементами списка, поэтому вы можете добавить запятую и пробел с помощью .join(", ").

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

По умолчанию `.join()` - запятая без пробела

Если вам просто нужна запятая без пробела, например, когда вы создаете значения, разделенные запятыми (файл CSV) со значениями, разделенными одной запятой, тогда вы можете использовать .join() (Array.prototype.join()) без аргументов:

Это поведение по умолчанию .join() - это то, что вам нужно запомнить. Я рекомендую всегда использовать .join(","), чтобы сохранить простой код.

Особые случаи при объединении массивов с запятыми

Вы, вероятно, уже можете догадаться, что вернет .join(), когда вы вызовете его в массиве, содержащем только один элемент: вы получите этот элемент обратно в виде строки.

Если в массиве только один элемент, то этот элемент будет возвращен без использования разделителя. - MDN Docs

Если массив пуст, то в результате вызова .join(): [].join()==="" // true вы получите пустую строку ("").

Если arr.length равно 0, возвращается пустая строка. - MDN Docs

Вы также получите пустую строку ("") для замены любого отдельного элемента в массиве: undefined, null или пустой массив ([]).

Если элементом является undefined, null или пустой массив [], он преобразуется в пустую строку. - MDN Docs

Вы можете получить лишние запятые, если они вам не нужны, если в массиве есть значения null или undefined.

С другой стороны, возможно, вам действительно нужны недостающие предметы. Если да, вы можете указать, какие элементы отсутствуют, с помощью пустых строк (""), undefined или null.

Соединить массив в виде строки с запятыми

Когда вам нужно объединить все элементы в массиве JavaScript, чтобы сформировать список значений, разделенных запятыми, используйте .join(",") или, что эквивалентно, просто .join() без каких-либо аргументов. Результатом всегда будет строка.

Слово для мудрых: .join() (Array.prototype.join()) использует преобразование строк элементов, найденных в массиве.

[Описание join():] Строковые преобразования всех элементов массива объединяются в одну строку. - MDN Docs

Это означает, что вам нужно знать о методах .toString(), таких как Array.prototype.toString(), для любых объектов в массиве.

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

Если вы хотите, чтобы элементы разделялись запятой и пробелом, используйте следующий синтаксис: .join(", "). Но не используйте .join("") с пустой строкой (""), потому что это вернет все элементы, сшитые вместе, без разделителя.

Надеюсь, это руководство помогло вам разобраться в преобразовании массивов в строки, разделенные запятыми, в JavaScript.

Удачного кодирования! 👨‍🎤🌟👍🌞😊