JavaScript Split - Как разбить строку на массив в JS

Как правило, строка представляет собой последовательность символов в любом языке программирования.

Давайте рассмотрим пример строки, созданной с использованием последовательности символов: «Yes, You Can DO It!». В JavaScript мы можем создать строку двумя способами:

• Использование строкового литерала как примитива

  const msg = "Yes, You Can DO It!";

   

• Использование конструктора String () как объекта

  const msg = new String("Yes, You Can DO It!");

Один интересный факт о строках в JavaScript заключается в том, что мы можем получить доступ к символам в строке, используя ее индекс. Индекс первого символа равен 0, и он увеличивается на 1. Итак, мы можем получить доступ к каждому из символов строки следующим образом:

let str = "Yes, You Can Do It!";

console.log(str[0]); // Y
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // ,

console.log(str[10]); // a

Каждый символ строки имеет собственный индекс (порядковый номер)

Помимо возможности доступа к строковым символам по их индексам, JavaScript также предоставляет множество служебных методов для доступа к символам, извлечения части строки и управления ею.

В этой статье вы узнаете о удобном строковом методе split ().

Метод split () в JavaScript

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

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

Давайте разберемся, как это работает, на примере. Вот строка, созданная с использованием строковых литералов:

let message = 'I am a Happy Go lucky Guy';

Мы можем вызвать метод split () для строки message. Давайте разделим строку на основе символа пробела (' '). Здесь символ пробела действует как разделитель.

// Split using a space character
let arr = message.split(' ');

// The array
console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"]


// Access each of the elements of the array.
console.log(arr[0]); // "I"
console.log(arr[1]); // "am"
console.log(arr[2]); // "a"
console.log(arr[3]); // "Happy"
console.log(arr[4]); // "Go",
console.log(arr[5]); // "lucky"
console.log(arr[6]); // "Guy"

Основная цель метода split () - получить интересующие вас фрагменты из строки, чтобы использовать их в любых дальнейших сценариях.

Как разбить строку по каждому символу

Вы можете разделить строку по каждому символу, используя пустую строку ('') в качестве разделителя. В приведенном ниже примере мы разбиваем ту же строку message, используя пустую строку. Результатом разделения будет массив, содержащий все символы в строке message.

console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]

💡 Обратите внимание, что разделение пустой строки ('') с использованием пустой строки в качестве разделителя возвращает пустой массив. 

''.split(''); // возвращает []

Как разбить строку на один массив

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

Когда вы вызываете метод split () для строки без разделителя, он возвращает массив, содержащий всю строку.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split()); // returns ["I am a Happy Go lucky Guy"]

💡 Обратите внимание еще раз: вызов метода split () для пустой строки ('') без разделителя вернет массив с пустой строкой. Он не возвращает пустой массив. 

Вот два примера, чтобы вы могли увидеть разницу:

// Returns an empty array
''.split(''); // returns []

// Returns an array with an empty string
''.split() // returns [""]

Как разбить строку с помощью несовпадающего символа

Обычно мы используем разделитель, который является частью строки, которую мы пытаемся разделить. Могут быть случаи, когда вы могли передать разделитель, который не является частью строки или не соответствует какой-либо ее части. В этом случае метод split () возвращает массив со всей строкой в ​​качестве элемента.

В приведенном ниже примере в строке сообщения нет символа запятой (,). Попробуем разделить строку с помощью разделительной запятой (,).

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]

Как разделиться с используя limit

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

В приведенном ниже примере мы разделяем строку, используя пробел (' ') в качестве разделителя. Мы также передаем число 4 как limit. Метод split () возвращает массив всего из четырех элементов, игнорируя остальные.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"] 

Как использовать split вместе с регулярным выражением 

Мы также можем передать регулярное выражение (regex) как разделитель методу split (). Давайте рассмотрим эту строку для разделения:

let message = 'The sky is blue. Grass is green! Do you know the color of the Cloud?';

Разделим эту строку по точке (.), Восклицательному знаку (!) И вопросительному знак у(?). Мы можем написать регулярное выражение, которое идентифицирует появление этих символов. Затем мы передаем регулярное выражение методу split() и вызываем его в указанной выше строке. 

let sentences = message.split(/[.,!,?]/);
console.log(sentences);

Получим следующий результат:

Вы можете использовать параметр limit, чтобы ограничить вывод только первыми тремя элементами, например:

sentences = message.split(/[.,!,?]/, 3);
console.log(sentences);

 💡 Если вы хотите захватить символы, используемые в регулярных выражениях в выходном массиве, вам нужно немного настроить регулярное выражение. Используйте круглые скобки для захвата совпадающих символов. Обновленное регулярное выражение будет /( [,!,?] )/.

Как заменить символы в строке с помощью метода Split() 

Вы можете решить множество интересных задач, используя метод split () в сочетании с другими методами строк и массивов. Посмотрим подро. Обычным вариантом использования может быть замена всех вхождений символа в строке другим символом.

Например, вы можете захотеть создать идентификатор HTML-элемента из значения имени. Значение имени может содержать пробел (''), но в HTML значение id не должно содержать пробелов. Сделать это можно следующим образом:

let name = 'IT Junior';
let subs = name.split(' ');
console.log(subs); // ["IT", "Junior"]

let joined = subs.join('-');
console.log(joined); // IT-Junior

ES6: Как разделить с деструктуризацией массива 

ECMAScript2015 (ES6) представил более инновационный способ извлечения элемента из массива и присвоения его переменной. Этот умный синтаксис известен как деструктуризация массива. Мы можем использовать это с методом split (), чтобы легко назначить вывод переменной с меньшим количеством кода.

let name = 'Tapas Adhikary';
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName);

Здесь мы разделяем имя и фамилию, используя пробел в качестве разделителя. Затем мы присваиваем возвращенные значения из массива паре переменных (firstName и lastName), используя синтаксис Array Destructuring.