JS метод String.split()


Загальний опис

String.prototype.split() є методом, який дозволяє розбити рядок на масив підрядків, використовуючи роздільник, та повертає цей масив. Цей метод є надзвичайно корисним для обробки та аналізу текстових даних. Він може використовуватися для розбивки строк на слова, фрази, або навіть окремі символи, залежно від вказаного роздільника.

Для використання split(), потрібно вказати роздільник, який буде використовуватися для розбивання рядка. Якщо роздільник не вказаний, весь рядок повернеться як один елемент масиву. Додатково можна вказати ліміт, який обмежує кількість елементів у повернутому масиві.

Приклади:

  1. Простий випадок:

    let text = "Hello, World!";
    let words = text.split(" ");
    // words: ['Hello,', 'World!']
    
  2. Використання роздільника:

    let data = "apple,orange,banana";
    let fruits = data.split(",");
    // fruits: ['apple', 'orange', 'banana']
    
  3. Розбивання по символу:

    let characters = "Hello".split("");
    // characters: ['H', 'e', 'l', 'l', 'o']
    
  4. З обмеженням довжини масиву:

    let sentence = "The quick brown fox";
    let shortSplit = sentence.split(" ", 2);
    // shortSplit: ['The', 'quick']
    
  5. Приклад з регулярним виразом:

    let text = "Hello1World2Bye3";
    let parts = text.split(/\d/);
    // parts: ['Hello', 'World', 'Bye']
    

У цьому прикладі split() використовує регулярний вираз \d, щоб розділити рядок за будь-якою цифрою. Це приклад, як split() може бути адаптований для більш складних завдань розбивання рядків.

автор: Bond

Порада

Метод String.prototype.split() дозволяє використовувати будь-який символ або навіть рядок як роздільник. Наприклад, для розбиття тексту на слова можна використовувати пробіл як роздільник: let words = "Hello World".split(" ");. Це дуже зручно для обробки текстових даних, таких як логи або вміст файлів.

автор: Bond
Порада

Ви можете контролювати кількість елементів, які повертає split(), вказавши другий аргумент. Наприклад, let data = "apple,orange,banana,grape".split(",", 2); поверне масив з першими двома елементами. Це корисно, коли потрібно обмежити обробку даних до певної кількості значень.

автор: Bond
Порада

Якщо передати порожній рядок ("") як роздільник, split() поверне масив окремих символів рядка. Це може бути корисним для задач, де потрібно обробити кожен символ окремо, наприклад: let characters = "hello".split("");.

автор: Bond
Порада

split() може приймати регулярні вирази, що дозволяє виконувати більш складні операції розділення. Наприклад, для розділення рядка за комами або крапками можна використати: let parts = "apple, orange. banana; grape".split(/[ ,.;]+/);. Це особливо корисно, коли структура даних не є однорідною або містить декілька можливих роздільників.

автор: Bond

Синтаксис

split(separator)
split(separator, limit)

Параметри

separator

Цей аргумент визначає, де саме відбуватиметься розбиття рядка. Може бути не вказаний (undefined), рядком або об'єктом з методом Symbol.split, зазвичай це регулярний вираз. Якщо separator не вказаний або є undefined, метод split() поверне масив, який містить вихідний рядок як єдиний елемент. Усі значення, які не є undefined або об'єктами з методом @@split, будуть перетворені на рядки.

автор: Bond

limit

Не від'ємне ціле число, яке визначає ліміт на кількість підрядків, що включаються до масиву. Якщо вказано, рядок розбивається на кожному входженні вказаного separator, але процес зупиняється, коли в масиві вже є limit елементів. Текст, що залишився, не включається до масиву.

автор: Bond

Повернення

array

Повертає масив рядків, розділених у кожному місці, де зустрічається вказаний роздільник у вихідному рядку. Якщо роздільник не знайдено, результатом буде масив, що містить сам вихідний рядок як єдиний елемент.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3 12 4
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі ми використовуємо метод String.prototype.split() для розділення рядка на окремі слова. Метод split() приймає роздільник, у цьому випадку пробіл " ", і повертає масив рядків. Це корисно для випадків, коли потрібно обробити окремі слова з речення.

let sentence = "Hello World, welcome to JavaScript!";
let words = sentence.split(" "); // Використання пробілу як роздільника

console.log(words); // Виводить: ["Hello", "World,", "welcome", "to", "JavaScript!"]
автор: Bond

У цьому прикладі, користувач вводить рядок та роздільник, натискає кнопку, і JavaScript-функція splitString() обробляє введені дані. Результат розділення відображається у блоку .result. Це динамічний та інтерактивний спосіб демонструвати роботу методу split().

автор: Bond

У цьому складнішому прикладі ми використовуємо String.prototype.split() для розділення рядка, що представляє дату, на окремі компоненти (день, місяць, рік). Це корисно для парсингу та обробки дат у форматі "ДД/ММ/РРРР". Метод split() в цьому випадку використовує символ "/" як роздільник.

let dateString = "19/11/2023";
let dateParts = dateString.split("/"); // Використання символу "/" як роздільника

console.log(dateParts); // Виводить: ["19", "11", "2023"]

let day = parseInt(dateParts[0]); // День
let month = parseInt(dateParts[1]); // Місяць
let year = parseInt(dateParts[2]); // Рік

console.log(`Day: ${day}, Month: ${month}, Year: ${year}`); // Виводить: Day: 19, Month: 11, Year: 2023
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід