diff options
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects/string/substring')
| -rw-r--r-- | files/uk/web/javascript/reference/global_objects/string/substring/index.html | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/global_objects/string/substring/index.html b/files/uk/web/javascript/reference/global_objects/string/substring/index.html new file mode 100644 index 0000000000..146c0e05b5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/substring/index.html @@ -0,0 +1,181 @@ +--- +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)) // => "zil" +console.log(text.substr(2,3)) // => "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)) // => "zil" +console.log(text.slice(5, 2)) // => "" +</pre> + +<p>Якщо один або обидва аргументи від'ємні чи <code>NaN</code>, метод <code>substring()</code> вважає, що вони дорівнюють <code>0</code>.</p> + +<pre class="brush: js">console.log(text.substring(-5, 2)) // => "Mo" +console.log(text.substring(-5, -2)) // => "" +</pre> + +<p><code>slice()</code> також вважає аргументи <code>NaN</code> рівними <code>0</code>, але, коли отримує від'ємні значення, він рахує індекс у зворотньому напрямку, з кінця рядка.</p> + +<pre class="brush: js">console.log(text.slice(-5, 2)) // => "" +console.log(text.slice(-5, -2)) // => "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 < 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> |