join() объединяет элементы массива в одну строку.
Это удобный метод, когда нужно собрать текст из массива значений и вставить между ними разделитель.
Синтаксис
array.join()
array.join(separator)separator - строка, которая будет вставляться между элементами массива.
Что делает join()
Метод берёт элементы массива, превращает их в строку и соединяет в один результат.
const fruits = ["apple", "banana", "orange"];
console.log(fruits.join(" - ")); // "apple - banana - orange"Что возвращает join()
join() всегда возвращает строку.
const numbers = [1, 2, 3];
const result = numbers.join(", ");
console.log(result); // "1, 2, 3"
console.log(typeof result); // "string"Это главное, что важно запомнить: результатом будет не массив, а строка.
Разделитель по умолчанию
Если separator не передать, join() использует запятую.
const numbers = [1, 2, 3];
console.log(numbers.join()); // "1,2,3"Это поведение очень похоже на toString() у массива.
Свой разделитель
Вместо запятой можно передать любую строку.
const words = ["JavaScript", "is", "fun"];
console.log(words.join(" ")); // "JavaScript is fun"
console.log(words.join(" / ")); // "JavaScript / is / fun"join("") без разделителя
Если передать пустую строку, элементы склеятся без промежутков.
const letters = ["H", "e", "l", "l", "o"];
console.log(letters.join("")); // "Hello"Это частый и полезный сценарий использования метода.
Пустой массив
Если массив пустой, join() вернёт пустую строку.
const result = [].join(", ");
console.log(result); // ""join() не меняет исходный массив
Метод только собирает строку и не изменяет сам массив.
const items = ["a", "b", "c"];
const result = items.join("-");
console.log(items); // ["a", "b", "c"]
console.log(result); // "a-b-c"Числа и другие значения
Элементы массива приводятся к строке автоматически.
const values = [10, true, null];
console.log(values.join(" | ")); // "10 | true | "Это важно: null и undefined в join() превращаются в пустую строку.
undefined и пустые слоты
undefined, null и пустые слоты не дают текстового значения, но разделители между позициями всё равно остаются.
const values = [1, undefined, 3];
console.log(values.join("-")); // "1--3"const values = Array(3);
console.log(values.join("-")); // "--"Это один из нюансов, который часто выглядит неожиданно.
Вложенные массивы
Если внутри лежат другие массивы, они тоже будут превращаться в строки.
const values = [[1, 2], [3, 4]];
console.log(values.join(" | ")); // "1,2 | 3,4"Из-за этого результат иногда выглядит не так, как ожидают новички.
join() и toString()
Для массива toString() очень похоже на join(",").
const numbers = [1, 2, 3];
console.log(numbers.join()); // "1,2,3"
console.log(numbers.toString()); // "1,2,3"Но join() удобнее, потому что у него можно указать свой разделитель.
join() и split()
Эти методы часто используют в связке.
const text = "a,b,c";
const result = text.split(",").join(" - ");
console.log(result); // "a - b - c"split() разбивает строку на массив.
join() собирает массив обратно в строку.
Когда это полезно
join() удобно использовать, когда:
- нужно превратить массив в строку
- нужно вставить разделитель между элементами
- нужно собрать текст из массива слов, букв или значений
Пример:
const tags = ["js", "array", "methods"];
const text = tags.join(", ");
console.log(text); // "js, array, methods"Частые ошибки
Думать, что join() возвращает массив
const result = [1, 2, 3].join("-");
console.log(result); // "1-2-3"Это строка, а не массив.
Забывать про запятую по умолчанию
const numbers = [1, 2, 3];
console.log(numbers.join()); // "1,2,3"Если нужен другой разделитель, его нужно передать явно.
Удивляться пустым местам с undefined или empty slots
const values = [1, undefined, 3];
console.log(values.join("-")); // "1--3"Такое поведение для join() нормально.
Быстрая памятка
join()объединяет элементы массива в строку- результатом всегда будет
string - по умолчанию используется запятая
join()не меняет исходный массивnull,undefinedи пустые слоты дают пустые участки в строке
Коротко
join() - это удобный способ собрать строку из элементов массива. Главное, что стоит запомнить: метод возвращает строку, не меняет исходный массив и по умолчанию ставит между элементами запятую.