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

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

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

const fruits = "apple,orange,banana".split(',');
console.log(fruits); // ["apple", "orange", "banana"]
// И никаких лишних запятых!

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

const fruits = " apple , orange , banana ".split(',').map(fruit => fruit.trim());
console.log(fruits); // ["apple", "orange", "banana"]
// Вуаля, все бананы на месте!

Нюансы, которые важно учитывать

Появление пустых строк

Пустые строки образуются каждый раз, когда между запятыми нет данных:

const colors = "red,,blue".split(',');
console.log(colors); // ["red", "", "blue"]
// Может ли цвет быть пустым?

Если вам не нужны пустые строки, исключите их с помощью .filter(Boolean):

const colors = "red,,blue".split(',').filter(Boolean);
console.log(colors); // ["red", "blue"]
// Так гораздо лучше: только красный и синий, без лишних размышлений.

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

Ограничение количества подстрок через лимит

Установите параметр limit, чтобы контролировать количество подстрок в результате:

const data = "one,two,three,four".split(',', 2);
console.log(data); // ["one", "two"]
// Извините, третий и четвёртый, но не в этот раз.

Различные разделители для различных данных

Используйте регулярные выражения, если разделители неоднородны:

const mixDelimited = "One, Two and Three; Four".split(/[,;] */);
console.log(mixDelimited); // ["One", "Two and Three", "Four"]
// Ценим многообразие, как и положено!

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

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

Строка: "💎,💙,💚,💛"

.split(',') работает как магия, превращая строку в массив из камней:

gemsArray = string.split(',');

В итоге вы получаете массив, в котором каждый камень сияет отдельно:

Массив: [💎, 💙, 💚, 💛]

🔓 Разбивка строки подобна магии: вы освобождаете камни для новых творческих процессов.

Сложности продвинутого уровня

Работа с данными в кавычках

Если вы хотите сохранить данные в кавычках в исходном виде:

const quoted = '"apple","orange","banana", "kiwi"';
const preserved = quoted.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g);
console.log(preserved); // ["apple", "orange", "banana", "kiwi"]
// У каждого фрукта свои секреты!

Борьба с CSV-монстром

Данные в формате CSV могут быть изощрёнными из-за наличия запятых внутри значений. Простой .split(',') может работать некорректно:

const csvData = 'John Doe, "New York, NY", 30';
// Ой, .split(',') разделил "New York, NY" на две части. Этого мы не хотели!

В таком случае лучше пользоваться проверенными библиотеками, такими как PapaParse, или использовать отрицательный просмотр вперёд в регулярных выражениях для точного разбивания данных.

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

1. String.prototype.split() – JavaScript | MDN — подробное руководство по методу .split().
2. JavaScript String split() Method — пошаговое описание основ метода .split() в JavaScript.
3. Методы массивов — профессиональное руководство по методам split и join, а также другим методам для работы с массивами.
4. Как разбить строку по нескольким разделителям в JavaScript? – Stack Overflow — реальный опыт разбиения строк на подстроки с использованием нескольких разделителей.
5. Справочник по функциям в JavaScript | Codecademy — краткое руководство и примеры для работы со строками в JavaScript, включая split.
6. Работаем со строками в JavaScript | DigitalOcean — практическое руководство по обработке строк и использованию метода split().