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

---
title: String.prototype.substring()
slug: Web/JavaScript/Reference/Global_Objects/String/substring
tags:
  - JavaScript
  - String
  - метод
  - рядок
translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
---
<div>{{JSRef}}</div>

<p>Метод <strong><code>substring()</code></strong> повертає частину рядка між початковим та кінцевим індексами, або до кінця рядка.</p>

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



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

<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexStart</var>[, <var>indexEnd</var>])</code></pre>

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

<dl>
 <dt><code><var>indexStart</var></code></dt>
 <dd>Індекс першого символу, який потрібно включити у повернений рядок.</dd>
 <dt><code><var>indexEnd</var></code> {{optional_inline}}</dt>
 <dd>Індекс першого символу, який непотрібно включати у повернений рядок.</dd>
</dl>

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

<p>Новий рядок, що містить вказану частину наданого рядка.</p>

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

<p>Метод <code>substring()</code> вирізає символи, починаючи з <code><var>indexStart</var></code><var>,</var> і до (<em>але не включно з</em>) <code><var>indexEnd</var></code>. Зокрема:</p>

<ul>
 <li>Якщо <code><var>indexEnd</var></code> не надано, <code>substring()</code> вирізає символи до кінця рядка.</li>
 <li>Якщо <code><var>indexStart</var></code> дорівнює <code><var>indexEnd</var></code>, <code>substring()</code> повертає порожній рядок.</li>
 <li>Якщо <code><var>indexStart</var></code> більший за <code><var>indexEnd</var></code>, тоді ефект <code>substring()</code> буде такий, ніби два аргументи поміняли місцями; Дивіться приклад нижче.</li>
</ul>

<p>Будь-яке значення аргументу менше за <code>0</code> чи більше за <code>stringName.length</code> вважається рівним <code>0</code> та <code>stringName.length</code>, відповідно.</p>

<p>Будь-яке значення аргументу, що є {{jsxref("NaN")}}, вважається рівним <code>0</code>.</p>

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

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

<p>Наступний приклад використовує <code>substring()</code>, щоб вивести символи з рядка <code>'Mozilla'</code>:</p>

<pre class="brush: js">let anyString = 'Mozilla'

// Виводить 'M'
console.log(anyString.substring(0, 1))
console.log(anyString.substring(1, 0))

// Виводить 'Mozill'
console.log(anyString.substring(0, 6))

// Виводить 'lla'
console.log(anyString.substring(4))
console.log(anyString.substring(4, 7))
console.log(anyString.substring(7, 4))

// Виводить 'Mozilla'
console.log(anyString.substring(0, 7))
console.log(anyString.substring(0, 10))
</pre>

<h3 id="Використання_substring_з_властивістю_length">Використання <code>substring()</code> з властивістю <code>length</code></h3>

<p>Наступний приклад використовує метод <code>substring()</code> та властивість {{jsxref("String.length", "length")}}, щоб отримати останні символи певного рядка. Цей метод, можливо, легше запам'ятати, враховуючи, що вам не потрібно знати початковий та кінцевий індекси, як у попередніх прикладах.</p>

<pre class="brush: js">// Виводить 'illa', останні 4 символи
let anyString = 'Mozilla'
let anyString4 = anyString.substring(anyString.length - 4)
console.log(anyString4)

// Виводить 'zilla' останні 5 символів
let anyString = 'Mozilla'
let anyString5 = anyString.substring(anyString.length - 5)
console.log(anyString5)
</pre>

<h3 id="Різниця_між_substring_та_substr">Різниця між <code>substring()</code> та <code>substr()</code></h3>

<p>Існує невелика відмінність між методами <code>substring()</code> та {{jsxref("String.substr", "substr()")}}, тому слід бути обережними, щоб не переплутати їх.</p>

<p>Аргументи <code>substring()</code> відображають початковий та кінцевий індекси, в той час, як аргументи <code>substr()</code> відображають початковий індекс та кількість символів, яку необхідно включити у повернений рядок.</p>

<p>Крім того, метод <code>substr()</code> вважається <strong>застарілою функціональністю ECMAScript</strong> та може бути прибраний з майбутніх версій, а отже, його краще уникати, де можливо.</p>

<pre class="brush: js">let text = 'Mozilla'
console.log(text.substring(2,5))  // =&gt; "zil"
console.log(text.substr(2,3))     // =&gt; "zil"</pre>

<h3 id="Різниця_між_substring_та_slice">Різниця між <code>substring()</code> та <code>slice()</code></h3>

<p>Методи <code>substring()</code> та {{jsxref("String.slice", "slice()")}} майже ідентичні, але між ними є пара невеликих відмінностей, особливо у поводженні з від'ємними аргументами.</p>

<p>Метод <code>substring()</code> міняє місцями свої аргументи, якщо <code><var>indexStart</var></code> більший за <code><var>indexEnd</var></code>, це означає, що рядок все одно буде повернений. Метод {{jsxref("String.slice", "slice()")}} повертає порожній рядок у цьому випадку.</p>

<pre class="brush: js">let text = 'Mozilla'
console.log(text.substring(5, 2))  // =&gt; "zil"
console.log(text.slice(5, 2))      // =&gt; ""
</pre>

<p>Якщо один або обидва аргументи від'ємні чи <code>NaN</code>, метод <code>substring()</code> вважає, що вони дорівнюють <code>0</code>.</p>

<pre class="brush: js">console.log(text.substring(-5, 2))  // =&gt; "Mo"
console.log(text.substring(-5, -2)) // =&gt; ""
</pre>

<p><code>slice()</code> також вважає аргументи <code>NaN</code> рівними <code>0</code>, але, коли отримує від'ємні значення, він рахує індекс у зворотньому напрямку, з кінця рядка.</p>

<pre class="brush: js">console.log(text.slice(-5, 2))   // =&gt; ""
console.log(text.slice(-5, -2))  // =&gt; "zil"
</pre>

<p>Дивіться більше прикладів з від'ємними числами на сторінці {{jsxref("String.slice", "slice()")}}.</p>

<h3 id="Заміна_підрядка_всередині_рядка">Заміна підрядка всередині рядка</h3>

<p>Наступний приклад замінює підрядок всередині рядка. Він замінить і окремі символи, і підрядки. Виклик функції в кінці прикладу змінює рядок <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Прекрасний новий світ</span></font> на <code>Прекрасний новий сайт</code>.</p>

<pre class="brush: js">// Замінює oldS на newS у рядку fullS
function replaceString(oldS, newS, fullS) {
  for (let i = 0; i &lt; fullS.length; ++i) {
    if (fullS.substring(i, i + oldS.length) == oldS) {
      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length)
    }
  }
  return fullS
}

replaceString('світ', 'сайт', 'Прекрасний новий світ')
</pre>

<p>Зауважте, що це може призвести до нескінченного циклу, якщо <code>oldS</code> сам є підрядком <code>newS</code> — наприклад, якби ви спробували замінити тут <code>'світ'</code> на <code>'всесвіт'</code>.</p>

<p>Кращим методом заміни рядків є наступний:</p>

<pre class="brush: js">function replaceString(oldS, newS, fullS) {
  return fullS.split(oldS).join(newS)
}
</pre>

<p>Наведений вище код є прикладом операцій з підрядками. Якщо вам необхідно замінювати підрядки, в більшості випадків вам краще скористатись {{jsxref("String.prototype.replace()")}}.</p>

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

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

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

<ul>
 <li>{{jsxref("String.prototype.substr()")}}</li>
 <li>{{jsxref("String.prototype.slice()")}}</li>
</ul>