path: root/files/uk/web/javascript/reference/global_objects/string/split/index.html

---
title: String.prototype.split()
slug: Web/JavaScript/Reference/Global_Objects/String/split
tags:
  - JavaScript
  - String
  - Регулярний вираз
  - метод
  - рядок
translation_of: Web/JavaScript/Reference/Global_Objects/String/split
---
<div>{{JSRef}}</div>

<p><span class="seoSummary">Метод <strong><code>split()</code></strong> розділяє {{jsxref("String","рядок")}} на впорядковану множину підрядків та повертає масив цих підрядків. Ділення здійснюється пошуком шаблону; цей шаблон надається першим параметром під час виклику методу.</span></p>

<div>{{EmbedInteractiveExample("pages/js/string-split.html", "taller")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</pre>

<h3 id="Параметри">Параметри</h3>

<dl>
 <dt><code><var>separator</var></code> {{optional_inline}}</dt>
 <dd>
 <p>Шаблон, що описує, де має відбуватися розбиття рядка. Параметр <code><var>separator</var></code> (роздільник) може бути простим рядком або {{jsxref("Global_Objects/RegExp", "регулярним виразом", "", 1)}}.</p>

 <ul>
  <li>Найпростішим є випадок, коли <code><var>separator</var></code> є просто одним символом; він використовується для розмежування та розбиття рядка. Наприклад, рядок, що містить значення, розділені табуляцією (<em>TSV, tab-separated values</em>), може бути розібраний за символом табуляції в якості роздільника, ось так: <code>myString.split("\t")</code>.</li>
  <li>Якщо <code><var>separator</var></code> містить множину символів, для розділення має бути знайдена вся ця послідовність.</li>
  <li>Якщо параметр <code><var>separator</var></code> не вказаний чи не зустрічається у <code><var>str</var></code>, повернений масив містить один елемент, який є цілим рядком.</li>
  <li>Якщо <code><var>separator</var></code> знаходиться на початку (чи в кінці) рядка, він все одно матиме ефект роздільника. Результатом буде порожній (тобто, нульової довжини) рядок, який з'явиться на першій (чи останній) позиції поверненого масиву.</li>
  <li>Якщо <code><var>separator</var></code> є порожнім рядком (<code>""</code>), <code><var>str</var></code> перетворюється на масив з кожного зі своїх "символів" UTF-16.</li>
 </ul>

 <div class="blockIndicator warning">
 <p><strong>Застереження:</strong> Коли в якості роздільника використовується порожній рядок (<code>""</code>), рядок <strong>не</strong> розбивається на символи<em>, що сприймаються користувачем</em> (<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">кластери графем</a>), чи символи Юнікоду (коди символів), а лише на кодові одиниці UTF-16. Це розбиває <a href="http://unicode.org/faq/utf_bom.html#utf16-2">сурогатні пари</a>. Дивіться <a href="https://stackoverflow.com/a/34717402">“Як перетворити рядок на масив символів у JavaScript?” на StackOverflow</a>.</p>
 </div>
 </dd>
 <dt><code><var>limit</var></code> {{optional_inline}}</dt>
 <dd>
 <p>Невід'ємне ціле число, що обмежує кількість частин. Якщо надане, метод розбиває рядок на кожному знайденому роздільнику <code><var>separator</var></code>, але зупиняється, коли у масив була додана кількість елементів <code><var>limit</var></code>. Будь-який текст, що лишився, взагалі не буде доданий у масив.</p>

 <ul>
  <li>Масив може містити меншу за <code>limit</code> кількість елементів, якщо рядок закінчився раніше, ніж було досятнуто значення <em><code>limit</code></em>.</li>
  <li>Якщо <code><var>limit</var></code> дорівнює <code>0</code>, розділення рядка не виконується.</li>
 </ul>
 </dd>
</dl>

<h3 id="Значення_що_повертається">Значення, що повертається</h3>

<p>{{jsxref("Array", "Масив")}} рядків, відділених у кожній точці, де роздільник <code>separator</code> зустрічається у наданому рядку.</p>

<h2 id="Опис">Опис</h2>

<p>Коли <code>separator</code> знайдено, він видаляється з рядка, а підрядки повертаються у масиві.</p>

<p>Якщо <code>separator</code> є регулярним виразом із захопленими групами, то під час кожного збігу з <code>separator</code> результати (в тому числі undefined) захоплених груп додаються у масив результатів.</p>

<p>Якщо роздільник є масивом, то він примусово приводиться до рядка та використовується в якості роздільника.</p>

<h2 id="Приклади">Приклади</h2>

<h3 id="Використання_split">Використання <code>split()</code></h3>

<div id="split_empty_string">
<p>Коли рядок порожній, <code>split()</code> повертає масив, що містить один порожній рядок, а не порожній масив. Якщо і рядок, і роздільник є порожніми рядками, повертається порожній масив.</p>

<pre class="brush: js">const myString = ''
const splits = myString.split()

console.log(splits)

// ↪ [""]
</pre>
</div>

<p>Наступний приклад визначає функцію, яка розбиває рядок на масив рядків, використовуючи вказаний роздільник. Після розбиття рядка функція виводить повідомлення, які містять початковий рядок (до розбиття), використаний роздільник, кількість елементів масиву та окремі елементи масиву.</p>

<pre class="brush: js">function splitString(stringToSplit, separator) {
  const arrayOfStrings = stringToSplit.split(separator)

  console.log('Початковий рядок: ', stringToSplit)
  console.log('Роздільник: ', separator)
  console.log('Масив містить ', arrayOfStrings.length, ' елементів: ', arrayOfStrings.join(' / '))
}

const tempestString = 'Який чудесний світ новий оцей де отакі є люди!'
const monthString = 'Січ,Лют,Берез,Квіт,Трав,Черв,Лип,Серп,Верес,Жовт,Листоп,Груд'

const space = ' '
const comma = ','

splitString(tempestString, space)
splitString(tempestString)
splitString(monthString, comma)
</pre>

<p>Цей приклад виводить наступний результат:</p>

<pre class="brush: js">Початковий рядок:  Який чудесний світ новий оцей де отакі є люди!
Роздільник: " "
Масив містить  9  елементів:  Який / чудесний / світ / новий / оцей / де / отакі / є / люди!

Початковий рядок:  Який чудесний світ новий оцей де отакі є люди!
Роздільник: "undefined"
Масив містить  1  елементів:  Який чудесний світ новий оцей де отакі є люди!

Початковий рядок:  Січ,Лют,Берез,Квіт,Трав,Черв,Лип,Серп,Верес,Жовт,Листоп,Груд
Роздільник: ","
Масив містить  12  елементів:  Січ / Лют / Берез / Квіт / Трав / Черв / Лип / Серп / Верес / Жовт / Листоп / Груд</pre>

<h3 id="Видалення_пробілів_з_рядка">Видалення пробілів з рядка</h3>

<p>У наступному прикладі <code>split()</code> шукає нуль або більше пробілів з наступною крапкою з комою, з наступним нулем чи більше пробілів — і, коли знаходить, видаляє пробіли та крапку з комою з рядка. <code>nameList</code> є масивом, що повертається як результат методу <code>split()</code>.</p>

<pre class="brush: js">const names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '

console.log(names)

const re = /\s*(?:;|$)\s*/
const nameList = names.split(re)

console.log(nameList)
</pre>

<p>Цей код виводить два рядки; перший виводить початковий рядок, а другий - масив, отриманий в результаті.</p>

<pre class="brush: js">Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ]</pre>

<h3 id="Повернення_обмеженої_кількості_елементів">Повернення обмеженої кількості елементів</h3>

<p>У наступному прикладі <code>split()</code> шукає пробіли у рядку та повертає перші 3 елементи, які знаходить.</p>

<pre class="brush: js">const myString = 'Всім привіт. Як справи?'
const splits = myString.split(' ', 3)

console.log(splits)
</pre>

<p>Цей скрипт виведе наступне:</p>

<pre>["Всім", "привіт.", "Як"]
</pre>

<h3 id="Розбиття_за_допомогою_RegExp_з_додаванням_частин_роздільника_у_результат">Розбиття за допомогою <code>RegExp</code> з додаванням частин роздільника у результат</h3>

<p>Якщо <code><var>separator</var></code> є регулярним виразом, що містить дужки <code>(</code><code>)</code>, то збіги також додаються у масив.</p>

<pre class="brush: js">const myString = 'Привіт 1 слово. Речення номер 2.'
const splits = myString.split(/(\d)/)

console.log(splits)
</pre>

<p>Цей скрипт виведе наступне:</p>

<pre class="brush: js">[ "Привіт ", "1", " слово. Речення номер ", "2", "." ]</pre>

<div class="blockIndicator note">
<p><strong>Заувага: </strong><code>\d</code> відповідає <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">символьному класу</a> цифр між 0 та 9.</p>
</div>

<h3 id="Перевертання_рядка_за_допомотою_split">Перевертання рядка за допомотою <code>split()</code></h3>

<div class="warning">
<p>Це не найнадійніший спосіб перевертання рядка:</p>

<pre class="brush: js example-bad">const str = 'йцуке'
const strReverse = str.split('').reverse().join('')
// 'екуцй'

// split() повертає масив, на якому можна застосувати reverse() та join()
</pre>

<p>Він не працює, якщо рядок містить кластери графем, навіть при використанні методу split, сумісного з Юнікодом (замість цього скористайтесь, наприклад, <a href="https://github.com/mathiasbynens/esrever">esrever</a>).</p>

<pre class="brush: js example-bad">const str = 'résumé'
const strReverse = str.split(/(?:)/u).reverse().join('')
// =&gt; "́emuśer"
</pre>

<p><strong>Бонус:</strong> скористайтесь оператором {{jsxref("Operators/Оператори_порівняння", "===", "#Ідентичність_строга_рівність")}}, щоб перевірити, чи був початковий рядок паліндромом.</p>
</div>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Специфікація</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("javascript.builtins.String.split")}}</p>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li>{{jsxref("String.prototype.charAt()")}}</li>
 <li>{{jsxref("String.prototype.indexOf()")}}</li>
 <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
 <li>{{jsxref("Array.prototype.join()")}}</li>
 <li><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Використання регулярних виразів у JavaScript</a></li>
</ul>