Разделение строки на массив в JavaScript

Иногда строку нужно превратить в массив. Например, есть список тегов в одной строке, а нам нужно получить каждый тег отдельным элементом массива.

let tags = 'html,css,javascript';
let result = tags.split(',');

console.log(result);

Результат:

['html', 'css', 'javascript']

Метод split() разделил строку по запятым и вернул массив.

Что значит разделить строку

Разделить строку - значит разрезать ее на части по определенному символу или тексту.

Например, в строке ‘html,css,javascript’ части отделены запятыми.

let tags = 'html,css,javascript';

console.log(tags.split(','));

Результат:

['html', 'css', 'javascript']

Запятая здесь выступает разделителем. В итоговый массив она не попадает.

Метод split()

split() - это метод строки, который возвращает массив.

string.split(separator);

separator - это разделитель. По нему JavaScript понимает, где нужно разрезать строку.

let text = 'один-два-три';

console.log(text.split('-'));

Результат:

['один', 'два', 'три']

В этом примере разделитель - дефис.

Разделение по запятой

Часто строку делят по запятой. Так удобно обрабатывать списки.

let skills = 'HTML,CSS,JavaScript';
let skillsList = skills.split(',');

console.log(skillsList);

Результат:

['HTML', 'CSS', 'JavaScript']

Если после запятой есть пробел, его тоже лучше учесть в разделителе.

let skills = 'HTML, CSS, JavaScript';

console.log(skills.split(', '));

Результат:

['HTML', 'CSS', 'JavaScript']

Если написать только ’,’, пробелы останутся в элементах массива.

Разделение по пробелу

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

let message = 'Привет мир';

console.log(message.split(' '));

Результат:

['Привет', 'мир']

Такой вариант хорошо работает с простыми строками, где слова разделены одним пробелом.

Разделение на символы

Если передать в split() пустую строку, каждый символ станет отдельным элементом массива.

let word = 'code';

console.log(word.split(''));

Результат:

['c', 'o', 'd', 'e']

Это удобно, когда нужно пройтись по символам строки или что-то сделать с каждым символом отдельно.

Если разделитель не найден

Если разделителя в строке нет, split() вернет массив с одним элементом - всей исходной строкой.

let text = 'JavaScript';

console.log(text.split(','));

Результат:

['JavaScript']

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

Ограничение количества элементов

Вторым аргументом можно указать, сколько элементов вернуть.

let colors = 'red,green,blue';

console.log(colors.split(',', 2));

Результат:

['red', 'green']

Метод вернул только первые два элемента.

Строка не меняется

split() не изменяет исходную строку. Он возвращает новый массив.

let tags = 'html,css,javascript';
let result = tags.split(',');

console.log(tags);
console.log(result);

Результат:

html,css,javascript
['html', 'css', 'javascript']

Если результат нужен дальше, его записывают в переменную.

Итого

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

  • split() возвращает массив.
  • Разделитель указывает, где нужно разрезать строку.
  • Разделитель не попадает в итоговый массив.
  • split(”) разбивает строку на отдельные символы.
  • Исходная строка не меняется.