Метод массива Array join() в JavaScript на примерах

В этом руководстве вы узнаете, как использовать метод JavaScript Array join() для объединения всех элементов массива в строку, разделенную разделителем.

Метод позволяет объединить все элементы массива и возвращает новую строку:

Array.prototype.join([separator])

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

separator по умолчанию является запятая, если вы не передадите его методу join().

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

И если массив пуст, метод возвращает пустую строку.

Когда элементы массива не являются строками, метод join() преобразует их в строки перед объединением.

Обратите внимание, что метод преобразует undefined, null и пустой массив [] в пустую строку.

Примеры

Давайте рассмотрим несколько примеров использования метода join().

1) Объединение классов CSS

В следующем примере используется метод join() массива JavaScript для объединения классов CSS:

const cssClasses = ['btn', 'btn-primary', 'btn-active'];
const btnClass = cssClasses.join(' ');

console.log(btnClass);

Выход:

btn btn-primary btn-active

В этом примере у нас есть массив, содержащий список классов CSS. И мы используем метод join(), который объединяет все элементы массива cssClasses и возвращает строку классов CSS, разделенных пробелом.

2) Использование метода join() для замены всех вхождений строки

В этом примере используется метод JavaScript Array join() для замены всех вхождений пробела ' ' дефисом( - ):

const title = 'JavaScript array join example';
const url = title.split(' ')
    .join('-')
    .toLowerCase();

console.log(url);

Выход:

javascript-array-join-example

Как это работает:

• Во-первых, разделите строку title пробелом на массив, используя строковый метод split().
• Во-вторых, объедините все элементы результирующего массива в строку с помощью метода join().
• В-третьих, преобразуйте результирующую строку в нижний регистр с помощью toLowerCase().