Разделение строки по символу в JavaScript: метод split()

Быстрый ответ

Чтобы разделить строку на составные части в JavaScript, воспользуйтесь методом .split(). Допустим, вы хотите разбить строку по дефису ("-"):

let elements = "name-street-city-state-zip".split("-");
// elements: ["name", "street", "city", "state", "zip"]
// Таким образом, строка преобразована в массив!

Теперь переменная elements содержит массив элементов, полученных путем разделения исходной строки по дефису.

Разделение строки на переменные

Чтобы преобразовать отдельные части строки в независимые переменные, используйте деструктуризацию. Этот способ присваивания значений делает код более понятным:

const address = "John Doe~123 Maple Street~Anytown~NY~12345";
const [name, street, city, state, zip] = address.split("~");
// Теперь каждой части адреса присвоено своё имя.

Так каждый компонент располагается в отдельной переменной.

Деструктуризация массивов в ES6 и её особенности

Деструктуризация в ES6 позволяет напрямую присваивать значения из массива переменным. Если элементы в массиве превосходят по количеству переменные, оператор расширения ... поможет сгруппировать оставшиеся:

const data = "John Doe~123 Maple Street~Anytown~NY~12345~USA";
const [name, street, city, state, zip, ...extraInfo] = data.split("~");
// extraInfo содержит всю оставшуюся информацию.

Если количество переменных больше, чем элементов в массиве, лишние переменные получат значение undefined:

const [name, street, city, state, zip, country] = "John~Maple St~Anytown~NY".split("~");
// country: undefined — похоже, информация о стране потеряна!

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

Подробнее об этом расскажет наш спикер на видео

Зачем 'const' и почему это важно

Используйте const для объявления переменных с фиксированными значениями, чтобы не допустить непредвиденных изменений. const также указывает другим разработчикам на неизменность этой переменной.

Визуализация

Рассмотрим строку, которая разбивается по каждой точке с запятой (";"):

Исходная строка: "Earth:Blue;Mars:Red;Venus:Yellow"
После применения ';': ['Earth:Blue', 'Mars:Red', 'Venus:Yellow']

Это можно реализовать с помощью программного кода:

const planetsInfo = "Earth:Blue;Mars:Red;Venus:Yellow";
const planetColors = planetsInfo.split(';');

Процесс разбиения можно визуализировать следующим образом:

📄🔍 До: "Earth:Blue;Mars:Red;Venus:Yellow"
✂️🔍 После:  ["Earth:Blue", "Mars:Red", "Venus:Yellow"]

Каждая ";" выступает в качестве "ножниц", разрезая исходную строку на составные части.

Отладка метода split

console.log() — это основной инструмент для отладки. С его помощью можно оценить результат работы метода split:

const data = "1,2,3,4,5,6";
const splitData = data.split(",");
console.log(splitData);
// Вывод: ["1", "2", "3", "4", "5", "6"]
// Весьма просто и понятно!

Преимущество встроенных методов над сторонними библиотеками

Использование встроенных функций предшествует подключению внешних библиотек для выполнения базовых задач. .split() создан специально для быстрой и эффективной обработки строк.

Продвинутое использование и альтернативные подходы

Разбиение строки с помощью регулярных выражений

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

const complexData = "Jane;Doe|John;Doe|Peter;Parker";
const records = complexData.split(/[;|]/);
// records: ["Jane", "Doe", "John", "Doe", "Peter", "Parker"]

Обработка "хвостов" строки

Если строка завершается разделителем, в итоговый массив попадают пустые строки:

const messyString = "this,is,a,whole,lot,of,commas,,";
const messyArray = messyString.split(",");
// messyArray: ["this", "is", "a", "whole", "lot", "of", "commas", "", ""]

Метод.filter() поможет удалить пустые элементы:

const cleanerArray = messyArray.filter(el => el);
// cleanerArray: ["this", "is", "a", "whole", "lot", "of", "commas"]
// Достижение эффекта "весенней уборки" в вашем коде.

Использование split для преобразования данных

В процессе обработки данных часто требуется преобразовать строки в числа после разделения:

const numbersString = "1,2,3,4,5";
const numbers = numbersString.split(",").map(Number);
// numbers: [1, 2, 3, 4, 5]

Полезные материалы

1. String.prototype.split() – JavaScript | MDN — Подробное описание метода split().
2. Метод split() строк в JavaScript — Объяснения и примеры.
3. Как использовать метод 'split' в JavaScript | DigitalOcean — Практическое руководство.
4. Регулярные выражения :: Элегантный JavaScript — Регулярные выражения в JavaScript.
5. Регулярные выражения – JavaScript | MDN — Руководство по регулярным выражениям.
6. Строки — Глава о методах split() и join на сайте с современными учебными материалами по JavaScript.