diff options
Diffstat (limited to 'files/uk/web/javascript/reference/global_objects')
375 files changed, 46306 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..3ab9407b4e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,116 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Ітератор + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +<div>{{JSRef}}</div> + +<p>Початковим значенням властивості <code><strong>@@iterator</strong></code> є та сама функція, яка є початковим значенням властивості {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Початкове значення, що надається <strong>ітератором</strong> {{jsxref("Array.prototype.values()", "values()")}}. За замовчуванням, використання <code>arr[Symbol.iterator]</code> поверне функцію {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="Перебір_за_допомогою_циклу_for...of">Перебір за допомогою циклу <code>for...of</code></h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c', 'd', 'e']; +var eArr = arr[Symbol.iterator](); +// ваш переглядач має підтримувати цикл for..of +// та змінні, оголошені через let, у циклах for +// також можна використати const та var +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="Альтернативний_перебір">Альтернативний перебір</h3> + +<pre class="brush: js">var arr = ['а', 'б', 'в', 'г', 'ґ']; +var eArr = arr[Symbol.iterator](); +console.log(eArr.next().value); // а +console.log(eArr.next().value); // б +console.log(eArr.next().value); // в +console.log(eArr.next().value); // г +console.log(eArr.next().value); // ґ +</pre> + +<h3 id="Випадок_використання_позначення_через_квадратні_дужки">Випадок використання позначення через квадратні дужки</h3> + +<p>Використовувати цей синтаксис замість позначення через крапку (<code>Array.prototype.values()</code>) зручно, коли ви не знаєте заздалегідь, яким буде об'єкт. Якщо ви маєте функцію, що приймає ітератор та перебирає значення, але не знаєте, чи матиме цей об'єкт метод [Iterable].prototype.values. Це може бути вбудований об'єкт, такий як <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">String</a>, або користувацький об'єкт.</p> + +<pre class="brush: js">function logIterable(it) { + var iterator = it[Symbol.iterator](); + // ваш переглядач має підтримувати цикл for..of + // та змінні, оголошені через let, у циклах for + // також можна використати const та var + for (let letter of iterator) { + console.log(letter); + } +} + +// Масив +logIterable(['а', 'б', 'в']); +// а +// б +// в + +// рядок +logIterable('абв'); +// а +// б +// в</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/@@species/index.html b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..df18a2a627 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,72 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@species +tags: + - Array + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +<div>{{JSRef}}</div> + +<p>Властивість-аксесор <code><strong>Array[@@species]</strong></code> повертає конструктор <code>Array</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Array[Symbol.species] +</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Конструктор {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Властивість-аксесор <code>species</code> повертає конструктор за замовчуванням для об'єктів <code>Array</code>. Конструктори підкласів можуть його заміщувати, змінюючи присвоєння конструктора.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Species_у_звичайних_обєктах">Species у звичайних об'єктах</h3> + +<p>Властивість <code>species</code> повертає функцію-конструктор за замовчуванням, для об'єктів <code>Array</code> це конструктор <code>Array</code>:</p> + +<pre class="brush: js notranslate">Array[Symbol.species]; // функція Array()</pre> + +<h3 id="Species_у_похідних_обєктах">Species у похідних об'єктах</h3> + +<p>У похідному об'єкті колекцій (наприклад, у вашому користувацькому масиві <code>MyArray</code>), <code>species</code> для <code>MyArray</code> поверне конструктор <code>MyArray</code>. Однак, ви, можливо, захочете переписати цю поведінку, щоб повертати батьківські об'єкти <code>Array</code> у методах свого похідного класу:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Переписати Symbol.species у MyArray на батьківський конструктор Array + static get [Symbol.species]() { return Array; } +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@species")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..2ded6c458e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,76 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Властивість + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +<div>{{JSRef}}</div> + +<p>Символьна властивість <code><strong>@@unscopable</strong></code> містить імена властивостей, що не були включені у стандарт ECMAScript до версії ES2015. Ці властивості виключені з прив'язок оператора <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Стандартні властивості масивів, що виключені з прив'язок <code>with</code>, наступні:</p> + +<ul> + <li>{{jsxref("Array.prototype.copyWithin()", "copyWithin()")}}</li> + <li>{{jsxref("Array.prototype.entries()", "entries()")}}</li> + <li>{{jsxref("Array.prototype.fill()", "fill()")}}</li> + <li>{{jsxref("Array.prototype.find()", "find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()", "findIndex()")}}</li> + <li>{{jsxref("Array.prototype.includes()", "includes()")}}</li> + <li>{{jsxref("Array.prototype.keys()", "keys()")}}</li> + <li>{{jsxref("Array.prototype.values()", "values()")}}</li> +</ul> + +<p>Дивіться {{jsxref("Symbol.unscopables")}}, щоб дізнатись, як задати <code>unscopables</code> для ваших власних об'єктів.</p> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_у_оточеннях_with">Використання у оточеннях with</h3> + +<p>Наступний код чудово працює у ES5 та більш ранніх версіях. Однак, у ECMAScript 2015 та пізніших версіях був запроваджений метод {{jsxref("Array.prototype.keys()")}}. Це означає, що всередині середовищ <code>with</code> "keys" тепер буде методом, а не змінною. Саме тут вступає у гру вбудована символьна властивість <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code>, яка не дає деяким методам масивів потрапити у область видимості <code>with</code>.</p> + +<pre class="brush: js notranslate">var keys = []; + +with (Array.prototype) { + keys.push('something'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/array/index.html b/files/uk/web/javascript/reference/global_objects/array/array/index.html new file mode 100644 index 0000000000..84bcbb52a0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/array/index.html @@ -0,0 +1,87 @@ +--- +title: Конструктор Array() +slug: Web/JavaScript/Reference/Global_Objects/Array/Array +tags: + - JavaScript + - Конструктор + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +<div>{{JSRef}}</div> + +<p>Конструктор <code>Array()</code> використовується для створення об'єктів {{jsxref("Array")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] + +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Масив JavaScript ініціалізується наданими елементами, окрім випадку, коли у конструктор <code>Array</code> передається єдиний аргумент, і цей аргумент - число (дивіться нижче параметр arrayLength). Зауважте, що цей особливий випадок стосується лише масивів JavaScript, створених конструктором <code>Array</code>, а не масивних літералів, створених дужковим синтаксисом.</dd> + <dt><code>arrayLength</code></dt> + <dd>Якщо єдиним аргументом, переданим у конструктор <code>Array</code> є ціле число між 0 та 2<sup>32</sup>-1 (включно), це створює новий масив JavaScript, в якого властивості <code>length</code> присвоюється це число (<strong>Заувага: </strong>мається на<strong> </strong>увазі масив довжиною <code>arrayLength</code> з порожних елементів, а не елементів, заповнених значеннями <code>undefined</code>). Якщо аргумент є будь-яким іншим числом, викидається виняток {{jsxref("RangeError")}}.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Нотація_масивного_літералу">Нотація масивного літералу</h3> + +<p>Масиви можна створювати за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals">літералів</a>:</p> + +<pre class="brush: js">let fruits = ['Яблуко', 'Банан']; + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Яблуко" +</pre> + +<h3 id="Конструктор_масиву_з_єдиним_параметром">Конструктор масиву з єдиним параметром</h3> + +<p>Масиви можна створювати за допомогою конструктора з єдиним числовим параметром. Властивості масиву <code>length</code> присвоюється це число, а всі елементи масиву є порожніми.</p> + +<pre class="brush: js">let fruits = new Array(2); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // undefined +</pre> + +<h3 id="Конструктор_масиву_з_кількома_параметрами">Конструктор масиву з кількома параметрами</h3> + +<p>Якщо у конструктор передається більше одного параметра, створюється новий об'єкт {{jsxref("Array")}} з наданими елементами.</p> + +<pre class="brush: js">let fruits = new Array('Яблуко', 'Банан'); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Яблуко" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.Array")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Клас {{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/concat/index.html b/files/uk/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..5b56573f93 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,168 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Method + - Prototype + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>concat()</strong></code> повертає новий масив, що складається із масиву, в контексті якого метод був викликаний, поєднаного із масивом (масивами) та/або іншими значеннями, що були передані як аргументи.</p> + + + +<p>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Масиви та/або значення, які поєднуються в новий масив. Якщо всі параметри <code>value<em>N</em></code> пропущені, метод <code>concat</code> повертає дрібну копію існуючого масиву, на якому був викликаний. Додаткову інформацію дивіться нижче в описі.</dd> +</dl> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Новий екземпляр об'єкта {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>concat</code> створює новий масив, який складається із елементів об'єкта, на якому метод був викликаний, а також із елементів кожного аргумента (якщо цей аргумент - масив) або з самого аргумента (якщо він не є масивом). Метод не заходить у аргументи вкладених масивів.</p> + +<p>Метод <code>concat</code> не змінює <code>this</code> або будь-який з масивів, що передані як аргументи, але натомість повертає дрібну копію, яка містить копії тих самих елементів, об'єднані з початкових масивів. Елементи початкових масивів копіюються в новий масив таким чином:</p> + +<ul> + <li>Посилання на об'єкти (а не самі об'єкти): <code>concat</code> копіює посилання на об'єкти у новий масив. І початковий, і новий масиви посилаються на той самий об'єкт. Іншими словами, якщо об'єкт, на який посилаються, буде змінено, то зміни будуть видимими для нового та початкового масивів. Це стосується також тих елементів аргументів масиву, які також є масивами.</li> + <li>Рядки, числа та булеві значення (не об'єкти {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, та {{jsxref("Global_Objects/Boolean", "Boolean")}}): <code>concat</code> копіює значення рядків та чисел у новий масив.</li> +</ul> + +<div class="note"> +<p><strong>Примітка:</strong> об'єднання масиву (масивів) чи значення (значень) не змінить початкові дані. Більше того, будь-яка операція над новим масивом (тільки якщо елемент не є посиланням на об'єкт) не матиме жодного впливу на початкові масиви, і навпаки.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Об'єднання_двох_масивів">Об'єднання двох масивів</h3> + +<p>Наступний код об'єднує два масиви:</p> + +<pre class="brush: js">const letters = ['a', 'b', 'c'], +const numeric = [1, 2, 3]; + +letters.concat(numeric); +// Результат: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Об'єднання_трьох_масивів">Об'єднання трьох масивів</h3> + +<p>Наступний код об'єднує три масиви:</p> + +<pre class="brush: js">var num1 = [1, 2, 3], + num2 = [4, 5, 6], + num3 = [7, 8, 9]; + +var numbers = num1.concat(num2, num3); + +console.log(numbers); +// Результат: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Об'єднання_значень_у_масив">Об'єднання значень у масив</h3> + +<p>Наступний код об'єднує три значення у масив:</p> + +<pre class="brush: js">var letters = ['a', 'b', 'c']; + +var alphaNumeric = letters.concat(1, [2, 3]); + +console.log(alphaNumeric); +// Результат: ['a', 'b', 'c', 1, 2, 3] +</pre> + + + +<h3 id="Об'єднанная_вкладених_масивів">Об'єднанная вкладених масивів</h3> + +<p>Наступний код об'єднує вкладені масиви та демонструє утримання посилань:</p> + +<pre class="brush: js">const num1 = [[1]]; +const num2 = [2, [3]]; + +const numbers = num1.concat(num2); + +console.log(numbers); +// результат: [[1], 2, [3]] + +// змінити перший елемент num1 +num1[0].push(4); + +console.log(numbers); +// результат: [[1, 4], 2, [3]]</pre> + + + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_веб-переглядачами">Сумісність із веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.concat")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — додавання/видалення елементів із кінця масиву</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — додавання/видалення елементів із початку масиву</li> + <li>{{jsxref("Array.splice", "splice")}} — додавання/видалення елементів із зазначеного місця масиву</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – налаштування вирівнювання</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..b2d5e837e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,188 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +tags: + - ECMAScript 2015 + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>copyWithin()</strong></code> додає дрібну копію частини масиву в іншу позицію в тому ж масиві та повертає його без зміни довжини.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target[, start[, end]]</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Індекс (нумерується з 0), куди потрібно скопіювати послідовність. Якщо індекс є від'ємним, <code>target</code> буде рахуватися з кінця масиву.</dd> + <dd>Якщо значення <code>target</code> дорівнює або більше за <code>arr.length</code>, нічого не скопіюється. Якщо індекс <code>target</code> більший за <code>start</code>, скопійована послідовність буде обрізана відповідно до <code>arr.length</code>.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Індекс (нумерується з 0), з якого потрібно починати копіювання елементів. Якщо він від'ємний, <code>start</code> буде рахуватися з кінця.</dd> + <dd>Якщо параметр <code>start</code> не заданий, <code>copyWithin</code> буде копіювати, починаючи з індекса 0. </dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Індекс (нумерується з 0), на якому потрібно закінчити копіювання елементів. <code>copyWithin</code> копіює до, але не включаючи, <code>end</code>. Якщо індекс від'ємний, <code>end</code> буде рахуватися з кінця.</dd> + <dd>Якщо параметр <code>end</code> не заданий, <code>copyWithin</code> буде копіювати до останнього індекса (за замовченням <code>arr.length</code>).</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Змінений масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>copyWithin</code> працює, як <code>memmove</code> у C та C++, і є дуже продуктивним методом для зсунення даних у {{jsxref("Array", "масиві")}}. Це особливо стосується метода {{jsxref("TypedArray/copyWithin", "TypedArray")}} з такою ж самою назвою. Послідовність копіюється та вставляється однією операцією; вставлена послідовність міститиме скопійовані значення, навіть коли ділянки копіювання та вставки накладаються.</p> + +<p>Функція <code>copyWithin</code> є навмисно <em>загальною</em>, вона не вимагає, щоб її <code>this</code> був об'єктом {{jsxref("Array")}}.</p> + +<p>Метод <code>copyWithin</code> є методом модифікації. Він не змінює довжину об'єкта <code>this</code>, але він змінює його зміст та створює нові властивості в разі необхідності.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2); +// [1, 2, 3, 1, 2] + +[1, 2, 3, 4, 5].copyWithin(0, 3); +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4); +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); +// [1, 2, 3, 3, 4] + +[].copyWithin.call({length: 5, 3: 1}, 0, 3); +// {0: 1, 3: 1, length: 5} + +// ES2015 типізовані масиви є підкласами Array +var i32a = new Int32Array([1, 2, 3, 4, 5]); + +i32a.copyWithin(0, 2); +// Int32Array [3, 4, 5, 4, 5] + +// На платформах, які ще не сумісні з ES2015: +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">if (!Array.prototype.copyWithin) { + Object.defineProperty(Array.prototype, 'copyWithin', { + value: function(target, start/*, end*/) { + // Кроки 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Кроки 3-5. + var len = O.length >>> 0; + + // Кроки 6-8. + var relativeTarget = target >> 0; + + var to = relativeTarget < 0 ? + Math.max(len + relativeTarget, 0) : + Math.min(relativeTarget, len); + + // Кроки 9-11. + var relativeStart = start >> 0; + + var from = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Кроки 12-14. + var end = arguments[2]; + var relativeEnd = end === undefined ? len : end >> 0; + + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Крок 15. + var count = Math.min(final - from, len - to); + + // Кроки 16-17. + var direction = 1; + + if (from < to && to < (from + count)) { + direction = -1; + from += count - 1; + to += count - 1; + } + + // Крок 18. + while (count > 0) { + if (from in O) { + O[to] = O[from]; + } else { + delete O[to]; + } + + from += direction; + to += direction; + count--; + } + + // Крок 19. + return O; + }, + configurable: true, + writable: true + }); +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/entries/index.html b/files/uk/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..b55d83c2e5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,96 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Array + - ECMAScript6 + - JavaScript + - Ітератор + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>entries()</strong></code> повертає новий об'єкт ітератора масиву (<code><strong>Array Iterator</strong></code>), який містить пари ключ-значення для кожного індексу в масиві.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>array</var>.entries()</pre> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Новий об'єкт ітератора {{jsxref("Array", "масиву")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Ітерування_за_індексом_та_елементом">Ітерування за індексом та елементом</h3> + +<pre class="brush:js">const a = ['a', 'b', 'c']; + +for (const [index, element] of a.entries()) + console.log(index, element); + +// 0 'a' +// 1 'b' +// 2 'c' +</pre> + +<h3 id="Використання_циклу_for…of">Використання циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a></h3> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/every/index.html b/files/uk/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..4eb5b229f0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,195 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>every()</strong></code> перевіряє, чи всі елементи масиву відповідають умові, що задана функцією, яка передається як аргумент. Повертає булеве значення.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} + +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback(element[, index[, array]])[, thisArg]</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка перевіряє кожен елемент масиву. Приймає три аргументи: + <dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">element</span></font></dt> + <dd>Поточний елемент, який обробляється в масиві.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>Індекс поточного елемента, який обробляється в масиві.</dd> + <dt><code>array</code> {{Optional_inline}}</dt> + <dd>Масив для якого був викликаний метод <code>every</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Значення, що використовується як <code>this</code> при виконанні <code>callback</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p><code><strong>true</strong></code>, якщо функція callback повернула {{Glossary("truthy", "правдиве")}} значення для кожного елементу масиву; інакше, <code><strong>false</strong></code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>every</code> виконує функцію <code>callback</code> один раз для кожного елементу масиву поки не знайдено хоча б один елемент, функція <code>callback</code> якого повертає {{Glossary("falsy", "хибне")}} значення. Якщо такий елемент знайдено, метод <code>every </code>одразу повертає <code>false</code>. В іншому ж випадку, якщо функція <code>callback</code> повернула {{Glossary("truthy", "правдиве")}} значення для усіх елементів, <code>every</code> повертає <code>true</code>. Функція <code>callback</code> викликається тільки для тих індексів масиву, які мають присвоєні значення; вона не викликається для тих індексів, котрі були видалені або котрим ніколи не присвоювалися значення.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами: значення елементу, індекс елементу в масиві і масив по якому робиться перебір.</p> + +<p>Якщо параметр <code>thisArg</code> переданий в <code>every</code>, то він буде використовуватися функцією <code>callback</code> як значення <code>this</code>, коли та буде викликана. В іншому випадку буде передано значення <code>undefined</code> як її значення <code>this</code>. Значення <code>this</code> зрештою видиме для функції <code>callback</code> і визначається відповідно до <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">звичайних правил для визначення this яке видиме функцією</a>.</p> + +<p>Метод <code>every</code> не змінює масив, на якому він був викликаний.</p> + +<p>Діапазон елементів, які обробляються методом <code>every()</code> встановлюється перед першим виконанням функції <code>callback</code>. Елементи, які додаються в масив після того, як метод <code>every()</code>був викликаний, не будуть обходитися функцією <code>callback</code>. Якщо існуючі елементи масиву змінилися, то їхні значення, які передаються в функцію <code>callback</code> будуть значеннями на момент обходу їх методом <code>every()</code>; якщо існуючі елементи масиву видалили, то метод <code>every()</code> обходити їх не буде.</p> + +<p>Метод <code>every</code> схожий за дією на математичний символ "для кожного <img alt="\forall \!\," src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e06890cf9ed539c62153aee819bfd33584ad57d9">". Зокрема, для порожнього масиву він повертає true. (Всі елементи порожнього набору задовольняють будь-якому заданому стану.)</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевірка_значення_кожного_елементу_масиву">Перевірка значення кожного елементу масиву</h3> + +<p>Даний приклад перевіряє чи всі елементи масиву більші ніж 10.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Викристання_стрілочних_функцій">Викристання стрілочних функцій</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрілочні функції</a> надають коротший синтаксис для такої ж самої перевірки.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(x => x >= 10); // false +[12, 54, 18, 130, 44].every(x => x >= 10); // true</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>every</code> був доданий до ECMA-262 стандарту у 5-ій версії; як такий він може бути не реалізований в усіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод <code>every</code> у тих версіях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у ECMA-262, 5-ій версії, за умови, що <code>Object</code> і <code>TypeError</code> мають свої первинні значення і що <code>callbackfn.call</code> прирівнюється до первинного значення {{jsxref("Function.prototype.call")}}</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this дорівнює null або не визначений'); + } + + // 1. Нехай O буде результатом виклику ToObject з передачею значення + // this в якості аргумента. + var O = Object(this); + + // 2. Нехай lenValue буде результатом виклику внутрішнього метода O + // Get з аргументом "length". + // 3. Нехай len буде результатом ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. Якщо IsCallable(callbackfn) повертає false, викинути виняток TypeError. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. Якщо thisArg було передано, хай T буде thisArg; інакше хай T буде undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Нехай k дорівнює 0. + k = 0; + + // 7. Повторювати, доки k < len + while (k < len) { + + var kValue; + + // а. Нехай Pk буде ToString(k). + // Це неявно для операндів LHS оператора in + // б. Нехай kPresent буде результатом виклику внутрішнього метода + // O HasProperty з аргументом Pk. + // Цей крок можна поєднати з в + // в. Якщо kPresent дорівнює true, тоді + if (k in O) { + + // i. Нехай kValue буде результатом виклику внутрішнього метода + // O Get з аргументом Pk. + kValue = O[k]; + + // ii. Нехай testResult буде результатом виклику внутрішнього метода + // callbackfn Call з T в якості значення this і списком аргументів, + // який містить kValue, k, та O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. Якщо ToBoolean(testResult) дорівнює false, повернути false. + if (!testResult) { + return false; + } + } + k++; + } + return true; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.every")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/fill/index.html b/files/uk/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..666360dc76 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>fill()</strong></code> заповнює (змінює) всі елементи масиву з початкового індексу (за замовчуванням нуль) до кінцевого індексу (за замовчуванням довжина масиву) статичним значенням. Метод повертає змінений масив.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var> +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Величина, якою потрібно заповнити масив.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Початковий індекс, за замовчуванням 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Кінцевий індекс, за замовчуванням <code>this.length</code>.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Змінений масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>fill</code> приймає три аргументи: <code>value</code>, <code>start</code> та <code>end</code>. Аргументи <code>start</code> та <code>end</code> є необов'язковими й за замовчуванням дорівнюють <code>0</code> та значенню <code>length</code> об'єкта <code>this</code>.</p> + +<p>Якщо значення <code>start</code> є від'ємним, воно сприймається як <code>length+start</code>, де <code>length</code> - це довжина масиву. Якщо значення <code>end</code> є від'ємним, воно сприймається як <code>length+end</code>.</p> + +<p>Метод <code>fill</code> є навмисно загальним, він не вимагає, щоб значенням <code>this</code> був об'єкт Array.</p> + +<p><code>fill</code> є методом модифікації, він змінить сам об'єкт <code>this</code> та поверне його, а не просто його копію.</p> + +<p>Коли у <code>fill</code> передається об'єкт, він копіює посилання та заповнює масив посиланнями на цей об'єкт.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 5); // [1, 2, 3] +Array(3).fill(4); // [4, 4, 4] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} + +// Об'єкти за посиланнями. +var arr = Array(3).fill({}) // [{}, {}, {}]; +arr[0].hi = "привіт"; // [{ hi: "привіт" }, { hi: "привіт" }, { hi: "привіт" }] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">if (!Array.prototype.fill) { + Object.defineProperty(Array.prototype, 'fill', { + value: function(value) { + + // Кроки 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Кроки 3-5. + var len = O.length >>> 0; + + // Кроки 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Крок 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Кроки 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Крок 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Крок 12. + while (k < final) { + O[k] = value; + k++; + } + + // Крок 13. + return O; + } + }); +} +</pre> + +<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/filter/index.html b/files/uk/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..e36b7abc4d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,235 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript5 + - JavaScript + - Prototype + - polyfill + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>filter()</strong></code> створює новий масив з усіма елементами, що пройшли перевірку вказаною функцією.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція-<abbr title="предикат">присудок</abbr>, що перевіряє кожен елемент масиву та повертає <code>true</code>, щоб зберегти елемент, або <code>false</code>, щоб видалити. Приймає три аргументи:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Значення чергового елемента масиву.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс чергового елемента в масиві.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, до якого застосовано <code>filter()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Значення, що використовується як <code><strong>this</strong></code>, коли викликається <code>callback</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий масив з елементами, що пройшли пере́вірку. Якщо жоден елемент не пройшов перевірку, повертає порожній масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>filter()</code> перебирає всі елементи масиву за зростанням індексу, викликає для кожного функцію <code>callback</code>, та створює новий масив зі значень, для яких виклик <code>callback</code> повертає {{glossary("Truthy", "істинне значення")}}. Метод оминає властивості, які було видалено або не було <abbr title="ініціалізовано">започатковано</abbr> — в розріджених масивах.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами:</p> + +<ul> + <li>значення елемента;</li> + <li>індекс елемента;</li> + <li>масив по якому робиться обхід.</li> +</ul> + +<p>Якщо для <code>filter()</code> вказано параметр <code>thisArg</code>, його буде використано як <code>this</code> для функції <code>callback</code>. Інакше буде використано значення {{jsxref("undefined")}}. Зрештою, значення <code>this</code> для функції <code>callback</code> визначатиметься відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this" rel="nofollow">загальних правил</a>.</p> + +<p>Метод <code>filter()</code> не змінює масив, на якому його викликано.</p> + +<p>Множина індексів елементів, що їх перебиратиме <code>filter()</code>, з'ясовується ще до першого виклику <code>callback</code>. Елементи, додані після здійснення виклику <code>filter()</code>, буде знехтувано. Якщо наявні елементи масиву було змінено або видалено, до функції <code>callback</code> потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом <code>callback</code>. Видалені елементи опрацьовано не буде.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вилучення_замалих_чисел">Вилучення замалих чисел</h3> + +<p>Наведений приклад за допомогою метода <code>filter()</code> створює новий масив, що міститиме лише числа, які перевищують 10:</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered дорівнює [12, 130, 44] +</pre> + +<h3 id="Фільтрування_неправильних_записів_з_JSON">Фільтрування неправильних записів з JSON</h3> + +<p>Цей приклад використовує метод <code>filter()</code>, щоб створити відфільтрований JSON з усіх елементів, які мають ненульове, числове значення <code>id</code>:</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id) && item.id !== 0) { + return true; + } + invalidEntries++; + return false; +} + +var arrByID = arr.filter(filterByID); + +console.log('Відфільтрований масив\n', arrByID); +// Відфільтрований масив +// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] + +console.log('Кількість неправильних записів = ', invalidEntries); +// Кількість неправильних записів = 5</pre> + +<h3 id="Пошук_у_масиві">Пошук у масиві</h3> + +<p>Цей приклад використовує <code>filter()</code>, щоб відфільтрувати масив за пошуковим критерієм:</p> + +<pre class="brush: js">var fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос']; + +/** + * Фільтрувати елементи масиву за пошуковим критерієм (запитом) + */ +function filterItems(arr, query) { + return arr.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) !== -1; + }) +} + +console.log(filterItems(fruits, 'ко')); // ['яблуко', 'кокос'] +console.log(filterItems(fruits, 'ан')); // ['банан', 'манго']</pre> + +<h4 id="Реалізація_ES2015">Реалізація ES2015</h4> + +<pre class="brush: js">const fruits = ['яблуко', 'банан', 'виноград', 'манго', 'кокос']; + +/** +* Фільтрувати елементи масиву за пошуковим критерієм (запитом) +*/ +const filterItems = (arr, query) => { + return arr.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) !== -1); +}; + +console.log(filterItems(fruits, 'ко')); // ['яблуко', 'кокос'] +console.log(filterItems(fruits, 'ан')); // ['банан', 'манго']</pre> + +<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2> + +<p>Метод <code>filter()</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наведений нижче код на початку ваших скриптів, це дозволить використовувати <code>filter()</code> у версіях ECMA-262, які не підтримують його початково. Цей алгоритм є точним еквівалентом впровадженого у 5-й версії ECMA-262, за умови, що <code>fn.call</code> відповідає початковому значенню {{jsxref("Function.prototype.bind()")}}, і {{jsxref("Array.prototype.push()")}} не було змінено.</p> + +<pre class="brush: js">if (!Array.prototype.filter) { + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if (!((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // попередньо створений масив + t = this, c = 0, i = -1; + + var kValue; + if (thisArg === undefined){ + while (++i !== len){ + // перевіряє, чи заданий ключ + if (i in this){ + kValue = t[i]; // у цьому випадку t змінюється у функції callback + if (func(t[i], i, t)){ + res[c++] = kValue; + } + } + } + } + else { + while (++i !== len) { + // перевіряє, чи заданий ключ + if (i in this){ + kValue = t[i]; + if (func.call(thisArg, t[i], i, t)){ + res[c++] = kValue; + } + } + } + } + + res.length = c; // зменшити масив до правильного розміру + return res; + }; +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<div>{{Compat("javascript.builtins.Array.filter")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/find/index.html b/files/uk/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..a08566da73 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,233 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - JavaScript + - Method + - Prototype + - polyfill + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>find()</code></strong> повертає <strong>значення</strong> <strong>першого елемента </strong>в масиві, що задовільняє передану функцію тестування. Інакше вертається {{jsxref("undefined")}}.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-find.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<p>Зверніть увагу також на метод {{jsxref("Array.prototype.findIndex", "findIndex()")}}, що натомість повертає <strong>індекс</strong> знайденого елемента масиву, а не значення.</p> + +<p>Якщо вам необхідно знайти позицію елемента або дізнатись, чи існує елемент в масиві, використовуйте {{jsxref("Array.prototype.indexOf()")}} або {{jsxref("Array.prototype.includes()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>arr.find(callback(element[, index[, array]])[, thisArg])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, що виконується для кожного значення в масиві і приймає три аргументи: + <dl> + <dt><code>element</code></dt> + <dd>Значення поточного елемента масиву.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елемента масиву.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>find</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Необов'язковий об'єкт, що використовується в якості <code>this</code> при виконанні <code>callback</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p><strong>Значення</strong> <strong>першого елемента</strong> в масиві, який задовольняє надану перевірочну функцію. Інакше повертається {{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>find</code> виконує функцію <code>callback</code> один раз для кожного елемента в масиві, аж поки не буде знайдено такий, для якого <code>callback</code> повертає <a href="/uk/docs/Glossary/Truthy">правдиве значення</a>. Щойно такий елемент знайдено, <code>find</code> одразу ж повертає значення цього елемента. В іншому випадку, <code>find</code> повертає {{jsxref("undefined")}}. Функція <code>callback</code> викликається для кожного індексу масиву з <code>0</code> по <code>length - 1</code> і виконується для усіх елементів, не лише для тих, які мають присвоєні значення. Це означає, що цей метод може бути менш ефективним для розріджених масивів у порівнянні з методами, які обробляють лише ті, елементи, яким присвоєні значення.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт <code>Array</code>, перебір якого здійснюється.</p> + +<p>Якщо параметр <code>thisArg</code> передано до <code>find</code>, його буде використано як <code>this</code> для кожного виклику <code>callback</code>. Якщо його не передано, тоді використовуватиметься {{jsxref("undefined")}}.</p> + +<p>Метод <code>find()</code> не змінює масив, для якого викликається.</p> + +<p>Діапазон елементів, що їх має обробити <code>find</code>, визначається ще до першого виклику функції <code>callback</code>. Тому <code>callback</code> не обробляє елементи, додані до масиву після того, як почалося виконання <code>find</code>. Якщо існуючий, ще не опрацьований елемент масиву, змінюється функцією <code>callback</code>, його значення, що передається до <code>callback</code>, буде значенням на той момент, коли <code>find</code> доходить до індексу цього елемента. Видалені елементи все одно опрацьовуються.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Знайти_обєкт_в_масиві_за_однією_з_його_властивостей">Знайти об'єкт в масиві за однією з його властивостей</h3> + +<pre class="brush: js notranslate">var inventory = [ + {name: 'яблука', quantity: 2}, + {name: 'банани', quantity: 0}, + {name: 'вишні', quantity: 5} +]; + +function findCherries(fruit) { + return fruit.name === 'вишні'; +} + +console.log(inventory.find(findCherries)); +// виводить { name: 'вишні', quantity: 5 } +</pre> + +<h4 id="Використання_стрілочної_функції_ES2015">Використання стрілочної функції ES2015</h4> + +<pre class="brush: js notranslate">const inventory = [ + {name: 'яблука', quantity: 2}, + {name: 'банани', quantity: 0}, + {name: 'вишні', quantity: 5} +]; + +const result = inventory.find( fruit => fruit.name === 'вишні' ); + +console.log(result) // { name: 'вишні', quantity: 5 } +</pre> + +<h3 id="Знайти_просте_число_у_масиві">Знайти просте число у масиві</h3> + +<p>Наступний приклад знаходить елемент у масиві, який є простим числом (або повертає {{jsxref("undefined")}}, якщо простого числа немає):</p> + +<pre class="brush: js notranslate">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +[4, 6, 8, 12].find(isPrime); // вертає undefined, простих чисел не знайдено +[4, 5, 8, 12].find(isPrime); // вертає 5 +</pre> + +<p>Наступні приклади демонструють, що неіснуючі та видалені елементи теж опрацьовуються, і що значення, передане до функції зворотного виклику - це їхнє значення на момент перевірки.</p> + +<pre class="brush: js notranslate">// Створити масив без елементів за індексами 2, 3 та 4 +const array = [0,1,,,,5,6]; + +// Виводить всі індекси, не лише ті, які мають присвоєні значення +array.find(function(value, index) { + console.log('Індекс ' + index + ' має значення ' + value); +}); + +// Виводить всі індекси, в тому числі видалені +array.find(function(value, index) { + + // Видалити елемент 5 в першій ітерації + if (index == 0) { + console.log('Видалення елемента array[5] зі значенням ' + array[5]); + delete array[5]; + } + // Елемент 5 перевіряється, хоч і був видалений + console.log('Індекс ' + index + ' має значення ' + value); +}); +// очікуваний результат: +// Видалення елемента array[5] зі значенням 5 +// Індекс 0 має значення 0 +// Індекс 1 має значення 1 +// Індекс 2 має значення undefined +// Індекс 3 має значення undefined +// Індекс 4 має значення undefined +// Індекс 5 має значення undefined +// Індекс 6 має значення 6 +</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Цей метод був доданий у ECMAScript 2015, тож, можливо, поки наявний не у всякій реалізації JavaScript. Проте, ви можете використати наступний код для забезпечення запасного варіанту <code>Array.prototype.find</code>:</p> + +<pre class="brush: js notranslate">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Нехай O дорівнює ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError. + if (typeof predicate !== 'function') { + throw new TypeError('предикат має бути функцією'); + } + + // 4. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + var thisArg = arguments[1]; + + // 5. Нехай k дорівнює 0. + var k = 0; + + // 6. Повторювати, поки k < len + while (k < len) { + // a. Нехай Pk дорівнює ! ToString(k). + // b. Нехай kValue дорівнює ? Get(O, Pk). + // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. Якщо testResult дорівнює true, повернути kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Збільшити k на 1. + k++; + } + + // 7. Повернути undefined. + return undefined; + } + }); +} +</pre> + +<p>Якщо вам потрібно забезпечити підтримку вкрай застарілих рушіїв JavaScript, в яких відсутня підтримка <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, було б краще взагалі не додавати методів до <code>Array.prototype</code> через відсутність можливості заборонити їх перебір.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікації</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.find")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/findindex/index.html b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..550a072e19 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,187 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +tags: + - Array + - ECMAScript6 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <code><strong>findIndex()</strong></code> повертає <strong>індекс</strong> першого елемента у масиві, <strong>який задовольняє надану перевірочну функцію</strong>. Інакше повертаєтсья -1, зазначаючи, що жодний елемент не пройшов перевірку.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> + + + +<p>Дивіться також метод {{jsxref("Array.find", "find()")}}, який повертає <strong>значення</strong> елемента масиву замість індексу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex<code>(callback(element[, index[, array]])[, thisArg])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка виконується на кожному значенні масиву, поки не поверне <code>true</code>, зазначаючи, що відповідний елемент знайдений. Вона приймає три аргументи: + <dl> + <dt><code>element</code></dt> + <dd>Поточний елемент масиву, який обробляється.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елементу, що обробляється.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого був викликаний метод <code>findIndex</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Необов'язковий об'єкт для використання у якості <code>this</code> під час виконання <code>callback</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Індекс першого елемента у масиві, який успішно пройшов перевірку. Інакше <strong>-1</strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>findIndex</code> виконує функцію <code>callback</code> один раз для кожного індексу <code>0..length-1</code> (включно) у масиві, поки не знайде той, для якого <code>callback</code> поверне правдиве значення (таке, що <a href="/uk/docs/Glossary/Type_Conversion">приводиться</a> до <code>true</code>).</p> + +<p>Якщо такий елемент знайдено, <code>findIndex</code> негайно повертає його індекс. Якщо функція зворотного виклику так і не повертає правдиве значення (або довжина масиву <code>length</code> дорівнює 0), <code>findIndex</code> повертає -1. На відміну від інших методів масивів, таких як {{jsxref("Array.some")}}, <code>callback</code> <strong>викликається</strong> навіть для індексів, що не мають значень.</p> + +<p><code>callback</code> викликається з трьома аргументами:</p> + +<ol> + <li>Значення елемента</li> + <li>Індекс елемента</li> + <li>Об'єкт Array, який перебирається</li> +</ol> + +<p>Якщо параметр <code>thisArg</code> передається до <code>findIndex</code>, він буде використаний у якості <code>this</code> всередині кожного виклику <code>callback</code>. Якщо він не наданий, то використовується {{jsxref("undefined")}}.</p> + +<p>Діапазон елементів, які опрацьовує <code>findIndex</code>, встановлюється до першого виклику <code>callback</code>. <code>callback</code> не обробляє елементи, додані до масиву після того, як почалося виконання <code>findIndex</code>. Якщо існуючий, ще не опрацьований елемент масиву змінюється функцією <code>callback</code>, його значення, що передається до <code>callback</code> буде значенням на той момент, коли <code>findIndex</code> доходить до індексу цього елементу. <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">Видалені</a> елементи все одно опрацьовуються.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Знайти_індекс_простого_числа_у_масиві">Знайти індекс простого числа у масиві</h3> + +<p>Наступний приклад повертає індекс першого елементу у масиві, який є простим числом, або -1, якщо там нема жодного простого числа.</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start < 1) { + return false; + } else { + start++; + } + } + return element > 2; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не знайдено +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 (array[2] дорівнює 7) +</pre> + +<h3 id="Знайти_індекс_використувуючи_стрілочну_функцію">Знайти індекс, використувуючи стрілочну функцію</h3> + +<p>Наступний приклад знаходить індекс фрукта, використувуючи стрілочну функцію:</p> + +<pre class="brush: js">const fruits = ["яблуко", "банан", "диня", "чорниці", "грейпфрут"]; + +const index = fruits.findIndex(fruit => fruit === "чорниці"); + +console.log(index); // 3 +console.log(fruits[index]); // чорниці +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Нехай O дорівнює ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Нехай len дорівнює ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. Якщо IsCallable(predicate) дорівнює false, викинути виняток TypeError. + if (typeof predicate !== 'function') { + throw new TypeError('предикат має бути функцією'); + } + + // 4. Якщо наданий thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + var thisArg = arguments[1]; + + // 5. Нехай k дорівнює 0. + var k = 0; + + // 6. Повторювати, поки k < len + while (k < len) { + // a. Нехай Pk дорівнює ! ToString(k). + // b. Нехай kValue дорівнює ? Get(O, Pk). + // c. Нехай testResult дорівнює ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. Якщо testResult дорівнює true, повернути k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Збільшити k на 1. + k++; + } + + // 7. Повернути -1. + return -1; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/flat/index.html b/files/uk/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..ff20a8d058 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,150 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>flat()</strong></code> створює новий масив який містить всі елементи вкладених масивів до вказаної глибини.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + + + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[</em><var>depth]</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>Глибина, що вказує до якого рівня вкладеності масивів має відбуватись вирівнювання. За замовчуванням 1.</dd> +</dl> + +<h3 id="Вихідне_значення">Вихідне значення</h3> + +<p>Новий масив, що містить елементи вкладених масивів.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вирівнювання_вкладених_масивів">Вирівнювання вкладених масивів</h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] +</pre> + +<h3 id="Вирівнювання_і_прогалини_в_масиві">Вирівнювання і прогалини в масиві</h3> + +<p>Метод <code>flat</code> видаляє порожні елементи масивів:</p> + +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Альтернатива">Альтернатива</h2> + +<h3 id="reduce_і_concat"><code>reduce</code> і <code>concat</code></h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +//вирівняти один рівень масиву +arr1.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4] + +//або +const flatSingle = arr => [].concat(...arr);</pre> + +<pre class="brush: js">//щоб здійснити глибоке вирівнювання, використовуйте рекурсію з reduce і concat +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +function flattenDeep(arr1) { + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +} +flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + +<pre class="brush: js">//глибоке вирівнювання без рекурсії, використовуючи stack +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; +function flatten(input) { + const stack = [...input]; + const res = []; + while (stack.length) { + // викидаємо значення зі стеку + const next = stack.pop(); + if (Array.isArray(next)) { + // додаємо елементи масиву, не змінюючи вхідного масиву + stack.push(...next); + } else { + res.push(next); + } + } + //перевертаємо масив, щоб порядок сортування відповідав вхідному + return res.reverse(); +} +flatten(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</pre> + +<pre class="brush: js">//глибоке вирівнювання з рекурсією +function flatten(array) { + var flattend = []; + (function flat(array) { + array.forEach(function(el) { + if (Array.isArray(el)) flat(el); + else flattend.push(el); + }); + })(array); + return flattend; +}</pre> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли в цю статтю. За довідкою дивіться: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td> + <td>Finished (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..58033475d1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +tags: + - Array + - JavaScript + - flatMap + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>flatMap()</strong></code> спочатку виконує надану функцію на кожному елементі, а після цього вирівнює отриманий результат і зберігає його у новий масив. Це аналогічно послідовному виклику {{jsxref("Array.prototype.map","map()")}} та {{jsxref("Array.prototype.flat","flat()")}} з глибиною 1, але <code>flatMap()</code> буває доволі корисним, оскільки об'єднання обох методів у один є трохи ефективнішим.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // повернути елемент для нового масиву new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка створює елемент для нового масиву. Приймає три аргументи: + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>Поточний елемент масиву, що обробляється.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елемента, що обробляється.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого був викликаний метод <code>flatMap</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Значення, що використовується як <code>this</code> під час виконання <code>callback</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий масив, в якому кожний елемент є результатом виклику функції <code>callback</code>, вирівняний до глибини 1.</p> + +<h2 id="Опис">Опис</h2> + +<p>Дивіться детальний опис функції зворотного виклику у {{jsxref("Array.prototype.map()")}}. Метод <code>flatMap</code> є ідентичним послідовному виклику методів <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> з глибиною 1.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="map()_та_flatMap()"><code>map()</code> та <code>flatMap()</code></h3> + +<pre class="brush: js">let arr1 = [1, 2, 3, 4]; + +arr1.map(x => [x * 2]); +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]); +// [2, 4, 6, 8] + +// вирівнюється тільки один рівень +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<p>В той час як наведений вище результат міг бути отриманий використанням самого <code>map</code>, нижче приклад, який краще демонструє використання <code>flatMap</code>.</p> + +<p>Давайте створимо список слів зі списку речень.</p> + +<pre class="brush: js">let arr1 = ["Сьогодні сонячно у", "", "Львові"]; + +arr1.map(x => x.split(" ")); +// [["Сьогодні","сонячно","у"],[""],["Львові"]] + +arr1.flatMap(x => x.split(" ")); +// ["Сьогодні","сонячно","у", "", "Львові"]</pre> + +<p>Зверніть увагу, що довжина результуючого списку може відрізнятися від довжини початкового списку.</p> + +<h3 id="Для_додавання_та_видалення_елементів_під_час_виконання_map()">Для додавання та видалення елементів під час виконання <code>map()</code></h3> + +<p>Метод <code>flatMap</code> можна використовувати, щоб додавати та видаляти елементи (змінювати кількість елементів) під час виконання <code>map</code>. Іншими словами, він дозволяє кожен з множини елементів перетворювати на множину елементів (обробляючи кожен елемент окремо), а не завжди <em>1-1</em>. В цьому плані він протилежність метода <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>. Просто поверніть 1-елементний масив, щоб залишити елемент, багатоелементний масив, щоб додати елементи, або порожній масив, щоб видалити елемент.</p> + +<pre class="brush: js">// Припустимо, ми бажаємо видалити всі від'ємні числа та розбити непарні числа на парне число та 1 +let a = [5, 4, -3, 20, 17, -33, -4, 18] +// |\ \ x | | \ x x | +// [4,1, 4, 20, 16, 1, 18] + +a.flatMap( (n) => + (n < 0) ? [] : + (n % 2 == 0) ? [n] : + [n-1, 1] +) + +// очікуваний результат: [4, 1, 4, 20, 16, 1, 18] +</pre> + +<h2 id="Альтернатива">Альтернатива</h2> + +<h3 id="reduce()_та_concat()"><code>reduce()</code> та <code>concat()</code></h3> + +<pre class="brush: js">var arr1 = [1, 2, 3, 4]; + +arr1.flatMap(x => [x * 2]); +// є еквівалентом +arr1.reduce((acc, x) => acc.concat([x * 2]), []); +// [2, 4, 6, 8] +</pre> + +<p>Зауважте, однак, що цей метод краще не застосовувати для великих масивів, бо він буде неефективним: на кожній ітерації він створює новий тимчасовий масив, який треба прибирати збирачу сміття, і він копіює елементи з поточного масива-накопичувача у новий масив замість того, щоб просто додати нові елементи у існуючий масив.</p> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли у цю статтю. За довідкою, звертайтесь: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Комент</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code></a></td> + <td>Завершено (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/foreach/index.html b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..97a354787f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,290 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +tags: + - ECMAScript5 + - JavaScript + - Method + - Prototype + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>forEach()</strong></code> виконує надану функцію один раз для кожного елемента масиву.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, що виконується для кожного елемента. Приймає три аргументи:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>Черговий елемент масиву, що обробляється.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>Індекс чергового елемента в масиві.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>forEach()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd> + <p>Значення, що використовується як <code><strong>this</strong></code> при виконанні <code>callback</code>.</p> + </dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p><code>undefined</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>forEach()</code> викликає надану функцію <code>callback</code> для кожного елемента масиву у порядку зростання. Оминає властивості, які було видалено або не було <abbr title="ініціалізовано">започатковано</abbr> (тобто, в розріджених масивах, <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#sparseArray">дивіться приклад, наведений нижче</a>).</p> + +<p>Функція <em><code>callback</code></em> викликається з трьома аргументами:</p> + +<ol> + <li>значення елемента;</li> + <li>індекс елемента;</li> + <li>масив, що перебирається.</li> +</ol> + +<p>Якщо для <code>forEach()</code> вказано параметр <em><code>thisArg</code></em>, його буде використано як <code>this</code> для функції <code>callback</code>. Зрештою значення <code>this</code> для функції <em><code>callback</code></em> визначатиметься відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">загальних правил</a>.</p> + +<p>Множина індексів елементів, що їх перебиратиме <code>forEach()</code> з'ясовується ще до першого виклику <em><code>callback</code></em>. Елементи, додані після здійснення виклику <code>forEach()</code>, буде знехтувано (<em><code>callback</code></em> для жодного з них не викликатиметься). Якщо змінити або видалити якийсь з елементів масиву, до функції <code>callback</code> потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом <code>callback</code>. Якщо елемент видалено до відвідування, відвідано не буде. Якщо вже відвіданий елемент видалено упродовж перебирання (наприклад, за допомогою {{jsxref("Array.prototype.shift()", "shift()")}}), подальші елементи будуть пропущені — <a href="#Якщо_масив_змінено_під_час_перебору_деякі_елементи_може_бути_пропущено">дивіться приклади нижче у статті</a>.</p> + +<p>Метод <code>forEach()</code> виконує функцію <em><code>callback</code></em> один раз для кожного елемента масиву. На відміну від {{jsxref("Array.prototype.map()", "map()")}} чи {{jsxref("Array.prototype.reduce()", "reduce()")}}, він завжди вертає значення {{jsxref("undefined")}}, тож продовжити ланцюжок викликів після нього неможливо. Досить типовим є виклик <code>forEach()</code> наприкінці ланцюжка методів з метою виконання додаткових дій.</p> + +<p>Сам метод <code>forEach()</code> не змінює масив, на якому його викликано, втім усередині функції <em><code>callback</code></em> це можливо.</p> + +<div class="note"> +<p><strong>Заувага:</strong> Зупинити чи перервати цикл <code>forEach()</code> неможливо без викидання винятку. Якщо вам це потрібно, метод <code>forEach()</code> — не ліпший вибір. </p> + +<p>Завчасне переривання може бути виконане за допомогою:</p> + +<ul> + <li>Простого циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></li> + <li>Циклів <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> / <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>Методи масивів: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} та {{jsxref("Array.prototype.findIndex()", "findIndex()")}} перевіряють елементи масиву функцією-предикатом, яка повертає правдиве значення, якщо наступна ітерація необхідна.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="sparseArray" name="sparseArray">Операція не виконується для неініціалізованих значень (розріджені масиви)</h3> + +<pre class="brush: js">const arraySparse = [1,3,,7]; +let numCallbackRuns = 0; + +arraySparse.forEach(function(element){ + console.log(element); + numCallbackRuns++; +}); + +console.log("numCallbackRuns: ", numCallbackRuns); + +// 1 +// 3 +// 7 +// numCallbackRuns: 3 +// коментар: як бачите, пропущене значення між 3 та 7 не викликало функцію.</pre> + +<h3 id="Перетворення_циклу_for_на_forEach">Перетворення циклу for на forEach</h3> + +<pre class="brush: js">const items = ['щось', 'то', 'має', 'бути']; +const copy = []; + +// було +for (let i = 0; i < items.length; i++) { + copy.push(items[i]) +} + +// стане +items.forEach(function(item) { + copy.push(item) +});</pre> + +<h3 id="Друк_вмісту_масиву">Друк вмісту масиву</h3> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Для того, щоб відобразити вміст масиву у консолі, ви можете скористатись методом {{domxref("Console/table", "console.table()")}}, який виведе відформатовану версію масиву. Наступний приклад ілюструє інший спосіб це зробити, за допомогою <code>forEach()</code>.</p> +</div> + +<p>Наведений код виводить значення кожного елемента масиву з нового рядка:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log('array[' + index + '] = ' + element); +} + +// Завважте, що індекс 2 буде пропущено, +// позаяк елемента на тому місці в масиві немає. +[2, 5, , 9].forEach(logArrayElements); + +// Буде виведено у консоль: +// array[0] = 2 +// array[1] = 5 +// array[3] = 9 +</pre> + +<h3 id="Використання_thisArg">Використання <em><code>thisArg</code></em></h3> + +<p>Наведений приклад змінює властивості об'єкта відповідно до кожного елемента в отриманому масиві:</p> + +<pre class="brush:js">function Counter() { + this.sum = 0; + this.count = 0; +} + +Counter.prototype.add = function(array) { + array.forEach(function(entry) { + this.sum += entry; + ++this.count; + }, this); + // ^---- Зверніть увагу! +}; + +const obj = new Counter(); +obj.add([2, 5, 9]); +obj.count; +// 3 +obj.sum; +// 16 +</pre> + +<p>Оскільки для <code>forEach()</code> вказано параметр <code>thisArg</code>, для кожного виклику <code>callback</code> (тут безіменної функції) він вживатиметься як <code>this</code>.</p> + +<div class="note"> +<p>Якщо передавати аргумент функції за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкового запису функції</a>, то параметр <em><code>thisArg</code></em> можна не вказувати, позаяк стрілкова функція лексично прив'язує значення {{jsxref("Operators/this", "this")}}.</p> +</div> + +<h3 id="Функція_копіювання_об'єкта">Функція копіювання об'єкта</h3> + +<p>Наступний код створює копію наданого об'єкта. Існує чимало способів створення копії об'єкта. Наведений приклад є лише одним з них і насправді призначений лише для наочного пояснення того, як працює <code>Array.prototype.forEach()</code> на прикладі використання нових функцій ECMAScript 5 з <code>Object.*</code> для роботи з керованими властивостями:</p> + +<pre class="brush: js">function copy(obj) { + const copy = Object.create(Object.getPrototypeOf(obj)); + const propNames = Object.getOwnPropertyNames(obj); + + propNames.forEach(function(name) { + const desc = Object.getOwnPropertyDescriptor(obj, name); + Object.defineProperty(copy, name, desc); + }); + + return copy; +} + +const obj1 = {a: 1, b: 2}; +const obj2 = copy(obj1); // obj2 тепер схожий на obj1 +</pre> + +<h3 id="Якщо_масив_змінено_під_час_перебору_інші_елементи_може_бути_пропущено">Якщо масив змінено під час перебору, інші елементи може бути пропущено</h3> + +<p>Наведений приклад виводить у консоль послідовно "перший", "другий" та "четвертий". Коли перебір сягне другого елемента (що має значення "другий"), виклик <code>words.shift()</code> видалить перший елемент масиву, а всі, що лишаться, посунуться на одне місце ліворуч — "четвертий" стане наступним (після поточного), і "третій" таким чином буде пропущено:</p> + +<pre class="brush:js">var words = ['перший', 'другий', 'третій', 'четвертий']; + +words.forEach(function(word) { + console.log(word); + + if (word === 'другий') { + words.shift(); + } +}); + +// перший +// другий +// четвертий +</pre> + +<h3 id="Вирівнювання_масиву">Вирівнювання масиву</h3> + +<p>Даний приклад наведено суто для навчальння. Якщо вам потрібно вирівняти масив вбудованими методами, ви можете скористатись методом {{jsxref("Array.prototype.flat()")}} (очікується у ES2019 та вже реалізований у деяких переглядачах).</p> + +<pre class="brush: js">/** +* Вирівнює переданий масив у одномірний +* +* @params {array} arr +* @returns {array} +*/ +function flatten(arr) { + const result = []; + + arr.forEach((i) => { + if (Array.isArray(i)) { + result.push(...flatten(i)) + } else { + result.push(i) + } + }); + + return result; +} + +// Використання +const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]] + +flatten(problem) // [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/from/index.html b/files/uk/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..7cfb6325b8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,242 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript6 + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Array.from()</strong></code> створює новий екземпляр <code>Array</code> (дрібну копію) з подібного до масиву або ітерабельного об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Подібний до масиву або ітерабельний об'єкт, який треба перетворити на масив.</dd> + <dt><code>mapFn</code> {{Optional_inline}}</dt> + <dd>Функція Map для виклику на кожному елементі масиву.</dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Значення <code>this</code> для функції <code>mapFn</code>.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Новий екземпляр {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Array.from()</code> дозволяє створювати масиви з:</p> + +<ul> + <li>подібних до масивів об'єктів (об'єктів з властивістю <code>length</code> та елементами, що мають числові індекси) або</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/iterable">ітерабельних об'єктів</a> (об'єктів, з яких можна отримати елементи, таких як {{jsxref("Map")}} та {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> має необов'язковий параметр <code>mapFn</code>, який дозволяє виконати функцію {{jsxref("Array.prototype.map", "map")}} на кожному елементі масиву (або об'єкта підкласу), який створюється. Іншими словами, <code>Array.from(obj, mapFn, thisArg)</code> має той самий результат, що й <code>Array.from(obj).map(mapFn, thisArg)</code>, тільки він не створює проміжний масив. Це особливо важливо для певних підкласів масивів, таких як <a href="/uk/docs/Web/JavaScript/Typed_arrays">типізовані масиви</a>, оскільки проміжний масив обов'язково урізав би значення для перетворення у відповідний тип.</p> + +<p>Властивість <code>length</code> методу <code>from()</code> дорівнює 1.</p> + +<p>У ES2015, синтаксис класів дозволяє створення підкласів як для вбудованих класів, так і для тих, що створені користувачем; в результаті статичні методи, такі як <code>Array.from</code> "успадковуються" підкласами класу <code>Array</code> і створюють нові екземпляри підкласу, а не класу <code>Array</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Масив_з_рядка">Масив з рядка</h3> + +<pre class="brush: js">Array.from('foo'); +// [ "f", "o", "o" ]</pre> + +<h3 id="Масив_з_обєкта_Set">Масив з об'єкта <code>Set</code></h3> + +<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']); +Array.from(set); +// [ "foo", "bar", "baz" ]</pre> + +<h3 id="Масив_з_обєкта_Map">Масив з об'єкта <code>Map</code></h3> + +<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(map); +// [[1, 2], [2, 4], [4, 8]] + +const mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="Масив_з_подібного_до_масиву_обєкта_arguments">Масив з подібного до масиву об'єкта (arguments)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [ 1, 2, 3 ]</pre> + +<h3 id="Використання_стрілкових_функцій_та_Array.from">Використання стрілкових функцій та <code>Array.from()</code></h3> + +<pre class="brush: js">// Використання стрілкової функції в якості функції map +// для маніпулювання елементами +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Генерування послідовності чисел +// Оскільки масив ініціалізується значенням `undefined` на кожній позиції, +// значення `v` нижче дорівнюватиме `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h3 id="Генератор_послідовності_range">Генератор послідовності (range)</h3> + +<pre class="brush: js">// Функція генератора послідовності (зазвичай відома як "range", напр. у Clojure, PHP та ін.) +const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); + +// Згенерувати числа у діапазоні 0..4 +range(0, 4, 1); +// [0, 1, 2, 3, 4] + +// Згенерувати числа у діапазоні 1..10 з кроком 2 +range(1, 10, 2); +// [1, 3, 5, 7, 9] + +// Згенерувати алфавіт з допомогою Array.from, користуючись тим, що він впорядкований як послідовність +range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)); +// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>Array.from</code> був доданий до стандарту ECMA-262 у 6-й версії (ES2015); таким чином, він може не існувати у інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод <code>Array.from</code> у реалізаціях, які не мають його вбудованої підтримки. Цей алгоритм саме той, що визначений у ECMA-262, у 6-й версії, за умови, що <code>Object</code> та <code>TypeError</code> мають свої первинні значення і <code>callback.call</code> дорівнює первинному значенню {{jsxref("Function.prototype.call")}}. На додаток, оскільки справжні ітерабельні об'єкти не можуть мати поліфілу, ця реалізація не підтримує загальні ітерабельні об'єкти, визначені у 6-й версії ECMA-262.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версія 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // Властивість length метода from дорівнює 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Нехай C дорівнює значенню this. + var C = this; + + // 2. Нехай items дорівнює ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - not null or undefined'); + } + + // 4. Якщо mapfn дорівнює undefined, тоді нехай mapping дорівнює false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. інакше + // 5. а Якщо IsCallable(mapfn) дорівнює false, викинути виняток TypeError. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. б. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Нехай lenValue дорівнює Get(items, "length"). + // 11. Нехай len дорівнює ToLength(lenValue). + var len = toLength(items.length); + + // 13. Якщо IsConstructor(C) дорівнює true, тоді + // 13. а. Нехай A дорівнює результату виклику внутрішнього метода С [[Construct]] + // зі списком аргументів, що містить єдиний елемент len. + // 14. a. Інакше, нехай A дорівнює ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Нехай k дорівнює 0. + var k = 0; + // 17. Повторювати, доки k < len… (також кроки a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Нехай putStatus дорівнює Put(A, "length", len, true). + A.length = len; + // 20. Повернути A. + return A; + }; + }()); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/includes/index.html b/files/uk/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..3030f78d9f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - Array + - JavaScript + - Method + - Prototype + - polyfill + - Довідка + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p><font face="Open Sans, Arial, sans-serif">Метод </font><code><strong>includes()</strong></code> з'ясовує, чи масив містить елемент із вказаним значенням, та вертає відповідно <code>true</code> або <code>false</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">arr.includes(valueToFind[, fromIndex])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><em><code>valueToFind</code></em></dt> + <dd>Значення елемента, який слід знайти.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Примітка: </strong>При порівнянні рядків та літер, <code>includes()</code> <strong>чутливий до регістру</strong>.</p> +</div> + +<dl> + <dt><em>fromIndex</em> {{optional_inline}}</dt> + <dd>Позиція у масиві, з якої потрібно починати пошук <code>valueToFind</code>; перша літера шукатиметься за індексом <code>fromIndex</code>, якщо <code>fromIndex</code> є позитивним значенням, або за індексом <code>array.length + fromIndex</code>, якщо <code>fromIndex</code> від'ємний (використовуючи {{interwiki("wikipedia", "Модуль_(математика)", "абсолютну величину")}} <code>fromIndex</code> як кількість літер з кінця масиву, де потрібно починати пошук). За замовчуванням дорівнює 0.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Значення {{jsxref("Boolean")}}, яке дорівнює <code>true</code>, якщо значення <code>valueToFind</code> знайдене у масиві (або у частині масиву, якщо заданий параметр <code>fromIndex</code>). Всі нульові значення вважаються рівними, незалежно від знаку (тому -0 вважатиметься рівним і 0, і +0), але <code>false</code> не вважається тим самим, що й 0.</p> + +<div class="blockIndicator note"> +<p><strong>Примітка:</strong> Технічно кажучи, <code>includes()</code> використовує алгоритм <code><a href="/uk/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> для визначення того, чи знайдено заданий елемент.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h3 id="fromIndex_більший_або_дорівнює_довжині_масиву"><em><code>fromIndex</code></em> більший або дорівнює довжині масиву</h3> + +<p>Якщо <em><code>fromIndex</code></em> дорівнює або перевищує довжину масиву, пошук не здійснюється й завжди вертається <code>false</code>:</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // вертає false +arr.includes('c', 100); // вертає false</pre> + +<h3 id="Обчислений_індекс_менший_за_0">Обчислений індекс менший за 0</h3> + +<p>Якщо значення <em><code>fromIndex</code></em> від'ємне, використовується обчислений індекс для визначення позиції, з якої починати пошук <em><code>valueToFind</code></em> у масиві. Якщо обчислений індекс менший або дорівнює <code>-1 * array.length</code>, пошук здійснюється у всьому масиві.</p> + +<pre class="brush: js">// Довжина масиву дорівнює 3 +// fromIndex дорівнює -100 +// Обчислений індекс дорівнює 3 + (-100) = -97 + +var arr = ['a', 'b', 'c']; + +arr.includes('a', -100); // true +arr.includes('b', -100); // true +arr.includes('c', -100); // true +arr.includes('a', -2); // false</pre> + +<h3 id="Застосування_includes()_як_загального_метода">Застосування <code>includes()</code> як загального метода</h3> + +<p>Реалізація метода <code>includes()</code> є зумисне узагальненою. Об'єкт, на який вказує <code>this</code>, не обов'язково повинен належати до класу <code>Array</code>, тож використання <code>includes()</code> можна поширити на інші масивоподібні об'єкти. В наведеному нижче прикладі його застосовано до об'єкта <code>{{jsxref("Functions/arguments", "arguments")}}</code>:</p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // виводить true + console.log([].includes.call(arguments, 'd')); // виводить false +})('a','b','c'); +</pre> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли у довідкові статті. Більше інформації дивіться у дискусії <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Початкова виознака.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/index.html b/files/uk/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..18045d9c84 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,431 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - JavaScript + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p><strong><code>Array</code></strong> є глобальним об'єктом, що використовується для створення масивів; які є високорівневими, спископодібними об'єктами.</p> + +<p><strong>Створення масиву</strong></p> + +<pre class="brush: js">var fruits = ["Яблуко", "Банан"]; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Доступ до елементів масиву (за індексом)</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Яблуко + +var last = fruits[fruits.length - 1]; +// Банан +</pre> + +<p><strong>Обхід елементів масиву</strong></p> + +<pre class="brush: js">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Яблуко 0 +// Банан 1 +</pre> + +<p><strong>Додавання в кінець масиву</strong></p> + +<pre class="brush: js">var newLength = fruits.push("Апельсин"); +// ["Яблуко", "Банан", "Апельсин"] +</pre> + +<p><strong>Видалення елемента з кінця масиву</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // видалити Апельсин (з кінця) +// ["Яблуко", "Банан"]; +</pre> + +<p><strong>Видалення елемента з початку масиву</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // видалити Яблуко з початку +// ["Банан"]; +</pre> + +<p><strong>Додавання елемента до початку масиву</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift("Полуниця") // додади до початку +// ["Полуниця", "Банан"]; +</pre> + +<p><strong>Пошук індексу елемента в масиві</strong></p> + +<pre class="brush: js">fruits.push("Манго"); +// ["Полуниця", "Банан", "Манго"] + +var pos = fruits.indexOf("Банан"); +// 1 +</pre> + +<p><strong>Видалення елемента масиву за його індексом (позицією)</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // ось, як видаляється елемент +// ["Полуниця", "Манго"] +</pre> + +<p><strong>Видалення елементів починаючи з певного індексу</strong></p> + +<pre class="brush: js">var vegetables = ['Капуста', 'Ріпа', 'Редька', 'Морква']; +console.log(vegetables); +// ["Капуста", "Ріпа", "Редька", "Морква"] + +var pos = 1, n = 2; + +var removedItems = vegetables.splice(pos, n); +// ось так видаляються елементи, n визначає кількість елементів на видалення, +// від цієї позиції (pos) в напрямку кінця масиву. + +console.log(vegetables); +// ["Капуста", "Морква"] (початковий масив змінено) + +console.log(removedItems); +// ["Ріпа", "Редька"]</pre> + +<p><strong>Копіювання масиву</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // ось так робиться копія +// ["Полуниця", "Манго"] +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code> +</pre> + +<dl> + <dt> + <h3 id="Параметри">Параметри</h3> + </dt> +</dl> + +<p><code>element<em>N</em></code></p> + +<dl> + <dd>Масив у JavaScript ініціалізується за допомогою наперед заданих елементів, за виключенням тієї ситуації коли в конструктор <code>Array</code> передається тільки один аргумент і він є числом (див. параметр <code>arrayLength</code> нижче). Зверніть увагу на те, що це спрацьовує лише у тому випадку, якщо масив створено за допомогою конструктора <code>Array</code>, а не через літерали масивів створених з допомогою синтаксу квадратних дужок.</dd> + <dt><code>arrayLength</code></dt> + <dd>Якщо єдиним аргументом (вхідним параметром) конструктора <code>Array</code> є ціле число від 0 до 2<sup>32</sup>-1 (включно), буде повернено новий JavaScript-масив з властивістю length рівною цьому числу. <strong>Зверніть увагу</strong>, що цей масив матиме пусті слоти, а не слоти зі значеннями <code>undefined</code>. Якщо аргументом буде будь-яке інше число, виникне виняток <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError">RangeError</a>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Масиви - це спископодібні об'єкти, чий прототип має методи для операцій обходу та зміни масиву. Ані довжина масиву, ані типи його елементів не є незмінними. Довжина масиву може змінитись будь-коли, як і позиція даних в масиві; тому їх використання залежить від рішення програміста. Взагалі, це зручні характеристики; але якщо ці особливості не є бажаними для ваших конкретних цілей, ви можете розглянути можливість використання типізованих масивів.</p> + +<p>Масиви не можуть використовувати рядки у якості індексів елементів (як <a href="https://uk.wikipedia.org/wiki/%D0%90%D1%81%D0%BE%D1%86%D1%96%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9_%D0%BC%D0%B0%D1%81%D0%B8%D0%B2">асоціативні масиви</a>), а тільки цілі числа(індекси). Присвоєння або звернення через не цілочисельні значення, з використанням <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">квадратних дужок</a> (або <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">через крапку</a>), не присвоїть або не отримає елемент з самого списку масиву, але присвоїть чи отримає доступ до змінної, пов'язаної з <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Data_structures#Properties">колекцією властивостей об'єкта</a>(властивості) цього масиву. Об'єктні властивості масиву та список елементів масиву є відокремленими, і <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">операції обходу та зміни </a>цього масиву не застосовуються до цих іменованих властивостей.</p> + +<h3 id="Доступ_до_елементів_масиву">Доступ до елементів масиву</h3> + +<p>Масиви в JavaScript індексуються з нуля: перший елемент масиву має індекс, який дорівнює 0, а індекс останнього елемента відповідає значенню властивості масиву {{jsxref("Array.length", "length")}} мінус 1. Використання неправильного індексу повертає <code>undefined</code>.</p> + +<pre class="brush: js">var arr = ['це перший елемент', 'це другий елемент']; +console.log(arr[0]); // виводить 'це перший елемент' +console.log(arr[1]); // виводить 'це другий елемент' +console.log(arr[arr.length - 1]); // виводить 'це другий елемент' +</pre> + +<p>Елементи масиву є властивостями об'єкта, так само, як <code>toString</code> є властивістю, але спроби звернутися до елемента масиву наступним чином згенерує синтаксичну помилку через неправильне ім'я властивості:</p> + +<pre class="brush: js">console.log(arr.0); // є синтаксична помилка +</pre> + +<p>В масивах JavaScript немає нічого особливого, що призводить до цього. До властивостей JavaScript, які починаються з цифри, не можна звертатися через крапку; необхідно звертатися через квадратні дужки. Наприклад, якщо ви маєте об'єкт з властивістю під назвою <code>'3d'</code>, до неї можна звертатися тільки через квадратні дужки. Приклад:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // є синтаксична помилка +console.log(years[0]); // працює вірно +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // є синтаксична помилка +renderer['3d'].setTexture(model, 'character.png'); // працює вірно +</pre> + +<p>Зверніть увагу, що <code>'3d'</code> має писатися в лапках. Індекси масивів JavaScript також можна писати в лапках (напр., <code>years['2']</code> замість <code>years[2]</code>), хоча це не обов'язково. Індекс 2 у <code>years[2]</code> примусово перетворюється на рядок рушієм JavaScript через неявне перетворення <code>toString</code>. Саме через це <code>'2'</code> та <code>'02'</code> займали б два різні слоти в об'єкті <code>years</code> і наступний приклад дорівнював би <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Схожим чином до властивостей об'єкта, які є зарезервованими словами (!) можна звертатися тільки через рядкові значення у квадратних дужках (але до них можна звертатися через крапку у firefox 40.0a2 наприклад):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Зв'язок_між_length_та_числовими_властивостями">Зв'язок між <code>length</code> та числовими властивостями</h3> + +<p>У масивах JavaScript властивість {{jsxref("Array.length", "length")}} та числові властивості взаємопов'язані. Декілька з вбудованих методів масивів (напр., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, і т.д.) враховують значення властивості {{jsxref("Array.length", "length")}} під час виконання. Інші методи (напр., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, і т.д.) призводять до зміни властивості масиву {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('банан', 'яблуко', 'персик'); + +console.log(fruits.length); // 3 +</pre> + +<p>Присвоєння властивості до масиву JavaScript змінить властивість масиву {{jsxref("Array.length", "length")}} відповідним чином, якщо властивість є коректним індексом масиву, і цей індекс знаходиться поза поточними межами масиву:</p> + +<pre class="brush: js">fruits[5] = 'манго'; +console.log(fruits[5]); // 'манго' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Збільшення значення {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Однак, зменшення значення властивості {{jsxref("Array.length", "length")}} видаляє елементи.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>Це пояснюється далі на сторінці {{jsxref("Array.length")}}.</p> + +<h3 id="Створення_масиву_з_використанням_результату_пошуку_збігів">Створення масиву з використанням результату пошуку збігів</h3> + +<p>Пошук збігів між регулярним виразом та рядком може створити масив JavaScript. Цей масив має властивості та елементи, які надають інформацію про збіг. Такий масив повертається методами {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}} та {{jsxref("String.replace")}}. Щоб краще пояснити ці властивості та елементи, подивіться на наступний приклад, а тоді зверніться до таблиці нижче:</p> + +<pre class="brush: js">// Пошук послідовності з однієї d, далі одна або більше b, далі одна d +// Запам'ятати всі b і d, яка йде за ними +// Ігнорувати регістр + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>Властивості та елементи, які повертаються в результаті даного пошуку збігів:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Властивість/Елемент</td> + <td class="header">Опис</td> + <td class="header">Приклад</td> + </tr> + <tr> + <td><code>input</code></td> + <td>Властивість тільки для читання, відображає початковий рядок, в якому виконується пошук збігів з регулярним виразом.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Властивість тільки для читання, індекс збігу у рядку, нумерується з нуля.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Елемент тільки для читання, який містить символи останнього збігу.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Елементи тільки для читання, які містять підрядки збігу, що заключені у дужки, якщо такі є у регулярному виразі. Кількість можливих підрядків у дужках є необмеженою.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>Властивість length конструктора <code>Array</code>, дорівнює 1.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Дозволяє додавати властивості до усіх масивів.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Створює новий екземпляр <code>Array</code> з подібного до масиву або ітерабельного об'єкта.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Повертає true, якщо змінна є масивом, якщо ні, то повертає false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Створює новий екземпляр <code>Array</code> з кількістю аргументів, заданих через змінну, незважаючи на кількість або тип аргументів.</dd> +</dl> + +<h2 id="Екземпляри_Array"><code>Екземпляри Array</code></h2> + +<p>Всі екземпляри <code>Array</code> наслідуються від {{jsxref("Array.prototype")}}. Прототип конструктора <code>Array</code> може бути змінений, що вплине на всі екземпляри <code>Array</code>.</p> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<h4 id="Методи_модифікації">Методи модифікації</h4> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_модифікації')}}</div> + +<h4 id="Методи_доступу">Методи доступу</h4> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_доступу')}}</div> + +<h4 id="Методи_перебору">Методи перебору</h4> + +<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Методи_перебору')}}</div> + +<h2 id="Загальні_методи_масивів">Загальні методи масивів</h2> + +<div class="warning"> +<p><strong>Загальні методи масивів є нестандартними, застарілими і будуть прибрані найближчим часом.</strong></p> +</div> + +<p>Іноді ви б хотіли застосувати методи масивів на рядках або інших подібних до масиву об'єктах (таких як {{jsxref("Functions/arguments", "arguments", "", 1)}} у функції). В такому випадку, ви розглядаєте рядок як масив символів (чи не об'єкт масиву як масив). Наприклад, для того, щоб перевірити, що кожний символ у змінній <var>str</var> є літерою, ви б написали:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("Рядок '" + str + "' містить тільки літери!"); +} +</pre> + +<p>Такий запис є доволі марнотратним, і у JavaScript 1.6 було запроваджено загальне скорочення:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("Рядок '" + str + "' містить тільки літери!"); +}</pre> + +<p>{{jsxref("Global_Objects/String", "Загальні методи", "#String_generic_methods", 1)}} також доступні у {{jsxref("String", "рядках")}}.</p> + +<p>Вони <strong>не є</strong> частиною стандартів ECMAScript і не підтримуються не Gecko оглядачами. У якості стандартної альтернативи, ви можете перетворити ваш об'єкт на справжній масив з допомогою методу {{jsxref("Array.from()")}}; хоча цей метод може не підтримуватися у старих оглядачах:</p> + +<pre class="brush: js">if (Array.from(str).every(isLetter)) { + console.log("Рядок '" + str + "' містить тільки літери!"); +}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_масиву">Створення масиву</h3> + +<p>Наступний приклад створює масив <code>msgArray</code> довжиною 0, потім додає значення елементам <code>msgArray[0]</code> та <code>msgArray[99]</code>, змінюючи довжину масиву на 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Привіт'; +msgArray[99] = 'світ'; + +if (msgArray.length === 100) { + console.log('Довжина масиву 100.'); +} +</pre> + +<h3 id="Створення_двовимірного_масиву">Створення двовимірного масиву</h3> + +<p>Наступний код створює шахівницю у вигляді двовимірного масиву рядків. Перший хід робиться копіюванням 'п' з (6,4) до (4,4). Стара позиція (6,4) робиться порожньою.</p> + +<pre class="brush: js">var board = [ + ['Т','Н','С','Ф','К','С','Н','Т'], + ['П','П','П','П','П','П','П','П'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['п','п','п','п','п','п','п','П'], + ['т','н','с','ф','к','с','н','т'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Перемістити королівського пішака вперед на 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Ось результат:</p> + +<pre class="eval">Т,Н,С,Ф,К,С,Н,Т +П,П,П,П,П,П,П,П + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +п,п,п,п,п,п,п,п +т,н,с,ф,к,с,н,т + +Т,Н,С,Ф,К,С,Н,Т +П,П,П,П,П,П,П,П + , , , , , , , + , , , , , , , + , , , ,п, , , + , , , , , , , +п,п,п,п, ,п,п,п +т,н,с,ф,к,с,н,т +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Додано нові методи: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Додано нові методи: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Додано новий метод: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-оглядачами">Сумісність з веб-оглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/uk/docs/Web/JavaScript/Typed_arrays">Типізовані масиви</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/indexof/index.html b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..049c3ab869 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,260 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>indexOf()</strong></code> повертає перший індекс, за яким даний елемент був знайдений в масиві, а якщо він відсутній, то повертає -1.</p> + +<div class="note"> +<p><strong>Примітка:</strong> Щодо метода String, дивіться {{jsxref("String.prototype.indexOf()")}}.</p> +</div> + +<pre class="brush: js">var a = [2, 9, 9]; +a.indexOf(2); // 0 +a.indexOf(7); // -1 + +if (a.indexOf(7) === -1) { + // елемент не існує у масиві +} +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Елемент, який потрібно знайти.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Індекс, з якого починається пошук. Якщо індекс більше або дорівнює довжині масиву, повертається -1, що означає, що масив не буде шукатися. Якщо значення показника є від'ємним числом, то воно трактується як зміщення від кінця масиву.</dd> + <dd><code>Примітка:</code> якщо наданий індекс від'ємний, масив все ще ітерується спереду назад. Якщо індекс рівний 0, то буде проведений пошук по всьому масиву. За замовчуванням: 0 (виконується пошук по всьому масиву).</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Перший індекс елемента в масиві; якщо не знайдено, то <strong>-1</strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>indexOf()</code> порівнює <code>searchElement</code> з елементами Масиву, використовуючи <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">строгу рівність</a> (той самий метод, що використовується з допомогою <code>===</code> або потрійним дорівнює).</p> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="Використання_indexOf()">Використання <code>indexOf()</code></h3> + +<p>У наступному прикладі <code>indexOf()</code> використовується для пошуку значень в масиві.</p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="Пошук_всіх_відопвідностей_на_елементі">Пошук всіх відопвідностей на елементі</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="Пошук_чи_існує_елемент_в_масиві_і_його_оновлення">Пошук, чи існує елемент в масиві, і його оновлення </h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('Оновлений набір овочів : ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' вже існує у наборі овочів.'); + } +} + +var veggies = ['картопля', 'помідор', 'чилі', 'зелений перець']; + +updateVegetablesCollection(veggies, 'шпинат'); +// Оновлений набір овочів: картопля,помідор,чилі,зелений перець,шпинат +updateVegetablesCollection(veggies, 'шпинат'); +// шпинат вже існує у наборі овочів. +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p><code>indexOf()</code> був доданий в стандарт ECMA-262 в 5-му виданні; як такий він може бути присутнім не у всіх браузерах. Це можна обійти, використовуючи наступний код на початку скриптів. Це дозволить вам використовувати метод <code>indexOf()</code>, коли ще немає вбудованої підтримки в браузері. Цей алгоритм збігається із зазначеною в ECMA-262, 5-е видання, припускаючи, що{{jsxref("Global_Objects/TypeError", "TypeError")}} і {{jsxref("Math.abs()")}} має свої оригінальні значення.</p> + +<pre class="brush: js">if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function indexOf(member, startFrom) { + /* + У спрощеному режимі, якщо змінна `this` має значення null або + undefined, то вона встановлюється в об'єкт window. В іншому випадку + `this` автоматично перетворюється в об'єкт. У строгому режимі, якщо + змінна 'this' має значення null або undefined, генерується 'TypeError'. + */ + if (this == null) { + throw new TypeError("Array.prototype.indexOf() - can't convert `" + this + "` to object"); + } + + var + index = isFinite(startFrom) ? Math.floor(startFrom) : 0, + that = this instanceof Object ? this : new Object(this), + length = isFinite(that.length) ? Math.floor(that.length) : 0; + + if (index >= length) { + return -1; + } + + if (index < 0) { + index = Math.max(length + index, 0); + } + + if (member === undefined) { + /* + Оскільки `member` не визначено, ключі, які не існують, + будуть мати те ж значення, що і `member`, і, отже, повинні + бути перевірені. + */ + do { + if (index in that && that[index] === undefined) { + return index; + } + } while (++index < length); + } else { + do { + if (that[index] === member) { + return index; + } + } while (++index < length); + } + + return -1; + }; +}</pre> + +<p>Однак, якщо ви більше зацікавлені у всіх маленьких технічних бітах, визначених стандартом ECMA, і менше стурбовані продуктивністю або лаконічністю, то ви можете знайти це більш описове заповнення більш корисним.</p> + +<pre class="brush: js">// Кроки продукції ECMA-262, Edition 5, 15.4.4.14 +// Посилання: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Нехай o є результатом виклику ToObject, що передає це + // значення в якості аргументу. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Нехай lenValue є результатом виклику Get, + // внутрішнього методу o з аргументом "length". + // 3. Нехай len буде ToUint32(lenValue). + var len = o.length >>> 0; + + // 4. Якщо len рівне 0, return -1. + if (len === 0) { + return -1; + } + + // Якщо аргумент fromIndex був переданий, let n = + // ToInteger(fromIndex); інакше let n = 0. + var n = fromIndex | 0; + + // 6. Якщо n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. Якщо n >= 0, то нехай k дорівнює n. + // 8. Інакше, n<0, нехай k дорівнює len - abs(n). + // Якщо k менше, ніж 0, тоді нехай k дорівнює 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Повторювати, доки k < len + while (k < len) { + // а. Нехай Pk дорівнює ToString(k). Це неочевидно для лівосторонніх операндів оператора in + // б. Нехай kPresent буде результатом виклику + // внутрішнього метода o HasProperty з аргументом Pk. + // Цей крок можна поєднати з в + // в. Якщо kPresent дорівнює true, тоді + // i. Нехай elementK буде результатом виклику + // внутрішнього метода o Getwith з аргументом ToString(k). + // ii. Нехай те саме буде результатом застосування + // Алгоритму Строгого Порівняння (Strict Equality Comparison Algorithm) + // до searchElement та elementK. + // iii. Якщо те саме дорівнює true, повернути k. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2> + +<ul> + <li>Починаючи з Firefox 47 {{geckoRelease(47)}}, цей метод більше не повертатиме <code>-0</code>. Наприклад, <code>[0].indexOf(0, -0)</code> тепер завжди повертатиме <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/isarray/index.html b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..8f7b888535 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,131 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - JavaScript + - Method + - polyfill + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<div>Метод <code><strong>Array.isArray()</strong></code> з'ясовує, чи є передане значення {{jsxref("Array", "масивом")}}.</div> + +<div></div> + +<pre class="brush: js">Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, яке має бути перевірено.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Значення <code>true</code>, якщо <code>value</code> є {{jsxref("Array", "масивом")}}; <code>false</code> — якщо ні.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо передане значення є {{jsxref("Array", "масивом")}}, повертається <code>true</code>, інакше повертається <code>false</code>.</p> + +<p>Більш докладні відомості дивіться у статті «<a href="http://web.mit.edu/jwalden/www/isArray.html">Як з'ясувати абсолютно точно, чи є об'єкт у JavaScript масивом</a>». При використанні екземпляра {{jsxref("TypedArray")}} завжди повертається <code>false</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">//Всі наведені далі виклики вертають true: +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +Array.isArray(new Array('a', 'b', 'c', 'd')); +Array.isArray(new Array(3)); +// Маловідомий факт: Array.prototype сам є масивом: +Array.isArray(Array.prototype); + +//Всі наведені далі виклики вертають false: +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray(new Uint8Array(32)); +Array.isArray({ __proto__: Array.prototype });</pre> + +<h3 id="instanceof_проти_isArray"><code>instanceof</code> проти <code>isArray</code></h3> + +<p>Для перевірки, чи є об'єкт екземпляром <code>Array</code>, метод <code>Array.isArray</code> підходить краще, ніж <code>instanceof</code>, тому що він працює між фреймами (<code>iframes</code>).</p> + +<pre class="brush: js">var iframe = document.createElement('iframe'); +document.body.appendChild(iframe); +xArray = window.frames[window.frames.length-1].Array; +var arr = new xArray(1,2,3); // [1,2,3] + +// Коректна перевірка екземпляра Array +Array.isArray(arr); // true +// Вважається небезпечним, бо не працює між фреймами +arr instanceof Array; // false</pre> + +<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2> + +<p>Наступний код, запущений перед будь-яким іншим кодом, створить метод <code>Array.isArray()</code>, якщо він недоступний початково.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.isArray")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/join/index.html b/files/uk/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..116fb03bec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,114 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - JavaScript + - Method + - Prototype + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p><code>Метод<strong> join()</strong></code> створює та повертає рядок, що об'єднує всі елементи масиву (або <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">подібного до масиву об'єкта</a>), розділені комами або заданим роздільником. Якщо масив містить лише один елемент, то він буде повернений без роздільника.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> + +<p class="hidden">Джерело цього інтерактивного прикладу знаходиться в GitHub репозиторії. Якщо ви бажаєте зробити внесок до проекту інтерактивних прикладів, будь ласка, склонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам пулл реквест.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.join(<em>[</em><var>separator]</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>separator</code> {{optional_inline}}</dt> + <dd>Визначає рядок, що розділить кожну пару сусідніх елементів масиву. Роздільник перетворюється на рядок, якщо це необхідно. Якщо він пропущений, елементи масиву будуть розділені комою (","). Якщо <code>separator</code> є порожнім рядком, усі елементи будуть обʼєднані без жодних знаків між ними.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок з усіма обʼєднаними елементами масиву. Якщо <code><em>arr</em>.length</code> дорівнює <code>0</code>, буде повернений порожній рядок.</p> + +<h2 id="Опис">Опис</h2> + +<p>Рядкові представлення усіх елементів масиву поєднуються в один рядок.</p> + +<div class="warning"> +<p>Якщо елемент дорівнює <code>undefined</code> або <code>null</code>, він перетворюється на порожній рядок.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Обʼєднання_масиву_різними_шляхами">Обʼєднання масиву різними шляхами</h3> + +<p class="syntaxbox">В наступному прикладі створюється масив <code>a</code> із трьома елементами, після чого поєднується чотири рази: використовуючи роздільник за замовчуванням, кому та пробіл, плюс, порожній рядок.</p> + +<pre class="brush: js">var a = ['Вітер', 'Вода', 'Вогонь']; +a.join(); // 'Вітер,Вода,Вогонь' +a.join(', '); // 'Вітер, Вода, Вогонь' +a.join(' + '); // 'Вітер + Вода + Вогонь' +a.join(''); // 'ВітерВодаВогонь'</pre> + +<h3 id="Обʼєднання_подібного_до_масиву_об'єкта">Обʼєднання подібного до масиву об'єкта</h3> + +<p>В наступному прикладі подібний до масиву об'єкт (<code><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>) об'єднується шляхом виклику {{jsxref("Function.prototype.call")}} для <code>Array.prototype.join</code>.</p> + +<pre class="brush: js">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span> +} +f(1, 'a', true); +//очікуваний результат: "1,a,true" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Запроваджено у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена з структурованих даних. Якщо ви бажаєте зробити внесок, будь ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам пулл реквест.</div> + +<p>{{Compat("javascript.builtins.Array.join")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/keys/index.html b/files/uk/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..d631dea894 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,82 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototype + - Довідка + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>keys()</strong></code> вертає новий об'єкт <abbr title="Array Iterator">перебирача</abbr> ключів (індексів) масиву.</p> + + + +<p>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.keys()</pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий об'єкт <abbr title="ітератора">перебирача</abbr> {{jsxref("Array")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перебирач_ключів_розрідженого_масиву_не_оминає_прогалин">Перебирач ключів розрідженого масиву не оминає прогалин</h3> + +<pre class="brush: js">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // виводить ['0', '2'] +console.log(denseKeys); // виводить [0, 1, 2] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкова виознака.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..97ae6e5457 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,166 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>lastIndexOf()</strong></code> повертає останній індекс, за яким заданий елемент було знайдено у масиві, або -1, якщо елемент не знайдено. Пошук відбувається в зворотному порядку, починаючи з індексу <code>fromIndex</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement[</var>, <var>fromIndex]</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Елемент, який потрібно знайти у масиві.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Індекс, з якого починається пошук у зворотному порядку. За замовченням дорівнює довжині масиву мінус один (<code>arr.length - 1</code>), тобто пошук відбуватиметься у всьому масиві. Якщо індекс більше або дорівнює довжині масиву, пошук відбуватиметься у всьому масиві. Якщо індекс є від'ємним, він вважається відступом від кінця масиву. Зверніть увагу, що навіть якщо індекс є від'ємним, пошук все одно відбувається з кінця масиву. Якщо обчислений індекс є від'ємним, повертається -1, тобто пошук не відбувається.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Останній індекс елемента у масиві; <strong>-1</strong>, якщо елемент не знайдений.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>lastIndexOf</code> порівнює <code>searchElement</code> з елементами масиву, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність_()">строгу рівність</a> (метод, що використовує оператор === або потрійне дорівнює).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_lastIndexOf">Використання <code>lastIndexOf</code></h3> + +<p>Наступний приклад використовує <code>lastIndexOf</code>, щоб знайти значення у масиві.</p> + +<pre class="brush: js">var numbers = [2, 5, 9, 2]; +numbers.lastIndexOf(2); // 3 +numbers.lastIndexOf(7); // -1 +numbers.lastIndexOf(2, 3); // 3 +numbers.lastIndexOf(2, 2); // 0 +numbers.lastIndexOf(2, -2); // 0 +numbers.lastIndexOf(2, -1); // 3 +</pre> + +<h3 id="Знаходження_всіх_позицій_входжень_елемента">Знаходження всіх позицій входжень елемента</h3> + +<p>Наступний приклад використовує <code>lastIndexOf</code>, щоб знайти всі індекси елемента у заданому масиві, використовуючи {{jsxref("Array.prototype.push", "push")}}, щоб додати їх до іншого масиву по мірі знаходження.</p> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.lastIndexOf(element); +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} + +console.log(indices); +// [4, 2, 0] +</pre> + +<p>Зверніть увагу, що ми маємо окремо обробити випадок <code>idx == 0</code>, тому що елемент завжди буде знайдений, незважаючи на параметр <code>fromIndex</code>, якщо це перший елемент масиву. В цьому відмінність від методу {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>lastIndexOf</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній в інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати <code>lastIndexOf</code> у реалізаціях, які не підтримують його початково. Цей алгоритм є саме тим, що зазначений у 5-й версії ECMA-262, за умови, що {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}} та {{jsxref("Math.min")}} мають свої початкові значення.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версії 5, 15.4.4.15 +// Довідка: http://es5.github.io/#x15.4.4.15 +if (!Array.prototype.lastIndexOf) { + Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var n, k, + t = Object(this), + len = t.length >>> 0; + if (len === 0) { + return -1; + } + + n = len - 1; + if (arguments.length > 1) { + n = Number(arguments[1]); + if (n != n) { + n = 0; + } + else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + + for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) { + if (k in t && t[k] === searchElement) { + return k; + } + } + return -1; + }; +} +</pre> + +<p>Знову ж таки, зауважте, що ця реалізація прагне повної сумісності з <code>lastIndexOf</code> у Firefox на рушії JavaScript SpiderMonkey, в тому числі у декількох можливих граничних ситуаціях. Якщо ви плануєте використовувати її у застосунках з реального життя, то можете обраховувати <code>from</code> менш складним кодом, якщо знехтуєте цими ситуаціями.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> +</div> + +<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2> + +<ul> + <li>Починаючи з Firefox 47 {{geckoRelease(47)}}, цей метод більше не повертатиме <code>-0</code>. Для прикладу, <code>[0].lastIndexOf(0, -0)</code> тепер завжди повертатиме <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/length/index.html b/files/uk/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..c407dc290b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,139 @@ +--- +title: array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Властивість + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>length</strong></code> об'єкта, який є екземпляром типу <code>Array</code>, встановлює або повертає кількість елементів у цьому масиві. Значення є цілим беззнаковим 32-бітним числом, що завжди є більшим за найбільший індекс у масиві.</p> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{EmbedInteractiveExample("pages/js/array-length.html")}}</span></p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Опис"><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">О</strong><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">пис</strong></h2> + +<p>Значенням властивості <code>length</code> є ціле додатне число, менше за 2 в степені 32 (2<sup>32</sup>).</p> + +<pre class="brush: js">var namelistA = new Array(4294967296); //2 в степені 32 = 4294967296 +var namelistC = new Array(-100) //від'ємне число + +console.log(namelistA.length); //RangeError: Invalid array length +console.log(namelistC.length); //RangeError: Invalid array length + +var namelistB = []; +namelistB.length = Math.pow(2,32)-1; //встановити довжину масиву меншу, ніж 2 в степені 32 +console.log(namelistB.length); + +//4294967295</pre> + +<p>Ви можете присвоїти значення властивості <code>length</code>, щоб скоротити масив. Коли ви розширюєте масив, змінюючи його довжину (властивість <code>length</code>), збільшується кількість фактичних елементів; наприклад, якщо ви присвоїли <code>length</code> 3, коли елементів насправді 2, масив тепер містить 3 елементи, в результаті третій є неітерабельним порожнім елементом.</p> + +<pre class="brush: js">var arr = [1, 2]; +console.log(arr); +// [ 1, 2 ] + +arr.length = 5; // встановити довжину 5, маючи 2 елементи. +console.log(arr); +// [ 1, 2, <3 порожні елементи> ] + +arr.forEach(element => console.log(element)); +// 1 +// 2</pre> + +<p class="brush: js">Таким чином, поле <code>length</code> не обов'язково вказує на кількість визначених значень у масиві. Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array#Зв'язок_між_length_та_числовими_властивостями" title="Relationship between length and numerical properties">Зв'язок між length та числовими властивостями</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<ul> + <li><code>Writable (Доступний для запису)</code>: Якщо цей атрибут встановлений у <code>false</code>, значення цієї властивості не можна змінити.</li> + <li><code>Enumerable (Доступний для переліку)</code>: Якщо цей атрибут встановлений у <code>true</code>, властивість ітерується під час виконання циклів <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a> або <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a>.</li> + <li><code>Configurable (Доступний для налаштування)</code>: Якщо цей атрибут встановлений у <code>false</code>, будь-які спроби видалити властивість або змінити її атрибути (доступність для запису, переліку або налаштування) не спрацюють.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Циклічне_проходження_по_масиву">Циклічне проходження по масиву</h3> + +<p>В наступному прикладі, проходження по масиву <code>numbers</code> відбувається зважаючи на властивість <code>length</code>. Значення кожного елементу подвоюється.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; + +for (var i = 0; i < numbers.length; i++) { + numbers[i] *= 2; +} +// numbers тепер [2, 4, 6, 8, 10] +</pre> + +<h3 id="Скорочення_масиву">Скорочення масиву</h3> + +<p>Наступний приклад скорочує масив <code>statesUS</code> до довжини 3, якщо його поточна довжина більша, ніж 3.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; + +if (numbers.length > 3) { + numbers.length = 3; +} + +console.log(numbers); // [1, 2, 3] +console.log(numbers.length); // 3</pre> + +<h3 id="Створення_порожнього_масиву_фіксованої_довжини">Створення порожнього масиву фіксованої довжини</h3> + +<pre class="brush: js">var numbers = []; +numbers.length = 10; +console.log(numbers); // [empty × 10]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.length")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/map/index.html b/files/uk/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..2c71a1fe6f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,349 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод + - поліфіл + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>map()</strong></code> <strong>створює новий масив</strong> з результатами виклику наданої функції на кожному елементі масиву, який викликав метод.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p> + +<div class="hidden"> +<p>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." </p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js"><var>var new_array = arr.map(function callback(currentValue[, index[, array]]) { + // Повернути елемент нового масиву new_array +}[, thisArg])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка повертає елемент нового масиву. Приймає три аргументи:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>Поточний елемент масиву.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елементу масиву</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Сам масив, на якому був викликаний <code>map</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Значення, що буде використане як <code>this</code> при виконанні <code>callback</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається_(return_value)">Значення, що повертається (return value)</h3> + +<p>Новий масив, кожен елемент якого є результатом функції <code>callback</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>map</code> викликає передану <code>callback-функцію</code> <strong>один раз для кожного елементу</strong> масиву, в заданому порядку, та створює новий масив з результатів. <code>callback</code> викликаться тільки для індексів яким відповідають значення, включно з <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Функція не викликається для елеметів значення яких відсутні (мається на увазі, індекси які не були явно задані, які були видалені або яким не було присвоєне значення).</p> + +<p>Остільки <code>map</code> створює новий масив, викликати його, якщо ви не збираєтесь використовувати повернений масив, є антишаблоном; скористайтесь натомість <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> або <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/for...of"><code>for-of</code></a>. Ознаки того, що вам не підходить метод <code>map</code>: А) Ви не використовуєте масив, який він повертає, і/або Б) Ви не повертаєте значення у функції <code>callback</code>.</p> + +<p><code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента, та масив на якому операцію було викликано.</p> + +<p>Якщо <code>thisArg</code> параметр переданий в <code>map</code>, він буде використовуватись як ключове слово this для <code>callback-функції</code>. В іншому випадку, значення {{jsxref("undefined")}} буде використане як <code>this</code>. Значення this, яке спостерігається в callback-функції, в кінцевому рахунку визначається згідно <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">звичайних правил для визначення this, видимого з функції</a>.</p> + +<p><code>map</code> не змінює масив, на якому був викликаний (хоча <code>callback</code>, якщо був викликаний, може змінити).</p> + +<p>Діапазон елементів, які обробляє метод map, визначений до того як callback-функція буде визвана вперше. Елементи які будуть додані до масиву після виклику map, не будуть оброблені callback-функцією. Якщо існуючі в масиві елементи змінені або видалені, їхні значення при потраплянні в callback-функцію, будуть такими якими вони є на той час коли map обробляє їх. Елементи які були видалені до і після того як map був визваний, ігноруються. </p> + +<p>Згідно з алгоритмом, визначеним у специфікації, якщо масив на якому було викликано map, розріджений, то масив на виході теж буде розрідженим, залишаючи ті ж самі індекси пустими.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перетворення_масиву_з_числами_в_масив_квадратних_коренів">Перетворення масиву з числами в масив квадратних коренів</h3> + +<p>Наступний код бере масив з числами і створює новий масив, який складається з квадратних коренів чисел з першого масиву.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var roots = numbers.map(function(num) { +return Math.sqrt(num) +}); +// roots тепер [1, 2, 3] +// numbers залишається [1, 4, 9] +</pre> + +<h3 id="Використання_map_для_переформатування_об'єктів_в_масиві">Використання map для переформатування об'єктів в масиві</h3> + +<p>Наступний код використовує масив з об'єктами щоб створити новий масив з переформатованими об'єктами.</p> + +<pre class="brush: js">var kvArray = [{key:1, value:10}, + {key:2, value:20}, + {key:3, value: 30}]; + +var reformattedArray = kvArray.map(obj =>{ + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}); +// reformattedArray тепер [{1:10}, {2:20}, {3:30}], + +// kvArray залишається: +// [{key:1, value:10}, +// {key:2, value:20}, +// {key:3, value: 30}] +</pre> + +<h3 id="Перетворення_масиву_чисел_використовуючи_функцію_з_аргументом">Перетворення масиву чисел використовуючи функцію з аргументом</h3> + +<p>Наступний код показує як map працює коли функція що потребує один аргумент, використовує його. Аргумент буде автоматично присвоєний з кожного елементу масиву коли map буде проходитись по оригінальному масиву..</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); + +// doubles тепер [2, 8, 18] +// numbers залишається [1, 4, 9] +</pre> + +<h3 id="Загальне_використання_map">Загальне використання <code>map</code></h3> + +<p>Цей приклад показує як використовувати map на рядках ({{jsxref("String")}}) щоб отримати масив байтів в ASCII кодуванні яке відображає значення літер:</p> + +<pre class="brush: js">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { + return x.charCodeAt(0); +}); +// a тепер дорівнює [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Загальне_використання_map_з_querySelectorAll">Загальне використання <code>map</code> з <code>querySelectorAll</code></h3> + +<p>Даний приклад показує, як виконати перебір набору об'єктів, отриманих методом <code>querySelectorAll</code>. Тому що метод <code>querySelectorAll</code> повертає <strong><em>NodeList</em></strong>, який є колекцією об'єктів.</p> + +<p>У даному випадку ми повертаємо значення всіх вибраних опцій на екрані:</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>Це простіше зробити методом {{jsxref("Array.from()")}}.</p> + +<h3 id="Хитрий_спосіб_використання">Хитрий спосіб використання</h3> + +<p>(<a href="http://www.wirfs-brock.com/allen/posts/166">натхненний цим блог-постом</a>)</p> + +<p>Загальноприйнято використовувати функцію callback з одним аргументом (елемент по якому проходиться функція). Деякі функції також використовуються з одним аргументом, хоча можуть приймати і більше додаткових аргументів, що не є обов'язковими. Це може призводити до неочікуваної поведінки.</p> + +<p>Розглянемо:</p> + +<pre class="brush: js">["1", "2", "3"].map(parseInt);</pre> + +<p>Хоча можна було б очікувати <code>[1, 2, 3]</code>, справжнім результатом буде <code>[1, NaN, NaN]</code>.</p> + +<p>Метод <code>parseInt</code> часто використовується з одним аргументом, але приймає два. Перший - це вираз, а другий - основа системи числення для функції зворотного виклику. <code>Array.prototype.map</code> передає 3 аргументи:</p> + +<ul> + <li>елемент</li> + <li>індекс</li> + <li>масив</li> +</ul> + +<p>Третій аргумент ігнорується методом parseInt, <u>але не другий</u>, звідси й можлива плутанина. Ось стислий огляд кроків перебору:</p> + +<pre class="brush: js">// parseInt(string, radix) -> map(parseInt(value, index)) +/* first iteration (index is 0): */ parseInt("1", 0); // 1 +/* second iteration (index is 1): */ parseInt("2", 1); // NaN +/* third iteration (index is 2): */ parseInt("3", 2); // NaN</pre> + +<p>Поговоримо про рішення.</p> + +<pre class="brush: js">function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// Результатом є масив чисел (як і очікувалось) + +// Те саме, але з використанням лаконічного стрілкового синтаксису +['1', '2', '3'].map( str => parseInt(str) ); + +// Простіший спосіб досягти вищевказаного +['1', '2', '3'].map(Number); // [1, 2, 3] + +// На відміну від parseInt(), Number() також поверне десятковий або експоненціальний запис: +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] +// Для порівняння, якщо використати parseInt() для попереднього масиву: +['1.1', '2.2e2', '3e300'].map( str => parseInt(str) ); // [1, 2, 3]</pre> + +<p>Ще один варіант результату метода map, що викликається з parseInt в якості параметра, виглядає наступним чином:</p> + +<pre class="brush: js">var xs = ['10', '10', '10']; + +xs = xs.map(parseInt); + +console.log(xs); +// Результат 10,NaN,2 може бути неочікуваним, з огляду вищеописане.</pre> + +<h3 id="Масив_містить_значення_undefined">Масив містить значення undefined</h3> + +<p>Коли повертається undefined або нічого не повертається:</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4]; +var filteredNumbers = numbers.map(function(num, index) { + if(index < 2) { + return num; + } +}); +// filteredNumbers дорівнює [1, 2, undefined, undefined] +// numbers досі дорівнює [1, 2, 3, 4]</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p><font face="Consolas, Liberation Mono, Courier, monospace">Метод <code>map</code> </font>був доданий до ECMA-262 стандарту в 5-тій редакції; тому він може бути присутнім не у всіх реалізаціях стандарту. Ви можете обійти це, вставляючи наступний код на початок вашого скритпу, дозволяючи використовувати map в реалізаціях які ще його не підтримують. Цей алгоритм є точно таким який вказаний в ECMA-262, 5му виданні, передбачаючи що {{jsxref("Object")}}, {{jsxref("TypeError")}}, і {{jsxref("Array")}} мають свої власні значення і що <code>callback.call</code> обчислює початкове значення <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версія 5, 15.4.4.19 +// Довідка: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback, thisArg) { + + var T, A, k; + + if (this == null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Нехай O дорівнює результату виклику ToObject з |this| + // в якості аргументу. + var O = Object(this); + + // 2. Нехай lenValue дорівнює результату виклику внутрішнього методу O + // Get з аргументом "length". + // 3. Нехай len дорівнює ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. Якщо IsCallable(callback) дорівнює false, викинути виняток TypeError. + // Див.: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Нехай A дорівнює новому масиву, створеному виразом new Array(len), + // де Array - це стандартний вбудований конструктор з таким ім'ям, + // а len дорівнює значенню len. + A = new Array(len); + + // 7. Нехай k дорівнює 0 + k = 0; + + // 8. Повторювати, доки k < len + while (k < len) { + + var kValue, mappedValue; + + // а. Нехай Pk дорівнює ToString(k). + // Цей метод неявно застосовується до лівого операнда оператора in + // б. Нехай kPresent дорівнює результату виклику внутрішнього методу O + // HasProperty з аргументом Pk. + // Цей крок можна об'єднати з в + // в. Якщо kPresent дорівнює true, тоді + if (k in O) { + + // і. Нехай kValue дорівнює результату виклику внутрішнього методу O + // Get з аргументом Pk. + kValue = O[k]; + + // ii. Нехай mappedValue дорівнює результату виклику внутрішнього + // методу callback Call з T у якості значення this та списком + // аргументів, що містить kValue, k та O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Викликати внутрішній метод A DefineOwnProperty з аргументами + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // та false. + + // У переглядачах, що підтримують Object.defineProperty, використовуйте: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // Для найкращої підтримки переглядачів, використовуйте: + A[k] = mappedValue; + } + // г. Збільшити k на 1. + k++; + } + + // 9. повернути A + return A; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Початкове визначення. Реалізоване в JavaScript 1.6.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.map")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>Об'єкт {{jsxref("Map")}}</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/observe/index.html b/files/uk/web/javascript/reference/global_objects/array/observe/index.html new file mode 100644 index 0000000000..3e3a386c83 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/observe/index.html @@ -0,0 +1,89 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Reference/Global_Objects/Array/observe +tags: + - JavaScript + - Масив + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Array.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>Array.observe()</code></strong> використовувався для асинхронного спостереження за змінами у масивах, схоже на {{jsxref("Object.observe()")}} у об'єктах. Він надавав послідовність змін в порядку виникнення. Як і <code>Object.observe()</code>, він викликається з допустимим списком типів <code>["add", "update", "delete", "splice"]</code>. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете натомість використати більш загальний об'єкт {{jsxref("Proxy")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.observe(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>Масив для спостереження.</dd> + <dt><code>callback</code></dt> + <dd>Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом: + <dl> + <dt><code>changes</code></dt> + <dd>Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін: + <ul> + <li><strong><code>name</code></strong>: Ім'я властивості, яка була змінена.</li> + <li><strong><code>object</code></strong>: Змінений масив після того, як відбулась зміна.</li> + <li><strong><code>type</code></strong>: Строка, що вказує тип зміни. Один з <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, або <code>"splice"</code>.</li> + <li><strong><code>oldValue</code></strong>: Тільки для типів <code>"update"</code> та <code>"delete"</code>. Значення перед зміною.</li> + <li><strong><code>index</code></strong>: Тільки для типу <code>"splice"</code>. Індекс, за яким відбулася зміна.</li> + <li><strong><code>removed</code></strong>: Тільки для типу <code>"splice"</code>. Масив видалених елементів.</li> + <li><strong><code>addedCount</code></strong>: Тільки для типу <code>"splice"</code>. Кількість доданих елементів.</li> + </ul> + </dd> + </dl> + </dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>callback</code> викликається кожен раз, коли у <code>arr</code> відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.</p> + +<div class="note"> +<p>Зміни, зроблені методами масивів, такими як <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a>, будуть записані як <code>"splice"</code>. Зміни, пов'язані з призначенням величин за індексом, які не змінюють довжину масиву, можуть бути записані як <code>"update"</code>.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Логування_різних_типів_змін">Логування різних типів змін</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +Array.observe(arr, function(changes) { + console.log(changes); +}); + +arr[1] = 'B'; +// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}] + +arr[3] = 'd'; +// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}] + +arr.splice(1, 2, 'beta', 'gamma', 'delta'); +// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c'], addedCount: 3}] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.observe")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li> + <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/of/index.html b/files/uk/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..457b8696bf --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,100 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - ECMAScript6 + - Масив +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Array.of()</strong></code> створює новий екземпляр <code>Array</code> з заданої кількості аргументів, незважаючи на кількість або тип аргументів.</p> + +<p>Різниця між <code><strong>Array.of()</strong></code> та конструктором <code><strong>Array</strong></code> полягає у поводженні з цілочисельними аргументами: <code><strong>Array.of(7)</strong></code> створює масив з єдиним елементом <code>7</code>, в той час як <code><strong>Array(7)</strong></code> створює порожній масив з величиною властивості <code>length</code>, що дорівнює 7 (<strong>Зауважте:</strong> мається на увазі масив з <code>7</code> порожніми елементами, а не елементами, що дорівнюють <code>undefined</code>).</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // масив з 7-ми порожніх елементів +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Елементи, з яких треба створити масив.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Новий екземпляр {{jsxref("Array")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Ця функція є частиною стандарту ECMAScript 2015. Щоб дізнатися більше, дивіться <a href="https://gist.github.com/rwaldron/1074126">проект <code>Array.of</code> та <code>Array.from</code></a> та <a href="https://gist.github.com/rwaldron/3186576">поліфіл <code>Array.of</code></a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Виконання цього коду перед будь-яким іншим кодом створить метод <code>Array.of()</code>, якщо він не підтримується початково.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + // Або + let vals = [] + for(let prop in arguments){ + vals.push(arguments[prop]) + } + return vals.slice() +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/pop/index.html b/files/uk/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..7be2a9f433 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,118 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>pop()</strong></code> видаляє останній елемент масиву та повертає цей елемент.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>arr</var>.pop()</code> +</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Видалений елемент масиву; {{jsxref("undefined")}}, якщо масив був порожній.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>pop</code> видаляє останній елемент масиву та повертає його.</p> + +<p>Метод <code>pop</code> є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} до об'єктів, схожих на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останній елемент в серії послідовних числових властивостей, які починаються з нуля, можуть поводити себе неправильно.</p> + +<p>Якщо ви викличите <code>pop()</code> на порожньому масиві, він поверне {{jsxref("undefined")}}.</p> + +<p>Метод {{jsxref("Array.prototype.shift()")}} має схожу з <code>pop</code> поведінку, але застосовується до першого елемента масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Видалення_останнього_елемента_масиву">Видалення останнього елемента масиву</h3> + +<p>Наступний код створює масив <code>myFish</code> , який містить чотири елементи, а потім видаляє останній елемент.</p> + +<pre class="brush: js">var myFish = ['янгол', 'клоун', 'мандарин', 'осетер']; + +console.log(myFish); // ['янгол', 'клоун', 'мандарин', 'осетер'] + +var popped = myFish.pop(); + +console.log(myFish); // ['янгол', 'клоун', 'мандарин' ] + +console.log(popped); // 'осетер' +</pre> + +<h3 id="Використання_apply(_)_або_call_(_)_на_подібних_до_масиву_об'єктах">Використання apply( ) або call ( ) на подібних до масиву об'єктах</h3> + +<p>Наступний код створює подібний до масиву об'єкт <code>myFish</code>, який має чотири елементи та параметр довжини length, потім видаляє його останній елемент та зменшує параметр length.</p> + +<pre><code>var myFish = {0:'янгол', 1:'клоун', 2:'мандарин', 3:'осетер', length: 4}; + +var popped = Array.prototype.pop.call(myFish); //такий самий синтаксис для apply( ) + +console.log(myFish); // {0:'янгол', 1:'клоун', 2:'мандарин', length: 3} + +console.log(popped); // 'осетер'</code></pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментарі</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/prototype/index.html b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..a4af191650 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,185 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Property + - Джава Скріпт + - Масив + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Array.prototype</code></strong> представляє собою прототип для конструктора {{jsxref("Array")}} і дозволяє вам додавати нові поля і методи до всіх об'єктів-масивів (Array).</p> + +<pre><code>// Якщо JavaScript не реалізовує метод first() початково, +// додайте новий метод, який буде повертати перший елемент масиву. + +if (!Array.prototype.first) { + Array.prototype.first = function() { + return this[0]; + } +}</code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Екземпляри {{jsxref("Array")}} успадковуються від <code>Array.prototype</code>. Як і з всіх конструкторів, ви можете змінити прототип конструктора об'єкта, щоб внести зміни у всі екземпляри {{jsxref("Array")}}. Для прикладу, це використовується для {{Glossary("Polyfill", "polyfilling")}}.</p> + +<p>Маловідомий факт: <code>Array.prototype</code> сам є масивом {{jsxref("Array")}}:</p> + +<pre class="brush: js">Array.isArray(Array.prototype); // true +</pre> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>Визначає функцію, що створює прототип об'єкта.</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>Відображає кількість елементів в масиві.</dd> + <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd>Символ, який містить назви властивостей, які повинні бути виключені з області зв'язування <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<h3 id="Методи_модифікації">Методи модифікації</h3> + +<p>Ці методи модифікують масив:</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>Копіює послідовність елементів масиву всередині масиву.</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>Заповнює всі елементи масиву від початкового індексу до кінцевого статичними значеннями.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>Видаляє та повертає останній елемент масиву.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>Додає один чи більше елементів в кінець масиву та повертає нову довжину масиву.</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>Змінює порядок елементів масиву на протилежний, викорустовуючи той самий масив — перший стає останнім, а останній - першим.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>Видаляє та повертає перший елемент масиву.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>Сортує елементи всередині масиву, та повертає цей масив.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>Добавляє і/або видаляє елементи з масиву.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>Добавляє один або більше елементів у початок масиву та повертає нову довжину масиву.</dd> +</dl> + +<h3 id="Методи_доступу">Методи доступу</h3> + +<p>Ці методи не модифікують масив та повертають якесь його представлення.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>Повертає новий масив, який складається з цього масиву, об'єднаного з іншим(и) масив(ом/ами) та/або іншими значеннями.</dd> + <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Визначає, чи масив містить певний елемент, повертаючи, відповідно, <code>true</code> або <code>false</code>.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>Повертає перший (останній) індекс елемента всередині даного масиву, який дорівнює вказаному значенню, або -1 якщо нічого не було знайдено.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>Об'єднує всі елементи масиву у рядок.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>Повертає останній (найбільший) індекс елемента всередині даного масиву, який рівний вказаному значенню, або -1 якщо нічого не було знайдено.</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>Витягує частину масиву та повертає новий масив.</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Повертає літерал масиву, який відображає вказаний масив; ви можете використовувати це значення для створення нового масиву. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>Повертає рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>Повертає локалізований рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Методи_перебору">Методи перебору</h3> + +<p>Декілька методів приймають у якості аргументів функції, які будуть викликані у процесі обробки масиву. Коли ці методи викликаються, довжина поля <code>length</code> вибраного масиву запам'ятовується, і будь-які елементи, додані поза цією довжиною зсередини функції зворотнього виклику (callback), не будуть обходитися. Інші зміни до масиву (встановлення значення елементу або його видалення) можуть впливати на результат операції, якщо метод після цього звертається до зміненого елемента. Хоча специфічна поведінка цих методів у даних випадках є добре визначеною, не варто на неї надто покладатися, щоб не заплутати тих, хто може прочитати ваш код. Якщо вам необхідно змінити даний масив, краще скопіюйте його у новий масив.</p> + +<dl> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить пари ключ/значення для кожного індекса в даному масиві.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>Повертає <code>true</code>, якщо кожен елемент у цьому масиві виконує умови переданої тест-функції.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>Створює новий масив зі всіма елементами цього масиву, для яких передана функція фільтрації повертае <code>true</code>.</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>Повертає знайдене у масиві значення, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>undefined</code> якщо елемента не знайдено.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>Повертає знайдений у масиві індекс, якщо елемент у цьому масиві виконує умови переданої тест-функції або <code>-1</code> якщо елемента не знайдено.</dd> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>Викликає функцію для кожного елементу масиву.</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить ключі для кожного індекса в даному масиві.</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>Створює новий масив з результатами виклику на кожному елементі масиву переданої функції.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (зліва направо), щоб скоротити його до єдиного значення.</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>Застосовує функцію над акумулятором та кожним значенням даного масиву (справа наліво), щоб скоротити його до єдиного значення.</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>Повертає <code>true</code>, якщо принаймні один елемент у цьому масиві виконує умови переданої тест-функції.</dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>Повертає новий об'єкт <code>Array Iterator</code>, який містить значення для кожного індекса в масиві.</dd> +</dl> + +<h3 id="Загальні_методи_(нестандартні)">Загальні методи (нестандартні)</h3> + +<p>Багато методів на JavaScript об'єкті Array спроектовані таким чином, щоб їх можна було застосувати на всіх об'ектах, які "виглядають як" масиви. Таким чином, вони можуть бути використані на будь-якому об'єкті, у якого є поле <code>length</code>, а також тих об'єктах, доступ до яких можна отримати завдяки числовим назвам полів (як з індексацією масиву <code>array[5]</code>). Деякі методи, такі як {{jsxref("Array.join", "join")}}, лише зчитують довжину (length) і числові поля об'єктів, на яких вони викликаються. Інші, такі як {{jsxref("Array.reverse", "reverse")}}, вимагають, щоб числові поля об'єкту та поле <code>length</code> були доступні для редагування; тому ці методи можуть не викликатися на об'єктах типу {{jsxref("String")}}, який не дозволяє редагувати його поле <code>length</code> або синтезовані числові поля.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Додані методи <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex().</code></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Доданий метод <code>includes()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_веб-переглядачами">Сумісність із веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.prototype")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/push/index.html b/files/uk/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..af185f399f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,136 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>push()</strong></code> додає один або більше елементів у кінець масиву та повертає нову довжину масиву.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + +<p class="hidden">Джерело цього інтерактивного прикладу зберігається у репозіторії на GitHub. Якщо ви бажаєте залучитися до проекту зі створення інтерактивних прикладів, будь ласка, скопіюйте це посилання <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.push(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Елементи, що додаються у кінець масиву.</dd> +</dl> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Нова {{jsxref("Array.length", "length")}} властивість об'єкта, на якому був визваний цей метод.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>push</code> додає значення у масив.</p> + +<p><code>push</code> було навмисно створено загальним методом. Він може використовуватися з {{jsxref("Function.call", "call()")}} або {{jsxref("Function.apply", "apply()")}} на об'єктах, подібних до масивів. Метод <code>push</code> спирається на властивість <code>length</code>, щоб розуміти, з якого місця починати додавання заданих значень. Якщо властивість <code>length</code> неможливо перетворити на число, використовується індекс рівний 0. До цього також належить випадок, коли властивості <code>length</code> взагалі не існує, y цьому разі <code>length</code> також буде створено.</p> + +<p>Хоча {{jsxref("Global_Objects/String", "strings", "", 1)}} - це найближчі, масивоподібні об'єкти, з ними неможливо використовувати цей метод, оскільки рядки є незмінними. Аналогічно до найближчого, масивоподібного об'єкта {{jsxref("Functions/arguments", "arguments", "", 1)}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Додавання_елементів_у_масив">Додавання елементів у масив</h3> + +<p>Наступний приклад створює <code>sports</code> масив з двома елементами, потім у нього додаються еще два елементи. Змінна <code>total</code> містить нову довжину масиву.</p> + +<pre class="brush: js">var sports = ['soccer', 'baseball']; +var total = sports.push('football', 'swimming'); + +console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total); // 4 +</pre> + +<h3 id="Поєднання_двох_масивів">Поєднання двох масивів</h3> + +<p>Цей приклад використовує {{jsxref("Function.apply", "apply()")}} для того, щоб запушити усі елементи з другого масиву.</p> + +<p><em>Не</em> використовуйте цей метод, якщо другий масив (<code>moreVegs</code> у цьому прикладі) занадто великий, оскільки максимальна кількість параметрів, які може вмістити одна функція обмежена, як доводить це практика. Дивиться {{jsxref("Function.apply", "apply()")}} для отримання більш докладної інформації.</p> + +<pre class="brush: js">var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// Merge the second array into the first one +// Equivalent to vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] +</pre> + +<h3 id="Використання_об'єкта_у_масивоподібний_спосіб">Використання об'єкта у масивоподібний спосіб</h3> + +<p>Як зазначено вище, <code>push</code> було навмисно створено загаліним методом, і це може зіграти нам на користь. <code>Array.prototype.push</code> добре працює на об'єктах, як це показує наш приклад. Зауважте, що ми не створюємо масив для зберігання колекції об'єктів. Натомість ми зберігаємо колекцію у самому об'єкті та використовуємо метод <code>call</code> на <code>Array.prototype.push</code>, щоб змусити його думати, начебто ми використовуємо його на масиві, і це працює, завдяки тому, що JavaScript дозволяє нам встановлювати контекст використання, як нам зручно.</p> + +<pre class="brush: js">var obj = { + length: 0, + + addElem: function addElem(elem) { + // obj.length is automatically incremented + // every time an element is added. + [].push.call(this, elem); + } +}; + +// Let's add some empty objects just to illustrate. +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2 +</pre> + +<p>Зверніть увагу, що <code>obj</code> хоч і не є масивом, метод <code>push</code> успішно збільшив його властивість <code>length</code> так само, наче б ми мали справу зі справжнім масивом.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікації</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці береться зі струкрутованих даних. кщо ви бажаєте залучитися до створення цих даних, будь ласка, перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам pull request.</div> + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="Дивиться_також">Дивиться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/reduce/index.html b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..0f9ce6e0e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,578 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +tags: + - ECMAScript 5 + - JavaScript + - Reduce + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>reduce()</strong></code> виконує функцію <strong>reducer</strong> (функцію вказуєте ви) для кожного елемента масиву та повертає єдине значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + + + +<p>Функія <strong>reducer</strong> отримує чотири параметри:</p> + +<ol> + <li>Accumulator (<em><code>acc</code></em>) - Акумулятор</li> + <li>Current Value (<code><em>cur</em></code>) - Поточне значення</li> + <li>Current Index (<em><code>idx</code></em>) - Поточний індекс</li> + <li>Source Array (<em><code>src</code></em>) - Вхідний масив</li> +</ol> + +<p>Функція <strong>reducer</strong> повертає значення та присовює його акумулятору. Значення аккумулятора запам'ятовується через усі ітерації і повертається наприкінці як єдиний результат.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="notranslate"><var>arr</var>.reduce(<var>callback</var>( <var>accumulator</var>, <var>currentValue</var>[, <var>index</var>[, <var>array</var>]] )[, +<var>initialValue</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><em><code>callback</code></em></dt> + <dd>Фунція, що виконується з кожним елементом масиву (приймає 4 аргументи): + <dl> + <dt><em><code>accumulator</code></em></dt> + <dd>Акумулює значення, які повертає <code>callback</code>. В акумуляторі зберігається попереднє значення результату виклику <code>callback</code> функції або <code>initialValue</code>, якщо воно було надано (дивись нижче).</dd> + <dt><em><code>currentValue</code></em></dt> + <dd>Поточний елемент, над яким виконується дія.</dd> + <dt><em><code>currentIndex</code></em>{{optional_inline}}</dt> + <dd>Індекс поточного елемента, над яким виконується дія. Починається із 0 індексу, якщо, було надано значення <code>initialValue</code>, інакше з 1 .</dd> + <dt><em><code>array</code></em>{{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>reduce()</code>.</dd> + </dl> + </dd> + <dt><em><code>initialValue</code></em>{{optional_inline}}</dt> + <dd>Значення, що буде використане як перший аргумент під час виклику <code>callback</code> функції. Якщо це значення не було задане, буде використано перший елемент масиву. Виклик <code>reduce()</code> на порожньому масиві без вказання initial value призведе до помилки.</dd> +</dl> + +<h3 id="Значення_яке_буде_повернене">Значення, яке буде повернене</h3> + +<p>Значення, що зберігається в акумуляторі після останньої ітерації.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>reduce()</code> виконує <em><code>callback</code> </em>функцію один раз для кожного елемента масиву за виключенням дірок (порожніх елементів). Функція отримує чотири аргументи:</p> + +<ul> + <li><em><code>accumulator</code></em></li> + <li><em><code>currentValue</code></em></li> + <li><em><code>currentIndex</code></em></li> + <li><em><code>array</code></em></li> +</ul> + +<p>При першому виклику <em><code>callback</code> </em>функції <em><code>accumulator</code></em> і <em><code>currentValue</code></em> можуть мати одне із двох значень. Якщо значення <em><code>initialValue</code></em> задане при виклику <code>reduce()</code>, значення <em><code>accumulator</code></em> дорівнюватиме значенню <em><code>initialValue</code></em>, а <em><code>currentValue</code></em> дорівнюватиме першому елементу масиву. Якщо значення <em><code>initialValue</code></em> не задане, <em><code>accumulator</code></em> буде рівним першому елементу масиву, а <em><code>currentValue</code></em> -- другому.</p> + +<div class="note"> +<p><strong>Примітка:</strong> Якщо значення <code>initialValue</code> не задане, <code>reduce()</code> виконуватиме <code>callback</code> функцію починаючи з індексу 1, пропустивши перший індекс. Якщо <code>initialValue</code> задане, виконання почнеться із 0-го індексу.</p> +</div> + +<p>Якщо масив порожній і значення <code>initialValue</code> не задане, буде створено помилку {{jsxref("TypeError")}}. Якщо масив складається тільки з одного елемента (незалежно від його позиції) і значення <code>initialValue</code> не задане, або якщо значення <code>initialValue</code> задане, але масив порожній, буде повернуто єдине наявне значення, а <em>функція <code>callback</code> не буде викликана</em>.</p> + +<p>Зазвичай безпечніше вказувати початкове значення (<code>initialValue</code>), адже без нього можливі три різні результати (див. приклад).</p> + +<pre class="brush: js notranslate">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// reduce() без initialValue +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce; краще рішення, працюватиме також для порожніх чи великих масивів +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity ); +</pre> + +<h3 id="Як_працює_reduce">Як працює reduce()</h3> + +<p>Нехай відбувся наступний виклик <code>reduce()</code>:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue; +}); +</pre> + +<p><code>callback</code> буде викликано чотири рази із наступними аргументами та значеннями, поверненими при кожному виклику:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">повернене<br> + значення</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td>1</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td>2</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td>3</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td>4</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Значення, повернене <code>reduce()</code> буде значенням, отриманим при останньому виклику <code>callback</code> (<code>10</code>).</p> + +<p>The value returned by <code>reduce()</code> would be that of the last callback invocation (<code>10</code>).</p> + +<p>Можна також задати {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} замість повної функції. Наступний код згенерує такий самий результат, як код у попередньому блоці.</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue ); +</pre> + +<p>Якщо початкове значення (<code>initialValue)</code> задати як другий аргумент функції <code>reduce()</code>, результат буде наступним:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">повернене значення</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row"> + <p>п'ятий виклик</p> + </th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Значення, повернене функцією <code>reduce()</code> у цьому випадку дорівнюватиме <code>20</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Сума_усіх_елементів_масиву">Сума усіх елементів масиву</h3> + +<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum is 6 + +</pre> + +<p>Приклад вище, реалізований за допомогою arrow function:</p> + +<pre class="brush: js notranslate">var total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +);</pre> + +<h3 id="Сума_значень_у_масиві_обєктів">Сума значень у масиві об'єктів</h3> + +<p>Щоб підсумувати значення, що знаходяться у масиві об'єктів, Ви <strong>повинні</strong> вказати початкове значення для того, щоб для кожного із елементів була викликана Ваша функція.</p> + +<pre class="brush: js notranslate">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { + return accumulator + currentValue.x; +},initialValue) + +console.log(sum) // logs 6 +</pre> + +<p>Також за допомогою arrow function: </p> + +<pre class="brush: js notranslate">var initialValue = 0; +var sum = [{x: 1}, {x:2}, {x:3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + ,initialValue +); + +console.log(sum) // logs 6</pre> + +<h3 id="Сплюснути_flatten_масив_масивів">Сплюснути (flatten) масив масивів</h3> + +<p>Сплющення (flattening) - процес, у результаті якого із масиву масивів отримуємо один масив, що містить елементи усіх вкладених масивів.</p> + +<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + function(accumulator, currentValue) { + return accumulator.concat(currentValue); + }, + [] +); +// flattened is [0, 1, 2, 3, 4, 5] +</pre> + +<p>Також за допомогою arrow function:</p> + +<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +); +</pre> + +<h3 id="Підрахунок_кількості_однакових_значень_у_обєкті">Підрахунок кількості однакових значень у об'єкті</h3> + +<pre class="brush: js notranslate">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +var countedNames = names.reduce(function (allNames, name) { + if (name in allNames) { + allNames[name]++; + } + else { + allNames[name] = 1; + } + return allNames; +}, {}); +// countedNames is: +// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +</pre> + +<h3 id="Групування_обєктів_за_властивістю_property">Групування об'єктів за властивістю (property)</h3> + +<pre class="brush: js notranslate">var people = [ + { name: 'Alice', age: 21 }, + { name: 'Max', age: 20 }, + { name: 'Jane', age: 20 } +]; + +function groupBy(objectArray, property) { + return objectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +var groupedPeople = groupBy(people, 'age'); +// groupedPeople is: +// { +// 20: [ +// { name: 'Max', age: 20 }, +// { name: 'Jane', age: 20 } +// ], +// 21: [{ name: 'Alice', age: 21 }] +// } +</pre> + +<h3 id="Bonding_arrays_contained_in_an_array_of_objects_using_the_spread_operator_and_initialValue">Bonding arrays contained in an array of objects using the spread operator and initialValue</h3> + +<pre class="brush: js notranslate">// friends - an array of objects +// where object field "books" - list of favorite books +var friends = [{ + name: 'Anna', + books: ['Bible', 'Harry Potter'], + age: 21 +}, { + name: 'Bob', + books: ['War and peace', 'Romeo and Juliet'], + age: 26 +}, { + name: 'Alice', + books: ['The Lord of the Rings', 'The Shining'], + age: 18 +}]; + +// allbooks - list which will contain all friends' books + +// additional list contained in initialValue +var allbooks = friends.reduce(function(accumulator, currentValue) { + return [...accumulator, ...currentValue.books]; +}, ['Alphabet']); + +// allbooks = [ +// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', +// 'Romeo and Juliet', 'The Lord of the Rings', +// 'The Shining' +// ]</pre> + +<h3 id="Видалення_повторюваних_значень_у_масиві">Видалення повторюваних значень у масиві</h3> + +<pre class="brush: js notranslate">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; +let result = arr.sort().reduce((accumulator, current) => { + const length = accumulator.length + if (length === 0 || accumulator[length - 1] !== current) { + accumulator.push(current); + } + return accumulator; +}, []); +console.log(result); //[1,2,3,4,5] +</pre> + +<h3 id="Запуск_Promises_у_послідовності">Запуск Promises у послідовності</h3> + +<pre class="brush: js notranslate">/** + * Runs promises from array of functions that can return promises + * in chained manner + * + * @param {array} arr - promise arr + * @return {Object} promise object + */ +function runPromiseInSequence(arr, input) { + return arr.reduce( + (promiseChain, currentFunction) => promiseChain.then(currentFunction), + Promise.resolve(input) + ); +} + +// promise function 1 +function p1(a) { + return new Promise((resolve, reject) => { + resolve(a * 5); + }); +} + +// promise function 2 +function p2(a) { + return new Promise((resolve, reject) => { + resolve(a * 2); + }); +} + +// function 3 - will be wrapped in a resolved promise by .then() +function f3(a) { + return a * 3; +} + +// promise function 4 +function p4(a) { + return new Promise((resolve, reject) => { + resolve(a * 4); + }); +} + +const promiseArr = [p1, p2, f3, p4]; +runPromiseInSequence(promiseArr, 10) + .then(console.log); // 1200 +</pre> + +<h3 id="Function_composition_enabling_piping">Function composition enabling piping</h3> + +<pre class="brush: js notranslate">// Building-blocks to use for composition +const double = x => x + x; +const triple = x => 3 * x; +const quadruple = x => 4 * x; + +// Function composition enabling pipe functionality +const pipe = (...functions) => input => functions.reduce( + (acc, fn) => fn(acc), + input +); + +// Composed functions for multiplication of specific values +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); + +// Usage +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 + +</pre> + +<h3 id="write_map_using_reduce">write map using reduce</h3> + +<pre class="brush: js notranslate">if (!Array.prototype.mapUsingReduce) { + Array.prototype.mapUsingReduce = function(callback, thisArg) { + return this.reduce(function(mappedArray, currentValue, index, array) { + mappedArray[index] = callback.call(thisArg, currentValue, index, array); + return mappedArray; + }, []); + }; +} + +[1, 2, , 3].mapUsingReduce( + (currentValue, index, array) => currentValue + index + array.length +); // [5, 7, , 10] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.21 +// Reference: http://es5.github.io/#x15.4.4.21 +// https://tc39.github.io/ecma262/#sec-array.prototype.reduce +if (!Array.prototype.reduce) { + Object.defineProperty(Array.prototype, 'reduce', { + value: function(callback /*, initialValue*/) { + if (this === null) { + throw new TypeError( 'Array.prototype.reduce ' + + 'called on null or undefined' ); + } + if (typeof callback !== 'function') { + throw new TypeError( callback + + ' is not a function'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // Steps 3, 4, 5, 6, 7 + var k = 0; + var value; + + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k < len && !(k in o)) { + k++; + } + + // 3. If len is 0 and initialValue is not present, + // throw a TypeError exception. + if (k >= len) { + throw new TypeError( 'Reduce of empty array ' + + 'with no initial value' ); + } + value = o[k++]; + } + + // 8. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kPresent be ? HasProperty(O, Pk). + // c. If kPresent is true, then + // i. Let kValue be ? Get(O, Pk). + // ii. Let accumulator be ? Call( + // callbackfn, undefined, + // « accumulator, kValue, k, O »). + if (k in o) { + value = callback(value, o[k], k, o); + } + + // d. Increase k by 1. + k++; + } + + // 9. Return accumulator. + return value; + } + }); +} +</pre> + +<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them <strong>non-enumerable</strong>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..2471147574 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,364 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +tags: + - Array + - ECMAScript5 + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>reduceRight()</strong></code> застосовує функцію до акумулятора та кожного елемента масиву (справа наліво), зменшуючи його до єдиного значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div> + + + +<p>Дивіться також {{jsxref("Array.prototype.reduce()")}}, який виконується зліва направо.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])</var></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка виконується на кожному елементі масиву. Приймає чотири аргументи: + <dl> + <dt><code>accumulator</code></dt> + <dd>Значення, яке було повернене з попереднього виклику функції, або <code>initialValue</code>, якщо є. (Дивіться нижче.)</dd> + <dt><code>currentValue</code></dt> + <dd>Поточний елемент масиву, що опрацьовується.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Індекс поточного елемента масиву.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Масив, для якого було викликано <code>reduceRight()</code>.</dd> + </dl> + </dd> + <dt><code>initialValue</code>{{optional_inline}}</dt> + <dd>Значення, що використовується в якості акумулятора для першого виклику <code>callback</code>. Якщо початкового значення нема, то буде використаний та пропущений останній елемент масиву. Виклик <code>reduce</code> або <code>reduceRight</code> на порожньому масиві без початкового значення створить виняток <code>TypeError</code>.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Значення, що є результатом зменшення.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>reduceRight</code> виконує функцію зворотного виклику один раз для кожного елемента у масиві, крім порожніх елементів, отримуючи чотири аргументи: початкове значення (або значення від попереднього виклику функції), значення поточного елемента, поточний індекс та масив, обхід якого виконується.</p> + +<p>Виклик функції <code>callback</code> у reduceRight виглядатиме десь так:</p> + +<pre class="brush: js">array.reduceRight(function(accumulator, currentValue, index, array) { + // ... +}); +</pre> + +<p>Коли функція викликається вперше, <code>accumulator</code> та <code>currentValue</code> можуть мати одне з двох значень. Якщо значення <code>initialValue</code> було надане під час виклику <code>reduceRight</code>, тоді <code>accumulator</code> дорівнюватиме <code>initialValue</code>, а <code>currentValue</code> останньому елементу масиву. Якщо значення <code>initialValue</code> не визначено, тоді <code>accumulator</code> дорівнюватиме останньому елементу масиву, а <code>currentValue</code> передостанньому.</p> + +<p>Якщо масив порожній, а <code>initialValue</code> не надано, то буде викинуто виняток {{jsxref("TypeError")}}. Якщо масив має лише один елемент (незалежно від позиції), і немає значення <code>initialValue</code>, або якщо <code>initialValue</code> надано, але масив порожній, це єдине значення повернеться без виклику <code>callback</code>.</p> + +<p>Для прикладу, функція може виглядати так:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}); +</pre> + +<p>Функція зворотного виклику буде виконана чотири рази, аргументи та значення, які повертаються, наведені нижче:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">вертає</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Значення, яке повертає <code>reduceRight</code> буде тим, яке вертає останній виклик <code>callback</code> (<code>10</code>).</p> + +<p>А якби ви надали значення <code>initialValue</code>, результат виглядав би так:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">вертає</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">перший виклик</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">другий виклик</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">третій виклик</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">четвертий виклик</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">п'ятий виклик</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Цього разу <code>reduceRight</code>, звісно, повернув би <code>20</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Знайти_суму_елементів_масиву">Знайти суму елементів масиву</h3> + +<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// сума дорівнює 6 +</pre> + +<h3 id="Вирівняти_масив_масивів">Вирівняти масив масивів</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// Результат [4, 5, 2, 3, 0, 1] + +</pre> + +<h3 id="Виконати_послідовно_набір_асинхронних_функцій_з_функціями_зворотного_виклику_щоб_кожна_передавала_свій_результат_у_наступну">Виконати послідовно набір асинхронних функцій з функціями зворотного виклику, щоб кожна передавала свій результат у наступну</h3> + +<pre class="brush: js">const waterfall = (...functions) => (callback, ...args) => + functions.reduceRight( + (composition, fn) => (...results) => fn(composition, ...results), + callback + )(...args); + +const randInt = max => Math.floor(Math.random() * max) + +const add5 = (callback, x) => { + setTimeout(callback, randInt(1000), x + 5); +}; +const mult3 = (callback, x) => { + setTimeout(callback, randInt(1000), x * 3); +}; +const sub2 = (callback, x) => { + setTimeout(callback, randInt(1000), x - 2); +}; +const split = (callback, x) => { + setTimeout(callback, randInt(1000), x, x); +}; +const add = (callback, x, y) => { + setTimeout(callback, randInt(1000), x + y); +}; +const div4 = (callback, x) => { + setTimeout(callback, randInt(1000), x / 4); +}; + +const computation = waterfall(add5, mult3, sub2, split, add, div4); +computation(console.log, 5) // -> 14 + +// те саме, що й: + +const computation2 = (input, callback) => { + const f6 = x=> div4(callback, x); + const f5 = (x, y) => add(f6, x, y); + const f4 = x => split(f5, x); + const f3 = x => sub2(f4, x); + const f2 = x => mult3(f3, x); + add5(f2, input); +}</pre> + +<h3 id="Різниця_між_reduce_та_reduceRight">Різниця між <code>reduce</code> та <code>reduceRight</code></h3> + +<pre class="brush: js">var a = ['1', '2', '3', '4', '5']; +var left = a.reduce(function(prev, cur) { return prev + cur; }); +var right = a.reduceRight(function(prev, cur) { return prev + cur; }); + +console.log(left); // "12345" +console.log(right); // "54321"</pre> + +<h3 id="Визначення_композиції_функцій">Визначення композиції функцій</h3> + +<p>Концепція композиції функцій проста - вона об'єднує функції. Це послідовний, справа наліво, виклик кожної функції з результатом попередньої.</p> + +<pre class="brush: js">/** + * Композиція функцій - це підхід, в якому результат однієї функції + * передається у іншу і т.д. + * + * h(x) = f(g(x)) + * + * Виконання функцій відбувається справа наліво + * + * <a href="https://uk.wikipedia.org/wiki/Композиція_функцій">https://uk.wikipedia.org/wiki/Композиція_функцій</a> + */ + +const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) + +// Збільшує передане число на 1 +const inc = (n) => n + 1 + +// Подвоює передане значення +const double = (n) => n * 2 + +// використання композиції функцій +console.log(compose(double, inc)(2)); // 6 + +// використання композиції функцій +console.log(compose(inc, double)(2)); // 5 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод <code>reduceRight</code> був доданий до стандарту ECMA-262 у 5-й версії; таким чином, він може не бути присутній у всіх реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, це дозволить використовувати метод <code>reduceRight</code> у версіях, які не підтримують його початково.</p> + +<pre class="brush: js">// Функціональні кроки ECMA-262, версія 5, 15.4.4.22 +// Довідка: http://es5.github.io/#x15.4.4.22 +if ('function' !== typeof Array.prototype.reduceRight) { + Array.prototype.reduceRight = function(callback /*, initialValue*/) { + 'use strict'; + if (null === this || 'undefined' === typeof this) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + if ('function' !== typeof callback) { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = len - 1, value; + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k >= 0 && !(k in t)) { + k--; + } + if (k < 0) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k--]; + } + for (; k >= 0; k--) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/reverse/index.html b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..e1d3dade19 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,89 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - JavaScript + - Method + - Prototype + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>reverse()</strong></code> перевертає масив <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em>, змінюючи послідовність елементів на протилежну. Тобто, перший елемент стає останнім, а останній — першим.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>a</var>.reverse()</pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Перевернутий масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>reverse()</code> змінює масив, для якого його викликано, спротилежнюючи послідовність елементів, і вертає посилання на той масив.</p> + +<p>Метод <code>reverse</code> є навмисно загальним; його можна викликати або застосувати до об'єктів, які схожі на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останню з серії послідовних, числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевертання_елементів_у_масиві">Перевертання елементів у масиві</h3> + +<p>У наведеному прикладі започатковується масив <code>a</code> з трьома елементами, а тоді їх порядок спротилежнюється. Виклик методу <code>reverse()</code> повертає посилання на перевернутий масив <code>а</code>.</p> + +<pre class="brush: js">var a = ['спершу', 'було', 'слово']; +var reversed = a.reverse(); + +console.log(reversed === a); // виводить true +console.log(a); // виводить ['слово', 'було', 'спершу'] +console.log(reversed); // виводить ['слово', 'було', 'спершу'] +</pre> + +<h3 id="Перевертання_елементів_у_подібному_до_масиву_обєкті">Перевертання елементів у подібному до масиву об'єкті</h3> + +<p>Наступний приклад створює подібний до масиву об'єкт <code>a</code>, що містить три елементи та властивість довжини, а тоді перевертає цей об'єкт. Виклик методу <code>reverse()</code> повертає посилання на перевернутий об'єкт <code>a</code>.</p> + +<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3}; + +console.log(a); // {0: 1, 1: 2, 2: 3, length: 3} + +Array.prototype.reverse.call(a); //такий самий синтаксис для apply() + +console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.reverse")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/shift/index.html b/files/uk/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..7c3d20f114 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,141 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>Метод <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>shift()</strong></span></font> видаляє <strong>перший</strong> елемент з масиву і повертає цей елемент. Цей метод змінює довжину масиву.</p> + +<pre class="brush: js">var a = [1, 2, 3]; +a.shift(); + +console.log(a); // [2, 3]</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.shift()</pre> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Видалений елемент.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>shift</code> видаляє елемент із нульовим індексом і зсуває значення з послідовними індексами назад, потім повертає видалене значення. Якщо {{jsxref("Array.length", "length")}} властивість рівна 0, {{jsxref("undefined")}} повертається.</p> + +<p><code>shift</code> є загальним навмисно; Цей метод може бути {{jsxref("Function.call", "викликаний", "", 1)}} чи {{jsxref("Function.apply", "застосований", "", 1)}} до схожих із масивами об'єктів. Об'єкти, які не містять length властивості, що відображає кінець послідовного ряду, базовані на нулі числові властивості можуть себе вести беззмістовним чином.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Видалення_елементу_з_масиву">Видалення елементу з масиву</h3> + +<p>Поданий нижче код відображає myFish масив до і після видалення його першого елементу. Також він відображає видалений елемент.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish before: ' + myFish); +// "myFish before: angel,clown,mandarin,surgeon" + +var shifted = myFish.shift(); + +console.log('myFish after: ' + myFish); +// "myFish after: clown,mandarin,surgeon" + +console.log('Removed this element: ' + shifted); +// "Removed this element: angel"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Cтатус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Впроваджено в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерна_сумісність">Браузерна сумісність</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/slice/index.html b/files/uk/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..0e3b098fda --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,242 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>slice()</strong></code> повертає дрібну копію частини масиву у новий масив, починаючи з <code>begin</code> і до <code>end</code> (не включаючи <code>end</code>), де <code>begin</code> та <code>end</code> є індексами елементів масиву. Початковий масив не змінюється.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]]) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>begin</var></code> {{optional_inline}}</dt> + <dd>Індекс на основі нуля, з якого починається копіювання.</dd> + <dd>Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. <code>slice(-2)</code> копіює останні два елементи послідовності.</dd> + <dd>Якщо <code><var>begin</var></code> не надано, <code>slice</code> починається з індексу <code>0</code>.</dd> + <dd>Якщо <code><var>begin</var></code> більший за довжину послідовності, повертається порожній масив.</dd> + <dt><code><var>end</var></code> {{optional_inline}}</dt> + <dd>Індекс на основі нуля <em>до</em> якого вібувається копіювання. <code>slice</code> копіює до, але не включаючи <code><var>end</var></code>.</dd> + <dd>Наприклад, <code>slice(1,4)</code> копіює з другого по четвертий елемент (елементи за індексами 1, 2 та 3).</dd> + <dd>Індекс може бути від'ємним, зазначаючи відступ з кінця послідовності. <code>slice(2,-1)</code> копіює з третього елемента по другий з кінця.</dd> + <dd>Якщо <code><var>end</var></code> пропущений, <code>slice</code> копіює до кінця послідовності (<code>arr.length</code>).</dd> + <dd>Якщо <code><var>end</var></code> більший за довжину послідовності, <code>slice</code> копіює до кінця послідовності (<code>arr.length</code>).</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий масив, який містить скопійовані елементи.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>slice</code> не змінює початковий масив. Він повертає дрібну копію елементів початкового масиву. Елементи початкового масиву копіюються у повернений масив наступним чином:</p> + +<ul> + <li>Для посилань на об'єкт (але не самих об'єктів), <code>slice</code> копіює посилання на об'єкт у новий масив. І початковий, і новий масиви посилатимуться на той самий об'єкт. Якщо цей об'єкт зміниться, зміни відобразяться у обох масивах, новому та початковому.</li> + <li>Для рядків, чисел та булевих значень (не об'єктів {{jsxref("String")}}, {{jsxref("Number")}} та {{jsxref("Boolean")}}), <code>slice</code> копіює значення у новий масив. Зміни у рядках, числах або булевих значеннях одного масиву не відображатимуться у іншому масиві.</li> +</ul> + +<p>Якщо новий елемент додано у якийсь з масивів, інший масив не зміниться.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Повернути_частину_існуючого_масиву">Повернути частину існуючого масиву</h3> + +<pre class="brush: js">var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго']; +var citrus = fruits.slice(1, 3); + +// fruits містить ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго'] +// citrus містить ['Апельсин','Лимон'] +</pre> + +<h3 id="Використання_slice">Використання <code>slice</code></h3> + +<p>У наступному прикладі <code>slice</code> створює новий масив <code>newCar</code> з <code>myCar</code>. Обидва містять посилання на об'єкт <code>myHonda</code>. Коли колір <code>myHonda</code> змінюється на фіолетовий, обидва масиви відображають зміну.</p> + +<pre class="brush: js">// Використання slice, створення newCar з myCar. +var myHonda = { color: 'червоний', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'чудовий стан', 'придбана 1997']; +var newCar = myCar.slice(0, 2); + +// Вивести значення myCar, newCar та колір myHonda +// з обох масивів. +console.log('myCar = ' + JSON.stringify(myCar)); +console.log('newCar = ' + JSON.stringify(newCar)); +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); + +// Змінити колір myHonda. +myHonda.color = 'фіолетовий'; +console.log('Новий колір Honda ' + myHonda.color); + +// Вивести колір myHonda з обох масивів. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Скрипт запише:</p> + +<pre class="brush: js">myCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, + 'чудовий стан', 'придбана 1997'] +newCar = [{color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +myCar[0].color = червоний +newCar[0].color = червоний +Новий колір Honda фіолетовий +myCar[0].color = фіолетовий +newCar[0].color = фіолетовий +</pre> + +<h2 id="Подібні_до_масиву_об'єкти">Подібні до масиву об'єкти</h2> + +<p>Метод <code>slice</code> також може перетворювати подібні до масиву об'єкти/колекції на нові об'єкти Array. Ви просто прив'язуєте метод до об'єкта. {{jsxref("Functions/arguments", "Аргументи")}} всередині функції є прикладом подібного до масиву об'єкта.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Прив'язати можна функцією .<code>call</code> з {{jsxref("Function.prototype")}}, також можна скоротити запис, використовуючи <code>[].slice.call(arguments)</code> замість <code>Array.prototype.slice.call</code>. В будь-якому випадку, все можна спростити за допомогою {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Оптимізація_кросбраузерної_поведінки">Оптимізація кросбраузерної поведінки</h2> + +<p>Хоча об'єкти середовища виконання (такі як об'єкти DOM) за специфікацією не зобов'язані відповідати поведінці Mozilla при перетворенні методом <code>Array.prototype.slice</code>, і IE < 9 цього не робить, версії IE починаючи від 9-ї дозволяють це. Використання шима дозволяє створити надійну кросбраузерну поведінку. Поки інші сучасні переглядачі підтримують цю можливість, як нині роблять IE, Mozilla, Chrome, Safari та Opera, розробники, які читають (підтримують для об'єктів DOM) slice-код, що покладається на цей шим, не будуть введені в оману семантикою; вони спокійно можуть покладатися на семантику, щоб реалізувати тепер вже <em>де-факто</em> стандартну поведінку. (Шим також виправляє роботу IE з другим аргументом <code>slice()</code>, коли він явно заданий як {{jsxref("null")}}/{{jsxref("undefined")}}, чого більш ранні версії IE також не дозволяли, але всі сучасні переглядачі, в тому числі IE >= 9, зараз дозволяють.)</p> + +<pre class="brush: js">/** + * Шим для "виправлення" слабкої підтримки IE (IE < 9) використання slice + * на об'єктах середовища, таких як NamedNodeMap, NodeList та HTMLCollection + * (технічно, оскільки об'єкти середовища були залежні від реалізації, + * принаймні до ES2015, IE не мав потреби у цій функціональності.) + * Також працює для рядків, виправляє IE < 9, дозволяючи явно задане значення + * undefined другим аргументом (як у Firefox) та запобігає помилкам + * при виклику на інших об'єктах DOM. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Не можна використовувати з елементами DOM у IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Не працює у IE < 9 + // Працюватиме для справжніх масивів, подібних до масивів об'єктів, + // NamedNodeMap (атрибутів, сутностей, нотацій), + // NodeList (напр., getElementsByTagName), HTMLCollection (напр., childNodes), + // і не схибить на інших об'єктах DOM (як на елементах DOM у IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 не любить undefined в якості аргументу end + end = (typeof end !== 'undefined') ? end : this.length; + + // Для об'єктів Array використовуємо рідну функцію slice + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // Для подібних до масивів об'єктів робимо це самостійно. + var i, cloned = [], + size, len = this.length; + + // Обробляємо від'ємне значення "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Обробляємо від'ємне значення "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Очікуваний розмір нового масиву + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/some/index.html b/files/uk/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..934df016e0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,206 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +tags: + - ECMAScript5 + - Довідка + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>some()</code></strong> з'ясовує, чи містить масив хоч один елемент, для якого зазначена функція <code>callback</code> повертає <code>true</code> (або значення, що зводиться до <code>true</code>). Повертає значення типу Boolean.</span></p> + +<div class="note"> +<p><strong>Зауваження</strong>: для порожнього масиву цей метод незмінно повертає <code>false</code>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи покращення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.some(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функція, яка перевіряє елементи. Приймає три аргументи: + <dl> + <dt><code>element</code></dt> + <dd>Значення чергового елемента масиву.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>Індекс чергового елемента в масиві.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>Масив, до якого застосовано <code>some()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Значення, що використовується як <code><strong>this</strong></code> коли викликається <code>callback</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p><code><strong>true</strong></code>, якщо функція повертає {{Glossary("truthy", "істинне")}} значення принаймні для одного з елементів масива. Інакше <code><strong>false</strong></code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>some()</code> викликає функцію <code>callback</code> для кожного елемента в масиві один за одним, доки не знайде такий, для якого <code>callback</code> повертає істинне значення (значення, яке стає <code>true</code> внаслідок перетворення на Boolean). Щойно такий елемент знайдено, <code>some()</code> негайно повертає <code>true</code>, не перевіряючи решту елементів. Якщо таких елементів не знайдено, метод <code>some()</code> повертає <code>false</code>.</p> + +<p>Зауважте, що <code>callback</code> викликається лише для індексів масиву, яким надано значення. Тож індекси без встановлених значень, а також видалені елементи будуть знехтувані.</p> + +<p>Функція <code>callback</code> викликається з трьома аргументами: значення елемента, індекс елемента і об'єкт масиву, для якого викликано метод <code>some()</code>.</p> + +<p>Якщо для <code>some()</code> визначено параметр <code>thisArg</code>, його буде використано як значення <code>this</code> для функції <code>callback</code>. В іншому випадку, буде використано значення {{jsxref("undefined")}}. Зрештою, значення <code>this</code> для функції <code>callback</code> буде визначено відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">загальних правил</a>.</p> + +<p>Метод <code>some()</code> не змінює масив, для якого його викликано.</p> + +<p>Межі індексів елементів, які буде перевірено, встановлюються перед найпершим викликом <code>callback</code>. Тож всі елементи, додані в кінець масиву вже під час виконання <code>some()</code>, будуть знехтувані. Якщо значення котрогось елемента буде змінено зсередини <code>callback</code>, наступний виклик <code>callback</code> (якщо такий буде) це врахує. Видалені елементи перевірено не буде.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевірка_елементів_масива">Перевірка елементів масива</h3> + +<p>В цьому прикладі виклик <code>some()</code> перевіряє, чи містить масив числа більші від 10:</p> + +<pre class="brush: js">function isBiggerThan10(element, index, array) { + return element > 10; +} + +[2, 5, 8, 1, 4].some(isBiggerThan10); // вертає false +[12, 5, 8, 1, 4].some(isBiggerThan10); // вертає true +</pre> + +<h3 id="Перевірка_елементів_масива_стрілковою_функцією">Перевірка елементів масива стрілковою функцією</h3> + +<p>Те саме, що і в попередньому прикладі, але із синтаксисом <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкової функції</a>:</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(x => x > 10); // вертає false +[12, 5, 8, 1, 4].some(x => x > 10); // вертає true +</pre> + +<h3 id="Перевірка_наявності_певного_значення_в_масиві">Перевірка наявності певного значення в масиві</h3> + +<p>Щоб відтворити поведінку метода {{jsxref("Array.prototype.includes()", "includes()")}}, функція повертає <code>true</code>, щойно знаходить шукане значення в масиві:</p> + +<pre class="brush: js">var fruits = ['яблуко', 'груша', 'персик', 'банан']; + +function contains(array, value) { + return array.some(function(v) { + return value === v; + }); +} + +contains(fruits, 'вишня'); // вертає false +contains(fruits, 'банан'); // вертає true</pre> + +<h3 id="Перевірка_наявності_певного_значення_в_масиві_стрілковою_функцією">Перевірка наявності певного значення в масиві стрілковою функцією</h3> + +<pre class="brush: js">var fruits = ['яблуко', 'груша', 'персик', 'банан']; + +function contains(array, value) { + return array.some(v => value === v); +} + +contains(fruits, 'вишня'); // вертає false +contains(fruits, 'банан'); // вертає true</pre> + +<h3 id="Зведення_всякого_значення_до_Boolean">Зведення всякого значення до Boolean</h3> + +<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1]; + +function getBoolean(value) { + 'use strict'; + + if (typeof value === 'string') { + value = value.toLowerCase().trim(); + } + + return TRUTHY_VALUES.some(function(t) { + return t === value; + }); +} + +getBoolean(false); // вертає false +getBoolean('false'); // вертає false +getBoolean(1); // вертає true +getBoolean('true'); // вертає true</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Цей метод було стандартизовано 5-им випуском ECMA-262. Для рушіїв, що не мають підтримки цього метода, стане в пригоді наведене нижче рішення. Цей алгоритм аналогічно відповідає вимогам 5-го випуску ECMA-262 за умови, що {{jsxref("Object")}} і {{jsxref("TypeError")}} не було змінено, а виклик <code>callback.call()</code> відповідає очікуваному {{jsxref("Function.prototype.call()")}}:</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17 +// Reference: http://es5.github.io/#x15.4.4.17 +if (!Array.prototype.some) { + Array.prototype.some = function(fun, thisArg) { + 'use strict'; + + if (this == null) { + throw new TypeError('Array.prototype.some called on null or undefined'); + } + + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + + for (var i = 0; i < len; i++) { + if (i in t && fun.call(thisArg, t[i], i, t)) { + return true; + } + } + + return false; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/sort/index.html b/files/uk/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..2f592898bd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,274 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>sort()</strong></code> відсортовує елементи масиву <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em> та повертає відсортований масив. За замовчуванням порядок сортування будується на перетворенні елементів у рядки, а потім на порівнянні іхньої послідовності значень кодових одиниць UTF-16.</p> + +<p>Часова та просторова складність такого сортування не може гарантуватися, оскільки вона залежить від реалізації.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> + +<p class="hidden">Джерело цього інтерактивного прикладу зберігається у репозіторії на GitHub. Якщо ви бажаєте залучитися до проекту зі створення інтерактивних прикладів, будь ласка, скопіюйте це посилання <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та надішліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.sort(<var>[compareFunction]</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>Вказує функцію, яка визначає порядок сортування. Якщо не вказувати, елементи масиву будуть перетворені на рядки, а потім відсортовані згідно до значення кодових точок Unicode кожного символу.</dd> + <dd> + <dl> + <dt><code>firstEl</code></dt> + <dd>Перший елемент для порівняння.</dd> + <dt><code>secondEl</code></dt> + <dd>Другий елемент для порівняння.</dd> + </dl> + </dd> +</dl> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Відсортований масив. Зверніть увагу на те, що масив сортується <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">на місці</a></em>, без створення копії.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо <code>compareFunction</code> не передається, усі визначені (non-<code>undefined</code>) елементи масиву відсортовуються через перетворення у рядки та порівняння цих рядків в UTF-16 порядку кодових точок. Наприклад, "banana" іде перед "cherry". У числовому сортуванні, 9 іде перед 80, але оскільки числа перетворюються на рядки, "80" іде перед "9" в Unicode порядку. Усі <code>undefined</code> елементи відсортуються у кінець масиву. </p> + +<div class="blockIndicator note"> +<p><strong>Примітка :</strong> В UTF-16, Unicode символи вище за <code>\uFFFF</code> кодуються як дві сурогатні кодові одиниці, діапазону <code>\uD800</code>-<code>\uDFFF</code>. Значення кожної кодової одиниці враховується для порівняння окремо. Таким чином, символ створений сурогатною парою <code>\uD655\uDE55</code> буде відсортований перед символом <code>\uFF3A</code>.</p> +</div> + +<p>Якщо <code>compareFunction</code> передається, усі визначені (non-<code>undefined</code>) елементи масиву відсортовуються згідно до поверненого значення функції порівняння (усі <code>undefined</code> елементи масиву відсортовуються у кінець масиву, без виклику <code>compareFunction</code>). Якщо <code>a</code> та <code>b</code> є двома елементами, що порівнюються, тоді: </p> + +<ul> + <li> + <p>Якщо <code>compareFunction(a, b)</code> менше ніж 0, сортування поставить <code>a</code> нижче за індексом ніж <code>b</code> (тобто <code>a</code> іде першим).</p> + </li> + <li> + <p>Якщо <code>compareFunction(a, b)</code> повертає 0, сортування залишить <code>a</code> та <code>b</code> незміненими по відношенню один до одного, проте відсортує по відношенню до усіх інших елементів. Зверніть увагу: стандарт ECMAscript не гарантує таку поведінку, отже, не всі браузери (наприклад, Mozilla версій, принаймні, до 2003) додержуються цього.</p> + </li> + <li> + <p>Якщо <code>compareFunction(a, b)</code> більше ніж 0, сортування поставить <code>b</code> нижче за індексом ніж <code>a</code> (тобто <code>b</code> іде першим).</p> + </li> + <li><code>compareFunction(a, b)</code> завжди повинна повертати теж саме значення для певної пари елементів <code>a</code> та <code>b</code> , що служать у якості її двух аргументів. Якщо будуть повертатися непослідовні результати, порядок сортування буде невизначеним.</li> +</ul> + +<p>Таким чином, функція порівняння має наступний вигляд:</p> + +<pre class="brush: js notranslate">function compare(a, b) { + if (a is less than b by some ordering criterion) { + return -1; + } + if (a is greater than b by the ordering criterion) { + return 1; + } + // a must be equal to b + return 0; +} +</pre> + +<p>Для того, щоб порівняти числа замість рядків, функція порівняння може просто відняти <code>b</code> з <code>a</code>. Наступна функція відсортовує масив у порядку зростання (якщо тільки вона не містить <code>Infinity</code> та <code>NaN</code>):</p> + +<pre class="brush: js notranslate">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>Метод <code>sort</code> зручно використовувати з {{jsxref("Operators/function", "function expressions", "", 1)}}:</p> + +<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>ES2015 надає {{jsxref("Functions/Arrow_functions", "arrow function expressions", "", 1)}} за допомогою навіть коротшого синтаксису. </p> + +<pre class="brush: js notranslate">let numbers = [4, 2, 5, 1, 3]; +numbers.sort((a, b) => a - b); +console.log(numbers); + +// [1, 2, 3, 4, 5]</pre> + +<p>Об'єкти можна сортувати, використовуючи значення однієї зі своїх властивостей. </p> + +<pre class="brush: js notranslate">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; + +// sort by value +items.sort(function (a, b) { + return a.value - b.value; +}); + +// sort by name +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // ignore upper and lowercase + var nameB = b.name.toUpperCase(); // ignore upper and lowercase + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // names must be equal + return 0; +});</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_відображення_та_сортування_масиву">Створення, відображення, та сортування масиву</h3> + +<p>У наступному прикладі створюються чотири масиви і відображаються спершу початковий, потім відсортованний масиви. Числові масиви сортуються без функції порівняння, а відсортовані потім - з нею.</p> + +<pre class="brush: js notranslate">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compareNumbers(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Sorted:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Sorted without a compare function:', numberArray.sort()); +console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Sorted without a compare function:', numericStringArray.sort()); +console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Sorted without a compare function:', mixedNumericArray.sort()); +console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers)); +</pre> + +<p>Цей приклад буде мати наступний вивід. Згідно до нього, при використанні функції порівняння, числа сортуються належним чином, як самі числа, так і рядки з числами.</p> + +<pre class="notranslate">stringArray: Blue,Humpback,Beluga +Sorted: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Sorted without a compare function: 1,200,40,5 +Sorted with compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Sorted without a compare function: 700,80,9 +Sorted with compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Sorted without a compare function: 1,200,40,5,700,80,9 +Sorted with compareNumbers: 1,5,9,40,80,200,700 +</pre> + +<h3 id="Сортування_не-ASCII_символів">Сортування не-ASCII символів</h3> + +<p>Для сортування рідків, які містять символи, що не входять до ASCII, наприклад, рядків з діакритичними знаками (e, é, è, a, ä, тощо), чи рядків мовою іншою за англійську, використовується {{jsxref("String.localeCompare")}}. Ця функція може порівнювати ці символи таким чином, що вони з'являються у правильному порядку. </p> + +<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Сортування_за_допомогою_функції_map">Сортування за допомогою функції map()</h3> + +<p>Функція <code>compareFunction</code> може викликатися багато разів на елемент всередені масиву. В залежності від характеру <code>compareFunction</code>, це може призводити до високих накладних витрат. Чим більше роботи виконує <code>compareFunction</code>, чим більше елементів їй треба відсортувати, тим доцільнішим буде використання функції <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> задля цієї задачі. Map() працює наступним чином: функція перебирає масив лише один раз, потім вона перетягує фактичні значення для сортування у тимчасовий масив, відсортовує цей масив, а потім перебирає його для того, щоб досягти правильного порядку. </p> + +<pre class="brush: js notranslate" dir="rtl">// the array to be sorted +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// temporary array holds objects with position and sort-value +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// sorting the mapped array containing the reduced values +mapped.sort(function(a, b) { + if (a.value > b.value) { + return 1; + } + if (a.value < b.value) { + return -1; + } + return 0; +}); + +// container for the resulting order +var result = mapped.map(function(el){ + return list[el.index]; +}); +</pre> + +<p>У відкритому доступі є бібліотека під назвою <a href="https://null.house/open-source/mapsort">mapsort</a>, яка застосовує цей підхід. </p> + +<h2 id="Специфікація">Специфікація</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація </th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Початкове визначення.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці береться зі струкрутованих даних. кщо ви бажаєте залучитися до створення цих даних, будь ласка, перегляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надішліть нам pull request.</div> + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> +</div> + +<h2 id="Дивиться_також">Дивиться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li><a href="https://v8.dev/blog/array-sort">About the stability of the algorithm used by V8 engine</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/splice/index.html b/files/uk/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..0565d3f266 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,162 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Array + - JavaScript + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>splice()</strong></code> змінює вміст масиву, видаляючи існуючі та/або додаючи нові елементи.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])</var> +</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Індекс елемента, з якого розпочнеться зміна масиву. Якщо індекс більший за розмір масиву, <code>start</code> буде рівним довжині масиву. Якщо індекс від'ємний, позначатиме кількість елементів з кінця масиву (починаючи з -1, тобто -n означатиме індекс n-го елемента з кінця, і таким чином є еквівалентом <code>array.length - n</code>). Якщо абсолютна величина <code>start</code> є більшою за довжину масиву, зміни почнуться з індексу 0.</dd> + <dt><code>deleteCount</code>{{optional_inline}}</dt> + <dd>Число, що вказує на кількість елементів масиву, які необхідно видалити, починаючи з індексу <code>start</code>.</dd> + <dd>Якщо аргумент <code>deleteCount</code> не заданий, або його значення більше чи дорівнює <code>arr.length - start</code> (тобто, більше чи дорівнює кількості елементів, які залишились у масиві, починаючи зі <code>start</code>), тоді будуть видалені всі елементи, починаючи зі <code>start</code> і до кінця масиву.</dd> + <dd>Якщо <code>deleteCount</code> рівний 0 або від'ємний, жоден елемент не буде видалений. У цьому випадку необхідно вказати хоча б один новий елемент для вставки (див. нижче).</dd> + <dt><code>item1, item2, <em>...</em></code>{{optional_inline}}</dt> + <dd>Елементи, що будуть додані до масиву, починаючи з індексу <code>start</code>. Якщо не вказати жодного нового елемента, <code>splice()</code> лише видалить елементи з масиву.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Масив видалених елементів. Якщо видалено лише один елемент, метод поверне масив з одним елементом. Якщо жоден з елементів не видалявся, метод повертає пустий масив.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо задана кількість елементів для вставлення відрізняється від кількості елементів на видалення, довжина масиву зміниться після виконання функції.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Видалення_0_елементів_починаючи_з_індексу_2_і_вставлення_drum">Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum"</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["angel", "clown", "drum", "mandarin", "sturgeon"] </span> +<span class="comment token">// removed дорівнює [], жодний елемент не було видалено</span></code> +</pre> + +<h3 id="Видалення_0_елементів_починаючи_з_індексу_2_і_вставлення_drum_та_guitar">Видалення 0 елементів, починаючи з індексу 2, і вставлення "drum" та "guitar"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum', 'guitar'); + +// myFish дорівнює ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed дорівнює [], жодний елемент не було видалено</pre> + +<h3 id="Видалення_1_елемента_починаючи_з_індексу_3">Видалення 1 елемента, починаючи з індексу 3</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// removed дорівнює ["mandarin"]</span> +<span class="comment token">// myFish дорівнює ["angel", "clown", "drum", "sturgeon"]</span></code></pre> + +<h3 id="Видалення_1_елементу_починаючи_з_індексу_2_і_вставлення_trumpet">Видалення 1 елементу, починаючи з індексу 2, і вставлення "trumpet"</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'drum'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["angel", "clown", "trumpet", "sturgeon"]</span> +<span class="comment token">// removed дорівнює ["drum"]</span></code></pre> + +<h3 id="Видалення_2-ох_елементів_починаючи_з_індексу_0_і_вставлення_у_масив_елементів_parrot_anemone_і_blue">Видалення 2-ох елементів, починаючи з індексу 0, і вставлення у масив елементів "parrot", "anemone" і "blue"</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="string token">'parrot'</span><span class="punctuation token">,</span> <span class="string token">'anemone'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["parrot", "anemone", "blue", "trumpet", "sturgeon"] </span> +<span class="comment token">// removed дорівнює ["angel", "clown"]</span></code></pre> + +<h3 id="Видалення_2-ох_елементів_починаючи_з_індексу_2">Видалення 2-ох елементів, починаючи з індексу 2</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'parrot'</span><span class="punctuation token">,</span> <span class="string token">'anemone'</span><span class="punctuation token">,</span> <span class="string token">'blue'</span><span class="punctuation token">,</span> <span class="string token">'trumpet'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(2</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["parrot", "anemone", "sturgeon"] </span> +<span class="comment token">// removed дорівнює ["blue", "trumpet"]</span></code> +</pre> + +<h3 id="Видалення_1-го_елемента_починаючи_з_індексу_-2">Видалення 1-го елемента, починаючи з індексу -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish дорівнює ["angel", "clown", "sturgeon"] +// removed дорівнює ["mandarin"]</pre> + +<h3 id="Видалення_всіх_елементів_починаючи_з_індексу_2_(включно).">Видалення всіх елементів, починаючи з індексу 2 (включно).</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myFish <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'angel'</span><span class="punctuation token">,</span> <span class="string token">'clown'</span><span class="punctuation token">,</span> <span class="string token">'mandarin'</span><span class="punctuation token">,</span> <span class="string token">'sturgeon'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> removed <span class="operator token">=</span> myFish<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// myFish дорівнює ["angel", "clown"] </span> +<span class="comment token">// removed дорівнює ["mandarin", "sturgeon"]</span></code></pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачів">Підтримка веб-переглядачів</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — додати/видалити елементи з кінця масиву</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — додати/видалити елементи з початку масиву</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — повертає новий масив, складений шляхом об'єднання цього масиву з іншим масивом(-ами) чи значеннями.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..75448b5e72 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,182 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +tags: + - Array + - JavaScript + - Масив + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toLocaleString()</strong></code> повертає рядок, що відображає елементи масиву. Елементи перетворюються у рядки, використовуючи свої методи <code>toLocaleString</code>, і ці рядки розділяються символами, що відповідають локалі (наприклад, комою “,”).</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.toLocaleString([<var>locales[</var>, <var>options]]</var>); +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>Рядок з міткою мови BCP 47 або масив таких рядків. Щодо загального вигляду та інтерпретації аргументу <code>locales</code> дивіться {{jsxref("Intl")}}.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Об'єкт з властивостями конфігурації, для числових значень дивіться {{jsxref("Number.prototype.toLocaleString()")}}, а для дат {{jsxref("Date.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Текстовий рядок, що відображає елементи масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_locales_та_options">Використання <code>locales</code> та <code>options</code></h3> + +<p>Елементи масиву перетворюються на рядки, використовуючи свої методи <code>toLocaleString</code>.</p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<p>Завжди відображати знак валюти для рядків та чисел у масиві <code>prices</code>:</p> + +<pre class="brush: js">var prices = ['￥7', 500, 8123, 12]; +prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); + +// "￥7,￥500,￥8,123,￥12" +</pre> + +<p>Більше прикладів дивіться на сторінках {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} та {{jsxref("DateTimeFormat")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring +if (!Array.prototype.toLocaleString) { + Object.defineProperty(Array.prototype, 'toLocaleString', { + value: function(locales, options) { + // 1. Нехай O дорівнює ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var a = Object(this); + + // 2. Нехай len дорівнює ? ToLength(? Get(A, "length")). + var len = a.length >>> 0; + + // 3. Нехай separator дорівнює рядковому значенню + // роздільника елементів списку згідно поточної + // локалі середовища виконання (це значення + // визначається реалізацією). + // ЗАУВАГА: В даному випадку ми використовуємо кому + var separator = ','; + + // 4. Якщо len дорівнює нулю, повернути порожінй рядок. + if (len === 0) { + return ''; + } + + // 5. Нехай firstElement дорівнює ? Get(A, "0"). + var firstElement = a[0]; + // 6. Якщо firstElement дорівнює undefined або null, тоді + // a. Нехай R дорівнює порожньому рядку. + // 7. Інакше, + // a. Нехай R дорівнює ? + // ToString(? + // Invoke( + // firstElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + var r = firstElement == null ? + '' : firstElement.toLocaleString(locales, options); + + // 8. Нехай k дорівнює 1. + var k = 1; + + // 9. Повторювати, доки k < len + while (k < len) { + // а. Нехай S дорівнює рядковому значенню, утвореному + // об'єднанням R та separator. + var s = r + separator; + + // б. Нехай nextElement дорівнює ? Get(A, ToString(k)). + var nextElement = a[k]; + + // в. Якщо nextElement дорівнює undefined або null, тоді + // i. Нехай R дорівнє порожньому рядку. + // г. Інакше, + // i. Нехай R дорівнює ? + // ToString(? + // Invoke( + // nextElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + r = nextElement == null ? + '' : nextElement.toLocaleString(locales, options); + + // ґ. Нехай R дорівнює рядковому значенню, утвореному + // об'єднанням S та R. + r = s + r; + + // д. Збільшити k на 1. + k++; + } + + // 10. Повернути R. + return r; + } + }); +} +</pre> + +<p>Якщо вам потрібно підтримувати зовсім застарілі рушії JavaScript, які не підтримують <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, краще взагалі не використовувати поліфіли методів <code>Array.prototype</code>, оскільки ви не зможете зробити їх не перелічуваними.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення було надане у ECMAScript 3.</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>Це визначення замінює визначення, надане у ECMA-262.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Object.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/tosource/index.html b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..d493fe0e4f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,72 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSource +tags: + - Array + - JavaScript + - Масив + - метод + - нестандартний +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<div>Метод <code><strong>toSource()</strong></code> повертає рядкове представлення першокоду масиву.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.toSource()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядкове представлення першокоду масиву.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>toSource()</code> повертає наступні значення:</p> + +<ul> + <li>Для вбудованого об'єкта {{jsxref("Array")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний: + + <pre class="brush: js">function Array() { + [native code] +} +</pre> + </li> + <li>Для екземплярів {{jsxref("Array")}} <code>toSource()</code> повертає рядкове представлення першокоду.</li> +</ul> + +<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді. Ви можете викликати <code>toSource()</code> під час налагодження для дослідження вмісту масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Досліджуємо_першокод_масиву">Досліджуємо першокод масиву</h3> + +<p>Для дослідження першокоду масиву:</p> + +<pre class="brush: js">var alpha = new Array('a', 'б', 'в'); + +alpha.toSource(); +//повертає ['a', 'б', 'в'] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту. Реалізовано у JavaScript 1.3.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.toSource")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/tostring/index.html b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..53505797f4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,80 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toString()</strong></code> повертає рядкове представлення заданого масиву та його елементів.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.toString()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядкове представлення елементів масиву.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("Array")}} заміщує метод <code>toString</code> об'єкта {{jsxref("Object")}}. Для об'єктів Array метод <code>toString</code> об'єднує масив та повертає один рядок, що містить усі елементи масиву, розділені комами.</p> + +<p>JavaScript викликає метод <code>toString</code> автоматично, коли масив потрібно відобразити у вигляді текстового значення або при посиланні на масив у поєднанні рядків.</p> + +<h3 id="Семантика_ECMAScript_5">Семантика ECMAScript 5</h3> + +<p>Введений у JavaScript 1.8.5 (Firefox 4) та сумісний з семантикою 5-ї версії ECMAScript, метод <code>toString()</code> є загальним і може використовуватися з будь-яким об'єктом. Буде викликаний метод {{jsxref("Object.prototype.toString()")}}, який поверне значення результату.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html new file mode 100644 index 0000000000..308a8a01d6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/unobserve/index.html @@ -0,0 +1,89 @@ +--- +title: Array.unobserve() +slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve +tags: + - Array + - JavaScript + - Масив + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Array.unobserve +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод Array<strong>.unobserve()</strong> використовувався для видалення спостерігачів, встановлених методом {{jsxref("Array.observe()")}}, але він застарів та був прибраний з переглядачів. Ви можете натомість скористатись більш загальним об'єктом {{jsxref("Proxy")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Array.unobserve(<var>arr</var>, <var>callback</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>Масив, де треба припинити спостереження.</dd> + <dt><code>callback</code></dt> + <dd>Посилання на спостерігач, який треба припинити викликати кожен раз, коли у масиві <strong>arr</strong> відбувається зміна.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Array.unobserve()</code> має викликатися після {{jsxref("Array.observe()")}}, щоб прибрати спостерігач з масиву.</p> + +<p>Параметр callback має бути посиланням на функцію, а не анонімною функцією, бо це посилання буде використано, щоб прибрати попередній спостерігач. Немає сенсу викликати <strong>Array.unobserve()</strong> з анонімною функцією зворотного виклику, вона не прибере жоден спостерігач.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Припинення_спостереження_за_масивом">Припинення спостереження за масивом</h3> + +<pre class="brush: js">var arr = [1, 2, 3]; + +var observer = function(changes) { + console.log(changes); +} + +Array.observe(arr, observer); + +arr.push(4); +// [{type: "splice", object: <arr>, index: 3, removed:[], addedCount: 1}] + +Array.unobserve(arr, observer); + +arr.pop(); +// Функція зворотного виклику не викликалась</pre> + +<h3 id="Використання_анонімної_функції">Використання анонімної функції</h3> + +<pre class="brush: js">var persons = ['Халід', 'Ахмед', 'Мухаммед']; + +Array.observe(persons, function (changes) { + console.log(changes); +}); + +persons.shift(); +// [{type: "splice", object: <arr>, index: 0, removed: [ "Халід" ], addedCount: 0 }] + +Array.unobserve(persons, function (changes) { + console.log(changes); +}); + +persons.push('Абдулла'); +// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }] +// Функція зворотного виклику викликатиметься завжди +</pre> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unobserve")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/unshift/index.html b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..0621da3662 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,123 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +tags: + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>unshift()</strong></code> додає один або декілька елементів на початок масиву і повертає новий розмір масиву.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>arr</var>.unshift([<var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Елементи для додавання в початок масиву.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Нова властивість {{jsxref("Array.length", "length")}} об'єкту, для якого було викликано функцію.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>unshift</code> вставляє задані значення в початок масиву.</p> + + + +<p>Метод <code>unshift</code> є навмисно загальним; він може бути {{jsxref("Function.call", "викликаний", "", 1)}} або {{jsxref("Function.apply", "застосований", "", 1)}} у об'єктах, схожих на масиви. Об'єкти, які не мають властивості <code>length</code>, що відображає останню з серії послідовних числових властивостей, що починаються з нуля, можуть поводитися непередбачувано.</p> + +<p>Будь ласка, зауважте, якщо у параметри передається більше одного значення, вони всі вставляються на початку об'єкта, саме в тому порядку, в якому були передані у параметри. Отже, виклик unshift з <strong>n</strong> аргументів <strong>за один раз</strong>, або виклик <strong>n</strong> разів з <strong>1</strong> аргументом (наприклад, у циклі), не дадуть однаковий результат. Наприклад:</p> + +<pre class="brush: js">let arr = [4, 5, 6]; + +arr.unshift(1, 2, 3); +console.log(arr); +// [<strong>1, 2, 3</strong>, 4, 5, 6] + +arr = [4, 5, 6]; // скидаємо значення масиву + +arr.unshift(1); +arr.unshift(2); +arr.unshift(3); + +console.log(arr); +// [<strong>3, 2, 1</strong>, 4, 5, 6]</pre> + + + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // результатом виклику буде значення 3, нова довжина масиву +// arr дорівнює [0, 1, 2] + +arr.unshift(-2, -1); // нова довжина масиву дорівнює 5 +// arr дорівнює [-2, -1, 0, 1, 2] + +arr.unshift([-4, -3]); // нова довжина масиву дорівнює 6 +// arr дорівнбє [[-4, -3], -2, -1, 0, 1, 2] + +arr.unshift([-7, -6], [-5]); // нова довжина масиву дорівнює 8 +// arr дорівнює [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Назва специфікації</th> + <th scope="col">Статус</th> + <th scope="col">Коментарій</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізовано в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>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> +</div> + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/array/values/index.html b/files/uk/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..8df5438b95 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,93 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Ітератор + - Масив + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>values()</code></strong> повертає новий об'єкт ітератора масиву (<strong><code>Array Iterator</code></strong>), який містить значення кожного елемента масиву.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p> + +<pre class="brush: js">var a = ['a', 'б', 'в', 'г', 'ґ']; +var iterator = a.values(); + +console.log(iterator.next().value); // а +console.log(iterator.next().value); // б +console.log(iterator.next().value); // в +console.log(iterator.next().value); // г +console.log(iterator.next().value); // ґ</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий об'єкт ітератора масиву.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перебір_за_допомогою_циклу_for...of">Перебір за допомогою циклу <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></h3> + +<pre class="brush: js">var arr = ['а', 'б', 'в', 'г', 'ґ']; +var iterator = arr.values(); + +for (let letter of iterator) { + console.log(letter); +} +</pre> + +<p><strong>Array.prototype.values</strong> є реалізацією за замовчуванням для <strong>Array.prototype[Symbol.iterator]</strong>.</p> + +<pre class="brush: js">Array.prototype.values === Array.prototype[Symbol.iterator] //true</pre> + +<p><strong>TODO</strong>: please write about why we need it, use cases.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html b/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html new file mode 100644 index 0000000000..d07be9a438 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/asyncfunction/index.html @@ -0,0 +1,128 @@ +--- +title: AsyncFunction +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction +tags: + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction +--- +<div>{{JSRef}}</div> + +<p>Конструктор <code><strong>Async</strong></code><strong><code>Function</code></strong> створює новий об'єкт {{jsxref("Statements/async_function", "асинхронної функції")}}. У JavaScript кожна асинхронна функція насправді є об'єктом <code>AsyncFunction</code>.</p> + +<p>Зауважте, що <code>AsyncFunction</code> <em>не є</em> глобальним об'єктом. Його можна отримати за допомогою наступного коду:</p> + +<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Імена, що використовуватиме функція як формальні імена аргументів. Кожне має бути рядком, що відповідає коректному ідентифікатору JavaScript, або списком таких рядків, розділених комою; наприклад, "<code>x</code>", "<code>theValue</code>" або "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>Рядок, що містить інструкції JavaScript, які складають визначення функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкти {{jsxref("Statements/async_function", "асинхронних функцій")}}, створені конструктором <code>AsyncFunction</code>, розбираються, коли створюється функція. Це менш ефективно, ніж оголосити асинхронну функцію через {{jsxref("Statements/async_function", "async function")}} та викликати її у вашому коді, тому що такі функції розбираються з рештою коду.</p> + +<p>Усі аргументи, передані у функцію, сприймаються як імена ідентифікаторів параметрів функції, яка має бути створена, у тому порядку, в якому вони передані.</p> + +<div class="note"> +<p><strong>Заувага:</strong> {{jsxref("Statements/async_function", "асинхронні функції")}}, створені конструктором <code>AsyncFunction</code>, не утворюють замикань з контекстом свого створення; вони завжди створюються у глобальній області видимості.</p> + +<p>Під час виконання вони матимуть доступ тільки до власних локальних змінних та до глобальних, але не до змінних області видимості, в якій був викликаний конструктор <code>AsyncFunction</code>.</p> + +<p>Це відрізняється від використання {{jsxref("Global_Objects/eval", "eval")}} з кодом виразу асинхронної функції.</p> +</div> + +<p>Використання конструктора <code>AsyncFunction</code> в якості функції (без оператора <code>new</code>) має такий самий ефект, як і виклик його в якості конструктора.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code><strong>AsyncFunction.length</strong></code></dt> + <dd>Властивість <code>length</code> конструктора <code>AsyncFunction</code> (її значення дорівнює <code>1</code>).</dd> + <dt>{{jsxref("AsyncFunction.prototype")}}</dt> + <dd>Дозволяє додавати властивості до усіх об'єктів асинхронних функцій.</dd> +</dl> + +<h2 id="Прототип_AsyncFunction">Прототип <code>AsyncFunction</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Властивості')}}</div> + +<h2 id="Екземпляри_AsyncFunction">Екземпляри <code>AsyncFunction</code></h2> + +<p>Екземпляри <code>AsyncFunction</code> успадковують методи та властивості від {{jsxref("AsyncFunction.prototype")}}.</p> + +<p>Як в усіх конструкторах, ви можете змінювати об'єкт конструктора <code>prototype</code>, щоб вносити зміни до усіх екземплярів <code>AsyncFunction</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_асинхронної_функції_конструктором_AsyncFunction">Створення асинхронної функції конструктором <code>AsyncFunction</code></h3> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor + +let a = new AsyncFunction('a', + 'b', + 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);'); + +a(10, 20).then(v => { + console.log(v); // виводить 30 через 4 секунди +}); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення у ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.AsyncFunction")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "вираз асинхронної функції")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Statements/function", "оголошення функції")}}</li> + <li>{{jsxref("Operators/function", "функціональний вираз")}}</li> + <li>{{jsxref("Functions", "Функції", "", 1)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html new file mode 100644 index 0000000000..c2df6c31db --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,59 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +tags: + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>AsyncFunction.prototype</strong></code> відображає прототип об'єкта {{jsxref("AsyncFunction")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкти {{jsxref("AsyncFunction")}} успадковуються від <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> не може бути змінений.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code><strong>AsyncFunction.constructor</strong></code></dt> + <dd>Початковим значенням є {{jsxref("AsyncFunction")}}.</dd> + <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> + <dd>Вертає "AsyncFunction".</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення у ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html b/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html new file mode 100644 index 0000000000..23dc106391 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html @@ -0,0 +1,78 @@ +--- +title: BigInt.asIntN() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN +tags: + - BigInt + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN +--- +<div>{{JSRef}}</div> + +<p>Статичний метод <strong><code>BigInt.asIntN</code></strong> використовується для обертання значення BigInt до цілого числа зі знаком у діапазоні між -2<sup>width-1</sup> та 2<sup>width-1</sup>-1.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-asintn.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 notranslate">BigInt.asIntN(<var>width</var>, <var>bigint</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>width</var></code></dt> + <dd>Кількість бітів, доступних для розміру цілого числа.</dd> + <dt><code><var>bigint</var></code></dt> + <dd>Ціле число, яке треба затиснути, щоб вмістити у надані біти.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Значення <code><var>bigint</var></code> за модулем 2<sup><code><var>width</var></code></sup> у вигляді цілого числа зі знаком.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Щоб_залишатись_у_64-бітному_діапазоні">Щоб залишатись у 64-бітному діапазоні</h3> + +<p>Метод <code>BigInt.asIntN()</code> може бути корисним, якщо потрібно залишатись у діапазоні 64-бітної арифметики.</p> + +<pre class="brush: js notranslate">const max = 2n ** (64n - 1n) - 1n; + +BigInt.asIntN(64, max); +// ↪ 9223372036854775807n + +BigInt.asIntN(64, max + 1n); +// ↪ -9223372036854775807n +// від'ємне число, через переповнення +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.asintn', 'BigInt.asIntN()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.BigInt.asIntN")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("BigInt")}}</li> + <li>{{JSxRef("BigInt.asUintN()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html new file mode 100644 index 0000000000..87e7d50cd9 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html @@ -0,0 +1,77 @@ +--- +title: BigInt.asUintN() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN +tags: + - BigInt + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN +--- +<div>{{JSRef}}</div> + +<p>Статичний метод <strong><code>BigInt.asUintN</code></strong> використовується для обертання значення BigInt до цілого беззнакового числа у діапазоні між 0 та 2<sup>width</sup>-1.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-asuintn.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 notranslate">BigInt.asUintN(<var>width</var>, <var>bigint</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>width</var></code></dt> + <dd>Кількість бітів, доступних для розміру цілого числа.</dd> + <dt><code><var>bigint</var></code></dt> + <dd>Ціле число, яке треба затиснути, щоб вмістити у надані біти.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Значення <code><var>bigint</var></code> за модулем 2<sup><code><var>width</var></code></sup> у вигляді цілого беззнакового числа.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Щоб_залишатись_у_64-бітному_діапазоні">Щоб залишатись у 64-бітному діапазоні</h3> + +<p>Метод <code>BigInt.asUintN()</code> може бути корисним, якщо потрібно залишатись у межах 64-бітної арифметики.</p> + +<pre class="brush: js notranslate">const max = 2n ** 64n - 1n; + +BigInt.asUintN(64, max); +// ↪ 18446744073709551615n + +BigInt.asUintN(64, max + 1n); +// ↪ 0n +// нуль, через переповнення</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.asuintn', 'BigInt.asUintN()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.BigInt.asUintN")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("BigInt")}}</li> + <li>{{JSxRef("BigInt.asIntN()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html b/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html new file mode 100644 index 0000000000..5181816ae3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html @@ -0,0 +1,64 @@ +--- +title: Конструктор BigInt() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +tags: + - BigInt + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +--- +<div>{{JSRef}}</div> + +<p>Конструктор <strong><code>BigInt()</code></strong> повертає значення типу <strong>bigint</strong>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">BigInt(<var>value</var>); +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>value</var></code></dt> + <dd>Числове значення об'єкта, що створюється. Може бути рядком або цілим числом.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Заувага</strong>: <code>BigInt()</code> не використовується з оператором {{JSxRef("Operators/new", "new")}}.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_нового_обєкта_BigInt">Створення нового об'єкта BigInt</h3> + +<pre class="brush: js notranslate">BigInt(123); +// 123n +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint-constructor', 'BigInt constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.BigInt.BigInt")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Клас {{jsxref("BigInt")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/bigint/index.html b/files/uk/web/javascript/reference/global_objects/bigint/index.html new file mode 100644 index 0000000000..89ced05a5d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/index.html @@ -0,0 +1,302 @@ +--- +title: BigInt +slug: Web/JavaScript/Reference/Global_Objects/BigInt +tags: + - BigInt + - JavaScript + - Довідка + - Клас +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>BigInt</code></strong> є вбудованим об'єктом, який надає можливість відображати неушкодженими числа, більші за 2<sup>53</sup> - 1</span>, тобто, за найбільше число, яке може надійно відобразити JavaScript за допомогою {{Glossary("Primitive", "примітиву")}} <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та яке передається константою <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER"><code>Number.MAX_SAFE_INTEGER</code></a>. <strong><code>BigInt</code></strong> може використовуватись для довільно великих цілих чисел.</p> + +<dl> +</dl> + +<h2 id="Опис">Опис</h2> + +<p><code>BigInt</code> утворюється додаванням <code>n</code> у кінець цілочисельного літералу — <code>10n</code> — або викликом функції <code>BigInt()</code>.</p> + +<pre class="brush: js notranslate">const theBiggestInt = 9007199254740991n + +const alsoHuge = BigInt(9007199254740991) +// ↪ 9007199254740991n + +const hugeString = BigInt("9007199254740991") +// ↪ 9007199254740991n + +const hugeHex = BigInt("0x1fffffffffffff") +// ↪ 9007199254740991n + +const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111") +// ↪ 9007199254740991n +</pre> + +<p>Тип <code>BigInt</code> певними рисами схожий на <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a>, але також відрізняється у кількох ключових моментах — він не може використовуватись з методами вбудованого об'єкта <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> та не може змішуватись з екземплярами <code>Number</code> у операціях; вони мають бути приведені до одного типу. Однак, будьте обережні, перетворюючи значення туди й назад, бо <code>BigInt</code> може втратити точність при перетворенні на <code>Number</code>.</p> + +<h3 id="Інформація_про_тип">Інформація про тип</h3> + +<p>При перевірці на <code>typeof</code>, <code>BigInt</code> видасть "bigint":</p> + +<pre class="brush: js notranslate">typeof 1n === 'bigint' // true +typeof BigInt('1') === 'bigint' // true +</pre> + +<p>При загортанні у <code>Object</code>, <code>BigInt</code> вважатиметься звичайним типом "object":</p> + +<pre class="brush: js notranslate">typeof Object(1n) === 'object' // true +</pre> + +<h3 id="Оператори">Оператори</h3> + +<p>Наступні оператори можна використовувати з <code>BigInt</code> (або з загорнутими у об'єкт <code>BigInt</code>): <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code>.</p> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітові оператори</a> також підтримуються, окрім <code>>>></code> (правий зсув із заповненням нулями), оскільки числа BigInt мають знак.</p> + +<p>Також не підтримується унарний оператор (<code>+</code>), <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">щоб не ламати asm.js</a>.</p> + +<pre class="brush: js notranslate">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER) +// ↪ 9007199254740991n + +const maxPlusOne = previousMaxSafe + 1n +// ↪ 9007199254740992n + +const theFuture = previousMaxSafe + 2n +// ↪ 9007199254740993n, тепер це працює! + +const multi = previousMaxSafe * 2n +// ↪ 18014398509481982n + +const subtr = multi – 10n +// ↪ 18014398509481972n + +const mod = multi % 10n +// ↪ 2n + +const bigN = 2n ** 54n +// ↪ 18014398509481984n + +bigN * -1n +// ↪ –18014398509481984n +</pre> + +<p>Оператор <code>/</code> також працює, як і очікується, з повними числами.</p> + +<p>Однак, оскільки це <code>BigInt</code>, а не <code>BigDecimal</code>, ця операція округлить результат в бік <code>0</code> (іншими словами, вона не поверне десяткових знаків).</p> + +<div class="blockIndicator warning"> +<p>Дробова частина результату операції буде обрізана при використанні з <code>BigInt</code>.</p> +</div> + +<pre class="brush: js notranslate">const expected = 4n / 2n +// ↪ 2n + +const rounded = 5n / 2n +// ↪ 2n, а не 2.5n + +</pre> + +<h3 id="Порівняння">Порівняння</h3> + +<p><code>BigInt</code> не є строго рівним <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a>, але <em>є</em> нестрого рівним:</p> + +<pre class="brush: js notranslate">0n === 0 +// ↪ false + +0n == 0 +// ↪ true</pre> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та <code>BigInt</code> можна порівнювати звичайним чином:</p> + +<pre class="brush: js notranslate">1n < 2 +// ↪ true + +2n > 1 +// ↪ true + +2 > 2 +// ↪ false + +2n > 2 +// ↪ false + +2n >= 2 +// ↪ true</pre> + +<p>Їх можна змішувати у масивах та сортувати:</p> + +<pre class="brush: js notranslate">const mixed = [4n, 6, -12n, 10, 4, 0, 0n] +// ↪ [4n, 6, -12n, 10, 4, 0, 0n] + +mixed.sort() // звичайна поведінка при сортуванні +// ↪ [ -12n, 0, 0n, 10, 4n, 4, 6 ] + +mixed.sort((a, b) => a - b) +// не спрацює, оскільки віднімання не працює при змішуванні типів +// TypeError: can't convert BigInt to number + +// сортування з потрібним порівнянням чисел +mixed.sort((a, b) => (a < b) ? -1 : ((a > b) ? 1 : 0) +// ↪ [ -12n, 0, 0n, 4n, 4, 6, 10 ] +</pre> + +<p>Зауважте, що порівняння чисел <code>BigInt</code>, загорнутих у об'єкт, працюють так само, як з іншими об'єктами, вони рівні тільки при порівнянні одного й того ж самого об'єкта:</p> + +<pre class="brush: js notranslate">0n === Object(0n) // false +Object(0n) === Object(0n) // false + +const o = Object(0n) +o === o // true +</pre> + +<h3 id="Умовні_конструкції">Умовні конструкції</h3> + +<p><code>BigInt</code> поводиться так само, як і <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a>, у тих випадках, де:</p> + +<ul> + <li>перетворюється на <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>: функцією <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>;</li> + <li>використовується з <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">логічними операторами</a> <code>||</code>, <code>&&</code> та <code>!</code>; або</li> + <li>всередині умовної перевірки, наприклад, в інструкції <a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</li> +</ul> + +<pre class="brush: js notranslate">if (0n) { + console.log('Привіт з if!') +} else { + console.log('Привіт з else!') +} + +// ↪ "Привіт з else!" + +0n || 12n +// ↪ 12n + +0n && 12n +// ↪ 0n + +Boolean(0n) +// ↪ false + +Boolean(12n) +// ↪ true + +!12n +// ↪ false + +!0n +// ↪ true +</pre> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/BigInt"><code>BigInt()</code></a></dt> + <dd>Створює нове значення <code>bigint</code>.</dd> +</dl> + +<h2 id="Статичні_методи">Статичні методи</h2> + +<dl> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asIntN"><code>BigInt.asIntN()</code></a></dt> + <dd>Обертає значення <code>BigInt</code> до цілого числа зі знаком у діапазоні між <code>-2<var><sup>width</sup></var><sup>-1</sup></code> та <code>2<var><sup>width</sup></var><sup>-1</sup> - 1</code>.</dd> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asUintN"><code>BigInt.asUintN()</code></a></dt> + <dd>Обертає значення <code>BigInt</code> до беззнакового цілого числа у діапазоні між <code>0</code> та <code>2<var><sup>width</sup></var> - 1</code>.</dd> +</dl> + +<h2 id="Методи_екземплярів">Методи екземплярів</h2> + +<dl> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString"><code>BigInt.prototype.toLocaleString()</code></a></dt> + <dd>Повертає рядок, який відображає число у відповідності до налаштувань мови. Заміщує метод <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString"><code>Object.prototype.toLocaleString()</code></a>.</dd> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/toString"><code>BigInt.prototype.toString()</code></a></dt> + <dd>Вертає рядкове представлення вказаного об'єкта з вказаною основою системи числення. Заміщує метод <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a>.</dd> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt/valueOf"><code>BigInt.prototype.valueOf()</code></a></dt> + <dd>Вертає загорнуте примітивне значення вказаного об'єкта. Заміщує метод <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>Object.prototype.valueOf()</code></a>.</dd> +</dl> + +<h2 id="Рекомендації_щодо_використання">Рекомендації щодо використання</h2> + +<h3 id="Перетворення_типів">Перетворення типів</h3> + +<p>Оскільки перетворення між <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та <code>BigInt</code> можуть призвести до втрати точності, рекомендується використовувати лише <code>BigInt</code>, коли очікуються значення, більші за 2<sup>53</sup>, і не переключатись між двома типами.</p> + +<h3 id="Криптографія">Криптографія</h3> + +<p>Операції, що підтримуються на об'єктах <code>BigInt</code>, не є операціями сталого часу. Таким чином, об'єкти <code>BigInt</code> <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">непридатні для використання у криптографії</a>.</p> + +<h3 id="Використання_у_JSON">Використання у JSON</h3> + +<p>Використання <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify"><code>JSON.stringify()</code></a> з будь-яким значенням <code>BigInt</code> спричинить <code>TypeError</code>, оскільки значення <code>BigInt</code> не серіалізуються у JSON за замовчуванням. Однак, ви можете за необхідності реалізувати свій власний метод <code>toJSON</code>:</p> + +<pre class="brush: js notranslate">BigInt.prototype.toJSON = function() { return this.toString() }</pre> + +<p>Тепер <code>JSON.stringify</code>, замість викидання винятку, повертає ось такий рядок:</p> + +<pre class="brush: js notranslate">JSON.stringify(BigInt(1)) +// '"1"'</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Обчислення_простих_чисел">Обчислення простих чисел</h3> + +<pre class="brush: js notranslate">// Повертає true, якщо передане значення BigInt є простим числом +function isPrime(p) { + for (let i = 2n; i * i <= p; i++) { + if (p % i === 0n) return false; + } + return true +} + +// Приймає BigInt в якості аргументу, повертає n-не просте число як BigInt +function nthPrime(nth) { + let maybePrime = 2n + let prime = 0n + + while (nth >= 0n) { + if (isPrime(maybePrime)) { + nth-- + prime = maybePrime + } + maybePrime++ + } + + return prime +} + +nthPrime(20n) +// ↪ 73n</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("ESDraft", "#sec-bigint-objects", "<code>BigInt</code> objects")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.BigInt")}}</p> + +<h3 id="Хід_реалізації">Хід реалізації</h3> + +<p>Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p> + +<div>{{EmbedTest262ReportResultsTable("BigInt")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER"><code>Number.MAX_SAFE_INTEGER</code></a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html new file mode 100644 index 0000000000..b5f9480b8f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html @@ -0,0 +1,123 @@ +--- +title: BigInt.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString +tags: + - BigInt + - Intl + - JavaScript + - Інтернаціоналізація + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toLocaleString()</code></strong> повертає рядок, що відображає об'єкт BigInt у відповідності до налаштувань мови.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><em>bigIntObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.</p> + +<div>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/NumberFormat">конструктор <code>Intl.NumberFormat()</code></a>, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</div> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядок, що відображає надане значення BigInt у відповідності до налаштувань мови.</p> + +<h2 id="Швидкодія">Швидкодія</h2> + +<p>При форматуванні великої кількості чисел краще створити об'єкт {{jsxref("NumberFormat")}} та використовувати функцію, надану його властивістю {{jsxref("NumberFormat.format")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLocaleString">Використання <code>toLocaleString</code></h3> + +<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням та з початковими параметрами.</p> + +<pre class="brush: js notranslate">var bigint = 3500n; + +bigint.toLocaleString(); +// Відображає "3,500" у форматі U.S. English +</pre> + +<h3 id="Використання_locales">Використання <code>locales</code></h3> + +<p>Цей приклад демонструє деякі варіації локалізованих форматів чисел. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p> + +<pre class="brush: js notranslate">var bigint = 123456789123456789n; + +// В німецькій мові крапка розділяє тисячі +console.log(bigint.toLocaleString('de-DE')); +// → 123.456.789.123.456.789 + +// Арабська у більшості арабськомовних країн використовує <a href="https://uk.wikipedia.org/wiki/%D0%86%D0%BD%D0%B4%D0%BE-%D0%B0%D1%80%D0%B0%D0%B1%D1%81%D1%8C%D0%BA%D0%B0_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F">Індо-арабські</a> цифри +console.log(bigint.toLocaleString('ar-EG')); +// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩ + +// Індія використовує роздільники тисячі/лакх/крор +console.log(bigint.toLocaleString('en-IN')); +// → 1,23,45,67,89,12,34,56,789 + +// ключ розширення nu налаштовує систему нумерації, наприклад, китайську десяткову +console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec')); +// → 一二三,四五六,七八九,一二三,四五六,七八九 + +// при запиті мови, яка, можливо, не підтримується, наприклад, +// балійської, додайте запасні мови, в даному випадку це індонезійська +console.log(bigint.toLocaleString(['ban', 'id'])); +// → 123.456.789.123.456.789 +</pre> + +<h3 id="Використання_options">Використання <code>options</code></h3> + +<p>Результат методу <code>toLocaleString</code> можна налаштувати за допомогою аргументу <code>options</code>:</p> + +<pre class="brush: js notranslate">var bigint = 123456789123456789n; + +// налаштування формату валюти +console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); +// → 123.456.789.123.456.789,00 € + +// японська єна не використовує дробові розряди +console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) +// → ￥123,456,789,123,456,789 + +// обмежити трьома значущими цифрами +console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); +// → 1,23,00,00,00,00,00,00,000 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.prototype.tolocalestring', 'BigInt.prototype.toLocaleString()')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-bigint.prototype.tolocalestring', 'BigInt.prototype.toLocaleString()')}}</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.BigInt.toLocaleString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("BigInt.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html b/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html new file mode 100644 index 0000000000..60576ed564 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html @@ -0,0 +1,93 @@ +--- +title: BigInt.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/toString +tags: + - BigInt + - JavaScript + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toString()</code></strong> вертає рядкове представлення вказаного об'єкта {{jsxref("BigInt")}}. Кінцевий символ "n" не є частиною рядка.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>bigIntObj</var>.toString([<var>radix</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>radix</code>{{optional_inline}}</dt> + <dd>Необов'язковий. Ціле число в діапазоні від 2 до 36, яке вказує основу системи числення для відображення чисел.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення вказаного об'єкта {{jsxref("BigInt")}}.</p> + +<h3 id="Винятки">Винятки</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Якщо методу <code>toString()</code> надано основу, меншу за 2 чи більшу за 36, викидається {{jsxref("RangeError")}}.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("BigInt")}} заміщує метод <code>toString()</code> об'єкта {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів {{jsxref( "BigInt")}} метод <code>toString()</code> вертає рядкове представлення об'єкта у вказаній системі числення.</p> + +<p>Метод <code>toString()</code> розбирає перший аргумент та намагається повернути рядкове представлення числа з вказаною основою <em>radix</em>. Для основ, більших за 10, літери алфавіту вказують числа, більші за 9. Наприклад, для шістнадцяткових чисел (основа 16) використовуються літери від <code>a</code> до <code>f</code>.</p> + +<p>Якщо аргумент <code>radix</code> не вказаний, основа вважається рівною 10.</p> + +<p>Якщо значення <code>bigIntObj</code> від'ємне, знак зберігається. Це відбувається, навіть якщо основа дорівнює <code>2</code>; повернений рядок - це додатне двійкове представлення числа <code>bigIntObj</code> зі знаком <code>-</code> попереду, а <strong>не</strong> <code>bigIntObj</code> у форматі доповняльного коду.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toString">Використання <code>toString</code></h3> + +<pre class="brush: js notranslate">17n.toString(); // '17' +66n.toString(2); // '1000010' +254n.toString(16); // 'fe' +-10n.toString(2); // -1010' +-0xffn.toString(2); // '-11111111' +</pre> + +<h3 id="Відємний_нуль_у_BigInt">Від'ємний нуль у <code>BigInt</code></h3> + +<p>У <code>BigInt</code> не існує від'ємного нуля, оскільки не існує від'ємних нулів у цілих числах. <code>-0.0</code> є концепцією IEEE для чисел з плаваючою крапкою, яка присутня у JavaScript лише у типі {{jsxref("Число", "Number")}}.</p> + +<pre class="brush: js notranslate">(-0n).toString(); // '0' +BigInt(-0).toString(); // '0'</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.prototype.tostring', 'BigInt.prototype.toString()')}}</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.BigInt.toString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("BigInt.prototype.toLocaleString()")}}</li> + <li>{{jsxref("BigInt.prototype.valueOf()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html b/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html new file mode 100644 index 0000000000..c3c998995c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html @@ -0,0 +1,57 @@ +--- +title: BigInt.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +tags: + - BigInt + - JavaScript + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>valueOf()</code></strong> вертає загорнуте примітивне значення об'єкта {{jsxref("BigInt")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/bigint-valueof.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>bigIntObj</var>.valueOf()</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>BigInt, що відображає примітивне значення вказаного об'єкта {{jsxref("BigInt")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_valueOf">Використання <code>valueOf</code></h3> + +<pre class="brush: js notranslate">typeof Object(1n); // object +typeof Object(1n).valueOf(); // bigint +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bigint.prototype.valueof', 'BigInt.prototype.valueOf()')}}</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.BigInt.valueOf")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("BigInt.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html b/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html new file mode 100644 index 0000000000..e34eca39fc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html @@ -0,0 +1,75 @@ +--- +title: Конструктор Boolean() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +tags: + - Boolean + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +--- +<div>{{JSRef}}</div> + +<p>Конструктор <strong><code>Boolean()</code></strong> використовується для створення об'єктів {{jsxref("Boolean")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">new Boolean([<var>value</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code> {{optional_inline}}</dt> + <dd>Початкове значення об'єкта <code>Boolean</code>.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_обєктів_Boolean_з_початковим_значенням_false">Створення об'єктів <code>Boolean</code> з початковим значенням <code>false</code></h3> + +<pre class="brush: js notranslate">var bNoParam = new Boolean(); +var bZero = new Boolean(0); +var bNull = new Boolean(null); +var bEmptyString = new Boolean(''); +var bfalse = new Boolean(false); +</pre> + +<h3 id="Створення_обєктів_Boolean_з_початковим_значенням_true">Створення об'єктів <code>Boolean</code> з початковим значенням <code>true</code></h3> + +<pre class="brush: js notranslate">var btrue = new Boolean(true); +var btrueString = new Boolean('true'); +var bfalseString = new Boolean('false'); +var bSuLin = new Boolean('Su Lin'); +var bArrayProto = new Boolean([]); +var bObjProto = new Boolean({});</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean-constructor', 'Boolean constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Boolean.Boolean")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Glossary/Boolean">Boolean</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/boolean/index.html b/files/uk/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..221625ff80 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,157 @@ +--- +title: Boolean +slug: Web/JavaScript/Reference/Global_Objects/Boolean +tags: + - Boolean + - JavaScript + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <strong><code>Boolean</code></strong> - це об'єкт-обгортка для значень булевого типу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new Boolean([<var>value</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Необов'язковий. Початкове значення об'єкту <code>Boolean</code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Значення, передане як перший параметр, перетворюється в логічне значення, якщо це необхідно. Якщо значення опущено або являється <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}}, або порожнім рядком (<code>""</code>), об'єкт міститиме значення <code>false</code>. Всі інші значення, включаючи будь-який об'єкт або рядок <code>"false"</code>, створюють об'єкт із значенням <code>true</code>.</p> + +<p>Не плутайте примітивні <code>Boolean</code> значення <code>true</code> та <code>false</code> з <code>true</code> та <code>false</code> значеннями об'єкту <code>Boolean</code>.</p> + +<p>Будь-який об'єкт, значення якого не {{jsxref("undefined")}} чи {{jsxref("null")}}, в тому числі об'єкт <code>Boolean</code> із значенням <code>false</code>, прирівнюється до <code>true</code> при передачі до умовного виразу. Для прикладу, умова в наступному {{jsxref("Statements/if...else", "if")}} виразі прирівнюється до <code>true</code>:</p> + +<pre class="brush: js">var x = new Boolean(false); +if (x) { + // цей код виконуватиметься +} +</pre> + +<p>Ця поведінка не властива примітивам <code>Boolean</code>. Для прикладу, умова в наступному {{jsxref("Statements/if...else", "if")}} виразі прирівнюється до <code>false</code>:</p> + +<pre class="brush: js">var x = false; +if (x) { + // цей код не виконуватиметься +} +</pre> + +<p>Не використовуйте об'єкт <code>Boolean</code> для перетворення не булевого значення в булеве. Замість цього використайте <code>Boolean</code> як функцію, щоб досягнути цього:</p> + +<pre class="brush: js">var x = Boolean(expression); // рекомендовано +var x = new Boolean(expression); // не варто використовувати +</pre> + +<p>Якщо ви вказали будь-який об'єкт, включаючи об'єкт <code>Boolean</code> із значенням <code>false</code> в якості значення нового <code>Boolean</code> об'єкту, цей об'єкт матиме значення <code>true</code>.</p> + +<pre class="brush: js">var myFalse = new Boolean(false); // значення false +var g = Boolean(myFalse); // значення true +var myString = new String('Hello'); // строковий об'єкт +var s = Boolean(myString); // значення true +</pre> + +<p>Не використовуйте об'єкт <code>Boolean</code> замість примітиву <code>Boolean</code>.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Boolean.length</code></dt> + <dd> + <p>Поле довжини із значенням 1.</p> + </dd> + <dt>{{jsxref("Boolean.prototype")}}</dt> + <dd>Представляє прототип конструктора <code>Boolean</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча глобальний <code>Boolean</code> об'єкт не містить жодних власних методів, він успадковує деякі методи через ланцюжок прототипів.</p> + +<h2 id="Екземпляри_Boolean">Екземпляри <code>Boolean</code></h2> + +<p>Всі екземпляри<code>Boolean</code> успадковуються від {{jsxref("Boolean.prototype")}}. Як і у всіх конструкторів, об'єкт прототипу визначає успадковані властивості та методи екземплярів.</p> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_об'єктів_Boolean_з_початковим_значенням_false">Створення об'єктів <code>Boolean</code> з початковим значенням <code>false</code></h3> + +<pre class="brush: js">var bNoParam = Boolean(); +var bZero = Boolean(0); +var bNull = Boolean(null); +var bEmptyString = Boolean(''); +var bfalse = Boolean(false); +</pre> + +<h3 id="Створення_об'єктів_Boolean_з_початковим_значенням_true">Створення об'єктів <code>Boolean</code> з початковим значенням <code>true</code></h3> + +<pre class="brush: js">var btrue = Boolean(true); +var btrueString = Boolean('true'); +var bfalseString = Boolean('false'); +var bSuLin = Boolean('Su Lin'); +var bArrayProto = Boolean([]); +var bObjProto = Boolean({}); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Впроваджено в JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб_переглядачами">Сумісність з веб переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести свій внесок у дані, будь ласка, завітайте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та надсилайте свої запити на зміни.</div> + +<p>{{Compat("javascript.builtins.Boolean")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Boolean.prototype")}}</li> + <li>{{Glossary("Boolean")}}</li> + <li><a href="https://uk.wikipedia.org/wiki/%D0%9B%D0%BE%D0%B3%D1%96%D1%87%D0%BD%D0%B8%D0%B9_%D1%82%D0%B8%D0%BF_%D0%B4%D0%B0%D0%BD%D0%B8%D1%85">Логічний (булевий) тип даних (Wikipedia)</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html new file mode 100644 index 0000000000..4ae7e48bcb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html @@ -0,0 +1,82 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +tags: + - Boolean + - JavaScript + - Властивість + - Поле + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Boolean.prototype</code></strong> представляє прототип конструктора {{jsxref("Boolean")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Опис">Опис</h2> + +<p>Екземпляри {{jsxref("Boolean")}} наслідуються від <code>Boolean.prototype</code>. Ви можете використовувати об'єкт прототипа конструктора, щоб додавати свої поля та методи до всіх екземплярів {{jsxref("Boolean")}}.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>Повертає функцію, що створила прототип екземпляра. За замовчування це функція {{jsxref("Boolean")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Повертає строку, що містить сирець об'єкту {{jsxref("Boolean")}}; використавши її ви можете створити еквівалентний об'єкт. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>Повертає строку <code>"true"</code> чи <code>"false"</code> залежно від значення об'єкту. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>Повертає примітив значення об'єкту {{jsxref("Boolean")}}. Перевизначає метод {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div> + +<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> +</div> diff --git a/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html new file mode 100644 index 0000000000..0630c09cde --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html @@ -0,0 +1,58 @@ +--- +title: Boolean.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +tags: + - Boolean + - JavaScript + - Нестандарт + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Метод <code><strong>toSource()</strong></code> повертає строку, що представляє сирцевий код об'єкту.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>booleanObj</var>.toSource() +Boolean.toSource()</pre> + +<h3 id="Результат">Результат</h3> + +<p>Строка, що представляє сирцевий код об'єкту.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>toSource</code> повертає наступні значення:</p> + +<ul> + <li>Для вбудованого об'єкту {{jsxref("Boolean")}}, <code>toSource</code> повертає наступну строку (яка означає, що сирцевий код недоступний): + + <pre class="brush: js">function Boolean() { + [native code] +} +</pre> + </li> + <li>Для екземплярів {{jsxref("Boolean")}}, <code>toSource</code> повертає строку, що представляє сирцевий код об'єкту.</li> +</ul> + +<p>Цей метод зазвичай викликається всередині у JavaScript, а не прямо у коді.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту. Реалізовано у JavaScript 1.3.</p> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div> + +<p>{{Compat("javascript.builtins.Boolean.toSource")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html new file mode 100644 index 0000000000..307d61dd93 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html @@ -0,0 +1,99 @@ +--- +title: Boolean.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString +tags: + - Boolean + - JavaScript + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toString()</strong></code> повертає рядкове подання об'єкта Boolean.</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>bool</var>.toString()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок, що є поданням відповідного значення типу {{jsxref("Boolean")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("Boolean")}} перевизначає метод <code>toString</code> об'єкта {{jsxref("Object")}}, а не успадковує {{jsxref("Object.prototype.toString()")}}. Для об'єктів Boolean метод <code>toString</code> повертає рядкове подання об'єкта.</p> + +<p>JavaScript викликає метод <code>toString</code> автоматично, коли треба подати {{jsxref("Boolean")}} як рядкове значення (наприклад, для злучення із іншим рядком).</p> + +<p>Для {{glossary("primitive", "простих значень")}} та об'єктів типу {{jsxref("Boolean")}}, вбудований метод <code>toString</code> повертає рядок "<code>true</code>" або "<code>false</code>" залежно від значення Boolean.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_toString">Застосування <code>toString</code></h3> + +<p>Наведений приклад засвідчує перетворення простих значень та об'єктів типу Boolean на рядки з відповідним вмістом:</p> + +<pre class="brush: js">var objTrue = new Boolean(true); +var objFalse = new Boolean(false); +var valTrue = true; +var valFalse = false; + +console.log("true" === true.toString()); // виводить true +console.log("false" === false.toString()); // виводить true + +console.log("true" === objTrue.toString()); // виводить true +console.log("false" === objFalse.toString()); // виводить true +console.log("true" === valTrue.toString()); // виводить true +console.log("false" === valFalse.toString()); // виводить true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкова виознака.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Boolean.toString")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html new file mode 100644 index 0000000000..b375d67dec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html @@ -0,0 +1,94 @@ +--- +title: Boolean.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +tags: + - Boolean + - JavaScript + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>valueOf()</strong></code> повертає {{glossary("primitive", "просте значення")}} об'єкта {{jsxref("Boolean")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>bool</var>.valueOf()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Просте значення об'єкта {{jsxref("Boolean")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>valueOf</code> об'єкта {{jsxref("Boolean")}} повертає просте значення об'єкта Boolean, а якщо змінна вже містить просте значення, то повертає його без змін:</p> + +<pre class="brush: js">var obj = new Boolean(true); +var val = true; + +console.log(obj.valueOf() === true); // виводить true +console.log(obj.valueOf() === obj); // виводить false + +console.log(val.valueOf() === true); // виводить true +console.log(val.valueOf() === val); // виводить true</pre> + +<p>Цей метод зазвичай викликається всередині JavaScript, а не в коді у явний спосіб.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_valueOf">Застосування <code>valueOf</code></h3> + +<pre class="brush: js">var x = new Boolean(false); +var y = x.valueOf(); // x — об'єкт, а y — просте значення +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Boolean.valueOf")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html b/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html new file mode 100644 index 0000000000..3bb645c604 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html @@ -0,0 +1,73 @@ +--- +title: 'Date.prototype[@@toPrimitive]' +slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>[@@toPrimitive]()</strong></code> перетворює об'єкт <code>Date</code> на просте значення.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>Date()[Symbol.toPrimitive](hint); +</var></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Просте значення наданого об'єкта {{jsxref("Date")}}. В залежності від аргументу, метод може повернути або рядок, або число.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>[@@toPrimitive]()</code> об'єкта {{jsxref("Date")}} повертає просте значення, яке належить або до числового, або до рядкового типу.</p> + +<p>Якщо <code>hint</code> дорівнює <code>"string"</code> або <code>"default"</code>, <code>[@@toPrimitive]()</code> намагається викликати метод {{jsxref("Object.prototype.toString()", "toString")}}. Якщо властивість <code>toString</code> не існує, він намагається викликати метод {{jsxref("Object.prototype.valueOf()", "valueOf")}}, а якщо <code>valueOf</code> також не існує, <code>[@@toPrimitive]()</code> викидає помилку {{jsxref("TypeError")}}.</p> + +<p>Якщо <code>hint</code> дорівнює <code>"number"</code>, <code>[@@toPrimitive]()</code> спрочатку намагається викликати <code>valueOf</code>, а якщо не вдається, він викликає <code>toString</code>.</p> + +<p>JavaScript викликає метод <code>[@@toPrimitive]()</code> для перетворення об'єкта на просте значення. Вам рідко знадобиться викликати метод <code>[@@toPrimitive]()</code> власноруч; JavaScript автоматично викликає його, коли зустрічає об'єкт там, де очікується просте значення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Повернення_простих_значень_дати">Повернення простих значень дати</h3> + +<pre class="brush: js notranslate">const testDate = new Date(1590757517834); +// "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)" + +testDate[Symbol.toPrimitive]('string'); +// Returns "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)" + +testDate[Symbol.toPrimitive]('number'); +// Returns "1590757517834" + +testDate[Symbol.toPrimitive]('default'); +// Returns "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</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.Date.@@toPrimitive")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/date/index.html b/files/uk/web/javascript/reference/global_objects/date/date/index.html new file mode 100644 index 0000000000..690a85f842 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/date/index.html @@ -0,0 +1,135 @@ +--- +title: Конструктор Date() +slug: Web/JavaScript/Reference/Global_Objects/Date/Date +tags: + - Date + - JavaScript + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Date/Date +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Створює екземпляр об'єкта JavaScript <strong><code>Date</code></strong>, який відображає єдиний момент часу у незалежному від платформи форматі. </span>Об'єкти <code>Date</code> містять число, яке відображає кількість мілісекунд від 1 січня 1970 року (UTC).</p> + +<div>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">new Date() +new Date(<var>value</var>) +new Date(<var>dateString</var>) +new Date(<var>year</var>, <var>monthIndex</var> [, <var>day</var> [, <var>hours</var> [, <var>minutes</var> [, <var>seconds</var> [, <var>milliseconds</var>]]]]]) +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Єдиним правильним способом створити новий екземпляр об'єкта <code>Date</code> є використання оператора {{jsxref("new")}}. Якщо ви просто викличете безпосередньо об'єкт <code>Date</code>, наприклад, так <code>now = Date()</code>, то повернеться рядок, а не об'єкт <code>Date</code>.</p> +</div> + +<h3 id="Параметри">Параметри</h3> + +<p>Існують чотири основні форми конструктора <code>Date()</code>:</p> + +<ol> + <li> + <h4 id="Без_параметрів">Без параметрів</h4> + + <p>Коли не надано жодних параметрів, новостворений об'єкт <code>Date</code> відображає поточну дату та час на момент його створення.</p> + </li> + <li> + <h4 id="Значення_часу_або_часова_мітка">Значення часу або часова мітка</h4> + + <dl> + <dt><code><var>value</var></code></dt> + <dd>Ціле число, що відображає кількість мілісекунд від 1 січня 1970 року, 00:00:00 UTC (час ECMAScript, еквівалент часу UNIX), при цьому високосні секунди ігноруються. Пам'ятайте, що більшість функцій <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">часової мітки UNIX</a> мають точність лише до найближчої секунди.</dd> + </dl> + </li> + <li> + <h4 id="Рядок_з_часовою_міткою">Рядок з часовою міткою</h4> + + <dl> + <dt><code><var>dateString</var></code></dt> + <dd>Рядкове значення дати, надане у форматі, що розпізнається методом {{jsxref("Date.parse()")}}. (Ці формати є <a href="http://tools.ietf.org/html/rfc2822#page-14">часовими мітками стандарту RFC 2822, що відповідають IEНF</a>, а також рядками у <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">варіації формату ISO8601</a>.) + <div class="note"> + <p><strong>Заувага:</strong> Розбір рядків дати за допомогою конструктора <code>Date</code> (та методу <code>Date.parse()</code>, який працює так само) <em>наполегливо не рекомендується</em> через відмінності та невідповідності між переглядачами.</p> + + <ul> + <li>Підтримка формату рядків <a href="https://tools.ietf.org/html/rfc2822">RFC 2822</a> є лише домовленістю.</li> + <li>Підтримка форматів ISO 8601 відрізняється в тому, що рядки, які містять лише дату (наприклад, <code>"1970-01-01"</code>), сприймаються як UTC, а не як локальний формат.</li> + </ul> + </div> + </dd> + </dl> + </li> + <li> + <h4 id="Значення_окремих_компонентів_дати_та_часу">Значення окремих компонентів дати та часу</h4> + + <p>Маючи принаймні рік та місяць, ця форма <code>Date()</code> вертає об'єкт <code>Date</code>, чиї значення компонентів (рік, місяць, день, години, хвилини, секунди та мілісекунди) усі взяті з наступних параметрів. Будь-яким відсутнім полям надається найменше можливе значення (<code>1</code> для дня (<code><var>day</var></code><var>)</var> та <code>0</code> для усіх інших компонентів).</p> + + <dl> + <dt><code><var>year</var></code></dt> + <dd> + <p>Ціле число, що відображає рік.</p> + + <p>Значення з <code>0</code> по <code>99</code> відповідають рокам з <code>1900</code> по <code>1999</code>. Усі інші значення дорівнюють вказаному року.</p> + </dd> + <dt><code><var>monthIndex</var></code></dt> + <dd>Ціле число, що відображає місяць, починаючи з <code>0</code> для січня, по <code>11</code> для грудня.</dd> + <dt><code><var>day</var></code> {{optional_inline}}</dt> + <dd>Ціле число, що відображає день місяця. За замовчуванням <code>1</code>.</dd> + <dt><code><var>hours</var></code> {{optional_inline}}</dt> + <dd>Ціле число, що відображає значення години. За замовчуванням <code>0</code> (північ).</dd> + <dt><code><var>minutes</var></code> {{optional_inline}}</dt> + <dd>Ціле число, що відображає значення хвилин. За замовчуванням <code>0</code> хвилин з початку години.</dd> + <dt><code><var>seconds</var></code> {{optional_inline}}</dt> + <dd>Ціле число, що відображає значення секунд. За замовчуванням <code>0</code> секунд з початку хвилини.</dd> + <dt><code><var>milliseconds</var></code> {{optional_inline}}</dt> + <dd>Ціле число, що відображає значення мілісекунд. За замовчуванням <code>0</code> мілісекунд з початку секунди.</dd> + </dl> + </li> +</ol> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Кілька_способів_створити_обєкт_Date">Кілька способів створити об'єкт Date</h3> + +<p>Наступні приклади демонструють кілька способів створити дати JavaScript:</p> + +<div class="note"> +<p><strong>Заувага:</strong> Розбір рядків дати за допомогою конструктора <code>Date</code> (а також методу <code>Date.parse</code>, вони еквівалентні) наполегливо не рекомендується через відмінності та невідповідності між переглядачами.</p> +</div> + +<pre class="brush: js notranslate">let today = new Date() +let birthday = new Date('December 17, 1995 03:24:00') +let birthday = new Date('1995-12-17T03:24:00') +let birthday = new Date(1995, 11, 17) // нумерація місяців починається з 0 +let birthday = new Date(1995, 11, 17, 3, 24, 0)</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date-constructor', 'Date')}}</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.Date.Date")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getdate/index.html b/files/uk/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..431044f4df --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,64 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getDate()</code></strong> повертає день місяця для вказаної дати згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getdate.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDate()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 1 та 31, що відображає день місяця для наданої дати згідно з місцевим часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getDate">Використання getDate()</h3> + +<p>Друга інструкція, наведена нижче, присвоює значення 25 змінній <code>day</code> на основі значення об'єкта {{jsxref("Date")}} на ім'я <code>Xmas95</code>.</p> + +<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var day = Xmas95.getDate(); + +console.log(day); // 25 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</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.Date.getDate")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getday/index.html b/files/uk/web/javascript/reference/global_objects/date/getday/index.html new file mode 100644 index 0000000000..9c4a6fe852 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getday/index.html @@ -0,0 +1,77 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDay +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>getDay()</code></strong> повертає день тижня для вказаної дати згідно з місцевим часом, де 0 означає неділю.</span> Щоб отримати день місяця, дивіться {{jsxref("Date.prototype.getDate()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getday.html", "shorter")}}</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 notranslate"><code><var>dateObj</var>.getDay()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 6, що відповідає дню тижня для наданої дати згідно з місцевим часом: 0 - неділя, 1 - понеділок, 2 - вівторок і т.д.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getDay">Використання <code>getDay()</code></h3> + +<p>Друга інструкція, наведена нижче, присвоює значення 1 змінній <code>weekday</code> на основі значення об'єкта {{jsxref("Date")}} на ім'я <code>Xmas95</code>. 25 грудня 1995 року - це понеділок.</p> + +<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var weekday = Xmas95.getDay(); + +console.log(weekday); // 1 +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> За необхідності можна отримати повну назву дня (наприклад, <code>"понеділок"</code>) за допомогою методу {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} з параметром <code>options</code>. З цим методом інтернаціоналізація стає простішою:</p> + +<pre class="brush: js notranslate">var options = { weekday: 'long'}; +console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); +// Monday +console.log(new Intl.DateTimeFormat('uk', options).format(Xmas95)); +// понеділок +</pre> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Date.getDay")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..cc94ae8146 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,68 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getFullYear()</code></strong> повертає рік вказаної дати згідно з місцевим часом.</p> + +<p>Використовуйте цей метод замість методу {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getFullYear()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Число, що відповідає року наданої дати згідно з місцевим часом.</p> + +<h2 id="Опис">Опис</h2> + +<p>Значення, яке повертає <code>getFullYear()</code>, є абсолютним числом. Для дат між роками 1000 та 9999 <code>getFullYear()</code> повертає чотиризначне число, наприклад, 1995. Використовуйте цю функцію, щоб бути певними, що рік узгоджується з роками після 2000.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getFullYear">Використання <code>getFullYear()</code></h3> + +<p>Наступний приклад присвоює чотиризначне значення поточного року змінній <code>year</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var year = today.getFullYear(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</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.Date.getFullYear")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getYear()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/gethours/index.html b/files/uk/web/javascript/reference/global_objects/date/gethours/index.html new file mode 100644 index 0000000000..090762146c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/gethours/index.html @@ -0,0 +1,65 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/getHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getHours()</code></strong> повертає годину вказаної дати згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-gethours.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>dateObj</var>.getHours()</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 23, яке відображає годину наданої дати згідно з місцевим часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getHours">Використання <code>getHours()</code></h3> + +<p>Друга інструкція, наведена нижче, присвоює значення 23 змінній <code>hours</code> на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я <code>Xmas95</code>.</p> + +<pre class="brush: js notranslate">let Xmas95 = new Date('December 25, 1995 23:15:30'); +let hours = Xmas95.getHours(); + +console.log(hours); // 23 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</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.Date.getHours")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html new file mode 100644 index 0000000000..bef2c69b6d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getMilliseconds()</code></strong> повертає мілісекунди у вказаній даті згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMilliseconds()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Число між 0 та 999, що відображає мілісекунди для наданої дати згідно з місцевим часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getMilliseconds">Використання <code>getMilliseconds()</code></h3> + +<p>Наступний приклад присвоює значення мілісекунд поточного часу змінній <code>milliseconds</code>:</p> + +<pre class="brush: js notranslate">var today = new Date(); +var milliseconds = today.getMilliseconds(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</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.Date.getMilliseconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html new file mode 100644 index 0000000000..7cd9470003 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getminutes/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getMinutes()</code></strong> повертає хвилини у вказаній даті згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html","shorter")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMinutes()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 59, що відображає хвилини у наданій даті згідно з місцевим часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getMinutes">Використання <code>getMinutes()</code></h3> + +<p>Друга інструкція, наведена нижче, присвоює 15 змінній <code>minutes</code> на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я <code>Xmas95</code>.</p> + +<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var minutes = Xmas95.getMinutes(); + +console.log(minutes); // 15 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</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.Date.getMinutes")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html new file mode 100644 index 0000000000..1e1b620d75 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getmonth/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getMonth()</code></strong> повертає місяць у вказаній даті згідно з місцевим часом, як значення на основі нуля (де нуль позначає перший місяць року).</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getMonth()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 11, що відображає місяць у наданій даті згідно з місцевим часом. 0 відповідає січню, 1 лютому, і так далі.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getMonth">Використання <code>getMonth()</code></h3> + +<p>Друга інструкція, наведена нижче, присвоює значення 11 змінній <code>month</code>, на основі значення об'єкта {{jsxref("Date")}} на ім'я <code>Xmas95</code>.</p> + +<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var month = Xmas95.getMonth(); + +console.log(month); // 11 +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> За необхідності можна отримати повну назву місяця (наприклад, <code>"січень"</code>) за допомогою методу <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Using_options">Intl.DateTimeFormat()</a></code> з параметром <code>options</code>. З цим методом інтернаціоналізація стає простішою:</p> + +<pre class="brush: js notranslate">var options = { month: 'long'}; +console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); +// December +console.log(new Intl.DateTimeFormat('uk', options).format(Xmas95)); +// грудень +</pre> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</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.Date.getMonth")}}</p> + +<h2 id="See_also" name="See_also">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html new file mode 100644 index 0000000000..b96c2f068d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getseconds/index.html @@ -0,0 +1,63 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getSeconds()</code></strong> повертає секунди у вказаній даті згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html", "shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getSeconds()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 59, що відображає секунди у наданій даті згідно з місцевим часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getSeconds">Використання <code>getSeconds()</code></h3> + +<p>Друга інструкція, наведена нижче, присвоює значення 30 змінній <code>seconds</code>, на основі значення об'єкта {{jsxref("Global_Objects/Date", "Date")}} на ім'я <code>Xmas95</code>.</p> + +<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var seconds = Xmas95.getSeconds(); + +console.log(seconds); // 30 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</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.Date.getSeconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/gettime/index.html b/files/uk/web/javascript/reference/global_objects/date/gettime/index.html new file mode 100644 index 0000000000..58fce8fef3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/gettime/index.html @@ -0,0 +1,109 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTime +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +<div> {{JSRef}}</div> + +<p>Метод <strong><code>getTime()</code></strong> повертає кількість мілісекунд* з початку <a href="https://uk.wikipedia.org/wiki/%D0%A7%D0%B0%D1%81_Unix">часу Unix</a>.</p> + +<p>* JavaScript використовує <em>мілісекунди</em> як одиницю вимірювання, тоді як час Unix вимірюється у <em>секундах</em>.</p> + +<p><em>getTime() завжди використовує UTC для подання часу. Наприклад, у клієнтському оглядачі в одному часовому поясі getTime() буде таким самим, як і в оглядачі у будь-якому іншому часовому поясі.</em></p> + +<div>Ви можете скористатись цим методом, щоб допомогти присвоїти дату та час іншому об'єкту {{jsxref("Date")}}. Цей метод функціонально еквівалентний методу {{jsxref("Date.valueof", "valueOf()")}}.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/js/date-gettime.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getTime()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Число, що відображає кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та наданою датою.</p> + +<h2 id="Зменшена_точність_часу">Зменшена точність часу</h2> + +<p>Для захисту від атак за часом чи за цифровими відбитками точність <code>new Date().getTime()</code> може бути округлена, в залежності від налаштувань переглядача. У Firefox параметр <code>privacy.reduceTimerPrecision</code> за замовчуванням увімкнений та дорівнює 20 мс у Firefox 59; у 60 він дорівнює 2 мс.</p> + +<pre class="brush: js notranslate">// зменшена точність часу (2 мс) у Firefox 60 +new Date().getTime(); +// 1519211809934 +// 1519211810362 +// 1519211811670 +// ... + + +// зменшена точність часу з увімкненим параметром `privacy.resistFingerprinting` +new Date().getTime(); +// 1519129853500 +// 1519129858900 +// 1519129864400 +// ... +</pre> + +<p>У Firefox ви також можете увімкнути <code>privacy.resistFingerprinting</code>, точність дорівнюватиме або 100 мс, або значенню <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, в залежності від того, що більше.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getTime_для_копіювання_дати">Використання <code>getTime()</code> для копіювання дати</h3> + +<p>Створення об'єкта дати з ідентичним значенням часу.</p> + +<pre class="brush: js notranslate">// Оскільки місяці нумеруються з нуля, birthday дорівнює 10 січня 1995 +var birthday = new Date(1994, 12, 10); +var copy = new Date(); +copy.setTime(birthday.getTime()); +</pre> + +<h3 id="Вимірюємо_час_виконання">Вимірюємо час виконання</h3> + +<p>Віднімання між двома викликами <code>getTime()</code> на новозгенерованих об'єктах {{jsxref("Date")}} дасть проміжок часу між цими двома викликами. Це можна використати, щоб обчислити час виконання деяких операцій. Дивіться також {{jsxref("Date.now()")}}, щоб запобігти створенню непотрібних екземплярів {{jsxref("Date")}}.</p> + +<pre class="brush: js notranslate">var end, start; + +start = new Date(); +for (var i = 0; i < 1000; i++) { + Math.sqrt(i); +} +end = new Date(); + +console.log('Операція зайняла ' + (end.getTime() - start.getTime()) + ' мсек'); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</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.Date.getTime")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.setTime()")}}</li> + <li>{{jsxref("Date.prototype.valueOf()")}}</li> + <li>{{jsxref("Date.now()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html new file mode 100644 index 0000000000..35360a9a7e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html @@ -0,0 +1,97 @@ +--- +title: Date.prototype.getTimezoneOffset() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getTimezoneOffset()</code></strong> повертає різніцю, у хвилинах, між поточним місцевим часовим поясом (налаштування системи хоста) та UTC.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>dateObj</var>.getTimezoneOffset()</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Число, що відображає зсув часового поясу, в хвилинах, від дати, що базується на поточних налаштуваннях системи, до UTC.</p> + +<h2 id="Опис">Опис</h2> + +<p>Зсув часового поясу - це різниця, у хвилинах, між місцевим часом та UTC (<em>Coordinated Universal Time</em>, Всесвітній координований час).</p> + +<p>Зауважте, це означає, що зсув є додатнім, якщо локальний часовий пояс розташований за UTC, та від'ємним, якщо він розташований попереду. Наприклад, для часового поясу UTC+10:00 (Австралійський східний стандартний час, Час Чаморро), результатом буде <code>-600</code>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Локальний часовий пояс</th> + <th scope="col">UTC-8</th> + <th scope="col">UTC</th> + <th scope="col">UTC+3</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Значення, що повертається</th> + <td>480</td> + <td>0</td> + <td>-180</td> + </tr> + </tbody> +</table> + +<p>Зсув часового поясу, який повертається, стосується об'єкта Date, на якому викликається метод.</p> + +<p>Якщо в системі налаштований перехід на літній час, зсув буде змінюватись, в залежності від дати та часу, які містить об'єкт Date, та дати та часу, на які впливає перехід на літній час.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getTimezoneOffset">Використання <code>getTimezoneOffset()</code></h3> + +<pre class="brush: js notranslate">// Отримати зсув поточного часового поясу для хостового пристрою +let x = new Date(); +let currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60; +// -3 + +// Отримати зсув часового поясу для Міжнародного дня праці (1 травня) у 2016 р. +// Будьте обережні, конструктор Date() рахує місяці з 0, тому травень +// передається числом 4 (а не 5) +let labourDay = new Date(2016, 4, 1) +let labourDayOffset = labourDay.getTimezoneOffset() / 60; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</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.Date.getTimezoneOffset")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html new file mode 100644 index 0000000000..61ef05a778 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html @@ -0,0 +1,60 @@ +--- +title: Date.prototype.getUTCDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCDate()</code></strong> повертає день місяця у вказаній даті згідно з всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCDate()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 1 та 31, що відображає день місяця у наданій даті згідно з всесвітнім часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCDate">Використання <code>getUTCDate()</code></h3> + +<p>Наступний приклад присвоює значення дня поточної дати змінній <code>day</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var day = today.getUTCDate(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</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.Date.getUTCDate")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html new file mode 100644 index 0000000000..61081ed52f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcday/index.html @@ -0,0 +1,62 @@ +--- +title: Date.prototype.getUTCDay() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCDay()</code></strong> повертає день тижня у вказаній даті згідно з всесвітнім часом, де 0 означає неділю.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCDay()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число, що відповідає дню тижня для наданої дати, згідно з всесвітнім часом: 0 - неділя, 1 - понеділок, 2 - вівторок, і так далі.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCDay">Використання <code>getUTCDay()</code></h3> + +<p>Наступний приклад присвоює день тижня поточної дати змінній <code>weekday</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var weekday = today.getUTCDay(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</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.Date.getUTCDay")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getDay()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html new file mode 100644 index 0000000000..04416642dc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html @@ -0,0 +1,65 @@ +--- +title: Date.prototype.getUTCFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCFullYear()</code></strong> повертає рік у вказаній даті згідно з всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCFullYear()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Число, що відображає рік у вказаній даті згідно з всесвітнім часом.</p> + +<h2 id="Опис">Опис</h2> + +<p>Значення, яке повертає <code>getUTCFullYear()</code>, є абсолютним числом, сумісним з 2000-м роком, наприклад, 1995.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCFullYear">Використання <code>getUTCFullYear()</code></h3> + +<p>Наступний приклад присвоює чотиризначне значення поточного року змінній <code>year</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var year = today.getUTCFullYear(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</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.Date.getUTCFullYear")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html b/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html new file mode 100644 index 0000000000..a784f057a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutchours/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getUTCHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCHours()</code></strong> повертає години вказаної дати згідно з всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCHours()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 23, що відображає години у вказаній даті згідно з всесвітнім часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCHours">Використання <code>getUTCHours()</code></h3> + +<p>Наступний приклад присвоює значення години поточного часу змінній <code>hours</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var hours = today.getUTCHours(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</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.Date.getUTCHours")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html new file mode 100644 index 0000000000..cc3cd766f8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html @@ -0,0 +1,63 @@ +--- +title: Date.prototype.getUTCMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +tags: + - Date + - JavaScript + - Method + - Prototype + - Дата + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCMilliseconds()</code></strong> повертає значення мілісекунд у об'єкті часу.</p> + +<p>{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html","shorter")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCMilliseconds()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Ціле число між 0 та 999, що позначає мілісекунди у наданому об'єкті дати. Цей метод є колегою інших методів на основі UTC, що повертають значення годин, хвилин, і т. д.; цей метод повертає значення мілісекунд.</p> + +<p>Не слід плутати його з часом Unix. Щоб отримати повну кількість мілісекунд від 1970/01/01, скористайтесь методом ".getTime()".</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCMilliseconds">Використання <code>getUTCMilliseconds()</code></h3> + +<p>Наведений приклад присвоює значення мілісекунд поточного часу змінній <code>milliseconds</code>:</p> + +<pre class="brush: js notranslate">var today = new Date(); +var milliseconds = today.getUTCMilliseconds(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html new file mode 100644 index 0000000000..5fb37f435c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html @@ -0,0 +1,59 @@ +--- +title: Date.prototype.getUTCMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCMinutes()</code></strong> повертає хвилини у вказаній даті згідно з всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCMinutes()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 59, що відображає хвилини у наданій даті згідно з всесвітнім часом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCMinutes">Використання <code>getUTCMinutes()</code></h3> + +<p>Наступний приклад присвоює значення хвилин поточного часу змінній <code>minutes</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var minutes = today.getUTCMinutes(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</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.Date.getUTCMinutes")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html new file mode 100644 index 0000000000..3775a65caa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getUTCMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCMonth()</code></strong> повертає місяць вказаної дати згідно з всесвітнім часом, як значення на основі нуля (де нуль позначає перший місяць року).</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCMonth()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число між 0 та 11, що відповідає місяцю у наданій даті згідно з всесвітнім часом. 0 - січень, 1 - лютий, 2 - березень, і так далі.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCMonth">Використання <code>getUTCMonth()</code></h3> + +<p>Наступний приклад присвоює значення місяця поточної дати змінній <code>month</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var month = today.getUTCMonth(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</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.Date.getUTCMonth")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html new file mode 100644 index 0000000000..04f184043f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.getUTCSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +tags: + - Date + - JavaScript + - Method + - Prototype + - Дата + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>getUTCSeconds()</code></strong> повертає секунди на зазначену дату відповідно до всесвітнього часу.</p> + +<p>{{EmbedInteractiveExample("pages/js/date-getutcseconds.html", "shorter")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getUTCSeconds()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Ціле число, між 0 та 59, яке позначає секунди на зазначену дату відповідно до всесвітнього часу.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_getUTCSeconds">Використання <code>getUTCSeconds()</code></h3> + +<p>Наведений код призначає секундну частину поточної дати змінній <code>seconds</code>:</p> + +<pre class="brush: js notranslate">var today = new Date(); +var seconds = today.getUTCSeconds(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Date.getUTCSeconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/getyear/index.html b/files/uk/web/javascript/reference/global_objects/date/getyear/index.html new file mode 100644 index 0000000000..a358ac4c2b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/getyear/index.html @@ -0,0 +1,107 @@ +--- +title: Date.prototype.getYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getYear +tags: + - Date + - JavaScript + - Довідка + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>getYear()</code></strong> повертає рік у вказаній даті згідно з місцевим часом. Оскільки <code>getYear()</code> не повертає повне значення року ("проблема 2000 року"), він більше не використовується та був замінений на метод {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getYear()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Число, що відображає рік у наданій даті, згідно з місцевим часом, мінус 1900.</p> + +<h2 id="Опис">Опис</h2> + +<ul> + <li> Для років, що більші або дорівнюють 2000, значення, яке повертає <code>getYear()</code>, дорівнює 100 або більше. Наприклад, якщо рік дорівнює 2026, <code>getYear()</code> поверне 126.</li> + <li>Для років між 1900 та 1999 включно, значення, яке повертає <code>getYear()</code>, знаходиться між 0 та 99. Наприклад, якщо рік дорівнює 1976, <code>getYear()</code> поверне 76.</li> + <li>Для років, менших за 1900, значення, яке повертає <code>getYear()</code>, менше за 0. Наприклад, якщо рік дорівнює 1800, <code>getYear()</code> поверне -100.</li> +</ul> + +<p>Для врахування років до та після 2000, слід використовувати {{jsxref("Date.prototype.getFullYear", "getFullYear()")}} замість <code>getYear()</code>, щоб вказувалось повне значення року.</p> + +<h2 id="Зворотна_сумісність">Зворотна сумісність</h2> + +<h3 id="Поведінка_у_JavaScript_1.2_та_старших_версіях">Поведінка у JavaScript 1.2 та старших версіях</h3> + +<p>Метод <code>getYear()</code> повертає або 2-значне, або 4-значне значення року:</p> + +<ul> + <li>Для років між 1900 та 1999 включно, значення, яке повертає <code>getYear()</code> - це значення року мінус 1900. Для прикладу, якщо рік дорівнює 1976, повертається значення 76.</li> + <li>Для років, менших за 1900 чи більших за 1999, значення, яке повертає <code>getYear()</code>, є чотиризначним значенням року. Для прикладу, якщо рік дорівнює 1856, повертається значення 1856. Якщо рік дорівнює 2026, повертається 2026.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Роки_між_1900_та_1999">Роки між 1900 та 1999</h3> + +<p>Друга інструкція присвоює значення 95 змінній <code>year</code>.</p> + +<pre class="brush: js notranslate">var Xmas = new Date('December 25, 1995 23:15:00'); +var year = Xmas.getYear(); // повертає 95 +</pre> + +<h3 id="Роки_більші_за_1999">Роки, більші за 1999</h3> + +<p>Друга інструкція присвоює значення 100 змінній <code>year</code>.</p> + +<pre class="brush: js notranslate">var Xmas = new Date('December 25, 2000 23:15:00'); +var year = Xmas.getYear(); // повертає 100 +</pre> + +<h3 id="Роки_менші_за_1900">Роки, менші за 1900</h3> + +<p>Друга інструкція присвоює значення -100 змінній <code>year</code>.</p> + +<pre class="brush: js notranslate">var Xmas = new Date('December 25, 1800 23:15:00'); +var year = Xmas.getYear(); // повертає -100 +</pre> + +<h3 id="Присвоєння_та_отримання_років_між_1900_та_1999">Присвоєння та отримання років між 1900 та 1999</h3> + +<p>Третя інструкція присвоює значення 95 змінній <code>year</code>, що означає рік 1995.</p> + +<pre class="brush: js notranslate">var Xmas = new Date('December 25, 2015 23:15:00'); +Xmas.setYear(95); +var year = Xmas.getYear(); // повертає 95 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Date.getYear")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setYear()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/index.html b/files/uk/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..61c26eb1d8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,269 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - JavaScript + - Time + - Дата + - Час Unix +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<div>Об'єкт JavaScript <strong><code>Date</code></strong> відображає єдиний момент у часі у незалежному від платформи форматі. Об'єкти <code>Date</code> містять число, яке відображає кількість мілісекунд від 1 січня 1970 року за UTC.</div> + +<div></div> + +<div class="blockIndicator note"> +<p>TC39 працює над об'єктом <a href="https://tc39.es/proposal-temporal/docs/index.html">Temporal</a>, новим API для дати та часу.<br> + Читайте більше щодо нього у <a href="https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/">блозі Igalia</a> та заповнюйте <a href="https://forms.gle/iL9iZg7Y9LvH41Nv8">опитування</a>. Він потребує відгуків реальних веб-розробників, але поки що не готовий для повноцінного використання!</p> +</div> + +<h2 id="Опис">Опис</h2> + +<h3 id="Час_ECMAScript_та_часові_мітки">Час ECMAScript та часові мітки</h3> + +<p>Дата JavaScript вказується як кількість мілісекунд, що пройшли від 1 січня 1970 року за UTC. Ця дата та час не є тим самим, що й <strong>час UNIX</strong> (кількість <em>секунд</em>, що пройшли від опівночі 1 січня 1790 року за UTC), який є базовим значенням для дати та часу, що записуються комп'ютером.</p> + +<p><strong>Заувага:</strong> Важливо пам'ятати, що, тоді як значення часу в серці об'єкта Date є значенням UTC, базові методи з отримання дати та часу, або їхніх елементів, усі працюють у локальному (тобто, системному) часовому поясі та зсуві.</p> + +<p>Варто зауважити, що максимальне значення <code>Date</code> не співпадає з максимальним безпечним цілим числом (<code>Number.MAX_SAFE_INTEGER</code> дорівнює 9,007,199,254,740,991). Натомість, ECMA-262 визначає, що максимум ±100,000,000 (сто мільйонів) днів відносно 1 січня 1970 року за UTC (тобто, 20 квітня 271821 до н.е. ~ 13 вересня 275760 н.е.) можуть бути представлені стандартним об'єктом <code>Date</code> (що дорівнює ±8,640,000,000,000,000 мілісекундам).</p> + +<h3 id="Формат_дати_та_перетворення_часових_поясів">Формат дати та перетворення часових поясів</h3> + +<p>Існує велика кількість методів для отримання дати у різних форматах, а також для виконання перетворень часових поясів. Особливо корисні функції, які виводять дату та час у всесвітньому координованому часі (Coordinated Universal Time, UTC), глобальному стандартному часі, визначеному Всесвітнім часовим стандартом (World Time Standard). (Цей час історично відомий як <em>середній час за Гринвічем</em>, бо UTC пролякає вздовж меридіану, що включає Лондон — та сусідній Гринвіч — у Великій Британії.) Пристрій користувача надає місцевий час.</p> + +<p>Над додачу до методів для читання та зміни окремих компонентів місцевої дати та часу (таких, як {{jsxref("Date.getDay", "getDay()")}} та {{jsxref("Date.setHours", "setHours()")}}), також існують версії тих самих методів, які читають та змінюють дату та час, використовуючи час UTC (такі, як {{jsxref("Date.getUTCDay()", "getUTCDay()")}} та {{jsxref("Date.setUTCHours", "setUTCHours()")}}).</p> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt>{{jsxref("Date/Date", "Date()")}}</dt> + <dd>Створює новий об'єкт <code>Date</code>.</dd> +</dl> + +<h2 id="Статичні_методи">Статичні методи</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Вертає ціле число, що позначає поточний час — кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC без врахування високосних секунд.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Розбирає рядкове представлення дати та повертає кількість мілісекунд між 00:00:00 за UTC 1 січня 1970 та зазначеною миттю у часі, ігноруючи високосні секунди.</dd> + <dd> + <div class="note"> + <p><strong>Заувага:</strong> Розбір рядків з датою (часом) за допомогою метода <code>Date.parse</code> є рішуче небажаним через наявні розбіжності поміж переглядачами.</p> + </div> + </dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Приймає ті самі параметри, що й найдовша форма конструктора (тобто, від 2 до 7), та вертає кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC, ігноруючи високосні секунди.</dd> +</dl> + +<h2 id="Методи_екземплярів">Методи екземплярів</h2> + +<dl> + <dt>{{jsxref("Date.prototype.getDate()")}}</dt> + <dd>Повертає день місяця (<code>1</code>–<code>31</code>) для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.getDay()")}}</dt> + <dd>Повертає день тижня (<code>0</code>–<code>6</code>) для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd>Повертає рік (4 цифри для 4-значних років) вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.getHours()")}}</dt> + <dd>Повертає годину (<code>0</code>–<code>23</code>) у вказаній даті згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd>Повертає мілісекунди (<code>0</code>–<code>999</code>) у вказаній даті згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd>Повертає хвилини (<code>0</code>–<code>59</code>) у вказаній даті згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> + <dd>Повертає місяць (<code>0</code>–<code>11</code>) у вказаній даті згідно з місцевм часом.</dd> + <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd>Повертає секунди (<code>0</code>–<code>59</code>) у вказаній даті згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.getTime()")}}</dt> + <dd>Повертає числове значення вказаної дати у вигляді кількості мілісекунд від 1 січня 1970 року 00:00:00 за UTC. (Для більш ранніх дат повертаються від'ємні значення.)</dd> + <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd>Повертає зсув часового поясу у хвилинах для місцевих налаштувань.</dd> + <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd>Повертає день місяця (<code>1</code>–<code>31</code>) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd>Повертає день тижня (<code>0</code>–<code>6</code>) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd>Повертає рік (4 цифри для 4-значних років) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd>Повертає години (<code>0</code>–<code>23</code>) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd>Повертає мілісекунди (<code>0</code>–<code>999</code>) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd>Повертає хвилини (<code>0</code>–<code>59</code>) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd>Повертає місяць (<code>0</code>–<code>11</code>) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd>Повертає секунди (<code>0</code>–<code>59</code>) у вказаній даті згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.getYear()")}}</dt> + <dd>Повертає рік (зазвичай, 2–3 цифри) у вказаній даті згідно з місцевим часом. Використовуйте замість нього {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.</dd> + <dt>{{jsxref("Date.prototype.setDate()")}}</dt> + <dd>Встановлює день місяця для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd>Встановлює повне значення року (наприклад, 4 цифри для 4-значних років) для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.setHours()")}}</dt> + <dd>Встановлює години для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd>Встановлює мілісекунди для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd>Встановлює хвилини для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> + <dd>Встановлює місяць для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd>Встановлює секунди для вказаної дати згідно з місцевим часом.</dd> + <dt>{{jsxref("Date.prototype.setTime()")}}</dt> + <dd>Встановлює об'єкту {{jsxref("Date")}} час, переданий кількістю мілісекунд від 1 січня 1970 року 00:00:00 за UTC. Використовуйте від'ємні значення для більш ранніх дат.</dd> + <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd>Встановлює день місяця для вказаної дати згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd>Встановлює повне значення року (наприклад, 4 цифри для 4-значних років) для вказаної дати згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd>Встановлює години для вказаної дати згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd>Встановлює мілісекунди для вказаної дати згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd>Встановлює хвилини для вказаної дати згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd>Встановлює місяць для вказаної дати згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd>Встановлює секунди для вказаної дати згідно зі всесвітнім часом.</dd> + <dt>{{jsxref("Date.prototype.setYear()")}}</dt> + <dd>Встановлює рік (зазвичай, 2–3 цифри) для вказаної дати згідно з місцевим часом. Використовуйте замість нього {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.</dd> + <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> + <dd>Повертає елементи дати об'єкта {{jsxref("Date")}} у вигляді зручного для читання рядка, наприклад, <code>'Thu Apr 12 2018'</code>.</dd> + <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> + <dd>Перетворює дату на рядок згідно з розширеним форматом ISO 8601.</dd> + <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> + <dd>Повертає рядок, що відображає об'єкт {{jsxref("Date")}}, використовуючи {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Призначений для використання методом {{jsxref("JSON.stringify()")}}.</dd> + <dt>{{jsxref("Date.prototype.toGMTString()")}}</dt> + <dd>Повертає рядок, що відображає об'єкт {{jsxref("Date")}} на основі часового поясу GMT (UTC). Використовуйте замість нього {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd>Повертає рядкове представлення елементів дати у відповідності до системних налаштувань.</dd> + <dt><code><a href="/uk/docs/Archive/Web/JavaScript/Date.toLocaleFormat">Date.prototype.toLocaleFormat()</a></code></dt> + <dd>Перетворює дату на рядок, використовуючи рядок форматування.</dd> + <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd>Повертає рядкове представлення дати відповідно до мовних налаштувань. Заміщує метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd>Повертає рядкове представлення часу у відповідності до мовних налаштувань.</dd> + <dt>{{jsxref("Date.prototype.toString()")}}</dt> + <dd>Повертає рядкове представлення вказаного об'єкта {{jsxref("Date")}}. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> + <dd>Повертає елементи часу об'єкта {{jsxref("Date")}} у вигляді зручного для читання рядка.</dd> + <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd>Перетворює дату на рядок, використовуючи часових пояс UTC.</dd> + <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> + <dd>Повертає просте значення об'єкта {{jsxref("Date")}}. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<div></div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Кілька_способів_створити_екземпляр_Date">Кілька способів створити екземпляр <code>Date</code></h3> + +<p>Наступні приклади демонструють кілька способів створення дат JavaScript:</p> + +<div class="note"> +<p><strong>Заувага:</strong> Розбір рядків з датою за допомогою конструктора <code>Date</code> (або методу <code>Date.parse</code>, що є одне й те саме) є рішуче небажаним через наявні розбіжності поміж переглядачами.</p> +</div> + +<pre class="brush: js notranslate">let today = new Date() +let birthday = new Date('December 17, 1995 03:24:00') +let birthday = new Date('1995-12-17T03:24:00') +let birthday = new Date(1995, 11, 17) // місяці нумеруються з 0 +let birthday = new Date(1995, 11, 17, 3, 24, 0) +let birthday = new Date(628021800000) // передаємо часову мітку +</pre> + +<h3 id="Щоб_отримати_день_місяць_та_рік_або_час"> Щоб отримати день, місяць та рік, або час</h3> + +<pre class="brush: js notranslate">let [month, date, year] = ( new Date() ).toLocaleDateString().split("/") +let [hour, minute, second] = ( new Date() ).toLocaleTimeString().slice(0,7).split(":")</pre> + +<h3 id="Двозначний_рік_відповідає_рокам_1900-1999">Двозначний рік відповідає рокам 1900-1999</h3> + +<p>Для створення та отримання дат між <code>0</code> та <code>99</code> роками, слід використовувати методи {{jsxref("Date.prototype.setFullYear()")}} та {{jsxref("Date.prototype.getFullYear()")}}.</p> + +<pre class="brush: js notranslate">let date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +// Застарілий метод, тут 98 також обертається на 1998 +date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) +</pre> + +<h3 id="Обчислення_тривалості">Обчислення тривалості</h3> + +<p>У наведених прикладах показано, як визначити час, що пройшов між двома датами JavaScript.</p> + +<p>Через різну тривалість доби (внаслідок переходів між літнім та зимовим часом), місяців та років, вираження обчисленої тривалості в одиницях, більших за години, хвилини та секунди, зустрічає багато проблем та потребує вдумливого дослідження перед застосуванням.</p> + +<pre class="brush: js notranslate">// Використання об'єктв Date +var start = Date.now(); + +// Тут якісь обчислення, тривалість яких слід з'ясувати +doSomethingForALongTime(); +let end = Date.now() +let elapsed = end - start // час, що пройшов, у мілісекундах +</pre> + +<pre class="brush: js notranslate">// Використання вбудованих методів +let start = new Date() + +// Подію, час якої необхідно обчислити: +doSomethingForALongTime() +let end = new Date() +let elapsed = end.getTime() - start.getTime() // час, що пройшов, у мілісекундах +</pre> + +<pre class="brush: js notranslate">// Щоб перевірити функцію та отримати її результат +function printElapsedTime(fTest) { + let nStartTime = Date.now(), + vReturn = fTest(), + nEndTime = Date.now() + + console.log(`Тривалість: ${ String(nEndTime - nStartTime) } мілісекунд`); + return vReturn +} + +let yourFunctionReturn = printElapsedTime(yourFunction) +</pre> + +<div class="note"> +<p><strong>Заувага:</strong> У переглядачах з підтримкою часу високої роздільності {{domxref("window.performance", "Web Performance API", "", 1)}}, метод {{domxref("Performance.now()")}} може забезпечити вищу точність та надійність вимірювання тривалості, ніж {{jsxref("Date.now()")}}.</p> +</div> + +<h3 id="Отримання_кількості_секунд_з_початку_епохи_ECMAScript">Отримання кількості секунд з початку епохи ECMAScript</h3> + +<pre class="notranslate">let seconds = Math.floor(Date.now() / 1000) +</pre> + +<p>У цьому випадку важливо повернути тільки ціле число, тому просте ділення не підійде. Також важливо повернути лише секунди, які вже пройшли. (Тому цей код використовує {{jsxref("Math.floor()")}}, а <em>не</em> {{jsxref("Math.round()")}}.)</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<div>{{Compat("javascript.builtins.Date.Date")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Конструктор {{jsxref("Date/Date", "Date()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/now/index.html b/files/uk/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..7e03cfbcef --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,86 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Global_Objects/Date/now +tags: + - JavaScript + - Method + - UTC + - polyfill + - Дата + - Довідка + - Час Unix +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +<div>{{JSRef}}</div> + +<p>Статичний метод <strong><code>Date.now()</code></strong> вертає кількість мілісекунд від 1 січня 1970 року о 00:00:00 за UTC.</p> + +<p>{{EmbedInteractiveExample("pages/js/date-now.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code>var timeInMs = Date.now();</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>{{jsxref("Число")}}, що позначає кількість мілісекунд від початку епохи за часом Unix.</p> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Цей метод було стандартизовано 5-им випуском ECMA-262. Для рушіїв, що не мають підтримки цього метода, стане в пригоді таке рішення:</p> + +<pre class="brush: js notranslate">if (!Date.now) { + Date.now = function now() { + return new Date().getTime(); + }; +} +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Зменшена_точність_часу">Зменшена точність часу</h3> + +<p>Для захисту від атак за часом чи за цифровими відбитками, точність <code>Date.now()</code> може бути округлена, в залежності від налаштувань переглядача.<br> + У Firefox параметр <code>privacy.reduceTimerPrecision</code> за замовчуванням увімкнений та дорівнює 20 мс у Firefox 59; у 60 він дорівнюватиме 2 мс.</p> + +<pre class="brush: js notranslate">// зменшена точність часу (2 мс) у Firefox 60 +Date.now() +// 1519211809934 +// 1519211810362 +// 1519211811670 +// ... + +// зменшена точність часу з увімкненим параметром `privacy.resistFingerprinting` +Date.now(); +// 1519129853500 +// 1519129858900 +// 1519129864400 +// ...</pre> + +<p>У Firefox ви також можете увімкнути <code>privacy.resistFingerprinting</code>, точність дорівнюватиме або 100 мс, або значенню <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, в залежності від того, що більше.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Date.now")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{domxref("Performance.now()")}} — вертає поточний час із роздільною здатністю вище мілісекунди для програмного вимірювання швидкодії веб-сторінки</li> + <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/parse/index.html b/files/uk/web/javascript/reference/global_objects/date/parse/index.html new file mode 100644 index 0000000000..a83c917192 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/parse/index.html @@ -0,0 +1,198 @@ +--- +title: Date.parse() +slug: Web/JavaScript/Reference/Global_Objects/Date/parse +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Date.parse()</code></strong> розбирає рядкове представлення дати та повертає кількість мілісекунд від 1 січня 1970 року, 00:00:00 за UTC, або <code>NaN</code>, якщо рядок неможливо розібрати чи, в окремих випадках, він містить недозволені значення (наприклад, 2015-02-31).</p> + +<p>Не рекомендується використовувати <code>Date.parse</code>, оскільки у версіях до ES5 розбір був повністю залежним від реалізації. Досі існують багато відмінностей у тому, як різні хости розбирають рядки з датами, тому вони мають розбиратися вручну (можна скористатись бібліотекою, якщо очікується багато різних форматів).</p> + +<div>{{EmbedInteractiveExample("pages/js/date-parse.html")}}</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> + +<p>Прямий виклик:</p> + +<pre class="syntaxbox notranslate">Date.parse(<var>dateString</var>) +</pre> + +<p>Неявний виклик:</p> + +<pre class="syntaxbox notranslate">new Date(<var>dateString</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>dateString</var></code></dt> + <dd>Рядок, що відображає <a href="#Date_Time_String_Format">спрощену версію розширеного календарного формату дати ISO 8601</a>. (Можна використовувати й інші формати, але результат залежитиме від реалізації.)</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Число, що відображає кількість мілісекунд від 1 січня 1970 року, 00:00:00 за UTC, і дату, отриману розбором наданого рядкового представлення дати. Якщо аргумент не відображає дозволене значення дати, повертається {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>parse()</code> приймає рядок з датою (наприклад, "<code>2011-10-10T14:48:00</code>") та повертає число мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.</p> + +<p>Ця функція корисна для присвоєння дати на основі рядкових значень, наприклад, у поєднанні з методом {{jsxref("Date.prototype.setTime()", "setTime()")}} та об'єктом {{jsxref("Global_Objects/Date", "Date")}}.</p> + +<h3 id="Рядковий_формат_дати_та_часу">Рядковий формат дати та часу</h3> + +<p>Стандартне рядкове представлення дати та часу є спрощенням розширеного календарного формату дати ISO 8601. (Дивіться більше подробиць у розділі <a href="https://tc39.github.io/ecma262/#sec-date-time-string-format">Date Time String Format</a> специфікації ECMAScript.)</p> + +<p>Наприклад, "<code>2011-10-10</code>" (<em>лише дата</em>), "<code>2011-10-10T14:48:00</code>" (<em>дата та час</em>) або "<code>2011-10-10T14:48:00.000+09:00</code>" (<em>дата та час</em> з мілісекундами та часовим поясом) можуть бути та будуть розібрані. Коли зсув часового поясу відсутній, форми, що містять лише дату, інтерпретуються як час UTC, а форми з датою та часом інтерпретуються як місцевий час.</p> + +<p>Хоча специфікатори часового поясу використовуються під час розбору рядків для інтерпретації аргументу, значення, що повертається, завжди буде кількістю мілісекунд між 1 січня 1970 року 00:00:00 за UTC та точкою у часі, відображеною аргументом, або ж <code>NaN</code>.</p> + +<p>Оскіьки <code>parse()</code> - статичний метод {{jsxref("Date")}}, він викликається як <code>Date.parse()</code>, а не як метод екземпляра {{jsxref("Date")}}.</p> + +<h3 id="Використання_специфічних_реалізацій_форматів_дати">Використання специфічних реалізацій форматів дати</h3> + +<div class="blockIndicator note"> +<p>Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.</p> +</div> + +<p>Специфікація ECMAScript зазначає: Якщо рядок не відповідає стандартному формату, функція може застосовувати будь-яку специфічно реалізовану евристику чи специфічно реалізований алгоритм розбору. Рядки, які неможливо розібрати, чи дати, що містять недозволені значення елементів у рядках формату ISO, змусять метод <code>Date.parse()</code> повернути {{jsxref("NaN")}}.</p> + +<p>Однак, недозволені значення у рядках дат, які не розпізнаються в якості спрощеного формату ISO, визначеного у ECMA-262, можуть повернути або не повернути {{jsxref("NaN")}}, в залежності від переглядача, наданих значень і т.д.:</p> + +<pre class="brush: js notranslate">// Рядок не формату ISO з недозволеними значеннями у даті +new Date('23/25/2014'); +</pre> + +<p>це буде сприйнято як локальна дата 25 листопада 2015 у Firefox 30 та як неправильна дата у Safari 7.</p> + +<p>Однак, якщо рядок розпізнається як рядок формату ISO та містить недозволені значення, він поверне {{jsxref("NaN")}} в усіх переглядачах, сумісних з ES5 та пізнішими версіями:</p> + +<pre class="brush: js notranslate">// Рядок ISO з недозволеними значеннями +new Date('2014-25-23').toISOString(); +// викидає "RangeError: invalid date" в усіх переглядачах, сумісних з ES5 +</pre> + +<p>Специфічну реалізацію SpiderMonkey можна знайти у <a href="https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889"><code>jsdate.cpp</code></a>. Рядок "<code>10 06 2014</code>" є прикладом невідповідності формату ISO, і тому використовується особливий алгоритм. Дивіться також цей <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6">короткий опис</a> того, як працює розбір.</p> + +<pre class="brush: js notranslate">new Date('10 06 2014'); +</pre> + +<p>це буде сприйматись як локальна дата 6 жовтня 2014, а не як 10 червня 2014.</p> + +<p>Інші приклади:</p> + +<pre class="brush: js notranslate">new Date('foo-bar 2014').toString(); +// повертає: "Invalid Date" + +Date.parse('foo-bar 2014'); +// повертає: NaN +</pre> + +<h3 id="Відмінності_у_отриманому_часовому_поясі">Відмінності у отриманому часовому поясі</h3> + +<div class="blockIndicator note"> +<p>Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.</p> +</div> + +<p>Отримавши нестандартний рядок дати "<code>March 7, 2014</code>", <code>parse()</code> припускає, що він відноситься до місцевого часового поясу, але отримавши рядок у спрощеній версії розширеного календарного формату ISO 8601, наприклад, "<code>2014-03-07</code>", він припускає часовий пояс UTC (ES5 та ECMAScript 2015). Таким чином, об'єкти {{jsxref("Date")}}, отримані за допомогою цих рядків, можуть відображати різні моменти часу, в залежності від версії ECMAScript, яка підтримується, якщо тільки у системі не встановлений місцевий часовий пояс UTC. Це означає, що два рядки дат, що виглядають еквівалентними, можуть повернути два різних значення, в залежності від формату рядка, який перетворюється.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Date.parse">Використання <code>Date.parse()</code></h3> + +<p>Усі наступні виклики повертають <code>1546300800000</code>. Перший, у відповідності до ES5, застосує час UTC, а інші вказують часовий пояс UTC через специфікацію дати ISO (<code>Z</code> та <code>+00:00</code>)</p> + +<pre class="brush: js notranslate">Date.parse("2019-01-01") +Date.parse("2019-01-01T00:00:00.000Z") +Date.parse("2019-01-01T00:00:00.000+00:00") +</pre> + +<p>Наступний виклик, який не вказує часовий пояс, поверне 2019-01-01 о 00:00:00 у локальному часовому поясі системи.</p> + +<pre class="brush: js notranslate">Date.parse("2019-01-01T00:00:00") +</pre> + +<h3 id="Нестандартні_рядки_дат">Нестандартні рядки дат</h3> + +<div class="blockIndicator note"> +<p>Цей розділ містить специфічно реалізовану поведінку, яка може не співпадати між різними реалізаціями.</p> +</div> + +<p>Якщо <code>IPOdate</code> є існуючим об'єктом {{jsxref("Date")}}, йому можна призначити дату 9 серпня 1995 (за локальним часом) наступним чином:</p> + +<pre class="brush: js notranslate">IPOdate.setTime(Date.parse('Aug 9, 1995')); +</pre> + +<p>Ще кілька прикладів розбору нестандартних рядків дат:</p> + +<pre class="brush: js notranslate">Date.parse('Aug 9, 1995'); +</pre> + +<p>Повертає <code>807937200000</code> у часовому поясі GMT-0300 та інші значення у інших часових поясах, оскільки рядок не вказує часовий пояс і не відповідає формату ISO, тому часовий пояс береться локальний.</p> + +<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT'); +</pre> + +<p>Повертає <code>807926400000</code>, незалежно від локального часового поясу, оскільки вказано GMT (UTC).</p> + +<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00'); +</pre> + +<p>Повертає <code>807937200000</code> у часовому поясі GMT-0300 та інші значення у інших часових поясах, оскільки аргумент не містить вказівника часового поясу, і не відповідає формату ISO, а отже, сприймається як локальний.</p> + +<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT'); +</pre> + +<p>Повертає <code>0</code>, незалежно від локального часового поясу, оскільки вказано GMT (UTC).</p> + +<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00'); +</pre> + +<p>Повертає <code>14400000</code> у часовому поясі GMT-0400 та інші значення у інших часових поясах, оскільки часовий пояс не вказано, а рядок не відповідає формату ISO, тому використовується локальний часовий пояс.</p> + +<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400'); +</pre> + +<p>Повертає <code>14400000</code>, незалежно від локального часового поясу, оскільки вказано GMT (UTC).</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Date.parse")}}</p> + +<h3 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h3> + +<ul> + <li>Firefox 49 змінив розбір 2-значних значень року для співпадіння з переглядачем Google Chrome замість Internet Explorer. Тепер 2-значні значення року, менші за <code>50</code>, розбираються як роки 21-го сторіччя. Наприклад, <code>04/16/17</code>, що раніше інтерпретувалось як 16 квітня 1917 року тепер буде 16 квітня 2017 року. Щоб запобігти будь-яких проблем сумісності чи невизначеності, рекомендується використовувати формат ISO 8601, наприклад, "<code>2017-04-16</code>" (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1265136">помилка 1265136</a>).</li> + <li>Google Chrome прийме числовий рядок як дозволений параметр <code><em>dateString</em></code>. Це означає, що, наприклад, в той час, як команда <code>!!Date.parse("42")</code> повертає <code>false</code> у Firefox, вона поверне <code>true</code> у Google Chrome, оскільки "<code>42</code>" інтерпретується як 1 січня 2042 року.</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.UTC()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setdate/index.html b/files/uk/web/javascript/reference/global_objects/date/setdate/index.html new file mode 100644 index 0000000000..4a34fb17fa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setdate/index.html @@ -0,0 +1,79 @@ +--- +title: Date.prototype.setDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/setDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setDate()</code></strong> встановлює день об'єкта {{jsxref("Date")}} відносно початку наразі встановленого місяця.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setdate.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setDate(<var>dayValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>dayValue</code></dt> + <dd>Ціле число, що відображає день місяця.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Число мілісекунд між 1 січня 1970 00:00:00 за UTC та наданою датою (об'єкт {{jsxref("Date")}} також змінюється на місці).</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо значення <code>dayValue</code> знаходиться за межами значень діапазону днів місяця, <code>setDate()</code> оновить об'єкт {{jsxref("Date")}} відповідно.</p> + +<p>Наприклад, якщо для <code>dayValue</code> надано 0, дата буде встановлена останнім днем попереднього місяця.</p> + +<p>Якщо для <code>dayValue</code> надане від'ємне число, дата присвоїться зворотнім відліком від останнього дня попереднього місяця. -1 поверне дату, що на 1 день менша за останній день попереднього місяця.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setDate">Використання <code>setDate()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(1962, 6, 7); // 1962-07-07 (7 липня 1962) +theBigDay.setDate(24); // 1962-07-24 (24 липня 1962) +theBigDay.setDate(32); // 1962-08-01 (1 серпня 1962) +theBigDay.setDate(22); // 1962-08-22 (22 серпня 1962) +theBigDay.setDate(0); // 1962-07-31 (31 липня 1962) +theBigDay.setDate(98); // 1962-10-06 (6 жовтня 1962) +theBigDay.setDate(-50); // 1962-08-11 (11 серпня 1962) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</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.Date.setDate")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getDate()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html new file mode 100644 index 0000000000..9eb3d1c695 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html @@ -0,0 +1,77 @@ +--- +title: Date.prototype.setFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setFullYear()</code></strong> встановлює повне значення року вказаній даті згідно з місцевим часом. Повертає нову часову мітку.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dateValue</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>yearValue</code></dt> + <dd>Ціле число, що передає числове значення року, наприклад, 1995.</dd> + <dt><code>monthValue</code></dt> + <dd>Необов'язковий. Ціле число між 0 та 11, що відображає місяці з січня по грудень.</dd> + <dt><code>dateValue</code></dt> + <dd>Необов'язковий. Ціле число між 1 та 31, що відображає день місяця. Якщо ви вказуєте параметр <code>dateValue</code>, ви повинні також вказати <code>monthValue</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметри <code>monthValue</code> та <code>dateValue</code>, використовуються значення, що повертають методи {{jsxref("Date.prototype.getMonth()", "getMonth()")}} та {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setFullYear()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вказуєте 15 в якості <code>monthValue</code>, рік збільшується на 1 (<code>yearValue + 1</code>), а 3 використовується як значення місяця.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setFullYear">Використання <code>setFullYear()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setFullYear(1997); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</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.Date.setFullYear")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setYear()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/sethours/index.html b/files/uk/web/javascript/reference/global_objects/date/sethours/index.html new file mode 100644 index 0000000000..8c63be9bb4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/sethours/index.html @@ -0,0 +1,82 @@ +--- +title: Date.prototype.setHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/setHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setHours()</code></strong> встановлює години вказаної дати згідно з місцевим часом та повертає кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та часом у оновленому екземплярі {{jsxref("Date")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-sethours.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre> + +<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setHours(<var>hoursValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>hoursValue</code></dt> + <dd>В ідеалі, ціле число між 0 та 23, що відображає години. Якщо надано значення, більше за 23, дата та час будуть збільшені на додаткові години.</dd> + <dt><code>minutesValue</code></dt> + <dd>Необов'язковий. В ідеалі, ціле число між 0 та 59, що відображає хвилини. Якщо надано значення, більше за 59, дата та час будуть збільшені на додаткові хвилини.</dd> + <dt><code>secondsValue</code></dt> + <dd>Необов'язковий. В ідеалі, ціле число між 0 та 59, що відображає секунди. Якщо надано значення, більше за 59, дата та час будуть збільшені на додаткові секунди. Якщо ви вказуєте параметр <code>secondsValue</code>, ви також повинні вказати <code>minutesValue</code>.</dd> + <dt><code>msValue</code></dt> + <dd>Необов'язковий. В ідеалі, ціле число між 0 та 999, що відображає мілісекунди. Якщо надано значення, більше за 999, дата та час будуть збільшені на додаткові мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви також повинні вказати <code>minutesValue</code> та <code>secondsValue</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметри <code>minutesValue</code>, <code>secondsValue</code> та <code>msValue</code>, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} та {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setHours()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setHours">Використання <code>setHours()</code></h3> + +<pre class="brush:js notranslate">var theBigDay = new Date(); +theBigDay.setHours(7); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</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.Date.setHours")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html new file mode 100644 index 0000000000..5cdcd65fa9 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html @@ -0,0 +1,70 @@ +--- +title: Date.prototype.setMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setMilliseconds()</code></strong> встановлює мілісекунди у вказаній даті згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMilliseconds(<var>millisecondsValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>millisecondsValue</code></dt> + <dd>Число між 0 та 999, що відображає мілісекунди.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви вказуєте число, що знаходиться за межами очікуваного діапазону, інформація про дату у об'єкті {{jsxref("Date")}} оновлюється відповідно. Наприклад, якщо ви вкажете 1005, кількість секунд збільшиться на 1, а 5 буде значенням мілісекунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setMilliseconds">Використання <code>setMilliseconds()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setMilliseconds(100); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</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.Date.setMilliseconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html new file mode 100644 index 0000000000..8dae7118e8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setminutes/index.html @@ -0,0 +1,80 @@ +--- +title: Date.prototype.setMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setMinutes()</code></strong> встановлює хвилини для вказаної дати згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre> + +<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>minutesValue</code></dt> + <dd>Ціле число між 0 та 59, що відображає хвилини.</dd> + <dt><code>secondsValue</code></dt> + <dd>Необов'язковий. Ціле число між 0 та 59, що відображає секунди.</dd> + <dt><code>msValue</code></dt> + <dd>Необов'язковий. Ціле число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви також повинні вказати <code>secondsValue</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметри <code>secondsValue</code> та <code>msValue</code>, використовуються значення, що повертають методи {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} та {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setMinutes()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setMinutes">Використання <code>setMinutes()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setMinutes(45); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</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.Date.setMinutes")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html new file mode 100644 index 0000000000..6776be81f5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setmonth/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.setMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setMonth()</code></strong> встановлює місяць для вказаної дати згідно зі встановленим значенням року.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre> + +<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>monthValue</code></dt> + <dd>Ціле число на основі нуля, що позначає зсув у місяцях від початку року. Отже, 0 позначає січень, 11 - грудень, -1 позначає грудень попереднього року, а 12 - січень наступного року.</dd> + <dt><code>dayValue</code></dt> + <dd>Необов'язковий. Ціле число від 1 до 31, що позначає день місяця.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметр <code>dayValue</code>, використовується значення, яке повертає метод {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setMonth()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості <code>monthValue</code>, рік буде збільшений на 1, а 3 буде значенням місяця.</p> + +<p>Поточний день місяця впливатиме на поведінку цього методу. Концептуально, він додасть кількість днів, надану поточним значенням дня місяця, до першого дня нового місяця, вказаного у параметрі, щоб повернути нову дату. Наприклад, якщо існуючим значенням є 31-ше серпня 2016, виклик setMonth зі значенням 1 поверне 2 березня 2016. Все тому, що у лютому 2016 було 29 днів.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setMonth">Використання <code>setMonth()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setMonth(6); + +// Стережіться переходів у кінці місяця +var endOfMonth = new Date(2016, 7, 31); +endOfMonth.setMonth(1); +console.log(endOfMonth); //Wed Mar 02 2016 00:00:00 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</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.Date.setMonth")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html new file mode 100644 index 0000000000..7940ff72b8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setseconds/index.html @@ -0,0 +1,78 @@ +--- +title: Date.prototype.setSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setSeconds()</code></strong> встановлює секунди для вказаної дати згідно з місцевим часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre> + +<h3 id="Версії_до_JavaScript_1.3">Версії до JavaScript 1.3</h3> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>secondsValue</code></dt> + <dd>Ціле число між 0 та 59, що відображає секунди.</dd> + <dt><code>msValue</code></dt> + <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметр <code>msValue</code>, використовується значення, яке повертає метод {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setSeconds()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 40 буде значенням секунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setSeconds">Використання <code>setSeconds()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setSeconds(30); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</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.Date.setSeconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/settime/index.html b/files/uk/web/javascript/reference/global_objects/date/settime/index.html new file mode 100644 index 0000000000..a7ef57235d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/settime/index.html @@ -0,0 +1,71 @@ +--- +title: Date.prototype.setTime() +slug: Web/JavaScript/Reference/Global_Objects/Date/setTime +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setTime()</code></strong> встановлює об'єкту {{jsxref("Date")}} час, переданий кількістю мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-settime.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setTime(<var>timeValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>timeValue</code></dt> + <dd>Ціле число, що відображає кільксть мілісекунд від 1 січня 1970 року, 00:00:00 за UTC.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датой (власне, значення аргументу).</p> + +<h2 id="Опис">Опис</h2> + +<p>Використовуйте <code>setTime()</code>, щоб присвоїти дату та час іншому об'єкту {{jsxref("Date")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_setTime">Застосування <code>setTime()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date('July 1, 1999'); +var sameAsBigDay = new Date(); +sameAsBigDay.setTime(theBigDay.getTime()); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</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.Date.setTime")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getTime()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html new file mode 100644 index 0000000000..10cd4fabd6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html @@ -0,0 +1,70 @@ +--- +title: Date.prototype.setUTCDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setUTCDate()</code></strong> встановлює день місяця для вказаної дати згідно зі всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCDate(<var>dayValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>dayValue</code></dt> + <dd>Ціле число від 1 до 31, що відображає день місяця.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCDate()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 40 в якості <code>dayValue</code>, а значенням місяця у об'єкті {{jsxref("Date")}} є червень, день буде змінений на 10, а місяць буде збільшений до липня.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setUTCDate">Використання <code>setUTCDate()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setUTCDate(20); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</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.Date.setUTCDate")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html new file mode 100644 index 0000000000..7a95d10e06 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html @@ -0,0 +1,76 @@ +--- +title: Date.prototype.setUTCFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setUTCFullYear()</code></strong> встановлює повне значення року для вказаної дати згідно зі всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>yearValue</code></dt> + <dd>Ціле число, що вказує числове значення року, наприклад, 1995.</dd> + <dt><code>monthValue</code></dt> + <dd>Необов'язковий. Ціле число між 0 та 11, що відображає місяці з січня по грудень.</dd> + <dt><code>dayValue</code></dt> + <dd>Необов'язковий. Ціле число між 1 та 31, що відображає день місяця. Якщо ви вказуєте параметр <code>dayValue</code>, ви повинні також вказати <code>monthValue</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметри <code>monthValue</code> та <code>dayValue</code>, використовуються значення, що повертають методи {{jsxref("Date.prototype.getUTCMonth()", "getUTCMonth()")}} та {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCFullYear()</code> пробує оновити інші параметри та інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості <code>monthValue</code>, рік буде збільшений на 1 (<code>yearValue + 1</code>), а 3 буде значенням місяця.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setUTCFullYear">Використання <code>setUTCFullYear()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setUTCFullYear(1997); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</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.Date.setUTCFullYear")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html b/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html new file mode 100644 index 0000000000..d5a0a800f3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutchours/index.html @@ -0,0 +1,78 @@ +--- +title: Date.prototype.setUTCHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setUTCHours()</code></strong> встановлює години для вказаної дати згідно зі всесвітнім часом та повертає кількість мілісекунд від 1 січня 1970 року 00:00:00 за UTC до часу, представленого оновленим екземпляром {{jsxref("Date")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>hoursValue</code></dt> + <dd>Ціле число між 0 та 23, що відображає години.</dd> + <dt><code>minutesValue</code></dt> + <dd>Необов'язковий. Ціле число між 0 та 59, що відображає хвилини.</dd> + <dt><code>secondsValue</code></dt> + <dd>Необов'язковий. Ціле число між 0 та 59, що відображає секунди. Якщо ви вказуєте параметр <code>secondsValue</code>, ви також повинні вказати <code>minutesValue</code>.</dd> + <dt><code>msValue</code></dt> + <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви повинні також вказати <code>minutesValue</code> та <code>secondsValue</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметри <code>minutesValue</code>, <code>secondsValue</code> та <code>msValue</code>, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} та {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCHours()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setUTCHours">Використання <code>setUTCHours()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setUTCHours(8); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</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.Date.setUTCHours")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html new file mode 100644 index 0000000000..bcdc48d289 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html @@ -0,0 +1,70 @@ +--- +title: Date.prototype.setUTCMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setUTCMilliseconds()</code></strong> встановлює мілісекунди для вказаної дати згідно зі всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCMilliseconds(<var>millisecondsValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>millisecondsValue</code></dt> + <dd>Число між 0 та 999, що відображає мілісекунди.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCMilliseconds()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 1100 в якості <code>millisecondsValue</code>, секунди у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 100 буде значенням мілісекунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setUTCMilliseconds">Використання <code>setUTCMilliseconds()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setUTCMilliseconds(500); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</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.Date.setUTCMilliseconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html new file mode 100644 index 0000000000..5f1ff13d74 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html @@ -0,0 +1,76 @@ +--- +title: Date.prototype.setUTCMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setUTCMinutes()</code></strong> встановлює хвилини для вказаної дати згідно зі всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>minutesValue</code></dt> + <dd>Ціле число між 0 та 59, що відображає хвилини.</dd> + <dt><code>secondsValue</code></dt> + <dd>Необов'язковий. Ціле число між 0 та 59, що відображає секунди.</dd> + <dt><code>msValue</code></dt> + <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди. Якщо ви вказуєте параметр <code>msValue</code>, ви також повинні вказати параметр <code>secondsValue</code>.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметри <code>secondsValue</code> та <code>msValue</code>, будуть використані значення, що повертають методи {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} та {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCMinutes()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини будуть збільшені на 1 (<code>minutesValue + 1</code>), а 40 буде значенням секунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setUTCMinutes">Використання <code>setUTCMinutes()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setUTCMinutes(43); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</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.Date.setUTCMinutes")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html new file mode 100644 index 0000000000..75e684e958 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.setUTCMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setUTCMonth()</code></strong> встановлює місяць для вказаної дати згідно зі всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>monthValue</code></dt> + <dd>Ціле число між 0 та 11, що відображає місяці з січня по грудень.</dd> + <dt><code>dayValue</code></dt> + <dd>Необов'язковий. Ціле число з 1 по 31, що відображає день місяця.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметр <code>dayValue</code>, буде використане значення, що повертає метод {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCMonth()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 15 в якості <code>monthValue</code>, рік буде збільшений на 1, а 3 буде значенням місяця.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setUTCMonth">Використання <code>setUTCMonth()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setUTCMonth(11); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</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.Date.setUTCMonth")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html new file mode 100644 index 0000000000..b00f94ca28 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.setUTCSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>setUTCSeconds()</code></strong> встановлює секунди для вказаної дати згідно зі всесвітнім часом.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setUTCSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>secondsValue</code></dt> + <dd>Ціле число між 0 та 59, що відображає секунди.</dd> + <dt><code>msValue</code></dt> + <dd>Необов'язковий. Число між 0 та 999, що відображає мілісекунди.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленим часом.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви не вказуєте параметр <code>msValue</code>, буде використане значення, що повертає метод {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.</p> + +<p>Якщо вказаний вами параметр знаходиться за межами очікуваного діапазону, <code>setUTCSeconds()</code> пробує оновити інформацію про дату у об'єкті {{jsxref("Date")}} відповідно. Наприклад, якщо ви вкажете 100 в якості <code>secondsValue</code>, хвилини у об'єкті {{jsxref("Date")}} будуть збільшені на 1, а 40 буде значенням секунд.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setUTCSeconds">Використання <code>setUTCSeconds()</code></h3> + +<pre class="brush: js notranslate">var theBigDay = new Date(); +theBigDay.setUTCSeconds(20); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</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.Date.setUTCSeconds")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/setyear/index.html b/files/uk/web/javascript/reference/global_objects/date/setyear/index.html new file mode 100644 index 0000000000..806d80f3d6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/setyear/index.html @@ -0,0 +1,74 @@ +--- +title: Date.prototype.setYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/setYear +tags: + - Date + - JavaScript + - Довідка + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>setYear()</code></strong> встановлює рік для вказаної дати згідно з місцевим часом. Оскільки <code>setYear()</code> не встановлює повне значення року ("проблема 2000 року"), він більше не використовується та був замінений на метод {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.setYear(<var>yearValue</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>yearValue</code></dt> + <dd>Ціле число.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та оновленою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо <code>yearValue</code> є числом між 0 та 99 (включно), тоді рік для <code>dateObj</code> встановлюється як <code>1900 + yearValue</code>. Інакше, рік для <code>dateObj</code> встановлюється як <code>yearValue</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_setYear">Використання <code>setYear()</code></h3> + +<p>Перші два рядки встановлюють значенням року 1996. Третій встановлює рік 2000.</p> + +<pre class="brush: js notranslate">var theBigDay = new Date(); + +theBigDay.setYear(96); +theBigDay.setYear(1996); +theBigDay.setYear(2000); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</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.Date.setYear")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html b/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html new file mode 100644 index 0000000000..385c08865c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/todatestring/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.toDateString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toDateString()</code></strong> повертає елементи дати об'єкта {{jsxref("Date")}}, англійською мовою, у наступному форматі, розділені пробілами:</p> + +<ol> + <li>Перші три літери назви дня тижня</li> + <li>Перші три літери назви місяця</li> + <li>Двозначний день місяця, заповнений зліва нулем за необхідності</li> + <li>Чотиризначне (принаймні) значення року, заповнене зліва нулями за необхідності</li> +</ol> + +<p>Приклад: "Thu Jan 01 1970".</p> + +<div>{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toDateString()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове відображення елементів дати наданого об'єкта {{jsxref("Date")}} у читабельній формі англійською мовою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Екземпляри {{jsxref("Date")}} відображають конкретну точку в часі. Виклик {{jsxref("Date.prototype.toString()", "toString()")}} поверне дату, відформатовану у читабельній для людини формі англійською мовою. У <a href="/uk/docs/SpiderMonkey">SpiderMonkey</a> вона складається з елементів дати (день, місяць та рік), за якими йдуть елементи часу (години, хвилини, секунди та часовий пояс). Іноді необхідно отримати рядок, що містить час; це можна зробити за допомогою методу <code>toTimeString()</code>.</p> + +<p>Метод <code>toDateString()</code> є особливо корисним, оскільки сумісні рушії, що реалізують <a href="/uk/docs/ECMAScript">ECMA-262</a>, можуть відрізнятись у тому, які рядки повертає метод {{jsxref("Date.prototype.toString()", "toString()")}} для об'єктів {{jsxref("Date")}}, оскільки формат є залежним від реалізації, і прості методи обрізання рядків можуть не створити сумісні результати на різних рушіях.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базове_використання_toDateString">Базове використання <code>toDateString()</code></h3> + +<pre class="brush: js notranslate">var d = new Date(1993, 5, 28, 14, 39, 7); + +console.log(d.toString()); // виводить Mon Jun 28 1993 14:39:07 GMT+0300 (Eastern European Summer Time) +console.log(d.toDateString()); // виводить Mon Jun 28 1993 +</pre> + +<div class="note"> +<p><strong>Заувага:</strong> Місяці нумеруються з 0, коли використовуються в якості аргументу {{jsxref("Date")}} (тому 0 відповідає січню, а 11 - грудню).</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</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.Date.toDateString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html new file mode 100644 index 0000000000..a2f855e80f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html @@ -0,0 +1,64 @@ +--- +title: Date.prototype.toGMTString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toGMTString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>toGMTString()</code></strong> перетворює дату на рядок, використовуючи Інтернет-конвенції Середнього часу за Гринвічем (англ. <em>Greenwich Mean Time, GMT</em>). Точний формат значення, що повертає <code>toGMTString()</code>, може різнитись, в залежності від платформи та переглядача, загалом, він має відображати зручний для читання рядок дати.</p> + +<div class="note"> +<p><strong>Заувага:</strong> метод <code>toGMTString()</code> застарів та більше не рекомендований для використання. Він залишається доступним лише для зворотної сумісності; будь ласка, використовуйте натомість {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toGMTString()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове відображення наданої дати згідно з Інтернет-конвенціями Середнього часу за Гринвічем (GMT).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Простий_приклад">Простий приклад</h3> + +<p>У цьому прикладі метод <code>toGMTString()</code> перетворює дату на GMT (UTC) за допомогою зсуву часового поясу операційної системи та повертає рядкове значення схожої форми. Точний формат залежить від платформи.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var str = today.toGMTString(); // не рекомендований! використовуйте toUTCString() + +console.log(str); // Mon, 18 Dec 1995 17:28:35 GMT +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</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.Date.toGMTString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html b/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html new file mode 100644 index 0000000000..c6aef43afd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/toisostring/index.html @@ -0,0 +1,93 @@ +--- +title: Date.prototype.toISOString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString +tags: + - Date + - JavaScript + - Довідка + - метод + - поліфіл +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toISOString()</code></strong> повертає рядок у <em>спрощеному</em> розширеному форматі ISO (<a href="https://uk.wikipedia.org/wiki/ISO_8601">ISO 8601</a>), який завжди містить 24 або 27 символів (<code><var>YYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code> або <code><var>±</var><var>YYYYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code>, відповідно). Часовий пояс завжди UTC з нульовим зсувом, що позначається суфіксом "<code>Z</code>".</p> + +<div>{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toISOString()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення наданої дати у форматі <a href="https://uk.wikipedia.org/wiki/ISO_8601">ISO 8601</a> згідно зі всесвітнім часом.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей метод був стандартизований у 5-й версії ECMA-262. Рушії, що не були оновлені, щоб підтримувати цей метод, можуть обійти його відсутність за допомогою наступного шиму:</p> + +<pre class="brush: js notranslate">if (!Date.prototype.toISOString) { + (function() { + + function pad(number) { + if (number < 10) { + return '0' + number; + } + return number; + } + + Date.prototype.toISOString = function() { + return this.getUTCFullYear() + + '-' + pad(this.getUTCMonth() + 1) + + '-' + pad(this.getUTCDate()) + + 'T' + pad(this.getUTCHours()) + + ':' + pad(this.getUTCMinutes()) + + ':' + pad(this.getUTCSeconds()) + + '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) + + 'Z'; + }; + + })(); +} +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toISOString">Використання <code>toISOString()</code></h3> + +<pre class="brush: js notranslate">let today = new Date('05 October 2011 14:48 UTC') + +console.log(today.toISOString()) // Повертає 2011-10-05T14:48:00.000Z +</pre> + +<p>Наведений вище приклад використовує розбір нестандартного рядкового значення, яке, можливо, не буде коректно розібране у не Mozilla-переглядачах.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</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.Date.toISOString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/tojson/index.html b/files/uk/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..6e03a8664e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,69 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON +tags: + - Date + - JavaScript + - Method + - Prototype + - Дата + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toJSON()</code></strong> подає об'єкт {{jsxref("Date")}} у вигляді рядка.</p> + +<p>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toJSON()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок, що містить текстовий запис зазначеної дати.</p> + +<h2 id="Опис">Опис</h2> + +<p>Кожний об'єкт {{jsxref("Date")}} позначає певну мить у часі. Виклик <code>toJSON()</code> вертає рядок (за допомогою {{jsxref("Date.prototype.toISOString()", "toISOString()")}}), що являє собою текстовий запис дати, яку позначає об'єкт {{jsxref("Date")}}. Зазвичай цей метод вживається для перетворення об'єктів на текст упродовж серіалізації у {{Glossary("JSON")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toJSON">Використання <code>toJSON()</code></h3> + +<pre class="brush: js notranslate">var jsonDate = (new Date()).toJSON(); +var backToDate = new Date(jsonDate); + +console.log(jsonDate); //2015-10-26T07:46:36.611Z</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Date.toJSON")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html new file mode 100644 index 0000000000..6f60fe1595 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html @@ -0,0 +1,154 @@ +--- +title: Date.prototype.toLocaleDateString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +tags: + - Date + - JavaScript + - Інтернаціоналізація + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toLocaleDateString()</code></strong> повертає рядкове представлення елементів дати у відповідності до налаштувань мови. Нові аргументи <code>locales</code> та <code>options</code> дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись, а також дозволяють налаштовувати поведінку функції. У старших реалізаціях, що ігнорують аргументи <code>locales</code> та <code>options</code>, мовні налаштування та форма рядка, що повертається, повністю залежать від реалізації.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>dateObj</var>.toLocaleDateString([<var>locales</var> [, <var>options</var>]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.</p> + +<p>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat">конструктор <code>Intl.DateTimeFormat()</code></a>, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</p> + +<p>Значенням за замовчуванням для кожної властивості компонента дати-часу є {{jsxref("undefined")}}, але, якщо властивості <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> усі дорівнюють {{jsxref("undefined")}}, тоді <code>year</code>, <code>month</code> та <code>day</code> вважаються числовими значеннями.</p> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове відображення елементів дати наданого екземпляра {{jsxref("Global_Objects/Date", "Date")}} у відповідності до налаштувань мови.</p> + +<h2 id="Швидкодія">Швидкодія</h2> + +<p>При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLocaleDateString">Використання <code>toLocaleDateString()</code></h3> + +<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.</p> + +<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0)); + +// toLocaleDateString() без аргументів залежить від реалізації, +// мова та часовий пояс за замовчуванням +console.log(date.toLocaleDateString()); +// → "12/11/2012" при використанні мови en-US з часовим поясом America/Los_Angeles +</pre> + +<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів <code>locales</code> та <code>options</code></h3> + +<p>Аргументи <code>locales</code> та <code>options</code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:</p> + +<pre class="brush: js notranslate">function toLocaleDateStringSupportsLocales() { + try { + new Date().toLocaleDateString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<h3 id="Використання_locales">Використання <code>locales</code></h3> + +<p>Цей приклад демонструє деякі варіації локалізованих форматів дат. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p> + +<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// наведені приклади припускають використання локального часового поясу для мови; +// для US це America/Los_Angeles + +// В американській англійській використовується порядок місяць-день-рік +console.log(date.toLocaleDateString('en-US')); +// → "12/19/2012" + +// У британській англійській використовується порядок день-місяць-рік +console.log(date.toLocaleDateString('en-GB')); +// → "20/12/2012" + +// Корейська мова використовує порядок рік-місяць-день +console.log(date.toLocaleDateString('ko-KR')); +// → "2012. 12. 20." + +// Подія для перської, важко вручну привести дату до календаря сонячної хіджри +console.log(date.toLocaleDateString('fa-IR')); +// → "۱۳۹۱/۹/۳۰" + +// Арабська у більшості арабськомовних країн використовує справжні арабські цифри +console.log(date.toLocaleDateString('ar-EG')); +// → "<span dir="rtl">٢٠/١٢/٢٠١٢</span>" + +// для японської мови застосунки можуть використати японський календар, +// де 2012-й був 24-м роком епохи Хейсей +console.log(date.toLocaleDateString('ja-JP-u-ca-japanese')); +// → "24/12/20" + +// при запиті мови, яка, можливо, не підтримується, наприклад, +// балійської, додайте запасні мови, в даному випадку це індонезійська +console.log(date.toLocaleDateString(['ban', 'id'])); +// → "20/12/2012"</pre> + +<h3 id="Використання_options">Використання <code>options</code></h3> + +<p>Результат методу <code>toLocaleDateString()</code> можна налаштувати за допомогою аргументу <code>options</code>:</p> + +<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// вивести день тижня разом з довгою датою +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +console.log(date.toLocaleDateString('de-DE', options)); +// → "Donnerstag, 20. Dezember 2012" + +// застосунок може використати час UTC, так, щоб це було видно +options.timeZone = 'UTC'; +options.timeZoneName = 'short'; +console.log(date.toLocaleDateString('en-US', options)); +// → "Thursday, December 20, 2012, GMT" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</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.Date.toLocaleDateString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html new file mode 100644 index 0000000000..292dc6472f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html @@ -0,0 +1,178 @@ +--- +title: Date.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +tags: + - Date + - JavaScript + - Інтернаціоналізація + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toLocaleString()</code></strong> повертає рядкове представлення дати згідно налаштувань мови.</p> + +<p>Нові аргументи <code><var>locales</var></code> та <code><var>options</var></code> дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись та налаштовувати поведінку функції.</p> + +<p>У старших реалізаціях, які ігнорують аргументи <em><code>locales</code></em> та <em><code>options</code></em>, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>dateObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<p>Аргументи <code><var>locales</var></code> та <code><var>options</var></code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <em><code>locales</code></em> та <em><code>options</code></em>, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.</p> + +<p>Дивіться конструктор {{jsxref("DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</p> + +<p>Значенням за замовчуванням для кожної властивості компонента дати-часу є {{jsxref("undefined")}}. Але, якщо властивості <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> усі дорівнюють {{jsxref("undefined")}}, тоді <code>year</code>, <code>month</code>, та <code>day</code> вважаються числовими значеннями.</p> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення наданої дати згідно правил встановленої мови.</p> + +<h2 id="Швидкодія">Швидкодія</h2> + +<p>При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLocaleString">Використання toLocaleString()</h3> + +<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.</p> + +<pre class="brush: js notranslate">let date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0)); + +// toLocaleString() без аргументів залежить від реалізації, +// мова та часовий пояс за замовчуванням +console.log(date.toLocaleString()); +// → "12/11/2012, 7:00:00 PM" при використанні мови en-US з часовим поясом America/Los_Angeles +</pre> + +<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів locales та options</h3> + +<p>Аргументи <code><var>locales</var></code> та <code><var>options</var></code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:</p> + +<pre class="brush: js notranslate">function toLocaleStringSupportsLocales() { + try { + new Date().toLocaleString('i'); + } catch (e) { + return e instanceof RangeError; + } + return false; +} +</pre> + +<h3 id="Використання_locales">Використання locales</h3> + +<p>Цей приклад демонструє деякі варіації локалізованих форматів дати та часу. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code><var>locales</var></code>:</p> + +<pre class="brush: js notranslate">let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// наведені приклади припускають використання локального часового поясу для мови; +// для US це America/Los_Angeles + +// американська англійська використовує порядок місяць-день-рік та 12-годинний формат часу з AM/PM +console.log(date.toLocaleString('en-US')); +// → "12/19/2012, 7:00:00 PM" + +// британська англійська використовує порядок день-місяць-рік та 24-годинний формат часу без AM/PM +console.log(date.toLocaleString('en-GB')); +// → "20/12/2012 03:00:00" + +// корейська мова використовує порядок рік-місяць-день та 12-годинний формат часу з AM/PM +console.log(date.toLocaleString('ko-KR')); +// → "2012. 12. 20. 오후 12:00:00" + +// арабська у більшості арабськомовних країн використовує справжні арабські цифри +console.log(date.toLocaleString('ar-EG')); +// → "<span dir="rtl">٢٠/١٢/٢٠١٢ ٥:٠٠:٠٠ ص</span>" + +// для японської мови застосунки можуть використати японський календар, +// де 2012-й був 24-м роком епохи Хейсей +console.log(date.toLocaleString('ja-JP-u-ca-japanese')); +// → "24/12/20 12:00:00" + +// При запиті мови, яка, можливо, не підтримується, наприклад +// балійської, додайте запасні мови (в даному випадку це індонезійська) +console.log(date.toLocaleString(['ban', 'id'])); +// → "20/12/2012 11.00.00"</pre> + +<h3 id="Використання_options">Використання options</h3> + +<p>Результат методу <code>toLocaleString()</code> можна налаштувати за допомогою аргументу <code><var>options</var></code>:</p> + +<pre class="brush: js notranslate">let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// вивести день тижня разом з довгою датою +let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + +console.log(date.toLocaleString('de-DE', options)); +// → "Donnerstag, 20. Dezember 2012" + +// застосунок може використати час UTC, так, щоб це було видно +options.timeZone = 'UTC'; +options.timeZoneName = 'short'; + +console.log(date.toLocaleString('en-US', options)); +// → "Thursday, December 20, 2012, GMT" + +// іноді навіть в американській англійській потрібен 24-годинний час +console.log(date.toLocaleString('en-US', { hour12: false })); +// → "12/19/2012, 19:00:00" +</pre> + +<h3 id="Уникайте_порівнювати_відформатовану_дату_зі_статичними_значеннями">Уникайте порівнювати відформатовану дату зі статичними значеннями</h3> + +<p>Як правило, відформатовані значення, що повертає метод <code>toLocaleString()</code>, сумісні між собою. Однак, це може змінитись у майбутньому, і не гарантовано для усіх мов; варіації у форматах виводу визначаються дизайном та дозволені специфікацією.</p> + +<p>З найбільш помітного, переглядачі IE та Edge вставляють двонаправлені керівні символи навколо дат, щоб виведений текст правильно поєднувався з іншим текстом.</p> + +<p>З цієї причини ви не можете гарантовано порівняти результати <code>toLocaleString()</code> зі статичним значенням:</p> + +<pre class="brush: js; example-bad notranslate">"1/1/2019, 01:00:00" === new Date("2019-01-01T01:00:00Z").toLocaleString("en-US"); +// true у Firefox та інших +// false у IE та Edge</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага</strong>: Більше подробиць та прикладів дивіться у цьому <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">обговоренні на StackOverflow</a>.</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</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.Date.toLocaleString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html new file mode 100644 index 0000000000..b94070a1fd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html @@ -0,0 +1,152 @@ +--- +title: Date.prototype.toLocaleTimeString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +tags: + - Date + - JavaScript + - Інтернаціоналізація + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toLocaleTimeString()</code></strong> повертає рядкове представлення елементів часу наданої дати згідно налаштувань мови. Нові аргументи <code>locales</code> та <code>options</code> дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись, а також дозволяють налаштовувати поведінку функції. У старших реалізаціях, що ігнорують аргументи <code>locales</code> та <code>options</code>, мовні налаштування та форма рядка, що повертається, повністю залежать від реалізації.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}</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 notranslate"><code><var>dateObj</var>.toLocaleTimeString([<var>locales[, </var><var>options</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, мовні налаштування та форма поверненого рядка повністю залежать від реалізації.</p> + +<p>Дивіться конструктор {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</p> + +<p>Значенням за замовчуванням для кожної властивості компонента дати-часу є <a href="https://wiki.developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, але, якщо властивості <code>hour</code>, <code>minute</code>, <code>second</code> усі дорівнюють {{jsxref("undefined")}}, тоді <code>hour</code>, <code>minute</code> та <code>second</code> вважаються числовими значеннями.</p> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове відображення елементів часу наданого екземпляра {{jsxref("Global_Objects/Date", "Date")}} згідно правил встановленої мови.</p> + +<h2 id="Швидкодія">Швидкодія</h2> + +<p>При форматуванні великої кількості дат краще створити об'єкт {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} та використовувати функцію, надану його властивістю {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLocaleTimeString">Використання toLocaleTimeString()</h3> + +<p>При загальному використанні, без зазначення мови, повертається рядок у мовному форматі, що стоїть за замовчуванням, та з початковими параметрами.</p> + +<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0)); + +// toLocaleTimeString() без аргументів залежить від реалізації, +// мова та часовий пояс за замовчуванням +console.log(date.toLocaleTimeString()); +// → "7:00:00 PM" при використанні мови en-US з часовим поясом America/Los_Angeles +</pre> + +<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів locales та options</h3> + +<p>Аргументи <code>locales</code> та <code>options</code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у реалізації можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("RangeError")}}:</p> + +<pre class="brush: js notranslate">function toLocaleTimeStringSupportsLocales() { + try { + new Date().toLocaleTimeString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<h3 id="Використання_locales">Використання locales</h3> + +<p>Цей приклад демонструє деякі варіації локалізованих форматів часу. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p> + +<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// наведені приклади припускають використання локального часового поясу для мови; +// для US це America/Los_Angeles + +// американська англійська використовує 12-годинний формат часу з AM/PM +console.log(date.toLocaleTimeString('en-US')); +// → "7:00:00 PM" + +// британська англійська використовує 24-годинний часовий формат без AM/PM +console.log(date.toLocaleTimeString('en-GB')); +// → "03:00:00" + +// корейська мова використовує 12-годинний часовий формат з AM/PM +console.log(date.toLocaleTimeString('ko-KR')); +// → "오후 12:00:00" + +// арабська у більшості арабськомовних країн використовує справжні арабські цифри +console.log(date.toLocaleTimeString('ar-EG')); +// → "<span dir="rtl">٧:٠٠:٠٠ م</span>" + +// при запиті мови, яка, можливо, не підтримується, наприклад, +// балійської, додайте запасні мови, в даному випадку це індонезійська +console.log(date.toLocaleTimeString(['ban', 'id'])); +// → "11.00.00" +</pre> + +<h3 id="Використання_options">Використання options</h3> + +<p>Результат методу <code>toLocaleTimeString()</code> можна налаштувати за допомогою аргументу <code>options</code>:</p> + +<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// застосунок може використати час UTC, так, щоб це було видно +var options = { timeZone: 'UTC', timeZoneName: 'short' }; +console.log(date.toLocaleTimeString('en-US', options)); +// → "3:00:00 AM UTC" + +// іноді навіть американській англійській потрібен 24-годинний час +console.log(date.toLocaleTimeString('en-US', { hour12: false })); +// → "19:00:00" + +// показати лише години та хвилини, використати options та мову за замовчуванням - передати порожній масив +console.log(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })); +// → "20:01" + +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Date.toLocaleTimeString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/tosource/index.html b/files/uk/web/javascript/reference/global_objects/date/tosource/index.html new file mode 100644 index 0000000000..1ac73ec7a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tosource/index.html @@ -0,0 +1,49 @@ +--- +title: Date.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Date/toSource +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>toSource()</code></strong> повертає рядкове представлення першокоду об'єкта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>dateObj</var>.toSource() +Date.toSource()</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення першокоду наданого об'єкта {{jsxref("Global_Objects/Date", "Date")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вбудована_функція">Вбудована функція</h3> + +<p>Для вбудованого об'єкта {{jsxref("Date")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний:</p> + +<pre class="brush: js notranslate">function Date() { + [native code] +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту.</p> + +<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.Date.toSource")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/tostring/index.html b/files/uk/web/javascript/reference/global_objects/date/tostring/index.html new file mode 100644 index 0000000000..c3c2c9a0b8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/tostring/index.html @@ -0,0 +1,110 @@ +--- +title: Date.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toString()</code></strong> повертає рядкове представлення вказаного об'єкта {{jsxref("Date")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tostring.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>dateObj</var>.toString()</pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення наданої дати.</p> + +<h2 id="Опис">Опис</h2> + +<p>Екземпляри {{jsxref("Date")}} успадковують метод <code>toString()</code> від {{jsxref("Date.prototype")}}, а не від {{jsxref("Object.prototype")}}. <code>Date.prototype.toString()</code> повертає рядкове представлення об'єкта Date у форматі, вказаному у ECMA-262, який можна підсумувати наступним чином:</p> + +<ul> + <li>День тижня: 3 літери англійської назви дня тижня, наприклад, "Sat"</li> + <li>пробіл</li> + <li>Місяць: 3 літери англійської назви місяця, наприклад, "Sep"</li> + <li>пробіл</li> + <li>День: 2-значний день місяця, наприклад, "01"</li> + <li>пробіл</li> + <li>Рік: 4-значний рік, наприклад, "2018"</li> + <li>пробіл</li> + <li>Година: 2-значна година, наприклад, "14"</li> + <li>двокрапка</li> + <li>Хвилини: 2-значні хвилини, наприклад, "53"</li> + <li>двокрапка</li> + <li>Секунди: 2-значні секунди, наприклад, "26"</li> + <li>пробіл</li> + <li>Рядок "GMT"</li> + <li>Знак зсуву часового поясу, один з: + <ul> + <li>"+" для додатного зсуву (0 чи більше)</li> + <li>"-" для від'ємного зсуву (менше нуля)</li> + </ul> + </li> + <li>Двозначний зсув годин, наприклад, "14"</li> + <li>Двозначний зсув хвилин, наприклад, "00"</li> + <li>Необов'язково, ім'я часового поясу, що складається з: + <ul> + <li>пробілу</li> + <li>Лівої дужки, тобто, "("</li> + <li>Рядкового відображення часового поясу, що залежить від реалізації, і може бути скороченням повної назви (не існує стандарту для імен чи скорочень часових поясів), наприклад, "Line Islands Time" або "LINT"</li> + <li>Правої дужки, тобто, ")"</li> + </ul> + </li> +</ul> + +<p>Приклад: "Sat Sep 01 2018 14:53:26 GMT+1400 (LINT)"</p> + +<p>До появи ECMAScript 2018 (версії 9) формат рядка, який повертав метод <code>Date.prototype.toString</code>, залежав від реалізації. Тому не можна покладатися на те, що рядок буде у вказаному форматі.</p> + +<p>Метод <code>toString()</code> автоматично викликається, коли дата має бути передана у вигляді текстового значення, наприклад, <code>console.log(new Date())</code>, або коли дата використовується в об'єднанні з рядком, як ось <code>var today = 'Сьогодні ' + new Date()</code>.</p> + +<p><code>toString()</code> є загальним методом, він не вимагає, щоб його <code>this</code> був екземпляром {{jsxref("Date")}}. Однак, він повинен мати внутрішню властивість <code>[[TimeValue]]</code>, яку неможливо створити за допомогою вбудованих методів javascript, тому він обмежений використанням з екземплярами {{jsxref("Date")}}. Якщо метод викликається не на екземплярі Date, викидається {{jsxref("TypeError")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toString">Використання <code>toString()</code></h3> + +<p>Наступний код присвоює значення <code>toString()</code> об'єкта {{jsxref("Date")}} змінній <code>myVar</code>:</p> + +<pre class="brush: js notranslate">var x = new Date(); +var myVar = x.toString(); // присвоює рядкове значення myVar у такому форматі: + // Mon Sep 08 1998 14:36:22 GMT-0700 (PDT) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</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.Date.toString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html b/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html new file mode 100644 index 0000000000..40f658864c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/totimestring/index.html @@ -0,0 +1,68 @@ +--- +title: Date.prototype.toTimeString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toTimeString()</code></strong> повертає елементи часу об'єкта {{jsxref("Date")}} у зручній для читання формі англійською мовою.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-totimestring.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toTimeString()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове відображення елементів часу наданої дати у зручній для читання формі англійською мовою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Екземпляри {{jsxref("Date")}} відображають конкретну точку в часі. Виклик {{jsxref("Date.prototype.toString()", "toString()")}} поверне дату, відформатовану у зручній для читання формі англійською мовою. У <a href="/uk/docs/SpiderMonkey">SpiderMonkey</a> вона складається з елементів дати (день, місяць та рік), за якими йдуть елементи часу (години, хвилини, секунди та часовий пояс). Іноді необхідно отримати рядок, що містить час; це можна зробити за допомогою методу <code>toTimeString()</code>.</p> + +<p>Метод <code>toTimeString()</code> є особливо корисним, оскільки сумісні рушії, що реалізують <a href="/uk/docs/ECMAScript">ECMA-262</a> можуть відрізнятись у тому, які рядки повертає метод {{jsxref("Date.prototype.toString()", "toString()")}} для об'єктів {{jsxref("Date")}}, оскільки формат є залежним від реалізації, і прості методи обрізання рядків можуть не створити сумісні результати на різних рушіях.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базове_використання_toTimeString">Базове використання <code>toTimeString()</code></h3> + +<pre class="brush: js notranslate">var d = new Date(1993, 6, 28, 14, 39, 7); + +console.log(d.toString()); // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT) +console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</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.Date.toTimeString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html new file mode 100644 index 0000000000..077f04aaad --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html @@ -0,0 +1,109 @@ +--- +title: Date.prototype.toUTCString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toUTCString()</code></strong> перетворює дату на рядок, використовуючи часовий пояс UTC.</p> + +<p>Заснований на <a href="https://tools.ietf.org/html/rfc7231#section-7.1.1.1">rfc7231</a> та змінений згідно з <a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-date.prototype.toutcstring">ecma-262 toUTCString</a>, він може мати від'ємні значення у <a href="https://tc39.es/ecma262/#sec-date.prototype.toutcstring">версії 2021</a>.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-toutcstring.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toUTCString()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядкове представлення наданої дати з використанням часового поясу UTC.</p> + +<h2 id="Опис">Опис</h2> + +<p>Значення, яке повертає <code>toUTCString()</code>, є рядком у формі <code><var>Www</var>, <var>dd</var> <var>Mmm</var> <var>yyyy</var> <var>hh</var>:<var>mm</var>:<var>ss</var> GMT</code>, де:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Рядок</th> + <th scope="col">Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><var>Www</var></code></td> + <td>День тижня у вигляді трьох літер (наприклад, Sun, Mon, ...)</td> + </tr> + <tr> + <td><code><var>dd</var></code></td> + <td>Двозначний день місяця, з першим нулем, якщо необхідно</td> + </tr> + <tr> + <td><code><var>Mmm</var></code></td> + <td>Місяць у вигляді трьох літер (наприклад, Jan, Feb, ...)</td> + </tr> + <tr> + <td><code><var>yyyy</var></code></td> + <td>Рік, чотири або більше цифр, з першими нулями, якщо необхідно</td> + </tr> + <tr> + <td><code><var>hh</var></code></td> + <td>Години, дві цифри з першим нулем, якщо необхідно</td> + </tr> + <tr> + <td><code><var>mm</var></code></td> + <td>Хвилини, дві цифри з першим нулем, якщо необхідно</td> + </tr> + <tr> + <td><code><var>ss</var></code></td> + <td>Секунди, дві цифри з першим нулем, якщо необхідно</td> + </tr> + </tbody> +</table> + +<p>До появи ECMAScript 2018, формат значення, яке поверталось, залежив від платформи. Найпоширенішим варіантом була дата у форматі RFC-1123, що є трохи оновленою версією дати у форматі RFC-822.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toUTCString">Використання <code>toUTCString()</code></h3> + +<pre class="brush: js notranslate">let today = new Date('Wed, 14 Jun 2017 00:00:00 PDT'); +let UTCstring = today.toUTCString(); // Wed, 14 Jun 2017 07:00:00 GMT +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</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.Date.toUTCString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toISOString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/utc/index.html b/files/uk/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..6abb78eb6d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,153 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Reference/Global_Objects/Date/UTC +tags: + - UTC + - Дата + - Довідка + - Час Unix +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Date.UTC()</code></strong> приймає той самий перелік параметрів, що й найдовша форма конструктора {{jsxref("Date")}}, та повертає кількість мілісекунд між 00:00:00 першого січня 1970 року та миттю у часі (за UTC), що відповідає переданим параметрам.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>year</code></dt> + <dd>Ціле число, що позначає рік. Значення в проміжку 0-99 позначає рік 20-го сторіччя (1900-1999), а всі решта значень — як є (абсолютне значення).</dd> + <dt><code>month</code></dt> + <dd>Ціле число між 0 та 11, позначає місяць.</dd> + <dt><code>day </code>{{optional_inline}}</dt> + <dd>Ціле число між 1 та 31, позначає день місяця.</dd> + <dt><code>hour </code>{{optional_inline}}</dt> + <dd>Ціле число між 0 та 23, позначає годину.</dd> + <dt><code>minute </code>{{optional_inline}}</dt> + <dd>Ціле число між 0 та 59, позначає хвилини.</dd> + <dt><code>second </code>{{optional_inline}}</dt> + <dd>Ціле число між 0 та 59, позначає секунди.</dd> + <dt><code>millisecond </code>{{optional_inline}}</dt> + <dd>Ціле число між 0 та 999, позначає мілісекунди.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Ціле число, що являє собою кількість мілісекунд між 00:00:00 першого січня 1970 року та моментом часу (за UTC), що відповідає переданим параметрам.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод приймає параметри, що позначають окремі складники дати й часу, та повертає кількість мілісекунд між північчю (00:00:00) першого січня 1970-го року за UTC та вказаною миттю у часі. Всі дати раніше за точку відліку (перше січня 1970-го року) позначаються від'ємними числами.</p> + +<p>Зауважте, що лік місяців (другий параметр метода) починається з нуля, а не з одиниці.</p> + +<p>Вказуйте повний рік від Різдва Христового; наприклад 1998. Якщо вказано значання між 0 та 99, його буде перетворено на рік 20-го сторіччя (себто 1900 + year); наприклад, 91 позначає 1991 рік.</p> + +<p>Між методом <code>UTC()</code> та конструктором <code>{{jsxref("Date")}}</code> є дві відмінності:</p> + +<ul> + <li><code>Date.UTC()</code> використовує всесвітній (UTC), а не місцевий час;</li> + <li><code>Date.UTC()</code> повертає числове значення, а не об'єкт <code>{{jsxref("Date")}}</code>.</li> +</ul> + +<div class="note"> +<p><strong>Заувага:</strong> Якщо значення одного чи декількох вказаних складників виходить за прийнятні межі (скажімо, вказано 13-й місяць чи 70 хвилин), буде скориговано суміжні складники. Себто виклик <code>Date.UTC(2013, 13, 1)</code> є тотожним до <code>Date.UTC(2014, 1, 1)</code> і так само відповідає даті <code>2014-02-01T00:00:00Z</code>. Те саме стосується інших значень: виразам <code>Date.UTC(2013, 2, 1, 0, 70)</code> та <code>Date.UTC(2013, 2, 1, 1, 10)</code> однаково відповідає дата <code>2013-03-01T01:10:00Z</code>.</p> +</div> + +<p>Позаяк <code>UTC()</code> є статичним методом класу <code>{{jsxref("Date")}}</code>, він зазвичай викликається через ім'я класу — <code>Date.UTC()</code>, а не через наявний об'єкт.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Date.UTC">Використання <code>Date.UTC()</code></h3> + +<p>Наведений приклад створює об'єкт типу <code>{{jsxref("Date")}}</code> зі складників дати й часу, що тлумачаться як UTC, а не місцевий час:</p> + +<pre class="brush:js notranslate">var independenceDateAsMs = Date.UTC(91, 7, 24, 9, 0, 0); +console.log(independenceDateAsMs); // 683024400000 + +var independenceDate = new Date(independenceDateAsMs); +console.log(independenceDate); // Sat Aug 24 1991 12:00:00 GMT+0300 (EEST) +</pre> + +<p>Такий приклад засвідчує, що дати раніше точки відліку (північ першого січня 1970-го року) позначаються від'ємними числами:</p> + +<pre class="brush: js notranslate">var ms = Date.UTC(1969, 11, 31, 23, 59, 59, 999); +console.log(ms); // -1</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Date.UTC")}}</p> + +<h2 id="Сумісність">Сумісність</h2> + +<h3 id="Відсутність_обовязкових_аргументів_Date.UTC">Відсутність обов'язкових аргументів <code>Date.UTC</code></h3> + +<p>За відсутності одного чи обох обов'язкових аргументів метод <code>Date.UTC</code> має повертати <code>{{Glossary("NaN")}}</code>. Така поведінка визначена специфікацією ECMAScript 2017. Web-рушії, які не підтримували цю поведінку, було оновлено (див. {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p> + +<pre class="brush: js notranslate">Date.UTC(); +Date.UTC(1); + +// Safari: NaN +// Chrome/Opera/V8: NaN + +// Firefox <54: non-NaN +// Firefox 54+: NaN + +// IE: non-NaN +// Edge: NaN +</pre> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.parse()")}}</li> +</ul> + +<h2 id="Дізнатись_більше">Дізнатись більше</h2> + +<ul> + <li>{{Interwiki("wikipedia", "UTC", "Всесвітній координований час (UTC)")}} у Вікіпедії</li> + <li>{{Interwiki("wikipedia", "Час_Unix", "Час Unix")}} у Вікіпедії</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/date/valueof/index.html b/files/uk/web/javascript/reference/global_objects/date/valueof/index.html new file mode 100644 index 0000000000..6a8f4682d5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/date/valueof/index.html @@ -0,0 +1,65 @@ +--- +title: Date.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf +tags: + - Date + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>valueOf()</code></strong> повертає просте значення об'єкта {{jsxref("Date")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-valueof.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.valueOf()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Кількість мілісекунд між 1 січня 1970 року 00:00:00 за UTC та наданою датою.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>valueOf()</code> повертає просте значення об'єкта {{jsxref("Date")}} у вигляді числового типу, кількість мілісекунд від опівночі 01 січня, 1970 року за UTC.</p> + +<p>Цей метод функціонально еквівалентний методу {{jsxref("Date.prototype.getTime()")}}.</p> + +<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_valueOf">Використання <code>valueOf()</code></h3> + +<pre class="brush: js notranslate">var x = new Date(56, 6, 17); +var myVar = x.valueOf(); // присвоює -424713600000 змінній myVar +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</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.Date.valueOf")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> + <li>{{jsxref("Date.prototype.getTime()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html new file mode 100644 index 0000000000..966facf100 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html @@ -0,0 +1,44 @@ +--- +title: Error.prototype.columnNumber +slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +tags: + - Error + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Властивість <code><strong>columnNumber</strong></code> містить номер стовпця у рядку файла, який спричинив помилку.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_columnNumber">Використання <code>columnNumber</code></h3> + +<pre class="brush: js">var e = new Error('Could not parse input'); +throw e; +console.log(e.columnNumber) // 0 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.columnNumber")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/error/index.html b/files/uk/web/javascript/reference/global_objects/error/error/index.html new file mode 100644 index 0000000000..4f16905d5a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/error/index.html @@ -0,0 +1,63 @@ +--- +title: Конструктор Error() +slug: Web/JavaScript/Reference/Global_Objects/Error/Error +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Error +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Конструктор <strong><code>Error</code></strong> створює об'єкт помилки.</span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>message</var></code>{{Optional_Inline}}</dt> + <dd>Зрозумілий людині опис помилки.</dd> + <dt><code><var>fileName</var></code> {{Non-standard_Inline}}{{Optional_Inline}}</dt> + <dd>Значення властивості <code><var>fileName</var></code> створеного об'єкта <code>Error</code>. За замовчуванням містить ім'я файлу, код з якого запустив конструктор <code>Error()</code>.</dd> + <dt><code><var>lineNumber</var></code> {{Non-standard_Inline}}{{Optional_Inline}}</dt> + <dd>Значення властивості <code><var>lineNumber</var></code> створеного об'єкта <code>Error</code>. За замовчуванням містить номер рядка, де відбувся виклик конструктора <code>Error()</code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Коли <code>Error</code> використовується як функція -- без {{JSxRef("Operators/new", "new")}}, він повертає об'єкт <code>Error</code>. Таким чином, простий виклик <code>Error</code> матиме той самий результат, що й конструювання об'єкта <code>Error</code> через ключове слово <code>new</code>.</p> + +<pre class="brush: js;">// це... +const x = Error('Я був створений викликом функції!') + +// ...має ту саму функціональність, що й це: +const y = new Error('Я був зконструйований ключовим словом "new"!')</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-error-constructor', 'Error constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Error.Error")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Statements/throw", "throw")}}</li> + <li>{{JSxRef("Statements/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/filename/index.html b/files/uk/web/javascript/reference/global_objects/error/filename/index.html new file mode 100644 index 0000000000..046a345326 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/filename/index.html @@ -0,0 +1,47 @@ +--- +title: Error.prototype.fileName +slug: Web/JavaScript/Reference/Global_Objects/Error/fileName +tags: + - Error + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Властивість <code><strong>fileName</strong></code> містить шлях до файлу, який спричинив помилку.</p> + +<h2 id="Опис">Опис</h2> + +<p>Ця нестандартна властивість містить шлях до файлу, який спричинив дану помилку. При виклику в контексті відладчика, наприклад, у інструментах розробника Firefox, повертається "debugger eval code".</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_fileName">Використання <code>fileName</code></h3> + +<pre class="brush: js">var e = new Error('Could not parse input'); +throw e; +// e.fileName може виглядати як "file:///C:/example.html" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.fileName")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/index.html b/files/uk/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..9df5ca1354 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,216 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Global_Objects/Error +tags: + - Error + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>Об'єкти <code>Error</code> викидаються, коли виникає помилка виконання. Об'єкт <code>Error</code> також можна використовувати як базовий об'єкт для винятків, створених користувачем. Дивіться нижче стандартні вбудовані типи помилок.</p> + +<h2 id="Опис">Опис</h2> + +<p>Помилки виконання спричиняють створення й викидання нових об'єктів <code>Error</code>.</p> + +<h3 id="Типи_помилок">Типи помилок</h3> + +<p>Окрім загального конструктора <code>Error</code>, у JavaScript існують сім інших базових конструкторів помилок. Щодо обробки винятків на боці клієнта, дивіться розділ <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements">Оператори обробки винятків</a>.</p> + +<dl> + <dt>{{jsxref("EvalError")}}</dt> + <dd>Створює екземпляр помилки, що виникає під час використання глобальної функції {{jsxref("eval", "eval()")}}.</dd> + <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt> + <dd>Створює екземпляр помилки, що виникає, коли викидається внутрішня помилка рушія JavaScript. Наприклад, "too much recursion".</dd> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Створює екземпляр помилки, що виникає, коли значення чисельної змінної або параметра знаходиться поза межами дозволеного діапазону.</dd> + <dt>{{jsxref("ReferenceError")}}</dt> + <dd>Створює екземпляр помилки, що виникає при зверненні за недійсним посиланням.</dd> + <dt>{{jsxref("SyntaxError")}}</dt> + <dd>Створює екземпляр синтаксичної помилки, яка виникає під час аналізу коду у {{jsxref("eval", "eval()")}}.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Створює екземпляр помилки, що виникає при використанні змінної або параметра невідповідного типу.</dd> + <dt>{{jsxref("URIError")}}</dt> + <dd>Створює екземпляр помилки, що виникає, коли до {{jsxref("encodeURI", "encodeURI()")}} або {{jsxref("decodeURI", "decodeURI()")}} передаються неправильні параметри.</dd> +</dl> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Error/Error">Error()</a></dt> + <dd>Створює об'єкти <code>Error</code>.</dd> +</dl> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Error.prototype</code></dt> + <dd>Дозволяє додавати властивості до екземплярів <code>Error</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Глобальний об'єкт <code>Error</code> не має власних методів, однак, він успадковує деякі методи через ланцюжок прототипів.</p> + +<h3 id="Нестандартні_методи">Нестандартні методи</h3> + +<p>{{Non-standard_Header}}</p> + +<dl> + <dt>{{JSxRef("Error.captureStackTrace()")}} {{Non-standard_Inline}}</dt> + <dd>Функція <strong>V8</strong>, яка створює властивість {{JSxRef("Error.prototype.stack", "stack")}} на екземплярі Error.</dd> +</dl> + +<h2 id="Екземпляри_Error">Екземпляри Error</h2> + +<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Опис')}}</div> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('uk/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Викидання_загальної_помилки">Викидання загальної помилки</h3> + +<p>Зазвичай ви створюєте об'єкт <code>Error</code> для того, щоб викинути його з допомогою ключового слова {{jsxref("Statements/throw", "throw")}}. Ви можете обробити помилку, використовуючи конструкцію {{jsxref("Statements/try...catch", "try...catch")}}:</p> + +<pre class="brush: js">try { + throw new Error('Ой-ой!'); +} catch (e) { + console.error(e.name + ': ' + e.message); +} +</pre> + +<h3 id="Обробка_специфічної_помилки">Обробка специфічної помилки</h3> + +<p>Ви можете обробляти лише окремі типи помилок, перевіряючи тип помилки з допомогою властивості {{jsxref("Object.prototype.constructor", "constructor")}} або, якщо ви пишете для сучасних рушіїв JavaScript, ключовим словом {{jsxref("Operators/instanceof", "instanceof")}}:</p> + +<pre class="brush: js">try { + foo.bar(); +} catch (e) { + if (e instanceof EvalError) { + console.error(e.name + ': ' + e.message); + } else if (e instanceof RangeError) { + console.error(e.name + ': ' + e.message); + } + // ... і т.д. +} +</pre> + +<h3 id="Користувацькі_типи_помилок">Користувацькі типи помилок</h3> + +<p>Ви, можливо, захочете визначити свої власні типи помилок, успадкувавши їх від <code>Error</code>, щоб мати можливість викидати новий об'єкт помилки через <code>throw new MyError()</code> та використовувати <code>instanceof MyError</code> для перевірки типу помилки у обробнику винятків. В результаті отримуємо більш чистий та послідовний код обробки помилок. </p> + +<p>Дивіться всебічну дискусію <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?"</a> на StackOverflow.</p> + +<h4 id="Користувацький_клас_помилки_у_ES6">Користувацький клас помилки у ES6</h4> + +<div class="warning"> +<p>Babel до 7-ї версії може працювати з методами класу <code>CustomError</code>, але тільки якщо вони оголошені через <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>. Інакше старі версії Babel та інші транспілятори не зможуть коректно обробити наступний код без <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">додаткових налаштувань</a>.</p> +</div> + +<div class="note"> +<p>Деякі веб-переглядачі включають конструктор <code>CustomError</code> у трасування стеку при використанні класів ES2015.</p> +</div> + +<pre class="brush: js">class CustomError extends Error { + constructor(foo = 'bar', ...params) { + // Передати залишкові параметри (в тому числі параметри розробника) до батьківського конструктора + super(...params) + + // Підтримує правильне трасування стеку в точці, де була викинута помилка (працює лише на V8) + if (Error.captureStackTrace) { + Error.captureStackTrace(this, CustomError); + } + + this.name = 'CustomError' + // Користувацька інформація для налагодження + this.foo = foo + this.date = new Date() + } +} + +try { + throw new CustomError('baz', 'bazMessage') +} catch(e) { + console.error(e.name) //CustomError + console.error(e.foo) //baz + console.error(e.message) //bazMessage + console.error(e.stack) //stacktrace +}</pre> + +<h4 id="Користувацький_обєкт_помилки_у_ES5">Користувацький об'єкт помилки у ES5</h4> + +<div class="warning"> +<p><strong>Всі</strong> веб-переглядачі включають конструктор CustomError у трасування стеку при використанні прототипного оголошення.</p> +</div> + +<pre class="brush: js">function CustomError(foo, message, fileName, lineNumber) { + var instance = new Error(message, fileName, lineNumber); + instance.name = 'CustomError'; + instance.foo = foo; + Object.setPrototypeOf(instance, Object.getPrototypeOf(this)); + if (Error.captureStackTrace) { + Error.captureStackTrace(instance, CustomError); + } + return instance; +} + +CustomError.prototype = Object.create(Error.prototype, { + constructor: { + value: Error, + enumerable: false, + writable: true, + configurable: true + } +}); + +if (Object.setPrototypeOf){ + Object.setPrototypeOf(CustomError, Error); +} else { + CustomError.__proto__ = Error; +} + + +try { + throw new CustomError('baz', 'bazMessage'); +} catch(e){ + console.error(e.name); //CustomError + console.error(e.foo); //baz + console.error(e.message); //bazMessage +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Error")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html b/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html new file mode 100644 index 0000000000..e539638c46 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/linenumber/index.html @@ -0,0 +1,56 @@ +--- +title: Error.prototype.lineNumber +slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +tags: + - Error + - JavaScript + - Prototype + - Властивість + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Властивість <code><strong>lineNumber</strong></code> містить номер рядка у файлі, що спричинив помилку.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_lineNumber">Використання <code>lineNumber</code></h3> + +<pre class="brush: js">var e = new Error('Could not parse input'); +throw e; +console.log(e.lineNumber) // 2 +</pre> + +<h3 id="Альтернативний_приклад_використання_події_error">Альтернативний приклад використання події <code>error</code> </h3> + +<pre class="brush: js">window.addEventListener('error', function(e) { + console.log(e.lineNumber); // 5 +}); +var e = new Error('Could not parse input'); +throw e; +</pre> + +<p>Це нестандартна властивість, їй бракує всебічної підтримки. Дивіться таблицю сумісності з браузерами нижче.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.lineNumber")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/message/index.html b/files/uk/web/javascript/reference/global_objects/error/message/index.html new file mode 100644 index 0000000000..318f8eb532 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/message/index.html @@ -0,0 +1,57 @@ +--- +title: Error.prototype.message +slug: Web/JavaScript/Reference/Global_Objects/Error/message +tags: + - Error + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Error/message +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>message</strong></code> - це зрозумілий людині опис помилки.</p> + +<h2 id="Опис">Опис</h2> + +<p>Ця властивість містить стислий опис помилки, якщо він був наданий. Рушій <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> активно використовує властивість <code>message</code> для винятків. Властивість <code>message</code> у поєднанні з властивістю {{jsxref("Error.prototype.name", "name")}} використовується методом {{jsxref("Error.prototype.toString()")}} для створення рядкового представлення помилки.</p> + +<p>За замовчуванням, властивість <code>message</code> є порожнім рядком, але ця поведінка може бути заміщена, наприклад, передачею повідомлення першим аргументом у {{jsxref("Error", "конструктор Error")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Викидання_користувацької_помилки">Викидання користувацької помилки</h3> + +<pre class="brush: js">var e = new Error('Could not parse input'); +// e.message дорівнює 'Could not parse input' +throw e; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.message")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype.name")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/name/index.html b/files/uk/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..bf868bf365 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,57 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Reference/Global_Objects/Error/name +tags: + - Error + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>name</strong></code> містить ім'я типу помилки. Початкове значення дорівнює "Error".</p> + +<h2 id="Опис">Опис</h2> + +<p>За замовчуванням екземплярам {{jsxref("Error")}} надається ім'я "Error". Властивість <code>name</code>, на додаток до властивості {{jsxref("Error.prototype.message", "message")}}, використовується методом {{jsxref("Error.prototype.toString()")}} для створення рядкового представлення помилки.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Викидання_користувацької_помилки">Викидання користувацької помилки</h3> + +<pre class="brush: js">var e = new Error('Malformed input'); // e.name дорівнює 'Error' + +e.name = 'ParseError'; +throw e; +// e.toString() поверне 'ParseError: Malformed input' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.name")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype.message")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/prototype/index.html b/files/uk/web/javascript/reference/global_objects/error/prototype/index.html new file mode 100644 index 0000000000..64c7b5eff5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/prototype/index.html @@ -0,0 +1,114 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Reference/Global_Objects/Error/prototype +tags: + - Error + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>Error.prototype</strong></code> є прототипом для конструктора {{jsxref("Error")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Всі екземпляри {{jsxref("Error")}} та екземпляри {{jsxref("Global_Objects/Error", "базових конструкторів помилок", "#Типи_помилок", 1)}} успадковуються від <code>Error.prototype</code>. Як в усіх функціях-конструкторах, ви можете використовувати прототип конструктора, щоб додавати властивості чи методи до усіх екземплярів, створених цим конструктором. </p> + +<h2 id="Властивості">Властивості</h2> + +<h3 id="Стандартні_властивості">Стандартні властивості</h3> + +<dl> + <dt><code>Error.prototype.constructor</code></dt> + <dd>Функція, яка створила прототип екземпляра.</dd> + <dt>{{jsxref("Error.prototype.message")}}</dt> + <dd>Повідомлення помилки.</dd> + <dt>{{jsxref("Error.prototype.name")}}</dt> + <dd>Ім'я помилки.</dd> +</dl> + +<h3 id="Спеціальні_розширення">Спеціальні розширення</h3> + +<p>{{non-standard_header}}</p> + +<h4 id="Microsoft">Microsoft</h4> + +<dl> + <dt><code><a href="/uk/docs/Web/JavaScript/Microsoft_Extensions/Error.description">Error.description</a></code></dt> + <dd>Опис помилки. Властивість схожа на {{jsxref("Error.prototype.message", "message")}}.</dd> + <dt><code><a href="/uk/docs/Web/JavaScript/Microsoft_Extensions/Error.number">Error.number</a></code></dt> + <dd>Номер помилки.</dd> +</dl> + +<h4 id="Mozilla">Mozilla</h4> + +<dl> + <dt>{{jsxref("Error.prototype.fileName")}}</dt> + <dd>Шлях до файлу, що спричинив помилку.</dd> + <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> + <dd>Номер рядка у файлі, що спричинив помилку.</dd> + <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> + <dd>Номер стовпця у файлі, де виникла помилка.</dd> + <dt>{{jsxref("Error.prototype.stack")}}</dt> + <dd>Трасування стеку.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Повертає рядок з кодом, що спричинить створення заданого об'єкта {{jsxref("Error")}}; ви можете використати це значення, щоб створити новий об'єкт. Заміщує метод {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Error.prototype.toString()")}}</dt> + <dd>Повертає рядок, що представляє заданий об'єкт. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення Реалізовано у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Error.prototype")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/stack/index.html b/files/uk/web/javascript/reference/global_objects/error/stack/index.html new file mode 100644 index 0000000000..04bb1ff642 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/stack/index.html @@ -0,0 +1,125 @@ +--- +title: Error.prototype.stack +slug: Web/JavaScript/Reference/Global_Objects/Error/Stack +tags: + - Error + - JavaScript + - Prototype + - Властивість + - нестандартна +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Нестандартна властивість <strong><code>stack</code></strong> об'єктів {{jsxref("Error")}} надає звіт про те, які функції були викликані, в якому порядку, з якого рядка файлу та з якими аргументами. Текстовий рядок стеку ведеться з останніх викликів до більш ранніх, і аж до початкового виклику у глобальній області видимості.</p> + +<h2 id="Опис">Опис</h2> + +<p>Кожний крок буде відокремлений новим рядком, де перша частина є іменем функції (якщо це не виклик з глобальної області видимості), далі через символ (@) розташування файлу (окрім випадку, коли функція є конструктором помилки під час викидання помилки), двокрапка та, якщо доступне розташування файлу, номер рядка. (Зауважте, що об'єкт {{jsxref("Error")}} також має властивості <code>fileName</code>, <code>lineNumber</code> та <code>columnNumber</code> для отримання цієї інформації про помилку, що викидається (але тільки про помилку, а не стек її викликів).)</p> + +<p>Зауважте, що це формат, який використовується у Firefox. Не існує стандартного формату. Однак, Safari 6+ та Opera 12- використовують дуже схожий формат. Переглядачі на рушії JavaScript V8 (такі, як Chrome, Opera 15+, Android Browser) та IE10+, з іншого боку, використовують інший формат (дивіться <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">архів документів MSDN щодо error.stack</a>).</p> + +<p><strong>Значення аргументів у стеку</strong>: До версії Firefox 14 після імені функції були б записані значення аргументів, перетворені у рядок, у круглих дужках, одразу перед знаком (<code>@</code>). І якщо об'єкти (або масиви) були б виведені у вигляді <code>"[object Object]"</code>, і, таким чином, не могли бути перетворені назад у справжні об'єкти, то скалярні величини можна відновити (хоча, можливо — це досі доступно у Firefox 14 — легше використовувати <code>arguments.callee.caller.arguments</code>, а ім'я функції можна отримати через <code>arguments.callee.caller.name</code>). <code>"undefined"</code> записується як <code>"(void 0)"</code>. Зауважте, що, якщо рядкові аргументи були передані з такими символами як <code>"@"</code>, <code>"("</code>, <code>")"</code> (або вони присутні в іменах файлів), на них не можна покладатись для розбиття рядка на окремі частини. Таким чином, у Firefox 14 та пізніших версіях це вже не є такою проблемою.</p> + +<p>Різні веб-переглядачі встановлюють це значення в різні моменти. Наприклад, Firefox встановлює його при створенні об'єкта {{jsxref("Error")}}, в той час як PhantomJS встановлює його лише при викиданні об'єкта {{jsxref("Error")}}, а реалізація <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">у архівних документах MSDN</a>, схоже, співпадає з PhantomJS.</p> + +<h2 id="Приклад">Приклад</h2> + +<p>Наступна HTML-розмітка демонструє використання властивості <code>stack</code> .</p> + +<pre class="brush: html"><!DOCTYPE HTML> +<meta charset="UTF-8"> +<title>Приклад трасування стеку</title> +<body> +<script> +function trace() { + try { + throw new Error('myError'); + } + catch(e) { + alert(e.stack); + } +} +function b() { + trace(); +} +function a() { + b(3, 4, '\n\n', undefined, {}); +} +a('перший виклик, першийАргумент'); +</script> +</pre> + +<p>За умови, що наведена розмітка збережена як <code>C:\example.html</code> у файловій системі Windows, вона створить діалогове вікно оповіщення з наступним текстом:</p> + +<p>Firefox 30 та новіші містять номер стовпця:</p> + +<pre><samp>trace@file:///C:/example.html:9:17 +b@file:///C:/example.html:16:13 +a@file:///C:/example.html:19:13 +@file:///C:/example.html:21:9</samp></pre> + +<p>З Firefox 14 по Firefox 29:</p> + +<pre><samp>trace@file:///C:/example.html:9 +b@file:///C:/example.html:16 +a@file:///C:/example.html:19 +@file:///C:/example.html:21</samp></pre> + +<p>Firefox 13 та старші натомість виведуть наступний текст:</p> + +<pre><samp>Error("myError")@:0 +trace()@file:///C:/example.html:9 +b(3,4,"\n\n",(void 0),[object Object])@file:///C:/example.html:16 +a("перший виклик, першийАргумент")@file:///C:/example.html:19 +@file:///C:/example.html:21</samp></pre> + +<h3 id="Стек_коду_у_eval_та_Function">Стек коду у eval() та Function()</h3> + +<p>Починаючи з Firefox 30, стек помилки коду у викликах <code>Function()</code> та <code>eval()</code> тепер створює звіти з більш детальною інформацією щодо номеру рядків та стовпчиків у цих викликах. Виклики Function позначаються записом <code>"> Function"</code>, а виклики eval записом <code>"> eval"</code>.</p> + +<pre class="brush: js">try { + new Function('throw new Error()')(); +} catch (e) { + console.log(e.stack); +} + +// anonymous@file:///C:/example.html line 7 > Function:1:1 +// @file:///C:/example.html:7:6 + + +try { + eval("eval('FAIL')"); +} catch (x) { + console.log(x.stack); +} + +// @file:///C:/example.html line 7 > eval line 1 > eval:1:1 +// @file:///C:/example.html line 7 > eval:1:1 +// @file:///C:/example.html:7:6 +</pre> + +<p>Ви також можете скористатися директивою <code>//# sourceURL</code>, щоб присвоїти ім'я коду, що передається. Дивіться також <a href="/uk/docs/Tools/Debugger/How_to/Debug_eval_sources">Відладка коду у eval() та Function()</a> у статтях на сторінці <a href="/uk/docs/Tools/Debugger">Debugger</a>, а також цей <a href="http://fitzgeraldnick.com/weblog/59/">пост</a>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Нестандартна властивість.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.stack")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/en-US/docs/Components.stack">Components.stack</a></li> + <li>External projects: <a class="link-https" href="https://github.com/csnover/TraceKit/">TraceKit</a> and <a class="link-https" href="https://github.com/eriwen/javascript-stacktrace">javascript-stacktrace</a></li> + <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx" title="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a> docs</li> + <li><a href="https://github.com/v8/v8/wiki/Stack%20Trace%20API">Overview of the V8 JavaScript stack trace API</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/tosource/index.html b/files/uk/web/javascript/reference/global_objects/error/tosource/index.html new file mode 100644 index 0000000000..7c86a836c7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/tosource/index.html @@ -0,0 +1,59 @@ +--- +title: Error.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Error/toSource +tags: + - Error + - JavaScript + - Prototype + - метод + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Метод toSource() повертає код, який може створити таку саму помилку.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>e</var>.toSource()</pre> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Текстовий рядок з кодом, що викликає помилку.</p> + +<h2 id="Опис">Опис</h2> + +<p>Виклик методу <code>toSource</code> екземпляра {{jsxref("Error")}} (або інших <em><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Error#Типи_помилок">базових типів</a></em>) поверне текстовий рядок з кодом для створення помилки. Цей рядок може бути обчислений для створення (приблизно) такого самого об'єкта. Звісно, рядок з кодом відповідає структурі конструктора {{jsxref("Error")}}. Для прикладу:</p> + +<pre class="brush: js">(new<em>name</em>(<em>message</em> ,<em>fileName</em>,<em>lineNumber</em>)) +</pre> + +<p>де наведені атрибути відповідають аналогічним властивостям екземпляра помилки.</p> + +<div class="note"> +<p><strong>Примітка:</strong> Зауважте, що властивості, які використовуються методом <code>toSource</code> при створенні текстового рядка, можуть змінюватися і не точно відображатимуть функцію, що використовувалась для створення екземпляра помилки, або ім'я файлу, або номер рядка, де виникла помилка.</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Реалізовано у JavaScript 1.3.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.toSource")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype.fileName")}}</li> + <li>{{jsxref("Error.prototype.lineNumber")}}</li> + <li>{{jsxref("Error.prototype.message")}}</li> + <li>{{jsxref("Error.prototype.name")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/error/tostring/index.html b/files/uk/web/javascript/reference/global_objects/error/tostring/index.html new file mode 100644 index 0000000000..f8e12300e8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/error/tostring/index.html @@ -0,0 +1,98 @@ +--- +title: Error.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Error/toString +tags: + - Error + - JavaScript + - метод + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toString()</strong></code> повертає текстовий рядок, що представляє заданий об'єкт {{jsxref("Error")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>e</var>.toString()</code></pre> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Текстовий рядок, що представляє об'єкт {{jsxref("Error")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("Error")}} заміщує метод {{jsxref("Object.prototype.toString()")}}, що успадковується усіма об'єктами. Його семантика наступна (за умови, що {{jsxref("Object")}} та {{jsxref("String")}} мають свої початкові значення):</p> + +<pre class="brush: js">Error.prototype.toString = function() { + 'use strict'; + + var obj = Object(this); + if (obj !== this) { + throw new TypeError(); + } + + var name = this.name; + name = (name === undefined) ? 'Error' : String(name); + + var msg = this.message; + msg = (msg === undefined) ? '' : String(msg); + + if (name === '') { + return msg; + } + if (msg === '') { + return name; + } + + return name + ': ' + msg; +}; +</pre> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var e = new Error('fatal error'); +console.log(e.toString()); // 'Error: fatal error' + +e.name = undefined; +console.log(e.toString()); // 'Error: fatal error' + +e.name = ''; +console.log(e.toString()); // 'fatal error' + +e.message = undefined; +console.log(e.toString()); // '' + +e.name = 'привіт'; +console.log(e.toString()); // 'привіт' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Error.toString")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/eval/index.html b/files/uk/web/javascript/reference/global_objects/eval/index.html new file mode 100644 index 0000000000..8f9fae1236 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/eval/index.html @@ -0,0 +1,323 @@ +--- +title: eval() +slug: Web/JavaScript/Reference/Global_Objects/eval +tags: + - JavaScript + - eval + - Обчислення JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Функція <code><strong>eval()</strong></code> обчислює код JavaScript, представлений у вигляді рядка.</p> + +<div class="blockIndicator warning"> +<p><strong>Застереження:</strong> Виконання коду JavaScript з текстового рядка - це неймовірний ризик для безпеки. Зловмиснику занадто легко запустити який завгодно код, коли ви використовуєте <code>eval()</code>. Дивіться <a href="#Ніколи_не_використовуйте_eval!">Ніколи не використовуйте eval()!</a> нижче.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>eval(<em>string</em>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>string</code></dt> + <dd>Рядок, що відображає вираз, інструкцію чи послідовність інструкцій JavaScript. Вираз може містити змінні та властивості існуючих об'єктів.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Значення, отримане в результаті обчислення наданого коду. Якщо значення порожнє, повертається {{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>eval()</code> є методом глобального об'єкта.</p> + +<p>Аргументом функції <code>eval()</code> є рядок. Якщо у рядку представлений вираз, <code>eval()</code> обчислює цей вираз. Якщо у аргументі представлено одну чи більше інструкцій JavaScript, <code>eval()</code> обчислює ці інструкції. Не викликайте <code>eval()</code> для обчислення арифметичного виразу; JavaScript обчислює арифметичні вирази автоматично.</p> + +<p>Якщо ви створили арифметичний вираз у вигляді рядка, ви можете скористатись <code>eval()</code>, щоб обчислити його пізніше. Припустимо, ви маєте змінну <code>x</code>. Ви можете відкласти обчислення виразу, що містить <code>x</code>, присвоївши рядкове значення виразу, скажімо, "<code>3 * x + 2</code>", змінній, а потім викликати <code>eval()</code> пізніше у скрипті.</p> + +<p>Якщо аргумент <code>eval()</code> не є рядком, <code>eval()</code> повертає аргумент без змін. У наступному прикладі вказано конструктор <code>String</code>, і <code>eval()</code> повертає об'єкт <code>String</code>, а не обчислений рядок.</p> + +<pre class="brush:js">eval(new String('2 + 2')); // повертає об'єкт String, який містить "2 + 2" +eval('2 + 2'); // повертає 4 +</pre> + +<p>Ви можете обійти це обмеження загальним методом, використавши <code>toString()</code>.</p> + +<pre class="brush:js">var expression = new String('2 + 2'); +eval(expression.toString()); // повертає 4 +</pre> + +<p>Якщо ви використовуєте функцію <code>eval</code> <em>опосередковано</em>, викликаючи її через інше посилання, ніж <code>eval</code>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">згідно ECMAScript 5</a>, вона працює у глобальній області видимості, а не у локальній. Це означає, для прикладу, що оголошення функції створюють глобальні функції, і що обчислюваний код не має доступу до локальних змінних у області видимості, з якої він викликається.</p> + +<pre class="brush:js">function test() { + var x = 2, y = 4; + console.log(eval('x + y')); // Прямий виклик, використовує локальну область видимості, результат 6 + var geval = eval; // еквівалентно виклику eval у глобальній області видимості + console.log(geval('x + y')); // Непрямий виклик, використовує глобальну область видимості, викидає ReferenceError, бо `x` undefined + (0, eval)('x + y'); // інший приклад непрямого виклику +} +</pre> + +<h2 id="Ніколи_не_використовуйте_eval!">Ніколи не використовуйте <code>eval</code>!</h2> + +<p><code>eval()</code> - небезпечна функція, яка виконує переданий код з привілеями того, хто викликає функцію. Якщо ви запустите <code>eval()</code> з рядком, який міг бути уражений зловмисником, ви можете в результаті запустити шкідливий код на машині користувача з дозволами вашої сторінки / розширення. Ще важливіше, що код третьої сторони бачить область видимості, у якій було запущено <code>eval()</code>, що може призвести до можливих атак, способами, до яких схожий {{jsxref("Global_Objects/Function", "конструктор Function")}} не сприйнятливий.</p> + +<p>Також метод <code>eval()</code> повільніший, ніж його альтернативи, оскільки йому доводиться викликати інтерпретатор JS, в той час, як багато інших конструкцій оптимізуються сучасними рушіями JS.</p> + +<p>Додатково, сучасні інтерпретатори JavaScript перетворюють код JavaScript на машинний код. Це означає, що будь-яке йменування змінних знищується. Тому будь-яке використання eval змусить переглядач виконувати довгі, затратні пошуки імен змінних, щоб зрозуміти, де ця змінна існує у машинному коді, та присвоїти їй значення. До того ж, до змінної можуть бути внесені нові зміни через <code>eval()</code>, наприклад, зміна типу цієї змінної, змушуючи переглядач переобчислювати весь згенерований машинний код, щоб надолужити зміни. Однак, на щастя, існує дуже гарна альтернатива eval: просто використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function">window.Function</a>. Приклад того, як можна перетворити код з використанням шкідливого <code>eval()</code> на код з використанням <code>Function</code><code>()</code>, дивіться нижче.</p> + +<p>Поганий код з eval:</p> + +<pre class="brush:js">function looseJsonParse(obj){ + return eval(obj); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>Покращений код без eval:</p> + +<pre class="brush:js">function looseJsonParse(obj){ + return Function('"use strict";return (' + obj + ')')(); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>Порівнюючи ці два фрагменти коду, можна подумати, що вони працюють однаково, але не забувайте: код з eval набагато повільніший. Зверніть увагу на <code>c: new Date()</code> у обчислюваному об'єкті. У функції без eval об'єкт обчислюється у глобальній області видимості, тому переглядач може спокійно припускати, що <code>Date</code> посилається на <code>window.Date</code>, а не на локальну змінну на ім'я <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Date</span></font>. Але у коді, що використовує <code>eval()</code>, переглядач не може цього припускати, бо що, як ваш код виглядає наступним чином:</p> + +<pre class="brush:js">function Date(n){ + return ["Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота","Неділя"][n%7 || 0]; +} +function looseJsonParse(obj){ + return eval(obj); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>Таким чином, у версії з <code>eval()</code> переглядач змушений запускати затратний пошук, щоб перевірити, чи немає десь локальних змінних на ім'я <code>Date()</code>. Це страшенно неефективно, у порівнянні з <code>Function()</code>.</p> + +<p>У цих обставинах, що як вам дійсно потрібно, щоб функція <code>Date</code> могла викликатися з коду всередині <code>Function()</code>? Чи доведеться відступити та повернутися до <code>eval()</code>? Ні! Нізащо. Натомість, спробуйте наступний підхід.</p> + +<pre class="brush:js">function Date(n){ + return ["Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота","Неділя"][n%7 || 0]; +} +function runCodeWithDateFunction(obj){ + return Function('"use strict";return (' + obj + ')')()( + Date + ); +} +console.log(runCodeWithDateFunction( + "function(Date){ return Date(5) }" +)) +</pre> + +<p>Наведений код може виглядати неефективно повільним через потрійну вкладеність функції, але проаналізуємо переваги наведеного вище методу:</p> + +<ul> + <li>Він дозволяє мініфікувати код у рядку, переданому до <code>runCodeWithDateFunction</code>.</li> + <li>Затрати на виклик функції мінімальні, що разом з набагато меншим за розміром кодом є однозначною перевагою</li> + <li><code>Function()</code> легше дозволяє покращити продуктивність вашого коду через <code>"use strict";</code></li> + <li>Код не використовує <code>eval()</code>, що робить його на порядки швидшим.</li> +</ul> + +<p>І нарешті, розглянемо мініфікацію. Використовуючи <code>Function()</code>, як це показано вище, ви можете мініфікувати рядок коду, що передається у <code>runCodeWithDateFunction</code> набагато ефективніше, тому що імена аргументів функції також можуть бути мініфіковані, як показано у мініфікованому коді нижче.</p> + +<pre class="brush:js">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){ +return"Понеділок Вівторок Середа Четвер П'ятниця Субота Неділя".split(" ")[a%7||0]}));</pre> + +<p>Існують також інші безпечніші (та швидші!) альтернативи <code>eval()</code> чи <code>Function()</code> для типових випадків використання.</p> + +<h3 id="Звернення_до_властивостей">Звернення до властивостей</h3> + +<p>Не слід використовувати <code>eval()</code> для перетворення імен властивостей на властивості. Розглянемо наступний приклад, де властивість об'єкта, до якої звертаються, невідома до початку виконання коду. Це можна зробити через eval:</p> + +<pre class="brush:js">var obj = { a: 20, b: 30 }; +var propName = getPropName(); // повертає "a" або "b" + +eval( 'var result = obj.' + propName ); +</pre> + +<p>Однак, метод <code>eval()</code> тут не обов'язковий. Насправді, його використання тут не рекомендоване. Натомість, скористайтесь <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">зверненням до властивостей</a>, це набагато швидше та безпечніше:</p> + +<pre class="brush:js">var obj = { a: 20, b: 30 }; +var propName = getPropName(); // повертає "a" або "b" +var result = obj[ propName ]; // obj[ "a" ] - це те саме, що й obj.a</pre> + +<p>Ви навіть можете скористатись цим методом, щоб звернутись до вкладених властивостей. З <code>eval()</code> це виглядало б наступним чином:</p> + +<pre class="brush:js">var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // повертає, наприклад, "a.b.c" + +eval( 'var result = obj.' + propPath ); +</pre> + +<p>Уникнути <code>eval()</code> тут можна, розбивши шлях до властивості на масив та пройшовши у циклі через властивості:</p> + +<pre class="brush:js">function getDescendantProp(obj, desc) { + var arr = desc.split('.'); + while (arr.length) { + obj = obj[arr.shift()]; + } + return obj; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // повертає, наприклад, "a.b.c" +var result = getDescendantProp(obj, propPath);</pre> + +<p>Призначення властивості таким чином працює схоже:</p> + +<pre class="brush:js">function setDescendantProp(obj, desc, value) { + var arr = desc.split('.'); + while (arr.length > 1) { + obj = obj[arr.shift()]; + } + return obj[arr[0]] = value; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // повертає, наприклад, "a.b.c" +var result = setDescendantProp(obj, propPath, 1); // obj.a.b.c тепер дорівнюватиме 1</pre> + +<h3 id="Використовуйте_функції_замість_обчислення_фрагментів_коду">Використовуйте функції замість обчислення фрагментів коду</h3> + +<p>JavaScript має <a class="external" href="https://uk.wikipedia.org/wiki/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%8F_%D0%BF%D0%B5%D1%80%D1%88%D0%BE%D0%B3%D0%BE_%D0%BA%D0%BB%D0%B0%D1%81%D1%83" title="https://uk.wikipedia.org/wiki/Функція_першого_класу">функції першого класу</a>, це означає, що ви можете передавати функції як аргументи до інших API, зберігати їх у змінних та властивостях об'єктів, і так далі. Багато API об'єктів DOM створені з метою такого використання, тому ви можете (і маєте) написати:</p> + +<pre class="brush: js">// замість setTimeout(" ... ", 1000) використовуйте: +setTimeout(function() { ... }, 1000); + +// замість elt.setAttribute("onclick", "...") використовуйте: +elt.addEventListener('click', function() { ... } , false); </pre> + +<p><a href="/uk/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">Замикання</a> також корисні як спосіб створення параметризованих функцій без поєднання рядків.</p> + +<h3 id="Розбір_JSON_перетворення_рядків_на_обєкти_JavaScript">Розбір JSON (перетворення рядків на об'єкти JavaScript)</h3> + +<p>Якщо рядок, для якого ви викликаєте <code>eval()</code>, містить дані (наприклад, масив: <code>"[1, 2, 3]"</code>), як протилежність коду, вам слід розглянути перехід на <a href="/uk/docs/Glossary/JSON" title="JSON">JSON</a>, це дозволить рядку використовувати підмножину синтаксису JavaScript для представлення даних. Дивіться також <a href="/uk/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Завантаження JSON та JavaScript у розширеннях</a>.</p> + +<p>Зауважте, що, оскільки синтаксис JSON є обмеженим, у порівнянні з синтаксисом JavaScript, багато з чинних літералів JavaScript не розбиратимуться як JSON. Наприклад, прикінцеві коми не дозволені у JSON, а імена властивостей (ключі) у об'єкті повинні бути заключені у лапки. Обов'язково використовуйте серіалізатор JSON для створення рядків, які пізніше будуть розібрані як JSON.</p> + +<h3 id="Передавайте_дані_замість_коду">Передавайте дані замість коду</h3> + +<p>Наприклад, розширення, створене для збирання вмісту веб-сторінок, може мати правила збирання, визначені у <a href="/uk/docs/Web/XPath" title="XPath">XPath</a>, замість коду JavaScript.</p> + +<h3 id="Запускайте_код_з_обмеженими_привілеями">Запускайте код з обмеженими привілеями</h3> + +<p>Якщо ви мусите запускати код, розгляньте варіант запуску з обмеженими привілеями. Ця порада стосується здебільшого розширень та XUL-застосунків, які можуть використовувати для цього <a href="/uk/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_eval">Використання <code>eval</code></h3> + +<p>У наступному коді обидві інструкції, які містять <code>eval()</code>, повертають 42. Перша обчислює рядок "<code>x + y + 1</code>"; друга обчислює рядок "<code>42</code>".</p> + +<pre class="brush:js">var x = 2; +var y = 39; +var z = '42'; +eval('x + y + 1'); // повертає 42 +eval(z); // повертає 42 +</pre> + +<h3 id="Використання_eval_для_обчислення_рядка_інструкцій_JavaScript">Використання <code>eval</code> для обчислення рядка інструкцій JavaScript</h3> + +<p>Наступний приклад використовує <code>eval()</code>, щоб обчислити рядок <code>str</code>. Цей рядок складається з інструкцій JavaScript, які виводять повідомлення та присвоюють змінній <code>z</code> значення 42, якщо <code>x</code> дорівнює п'яти, інакше присвоюють <code>z</code> значення 0. Коли виконується друга інструкція, <code>eval()</code> спричинить виконання цих інструкцій, а також обчислить набір інструкцій та поверне значення, що було присвоєне <code>z</code>.</p> + +<pre class="brush:js">var x = 5; +var str = "if (x == 5) {console.log('z дорівнює 42'); z = 42;} else z = 0;"; + +console.log('z дорівнює ', eval(str));</pre> + +<p>Якщо ви визначаєте декілька значень, то повертається останнє.</p> + +<pre class="brush:js">var x = 5; +var str = "if (x == 5) {console.log('z дорівнює 42'); z = 42; x = 420; } else z = 0;"; + +console.log('x дорівнює ', eval(str)); // z дорівнює 42 x дорівнює 420 +</pre> + +<h3 id="Останній_вираз_обчислюється">Останній вираз обчислюється</h3> + +<p><code>eval()</code> повертає значення останнього обчисленого виразу.</p> + +<pre class="brush:js">var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }'; +var a = true; +var b = eval(str); // повертає 2 + +console.log('b дорівнює : ' + b); + +a = false; +b = eval(str); // повертає 3 + +console.log('b дорівнює : ' + b);</pre> + +<h3 id="eval_як_функція_визначення_рядка_потребує_та_на_початку_та_в_кінці"><code>eval</code> як функція визначення рядка, потребує "(" та ")" на початку та в кінці</h3> + +<pre class="brush:js">var fctStr1 = 'function a() {}' +var fctStr2 = '(function a() {})' +var fct1 = eval(fctStr1) // повертає undefined +var fct2 = eval(fctStr2) // повертає функцію +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.eval")}}</p> + +<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2> + +<ul> + <li>Історично <code>eval()</code> мав необов'язковий другий аргумент, що вказував об'єкт, в контексті якого мало виконуватись обчислення. Цей аргумент був нестандартним, і був остаточно прибраний з Firefox 4. Дивіться {{bug(531675)}}.</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> + <li><a href="/uk/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: Using eval in content scripts</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/evalerror/index.html b/files/uk/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..0a6f515a8e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,98 @@ +--- +title: EvalError +slug: Web/JavaScript/Reference/Global_Objects/EvalError +tags: + - Error + - EvalError + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <strong><code>EvalError</code></strong> позначає помилку, пов'язану з використанням глобальної функції {{jsxref("Global_Objects/eval", "eval()")}}. Цей виняток більше не викидається у JavaScript, однак, об'єкт <code>EvalError</code> залишено для сумісності.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new EvalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd> +</dl> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>EvalError.prototype</code></dt> + <dd>Дозволяє додавати властивості до об'єктів <code>EvalError</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Сам <code>EvalError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p> + +<h2 id="Екземпляри_EvalError">Екземпляри EvalError</h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<p><code>EvalError</code> не використовується у нинішній специфікації ECMAScript, а отже, не викидатиметься під час виконання. Однак, сам об'єкт залишається для зворотної сумісності з більш ранніми версіями специфікації.</p> + +<h3 id="Створення_EvalError">Створення EvalError</h3> + +<pre class="brush: js">try { + throw new EvalError('Привіт', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof EvalError); // true + console.log(e.message); // "Привіт" + console.log(e.name); // "EvalError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.EvalError")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html new file mode 100644 index 0000000000..e7f4230c60 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html @@ -0,0 +1,89 @@ +--- +title: EvalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +tags: + - Error + - EvalError + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>EvalError.prototype</strong></code> є прототипом для конструктора {{jsxref("EvalError")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Всі екземпляри {{jsxref("EvalError")}} успадковуються від <code>EvalError.prototype</code>. Ви можете використати прототип, щоб додати властивості та методи до усіх екземплярів.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>EvalError.prototype.constructor</code></dt> + <dd>Функція, яка створила прототип об'єкта.</dd> + <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> + <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("EvalError")}} повинен мати власну властивість <code>message</code>, у <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він успадковує {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> + <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> + <dd>Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> + <dd>Номер рядка файлу, в якому виникла помилка. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> + <dd>Номер стовпця у рядку, де виникла помилка. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> + <dd>Трасування стеку. Успадковано від {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча прототип {{jsxref("EvalError")}} не містить власних методів, екземпляри {{jsxref("EvalError")}} успадковують деякі методи через ланцюжок прототипів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.EvalError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/apply/index.html b/files/uk/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..78183d8102 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,239 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +tags: + - Function + - JavaScript + - Довідка + - Функція + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>apply()</strong></code> викликає функцію із заданим значенням <code>this</code> та аргументами, переданими у вигляді масиву (або <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">подібного до масиву об'єкта</a>).</p> + +<div class="note"> +<p><strong>Заувага:</strong> Хоча синтаксис цієї функції є майже ідентичним до синтаксису {{jsxref("Function.call", "call()")}}, фундаментальна відмінність полягає в тому, що метод <code>call()</code> приймає <strong>список аргументів</strong>, тоді як метод <code>apply()</code> приймає <strong>єдиний масив аргументів</strong>.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Коли першим аргументом є undefined або null, схожий результат можна отримати за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">оператора розпакування</a> масивів.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>function</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Значення <code>this</code>, передане для виклику у функцію <em><code>function</code></em>. Зазначте, що <code>this</code> може не бути фактичним значенням, яке бачить метод: якщо метод є функцією не у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}, {{jsxref("null")}} та {{jsxref("undefined")}} будуть замінені глобальним об'єктом, а прості значення будуть запаковані. Цей аргумент є обов'язковим.</dd> + <dt><code>argsArray</code></dt> + <dd>Необов'язковий. Подібний до масиву об'єкт, що визначає аргументи, з якими функція має бути викликана, або {{jsxref("null")}} чи {{jsxref("undefined")}}, якщо жодних аргументів не має бути передано у функцію. Починаючи з ECMAScript 5, ці аргументи можуть бути загальними подібними до масиву об'єктами замість масиву. Дивіться нижче інформацію щодо {{anch("Сумісність_з_веб-переглядачами", "сумісності з веб-переглядачами")}}.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Результат виконання функції з вказаним значенням <code><strong>this</strong></code> та аргументами.</p> + +<h2 id="Опис">Опис</h2> + +<p>Ви можете присвоїти інший об'єкт <code>this</code>, коли викликаєте існуючу функцію. <code>this</code> посилається на поточний об'єкт, з якого здійснюється виклик. З <code>apply</code> ви можете написати метод один раз, а потім успадковувати його в іншому об'єкті, без необхідності переписувати метод для нового об'єкта.</p> + +<p>Метод <code>apply</code> дуже схожий на {{jsxref("Function.call", "call()")}}, за виключенням типу аргументів, які він підтримує. Ви використовуєте масив аргументів замість списку аргументів (параметрів). З методом <code>apply</code> ви також можете використовувати літерал масиву, для прикладу, <code><em>func</em>.apply(this, ['їсти', 'банани'])</code>, або об'єкт {{jsxref("Array")}}, для прикладу, <code><em>func</em>.apply(this, new Array('їсти', 'банани'))</code>.</p> + +<p>Ви також можете використати об'єкт {{jsxref("Functions/arguments", "arguments")}} як параметр <code>argsArray</code>. <code>arguments</code> - локальна змінна функції. Вона може використовуватись для всіх не заданих аргументів об'єкта, який викликається. Таким чином, вам не потрібно знати аргументи об'єкта, що викликається, коли ви використовуєте метод <code>apply</code>. Ви можете скористатись об'єктом <code>arguments,</code> щоб передати усі аргументи. Далі об'єкт, який викликається, відповідає за обробку аргументів.</p> + +<p>З появою 5-ї версії ECMAScript, ви також можете використовувати будь-який подібний до масиву об'єкт, отже, на практиці це означає, що він має поле <code>length</code> та цілі числа в якості параметрів у діапазоні <code>(0...length-1)</code>. Як приклад, ви тепер можете використати {{domxref("NodeList")}} або власноруч написаний об'єкт виду <code>{ 'length': 2, '0': 'їсти', '1': 'банани' }</code>.</p> + +<div class="note"> +<p>Чимало більш старих переглядачів, в тому числі Chrome <17 та Internet Explorer <9, не приймають подібні до масиву об'єкти і викидатимуть виняток.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_apply_для_додавання_масиву_до_іншого_масиву">Використання <code>apply</code> для додавання масиву до іншого масиву</h3> + +<p>Ми можемо використати метод <code>push</code>, щоб додати елемент до масиву. І, оскільки <code>push</code> приймає змінну кількість аргументів, ми також можемо додати кілька елементів за раз. Але, якщо ми передамо у <code>push</code> масив, він додасть, власне, масив єдиним елементом, замість того, щоб додати окремі елементи, і ми отримаємо масив всередині масиву. Що, як ми не цього хотіли? Метод <code>concat</code> має поведінку, яка нам потрібна в цьому випадку, але він не додає елементи у існуючий масив, а створює та повертає новий масив. Але ми хотіли додати елементи у існуючий масив... Що ж робити? Писати цикл? Звісно, ні.</p> + +<p>На допомогу приходить <code>apply</code>!</p> + +<pre class="brush: js">var array = ['a', 'b']; +var elements = [0, 1, 2]; +array.push.apply(array, elements); +console.info(array); // ["a", "b", 0, 1, 2]</pre> + +<div class="note"></div> + +<h3 id="Використання_apply_та_вбудовані_функції">Використання <code>apply</code> та вбудовані функції</h3> + +<p>Розумне використання методу <code>apply</code> дозволяє використовувати вбудовані функції для деяких задач, які в іншому випадку ймовірно були б написані циклічним обходом значень масиву. Як приклад, ми збираємося використати <code>Math.max</code>/<code>Math.min,</code> щоб знайти максимальне/мінімальне значення масиву.</p> + +<pre class="brush: js">// мінімальне/максимальне число в масиві +var numbers = [5, 6, 2, 3, 7]; + +// використання Math.min/Math.max з apply +var max = Math.max.apply(null, numbers); +// Це практично дорівнює Math.max(numbers[0], ...) +// або Math.max(5, 6, ...) + +var min = Math.min.apply(null, numbers); + +// в порівнянні з простим алгоритмом на основі цикла +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>Але будьте обережні: використовуючи <code>apply</code> таким способом, ви ризикуєте перевищити ліміт кількості аргументів рушія JavaScript. Наслідки застосування функції, в якій забагато аргументів (більше, ніж десятки тисяч аргументів), різняться між різними рушіями (JavaScriptCore має жорстко закодований <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">ліміт аргументів 65536</a>) тому, що ліміт (а насправді, навіть природа будь-якої поведінки надмірно великого стеку) є невизначеним. Деякі рушії викинуть виняток. Ще гірше, інші довільно обмежать кількість аргументів, які будуть насправді передані до застосованої функції. Для ілюстрації останнього випадку: якби такий рушій мав обмеження у чотири аргументи (справжні ліміти, звісно, значно більші), то замість цілого масиву у наведеному вище випадку до <code>apply</code> були б передані аргументи <code>5, 6, 2, 3</code>. </p> + +<p>Якщо ваш масив значень може вирости до десятків тисяч значень, використовуйте гібридну стратегію: застосовуйте вашу функцію до фрагментів масиву, по одному за раз:</p> + +<pre class="brush: js">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, + arr.slice(i, Math.min(i+QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]); + +</pre> + +<h3 id="Використання_методу_apply_для_ланцюгового_виконання_конструкторів">Використання методу <code>apply</code> для ланцюгового виконання конструкторів</h3> + +<p>Ви можете використовувати <code>apply</code> для ланцюгового виконання {{jsxref("Operators/new", "конструкторів", "", 1)}} до об'єкта, подібно до Java. У наступному прикладі ми створимо глобальний метод {{jsxref("Function")}} під назвою <code>construct</code>, котрий дозволить використовувати подібний до масиву об'єкт з конструктором замість списку аргументів.</p> + +<pre class="brush: js">Function.prototype.construct = function(aArgs) { + var oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<div class="note"> +<p><strong>Заувага:</strong> Метод <code>Object.create(),</code> що використовується вище, є відносно новим. В якості альтернативних методів, будь ласка, розгляньте наступні підходи:</p> + +<p>Використання {{jsxref("Object/proto", "Object.__proto__")}}:</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var oNew = {}; + oNew.__proto__ = this.prototype; + this.apply(oNew, aArgs); + return oNew; +};</pre> + +<p><a href="/uk/docs/Web/JavaScript/Closures">Замикання</a>:</p> + +<pre class="brush: js">Function.prototype.construct = function(aArgs) { + var fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> + +<p>Конструктор {{jsxref("Function")}}:</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var fNewConstr = new Function(""); + fNewConstr.prototype = this.prototype; + var oNew = new fNewConstr(); + this.apply(oNew, aArgs); + return oNew; +};</pre> +</div> + +<p>Приклад використання:</p> + +<pre class="brush: js">function MyConstructor() { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +var myArray = [4, 'Всім привіт!', false]; +var myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // виведе 'Всім привіт!' +console.log(myInstance instanceof MyConstructor); // виведе 'true' +console.log(myInstance.constructor); // виведе 'MyConstructor' +</pre> + +<div class="note"> +<p><strong>Заувага:</strong> Цей не рідний метод <code>Function.construct</code> не буде працювати з деякими вбудованими конструкторами; такими, як {{jsxref("Date")}}, наприклад. У таких випадках, ви маєте використовувати метод {{jsxref("Function.prototype.bind")}} (наприклад, уявіть собі такий масив, що використовується з конструктором {{jsxref("Global_Objects/Date", "Date")}}: <code>[2012, 11, 4]</code>; у такому випадку вам доведеться написати щось по типу: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code>. Це не найкращий підхід, і, мабуть, не варто це робити у будь-якому виробничому середовищі).</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Function.apply")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Функції та область видимості функції", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Оператор розпакування</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/arguments/index.html b/files/uk/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..009473b14d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,92 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Global_Objects/Function/arguments +tags: + - Function + - JavaScript + - arguments + - Властивість + - застаріла +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Властивість <code><strong><em>function</em>.arguments</strong></code> посилається на подібний до масиву об'єкт, який відображає аргументи, передані у функцію. Використовуйте натомість просту змінну {{jsxref("Functions/arguments", "arguments")}}. Ця властивість заборонена у строгому режимі.</p> + +<h2 id="Опис">Опис</h2> + +<p>Синтаксис <code><em>function</em>.arguments</code> є застарілим. Рекомендуємий спосіб звернутися до об'єкта {{jsxref("Functions/arguments", "arguments")}}, що доступний всередині функцій, це просто скористатись змінною {{jsxref("Functions/arguments", "arguments")}}.</p> + +<p>У випадку рекурсії, тобто, якщо функція <code>f</code> з'являється кілька разів у стеку викликів, значення <code>f.arguments</code> відображає аргументи, що відповідають останньому виклику функції.</p> + +<p>Значення властивості arguments зазвичай дорівнює null, якщо немає незавершеного виклику функції у процесі (тобто, функція була викликана, але досі не повернула значення).</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">function f(n) { g(n - 1); } + +function g(n) { + console.log('до: ' + g.arguments[0]); + if (n > 0) { f(n); } + console.log('після: ' + g.arguments[0]); +} + +f(2); + +console.log('повернено: ' + g.arguments); + +// Результат + +// до: 1 +// до: 0 +// після: 0 +// після: 1 +// повернено: null +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0. Застаріло через {{jsxref("Functions/arguments", "arguments")}} у ES3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.arguments")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Об'єкт {{jsxref("Functions/arguments", "arguments")}}</li> + <li>{{jsxref("Functions", "Функції та область видимості функції", "", 1)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/arity/index.html b/files/uk/web/javascript/reference/global_objects/function/arity/index.html new file mode 100644 index 0000000000..bef46fef72 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/arity/index.html @@ -0,0 +1,31 @@ +--- +title: Function.arity +slug: Web/JavaScript/Reference/Global_Objects/Function/arity +tags: + - JavaScript + - Властивість + - Функція + - застаріла +translation_of: Archive/Web/JavaScript/Function.arity +--- +<div>{{JSRef}}{{Obsolete_Header}}</div> + +<p class="note">Властивість <code><strong>arity</strong></code> повертала кількість аргументів, очікуваних функцією, однак, вона більше не існує та була замінена властивістю {{jsxref("Function.prototype.length")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Реалізовано JavaScript 1.2. Застаріла у JavaScript 1.4.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.arity")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Function.prototype.length")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/bind/index.html b/files/uk/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..9270baeac2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,329 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Global_Objects/Function/bind +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Method + - Зв'язування + - Функція + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>bind()</strong></code> створює нову функцію, яка в момент виклику має певне присвоєне значення <code>this</code>, а також задану послідовність аргументів, що передують будь-яким аргументам, переданим під час виклику нової функції.</p> + +<p>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>function</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Значення, що передаватиметься як параметр <code>this</code> до цільової функції, коли зв'язана функція викликається. Це значення ігнорується, якщо зв'язана функція утворена викликом оператора {{jsxref("Operators/new", "new")}}. При використанні <code>bind</code> для створення функції (що подається для зворотного виклику) всередині <code>setTimeout</code>, будь-яке примітивне значення, що передається в якості <code>thisArg</code>, перетворюється на об'єкт. Якщо у <code>bind</code> не було передано жодних аргументів, <code>this</code> області видимості виконання передається як <code>thisArg</code> для нової функції.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Аргументи, які будуть передувати аргументам, що були передані у зв'язану функцію, під час виклику цільової функції.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Копія заданої функції із заданим значенням <strong><code>this</code></strong> та початковими аргументами.</p> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>bind()</code> створює нову зв'язану функцію, яка є екзотичним об'єктом-функцією (термін з ECMAScript 2015), що огортає початкову функцію. Загалом, результатом виклику зв'язаної функції є виконання функції, яку вона огортає.</p> + +<p>Зв'язана функція має наступні внутрішні властивості:</p> + +<ul> + <li><strong><code>[[BoundTargetFunction]]</code> </strong>- обгорнена функція;</li> + <li><code><strong>[[BoundThis]]</strong></code> - значення, яке завжди передається як значення <code>this</code><strong>,</strong> коли викликається обгорнена функція.</li> + <li><code><strong>[[BoundArguments]]</strong></code> - список значень, елементи якого використовуються як перші аргументи будь-якого виклику обгорненої функції.</li> + <li><code><strong>[[Call]]</strong></code> - виконує код, що пов'язаний з цим об'єктом. Запускається виразом виклику функції. Аргументами внутрішнього методу є значення <strong>this</strong> та список, що містить аргументи, передані у функцію виразом виклику.</li> +</ul> + +<p>Коли зв'язана функція викликається, вона викликає внутрішній метод <code>[[Call]]</code> на об'єкті <code>[[BoundTargetFunction]]</code> з наступними аргументами <code>Call(<em>boundThis</em>, <em>args</em>)</code>. Де <em><code>boundThis</code></em> - це <code>[[BoundThis]]</code>, а <code>args</code> - це <code>[[BoundArguments]]</code>, за якими йдуть аргументи, передані викликом функції.</p> + +<p>Зв'язана функція може також бути створена за допомогою оператора {{jsxref("Operators/new", "new")}}: це працює так, якби замість неї створювалася б цільова функція. Передане значення <code>this</code> ігнорується, а передані аргументи передаються до імітованої функції.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_звязаної_функції">Створення зв'язаної функції</h3> + +<p>Найпростіше використання методу <code>bind()</code> - це зробити функцію, яка, незалежно від того, як вона викликається, буде викликатися з конкретним значенням <code>this</code>. Загальною помилкою початківців у JavaScript є витягнути метод з об'єкта, пізніше викликати цю функцію і очікувати, що вона буде використовувати початковий об'єкт в якості <code>this</code> (наприклад, використовуючи цей метод в коді на основі зворотних викликів). Однак, початковий об'єкт, якщо його не відслідковувати, зазвичай, втрачається. Створення зв'язаної функції з функції, яка використовує початковий об'єкт, елегантно вирішує цю проблему:</p> + +<pre class="brush: js">this.x = 9; // тут значення this посилається на глобальний об'єкт переглядача "window" +var module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); // 81 + +var retrieveX = module.getX; +retrieveX(); +// вертає 9 - Функція виконується в глобальній області видимості + +// Створюємо нову функцію, прив'язуючи 'this' до об'єкта module +// Програмісти-новачки можуть переплутати +// глобальну змінну var x з властивістю x об'єкта module +var boundGetX = retrieveX.bind(module); +boundGetX(); // 81 +</pre> + +<h3 id="Частково_застосовані_функції">Частково застосовані функції</h3> + +<p>Наступне найпростіше використання методу <code>bind()</code> - це зробити функцію з наперед визначеними початковими аргументами. Ці аргументи (якщо вони є) вказуються після наданого значення <code>this</code> і після цього передаються на початку списку аргументів, які передаються в дану функцію. За ними йдуть аргументи, передані у зв'язану функцію під час виклику.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +function addArguments(arg1, arg2) { + return arg1 + arg2 +} + +var list1 = list(1, 2, 3); // [1, 2, 3] + +var result1 = addArguments(1, 2); // 3 + +// Створити функцію з попередньо заданим першим аргументом +var leadingThirtysevenList = list.bind(null, 37); + +// Створити функцію з попередньо заданим першим аргументом. +var addThirtySeven = addArguments.bind(null, 37); + +var list2 = leadingThirtysevenList(); +// [37] + +var list3 = leadingThirtysevenList(1, 2, 3); +// [37, 1, 2, 3] + +var result2 = addThirtySeven(5); +// 37 + 5 = 42 + +var result3 = addThirtySeven(5, 10); +// 37 + 5 = 42, другий аргумент ігнорується</pre> + +<h3 id="З_setTimeout">З <code>setTimeout</code></h3> + +<p>За замовчуванням, всередині {{domxref("WindowTimers/setTimeout", "window.setTimeout()")}} значенням <code>this</code> буде встановлено об'єкт {{domxref("window")}} (або <code>global</code>). Працюючи з методами класу, що вимагають <code>this</code> для посилання на екземпляри класу, ви можете явно прив'язати <code>this</code> до функції зворотного виклику, щоб зберегти екземпляр.</p> + +<pre class="brush: js">function LateBloomer() { + this.petalCount = Math.ceil(Math.random() * 12) + 1; +} + +// Запустити declare після затримки у 1 секунду +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log('Я чудова квітка з ' + + this.petalCount + ' пелюстками!'); +}; + +var flower = new LateBloomer(); +flower.bloom(); +// через 1 секунду запускається метод 'declare'</pre> + +<h3 id="Звязані_функції_в_ролі_конструкторів">Зв'язані функції в ролі конструкторів</h3> + +<div class="warning"> +<p><strong>Застереження:</strong> Цей розділ демонструє можливості JavaScript та документує деякі граничні випадки використання методу <code>bind()</code>. Методи, наведені нижче, є не найкращим способом написання коду, їх не бажано використовувати у будь-якому виробничому середовищі.</p> +</div> + +<p>Зв'язані функції автоматично підходять для використання з оператором {{jsxref("Operators/new", "new")}} для побудови нових екземплярів, створених цільовою функцією. Коли зв'язана функція використовується для створення значення, надане значення <code>this</code> ігнорується. Однак, надані аргументи все одно передаються у виклик конструктора:</p> + +<pre class="brush: js">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return this.x + ',' + this.y; +}; + +var p = new Point(1, 2); +p.toString(); // '1,2' + +// не підтримується у поліфілі, що наведений нижче + +// працює добре з рідним методом bind: + +var YAxisPoint = Point.bind(null, 0/*x*/); + + +var emptyObj = {}; +var YAxisPoint = Point.bind(emptyObj, 0/*x*/); + +var axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new Point(17, 42) instanceof YAxisPoint; // true +</pre> + +<p>Зауважте, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію для використання з оператором {{jsxref("Operators/new", "new")}}. Наслідком є те, що вам не потрібно робити нічого особливого, щоб створити зв'язану функцію, яка буде просто викликатися, навіть якщо ви хотіли б зв'язати функцію лише для викликів з оператором {{jsxref("Operators/new", "new")}}.</p> + +<pre class="brush: js">// Приклад може бути запущений прямо у консолі JavaScript +// ...продовження прикладу нагорі + +// Може викликатись як звичайна функція +// (хоча зазвичай це є небажаним) +YAxisPoint(13); + +emptyObj.x + ',' + emptyObj.y; +// > '0,13' +</pre> + +<p>Якщо ви бажаєте підтримувати використання зв'язаної функції лише з оператором {{jsxref("Operators/new", "new")}}, або лише викликаючи її, то цільова функція має примусово ввести це обмеження.</p> + +<h3 id="Створення_ярликів">Створення ярликів</h3> + +<p>Метод <code>bind()</code> також є корисним у випадках, коли ви хочете створити ярлик до функції, котра потребує конкретного значення <code>this</code>.</p> + +<p>Візьміть, для прикладу, метод {{jsxref("Array.prototype.slice")}}, який ви хочете використати для перетворення подібного до масиву об'єкта на справжній масив. Ви можете створити такий ярлик:</p> + +<pre class="brush: js">var slice = Array.prototype.slice; + +// ... + +slice.apply(arguments); +</pre> + +<p>З <code>bind()</code> це можна спростити. В наступній частині коду, <code>slice</code> є зв'язаною функцією з функцією {{jsxref("Function.prototype.apply()", "apply()")}} об'єкта {{jsxref("Function.prototype")}}, зі значенням <code>this</code>, яке дорівнює функції {{jsxref("Array.prototype.slice()", "slice()")}} об'єкта {{jsxref("Array.prototype")}}. Це означає що додаткові виклики методу <code>apply()</code> можуть бути усунені:</p> + +<pre class="brush: js">// те саме, що й "slice" у попередньому прикладі +var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.apply.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Оскільки старші переглядачі, загалом, є також повільнішими, набагато критичніше, ніж багатьом здається, створювати продуктивні поліфіли, щоб користування переглядачем не було таким жахливим. Отже, нижче наведені два варіанти поліфілів Function.prototype.bind. Перший набагато менший та спритніший, але не працює при використанні оператора `new`. Другий менш продуктивний та більший за розміром, але дозволяє певне використання оператора `new` на зв'язаних функціях. Загалом, у коді рідко можна зустріти `new`, що використовується на зв'язаній функції, тому, в цілому, краще обирати перший варіант.</p> + +<pre class="brush: js">// Не працює з `new funcA.bind(thisArg, args)` +if (!Function.prototype.bind) (function(){ + var slice = Array.prototype.slice; + Function.prototype.bind = function() { + var thatFunc = this, thatArg = arguments[0]; + var args = slice.call(arguments, 1); + if (typeof thatFunc !== 'function') { + // найближчий можливий варіант до внутрішньої + // функції IsCallable у ECMAScript 5 + throw new TypeError('Function.prototype.bind - ' + + 'what is trying to be bound is not callable'); + } + return function(){ + var funcArgs = args.concat(slice.call(arguments)) + return thatFunc.apply(thatArg, funcArgs); + }; + }; +})();</pre> + +<p>Ви можете це частково обійти, вставивши наступний код на початку ваших скриптів, що дозволить використовувати більшу частину функціональності <code>bind()</code> у реалізаціях, які початково її не підтримують.</p> + +<pre class="brush: js">// Так, це працює з `new funcA.bind(thisArg, args)` +if (!Function.prototype.bind) (function(){ + var ArrayPrototypeSlice = Array.prototype.slice; + Function.prototype.bind = function(otherThis) { + if (typeof this !== 'function') { + // найближчий можливий варіант до внутрішньої + // функції IsCallable у ECMAScript 5 + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var baseArgs= ArrayPrototypeSlice .call(arguments, 1), + baseArgsLength = baseArgs.length, + fToBind = this, + fNOP = function() {}, + fBound = function() { + baseArgs.length = baseArgsLength; // скинути до початкових базових аргументів + baseArgs.push.apply(baseArgs, arguments); + return fToBind.apply( + fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs + ); + }; + + if (this.prototype) { + // Function.prototype не має властивості prototype + fNOP.prototype = this.prototype; + } + fBound.prototype = new fNOP(); + + return fBound; + }; +})();</pre> + +<p>Деякі з багатьох відмінностей (також можуть бути й інші, оскільки цей список не претендує на вичерпність) між цим алгоритмом та основним алгоритмом:</p> + +<ul> + <li>Часткова реалізація покладається на те, що вбудовані методи {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} та {{jsxref("Function.prototype.apply()")}} мають свої початкові значення.</li> + <li>Часткова реалізація створює функції, які не мають незмінної "отруйної таблетки" {{jsxref("Function.caller", "caller")}} та властивостей <code>arguments</code>, що викидають помилку {{jsxref("Global_Objects/TypeError", "TypeError")}} на get, set чи видалення. (Це можна додати, якщо реалізація підтримує {{jsxref("Object.defineProperty")}}, або частково реалізувати [без викидання винятків на видалення], якщо реалізація підтримує розширення {{jsxref("Object.__defineGetter__", "__defineGetter__")}} та {{jsxref("Object.__defineSetter__", "__defineSetter__")}}.)</li> + <li>Часткова реалізація створює функції, які мають властивість <code>prototype</code>. (Правильні зв'язані функції її не мають.)</li> + <li>Часткова реалізація створює зв'язані функції, чия властивість {{jsxref("Function.length", "length")}} не узгоджується з встановленою у ECMA-262: вона створює функції зі значенням length 0, в той час, як повна реалізація, в залежності від значення length цільової функції та числа попередньо заданих аргументів, може повернути ненульове значення.</li> +</ul> + +<p>Якщо ви вирішили використовувати цю часткову реалізацію, <strong>ви не повинні покладатися на неї у ситуаціях, де її поведінка відрізняється від 5-ї версії ECMA-262!</strong> На щастя, ці відхилення від специфікації не часто (якщо взагалі) зустрічаються у більшості випадків кодування. Якщо ви не розумієте жодних відхилень від специфікації, наведених вище, тоді, у цьому конкретному випадку, буде безпечно не хвилюватись щодо подробиць цих невідповідностей.</p> + +<p><strong>Якщо це абсолютно необхідно, а продуктивність неважлива</strong>, значно повільніше рішення (але у більшій відповідності до специфікації) можна знайти тут <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізовано у 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Function.bind")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Функції", "", 1)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/call/index.html b/files/uk/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..caa12e71b0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,168 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Global_Objects/Function/call +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>call()</strong></code> викликає функцію із вказаним значенням <code>this</code> та зазначеним переліком аргументів.</p> + +<div class="note"> +<p><strong>Заувага:</strong> Хоча за своїм призначенням цей метод і {{jsxref("Function.prototype.apply", "apply()")}} є тотожними, аргументи для викликаної функції передаються в дещо різний спосіб: метод <code>call()</code> приймає їх <strong>перелік</strong>, тоді як метод <code>apply()</code> приймає їх <strong>масив</strong>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>function</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Значення <code>this</code>, яке буде застосовано для виклику <code>function</code>. Зауважте, що значення <code>thisArg</code> може зазнати перетворень — якщо функція <code>function</code> виконується у {{jsxref("Functions_and_function_scope/Strict_mode", "поблажливому режимі", "", 1)}}, тоді замість {{jsxref("Global_Objects/null", "null")}} та {{jsxref("Global_Objects/undefined", "undefined")}} буде застосовано {{glossary("Global_object", "глобальний об'єкт")}}, а {{glossary("Primitive", "прості величини")}} буде обернено на об'єкти.</dd> + <dt><code>arg1, arg2, ...</code> {{optional_inline}}</dt> + <dd>Аргументи, що їх буде передано до функції <code>function</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Значення, яке внаслідок виклику повернула сама функція <code>function</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>call()</code> здійснює виклик функції, заступаючи значення ключового слова <code>this</code> всередині неї значенням, переданим до <code>call()</code> як перший аргумент. Це уможливлює одноразове написання деякої функції з можливістю її надалі викликати для всякого об'єкта так, наче вона є його методом.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Виклик_успадкованих_конструкторів_за_допомогою_call">Виклик успадкованих конструкторів за допомогою <code>call</code></h3> + +<p>Методом <code>call()</code> можна скористатись для створення ланцюжка конструкторів об'єкта, як у Java. У наведеному прикладі конструктор <code>Product</code> (виріб) має два параметри: назву (<code>name</code>) й ціну (<code>price</code>). Два інші конструктори — <code>Food</code> (їжа) і <code>Toy</code> (цяцька) — спершу викликають конструктор <code>Product</code>, передаючи потрібні йому значення <code>name</code> і <code>price</code>, а відтак додають окрему властивість <code>category</code> (різновид).</p> + +<pre class="brush: js">function Product(name, price) { + this.name = name; + this.price = price; +} + +function Food(name, price) { + Product.call(this, name, price); + this.category = 'food'; +} + +function Toy(name, price) { + Product.call(this, name, price); + this.category = 'toy'; +} + +var cheese = new Food('feta', 5); +var fun = new Toy('robot', 40); +</pre> + +<h3 id="Виклик_неназваних_функцій_за_допомогою_метода_call">Виклик неназваних функцій за допомогою метода <code>call</code></h3> + +<p>Цей суто надуманий приклад містить використання метода <code>call</code> для виклику анонімної функції на кожному об'єкті з масиву.</p> + +<p>Всередині цієї анонімної функції кожен об'єкт отримує окремий метод <code>print</code>, що друкуватиме значення властивостей об'єкта та його розташунок (індекс) в масиві. Передача об'єкта саме як <code>this</code> не є необхідністю, а вжито лише задля наочності.</p> + +<pre class="brush: js">var animals = [ + { species: 'Лев', name: 'Король' }, + { species: 'Пантера', name: 'Багіра' } +]; + +for (var i = 0; i < animals.length; i++) { + (function(i) { + this.print = function() { + console.log(i, this.species, this.name); + } + this.print(); + }).call(animals[i], i); +} +</pre> + +<h3 id="Виклик_функції_та_перевиознака_this_за_допомогою_метода_call">Виклик функції та перевиознака <code>this</code> за допомогою метода <code>call</code></h3> + +<p>Під час виклику функції <code>greet</code> в цьому прикладі значення <code>this</code> буде прив'язано до об'єкта <code>obj</code>:</p> + +<pre class="brush: js">function greet() { + var message = 'Вітаємо, ' + (this.isMale ? 'пане ' : 'пані ') + this.name; + console.log(message); +} + +var obj = { + isMale: false, name: 'Олено' +}; + +greet.call(obj); // Вітаємо, пані Олено +</pre> + +<h3 id="Виклик_функції_за_допомогою_метода_call_без_зазначення_першого_аргумента">Виклик функції за допомогою метода <code>call</code> без зазначення першого аргумента</h3> + +<p>Як засвідчує цей приклад, відсутність першого аргумента метода <code>call</code> має наслідком прив'язування <code>this</code> до {{glossary('global object', 'глобального об\'єкта')}}:</p> + +<pre class="brush: js">var name = 'Тарас'; + +var x = { + name: 'Микола', + display: function() { + console.log('Мене звуть ' + this.name); + } +}; + +x.display(); // Мене звуть Микола +x.display.call(); // Мене звуть Тарас +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<div>{{Compat("javascript.builtins.Function.call")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li> + <p><a href="/uk/docs/Learn/JavaScript/Objects">Вступ до об'єктів JavaScript</a></p> + </li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/caller/index.html b/files/uk/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..ab2fe55383 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,82 @@ +--- +title: Function.caller +slug: Web/JavaScript/Reference/Global_Objects/Function/caller +tags: + - Function + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Властивість <code><strong><em>function</em>.caller</strong></code> повертає функцію, яка викликала вказану функцію. Ця властивість заборонена у строгому режимі.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо функція <code>f</code> викликана кодом верхнього рівня, значенням <code>f.caller</code> буде {{jsxref("null")}}, інакше це буде функція, яка викликала <code>f</code>.</p> + +<p>Ця властивість замінює застарілу властивість {{jsxref("Functions/arguments/caller", "arguments.caller")}} об'єкта {{jsxref("Functions/arguments", "arguments")}}.</p> + +<p>Спеціальна властивість <code>__caller__</code>, яка повертала об'єкт активації функції, що викликала задану функцію, дозволяючи відбудовувати стек викликів, була прибрана з міркувань безпеки.</p> + +<h3 id="Примітки">Примітки</h3> + +<p>Зауважте, що у випадку рекурсії ви не зможете відбудувати стек викликів за допомогою цієї властивості. Розглянемо:</p> + +<pre class="brush: js">function f(n) { g(n - 1); } +function g(n) { if (n > 0) { f(n); } else { stop(); } } +f(2); +</pre> + +<p>У момент, коли викликається <code>stop()</code>, стек викликів буде таким:</p> + +<pre class="brush: js">f(2) -> g(1) -> f(1) -> g(0) -> stop() +</pre> + +<p>Наступне дорівнює true:</p> + +<pre class="brush: js">stop.caller === g && f.caller === g && g.caller === f +</pre> + +<p>Отже, якщо ви спробуєте отримати стек викликів у функції <code>stop()</code> ось так:</p> + +<pre class="brush: js">var f = stop; +var stack = 'Стек викликів:'; +while (f) { + stack += '\n' + f.name; + f = f.caller; +} +</pre> + +<p>цикл ніколи не зупиниться.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевірка_значення_властивості_функції_caller">Перевірка значення властивості функції <code>caller</code></h3> + +<p>Наступний код перевіряє значення властивості функції <code>caller</code>.</p> + +<pre class="brush: js">function myFunc() { + if (myFunc.caller == null) { + return 'Ця функція викликана з верхнього рівня!'; + } else { + return 'Ця функція викликана ' + myFunc.caller; + } +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Реалізовано у JavaScript 1.5.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Function.caller")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Помилка реалізації для SpiderMonkey {{bug(65683)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/displayname/index.html b/files/uk/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..1e18f4a98c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,80 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Global_Objects/Function/displayName +tags: + - Function + - JavaScript + - Властивість + - нестандартна +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Властивість <code><strong><em>function</em>.displayName</strong></code> повертає ім'я, що відображається для функції.</p> + +<h2 id="Опис">Опис</h2> + +<p>Властивість <code>displayName</code>, якщо вона вказана, повертає ім'я, яке відображається для функції:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Показати спливаюче вікно'; + +console.log(popup.displayName); // "Показати спливаюче вікно" +</pre> + +<p>Ви можете визначити функцію з ім'ям, яке відображається, у {{jsxref("Functions", "функціональному виразі", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'someMethod'; + +console.log(object.someMethod.displayName); // виводить "someMethod" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: someMethod is not defined +</pre> + +<p>Ви можете динамічно змінювати властивість <code>displayName</code>:</p> + +<pre class="brush: js">var object = { + // анонімна + someMethod: function(value) { + arguments.callee.displayName = 'мій метод (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "мій метод (123)" +</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Консолі та профайлери зазвичай використовують цю властивість замість {{jsxref("Function.name", "func.name")}} для відображення імені функції.</p> + +<p>Записавши наведений код у консоль, ви маєте побачити щось на кшталт "<code>function My Function()</code>":</p> + +<pre class="brush: js">var a = function() {}; +a.displayName = 'My Function'; + +a; // "function My Function()"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.displayName")}}</p> +</div> diff --git a/files/uk/web/javascript/reference/global_objects/function/index.html b/files/uk/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..f2672fe180 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,155 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p><strong>Конструктор <code>Function</code></strong> створює новий <strong>об'єкт</strong> <code>Function</code>. Прямий виклик конструктора може створювати функції динамічно, але має проблеми з безпекою та схожі з {{jsxref("eval")}} (але менш значні) проблеми з продуктивністю. Однак, на відміну від eval, конструктор Function створює функції, які виконуються тільки у глобальній області видимості.</p> + +<p>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<p>У JavaScript кожна функція є об'єктом <code>Function</code>. Це можна побачити за допомогою коду <code>(function(){}).constructor === Function</code>, який повертає true.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Імена, які будуть використані функцією в якості імен формальних аргументів. Кожне ім'я має бути рядком, який представляє ідентифікатор JavaScript, або списком таких рядків, розділених комою; наприклад, "<code>x</code>", "<code>theValue</code>" або "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>Рядок, що містить інструкції JavaScript, які складають визначення функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкти <code>Function</code>, створені конструктором <code>Function</code>, аналізуються, коли створюється функція. Це менш ефективно, ніж оголошувати функцію <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональним виразом</a> або <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошенням функції</a> та викликати її, бо такі функції аналізуються разом з рештою коду.</p> + +<p>Усі аргументи, передані у функцію, сприймаються як імена ідентифікаторів параметрів функції, що має бути створена, в тому порядку, в якому вони передані.</p> + +<p>Виклик конструктора <code>Function</code> у вигляді функції (без оператора <code>new</code>) має той самий ефект, що й виклик конструктора.</p> + +<h2 id="Властивості_та_методи_обєкта_Function">Властивості та методи об'єкта <code>Function</code></h2> + +<p>Глобальний об'єкт <code>Function</code> не має власних методів та властивостей, однак, він успадковує деякі методи та властивості через ланцюжок прототипів від {{jsxref("Function.prototype")}}.</p> + +<h2 id="Обєкт_прототипу_Function">Об'єкт прототипу <code>Function</code></h2> + +<h3 id="Властивості">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Властивості')}}</div> + +<h3 id="Методи">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Методи')}}</div> + +<h2 id="Екземпляри_Function">Екземпляри <code>Function</code></h2> + +<p>Екземпляри <code>Function</code> успадковують методи та властивості від {{jsxref("Function.prototype")}}. Як і в усіх конструкторах, ви можете змінити об'єкт прототипу конструктора, щоб внести зміни до усіх екземплярів <code>Function</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Визначення_аргументів_у_конструкторі_Function">Визначення аргументів у конструкторі <code>Function</code></h3> + +<p>Наступний код створює об'єкт <code>Function</code>, що приймає два аргументи.</p> + +<pre class="brush: js">// Цей приклад можна запустити прямо у консолі JavaScript + +// Створити функцію, що приймає два аргументи та повертає суму цих аргументів +var adder = new Function('a', 'b', 'return a + b'); + +// Виклик функції +adder(2, 6); +// > 8 +</pre> + +<p>Аргументи "<code>a</code>" та "<code>b</code>" є іменами формальних аргументів, які використовуються у тілі функції, "<code>return a + b</code>".</p> + +<h3 id="Різниця_між_конструктором_Function_та_оголошенням_функції">Різниця між конструктором Function та оголошенням функції</h3> + +<p>Функції, створені конструктором <code>Function</code>, не утворюють замикань з контекстом свого cтворення; вони завжди cтворюються у глобальній області видимості. Під час виконання вони матимуть доступ лише до власних локальних змінних та глобальних змінних, а не до змінних з області видимості, де був створений конструктор <code>Function</code>. Це відрізняється від {{jsxref("eval")}} з кодом функціонального виразу.</p> + +<pre class="brush: js">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // цей |x| звертається до глобального |x| +} + +function createFunction2() { + var x = 20; + function f() { + return x; // цей |x| звертається до локального |x|, записаного вище + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20</pre> + +<p>В той час, як цей код працює у веб-переглядачах, <code>f1()</code> спричинить <code>ReferenceError</code> у Node.js, через те, що <code>x</code> не буде знайдено. Це відбувається тому, що область видимості верхнього рівня у Node не є глобальною областю видимості, і <code>x</code> буде локальною змінною модуля.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Function")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Functions", "Функції та область видимості функції")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "оголошення функції")}}</li> + <li>{{jsxref("Operators/function", "функціональний вираз")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html b/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html new file mode 100644 index 0000000000..65c42052c7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html @@ -0,0 +1,56 @@ +--- +title: Function.prototype.isGenerator() +slug: Web/JavaScript/Reference/Global_Objects/Function/isGenerator +tags: + - Function + - JavaScript + - застарілий + - метод + - нестандартний +translation_of: Archive/Web/JavaScript/Function.isGenerator +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Нестандартний метод <code><strong>isGenerator()</strong></code> використовувався для визначення, чи є функція <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>. Він був видалений з Firefox, починаючи з версії 58.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>fun</var>.isGenerator()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Значення {{jsxref("Boolean")}}, яке вказує, чи є надана функція <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>isGenerator()</code> визначає, чи є функція <em><code>fun</code></em> <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">генератором</a>. Він був частиною ранніх пропозицій специфікації Harmony, але не був включений у специфікацію ECMAScript 2015.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">function f() {} + +function* g() { + yield 42; +} + +console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false +console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Реалізований у JavaScript 1.8.6.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.isGenerator")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/length/index.html b/files/uk/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..b5968dd976 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,91 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>length</strong></code> зазначає кількість параметрів, очікуваних функцією.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div> + + + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Опис">Опис</h2> + +<p><code>length</code> - це властивість функціонального об'єкта, вона вказує, скільки аргументів очікує функція, тобто кількість формальних параметрів. Ця кількість не включає {{jsxref("rest_parameters", "залишкові параметри", "", 1)}}, і рахує лише параметри до першого, що має значення по замовчуванню. Для контрасту, властивість {{jsxref("Functions/arguments/length", "arguments.length")}} є локальною властивістю функції, і надає кількість аргументів, що фактично передані у функцію.</p> + +<h3 id="Властивість_конструктора_Function">Властивість конструктора Function</h3> + +<p>Конструктор {{jsxref("Function")}} теж є об'єктом {{jsxref("Function")}}. Його властивість <code>length</code> має значення 1. Атрибути властивості такі: Writable (доступний для запису): <code>false</code>, Enumerable (доступний для переліку): <code>false</code>, Configurable (доступний для налаштування): <code>true</code>.</p> + +<h3 id="Властивість_об'єкта_прототипу_Function">Властивість об'єкта прототипу Function</h3> + +<p>Властивість об'єкта прототипу {{jsxref("Function")}} має значення 0.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 і т.д. */ + +console.log((function(...args) {}).length); +// 0, залишкові параметри не рахуються + +console.log((function(a, b = 1, c) {}).length); +// 1, рахуються тільки параметри, розташовані до першого, +// який має значення за замовчуванням</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Атрибут <code>configurable</code> цієї властивості тепер дорівнює <code>true</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.length")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/name/index.html b/files/uk/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..9fa89c9f14 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,223 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p>Властивість тільки для читання об'єкта {{jsxref("Function")}} <code><strong>name</strong></code> відображає ім'я функції, яке було вказане при створенні, або <code>"anonymous"</code> для анонімних функцій.</p> + +<p>{{EmbedInteractiveExample("pages/js/function-name.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<div class="blockIndicator note"> +<p>Зауважте, що у нестандартних реалізаціях до ES2015 атрибут <code>configurable</code> (доступний для налаштування) також мав значення <code>false</code>.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Ім'я_функції">Ім'я функції</h3> + +<p>Властивість <code>name</code> повертає ім'я функції.</p> + +<pre class="brush: js">function doSomething() {} +console.log(doSomething.name); // "doSomething" +</pre> + +<h3 id="Ім'я_конструктора_функції">Ім'я конструктора функції</h3> + +<p>Функції, створені за допомогою <code>new Function(...)</code> або просто <code>Function(...)</code> створюють об'єкти {{jsxref("Function")}}, а їхнє ім'я "anonymous".</p> + +<pre class="brush: js">(new Function).name; // "anonymous"</pre> + +<h3 id="Виведені_імена_функцій">Виведені імена функцій</h3> + +<p>Змінні та методи можуть вивести ім'я анонімної функції з її синтаксичної позиції (нове у ECMAScript 2015).</p> + +<pre class="brush: js">var f = function() {}; +var object = { + someMethod: function() {} +}; + +console.log(f.name); // "f" +console.log(object.someMethod.name); // "someMethod" +</pre> + +<p>Ви можете оголосити функцію з ім'ям у {{jsxref("Operators/Function", "функціональному виразі", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // виведе "object_someMethod" + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod is not defined +</pre> + +<p>Ви не можете змінювати ім'я функції, ця властивість доступна лише для читання:</p> + +<div class="hidden"> +<p>Наведений нижче приклад суперечить тому, що сказано на початку цього розділу і не працює як описано.</p> +</div> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function() {} +}; + +object.someMethod.name = 'otherMethod'; +console.log(object.someMethod.name); // someMethod +</pre> + +<p>Однак, щоб змінити її, ви можете скористатись {{jsxref("Object.defineProperty()")}}.</p> + +<h3 id="Імена_лаконічних_методів">Імена лаконічних методів</h3> + +<pre class="brush: js">var o = { + foo(){} +}; +o.foo.name; // "foo";</pre> + +<h3 id="Імена_зв'язаних_функцій">Імена зв'язаних функцій</h3> + +<p>Метод {{jsxref("Function.bind()")}} створює функцію, чиїм ім'ям буде "bound" плюс ім'я функції.</p> + +<pre class="brush: js">function foo() {}; +foo.bind({}).name; // "bound foo"</pre> + +<h3 id="Імена_функцій_для_гетерів_та_сетерів">Імена функцій для гетерів та сетерів</h3> + +<p>При використанні властивостей-аксесорів <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">get</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/set">set</a></code> у імені функції з'являється "get" або "set".</p> + +<pre class="brush: js">let o = { + get foo(){}, + set foo(x){} +}; + +var descriptor = Object.getOwnPropertyDescriptor(o, "foo"); +descriptor.get.name; // "get foo" +descriptor.set.name; // "set foo";</pre> + +<h3 id="Імена_функцій_у_класах">Імена функцій у класах</h3> + +<p>Ви можете скористатись <code>obj.constructor.name</code>, щоб перевірити "клас" об'єкта (але обов'язково прочитайте застереження нижче):</p> + +<pre class="brush: js">function Foo() {} // Синтаксис ES2015: class Foo {} + +var fooInstance = new Foo(); +console.log(fooInstance.constructor.name); // виводить "Foo"</pre> + +<div class="blockIndicator warning"> +<p><strong>Застереження:</strong> Інтерпретатор коду встановить значення вбудованої властивості <code>Function.name</code> тільки якщо функція не має своєї властивості з назвою <em>name</em> (дивіться розділ <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 ECMAScript2015 Language Specification</a>). Однак, ES2015 визначає ключове слово <em>static</em> таким чином, що статичні методі встановлюються як OwnProperty функції-конструктора класу (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a>+ <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>).</p> +</div> + +<p>І тому ми не можемо отримати ім'я класу фактично для жодного класу, що має статичний метод <code>name()</code>:</p> + +<pre class="brush: js">class Foo { + constructor() {} + static name() {} +}</pre> + +<p>З методом <code>static name()</code>, <code>Foo.name</code> тепер містить не ім'я класу, а посилання на функцію <code>name()</code>. Наведене вище оголошення класу у синтаксисі ES2015 буде поводитись у Chrome чи Firefox схоже на наступний фрагмент коду у синтаксисі ES5:</p> + +<pre class="brush: js">function Foo() {} +Object.defineProperty(Foo, 'name', { writable: true }); +Foo.name = function() {};</pre> + +<p>Спроба отримати клас <code>fooInstance</code> через <code>fooInstance.constructor.name</code> поверне нам зовсім не ім'я класу, а посилання на статичний метод класу. Приклад:</p> + +<pre class="brush: js">let fooInstance = new Foo(); +console.log(fooInstance.constructor.name); // виводить function name()</pre> + +<p>Ви могли також побачити у прикладі з синтаксисом ES5, що у Chrome чи Firefox наше статичне оголошення <code>Foo.name</code> стає <em>доступним для запису</em>. Вбудоване оголошення за відсутності користувацького статичного методу є <em>доступним лише для читання</em>:</p> + +<pre class="brush: js">Foo.name = 'Привіт'; +console.log(Foo.name); +// виведе "Привіт", якщо клас має статичну властивість name(), інакше виведе "Foo".</pre> + +<p>Таким чином, не можна розраховувати, що вбудована властивість <code>Function.name</code> завжди міститиме ім'я класу.</p> + +<h3 id="Символи_в_якості_імен_функцій">Символи в якості імен функцій</h3> + +<p>Якщо {{jsxref("Symbol")}} використовується в якості імені функції і має опис, ім'ям метода буде опис у квадратних дужках.</p> + +<pre class="brush: js">let sym1 = Symbol("foo"); +let sym2 = Symbol(); +let o = { + [sym1]: function(){}, + [sym2]: function(){} +}; + +o[sym1].name; // "[foo]" +o[sym2].name; // ""</pre> + +<h2 id="Компресори_та_мініфікатори_JavaScript">Компресори та мініфікатори JavaScript</h2> + +<div class="blockIndicator warning"> +<p><strong>Застереження:</strong> Будьте обережні, використовуючи <code>Function.name</code> та перетворення коду, які здійснюють компресори (мініфікатори) або обфускатори JavaScript. Ці інструменти часто використовуються як частина конвеєра збірки JavaScript, щоб зменшити розмір програми перед розгортанням у виробничому середовищі. Такі перетворення часто змінюють ім'я функції під час збірки.</p> +</div> + +<p>Подібний першокод:</p> + +<pre class="brush: js">function Foo() {}; +let foo = new Foo(); + +if (foo.constructor.name === 'Foo') { + console.log("'foo' є екземпляром 'Foo'"); +} else { + console.log('Ой-ой!'); +}</pre> + +<p>може бути стиснутий до:</p> + +<pre class="brush: js">function a() {}; +let b = new a(); +if (b.constructor.name === 'Foo') { + console.log("'foo' є екземпляром 'Foo'"); +} else { + console.log('Ой-ой!'); +}</pre> + +<p>У нестиснутій версії, програма виконує правдиву гілку і виводить <code>"'foo' є екземпляром 'Foo'"</code>. В той час, як у стиснутій версії вона поводиться по-іншому і виконує гілку else. Якщо ви покладаєтесь на <code>Function.name</code>, як у наведеному вище прикладі, переконайтесь, що ваш конвеєр збірки не змінює імена функцій, або не припускайте, що функція матиме певне ім'я.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Function.name")}}</p> + +<div id="compat-mobile"></div> diff --git a/files/uk/web/javascript/reference/global_objects/function/prototype/index.html b/files/uk/web/javascript/reference/global_objects/function/prototype/index.html new file mode 100644 index 0000000000..0b1e30cad1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/prototype/index.html @@ -0,0 +1,99 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +tags: + - Function + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>Function.prototype</strong></code> є об'єктом прототипу {{jsxref("Function")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкти {{jsxref("Function")}} успадковуються від <code>Function.prototype</code>. <code>Function.prototype</code> не можна змінити.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt>{{jsxref("Function.prototype.arguments")}} {{deprecated_inline}}</dt> + <dd>Масив, що відповідає аргументам, переданим у функцію. Це застаріла властивість {{jsxref("Function")}}. Використовуйте натомість об'єкт {{jsxref("Functions/arguments", "arguments")}}, доступний всередині функції.</dd> + <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Вказувала кількість аргументів, очікуваних функцією, але була видалена. Використовуйте натомість властивість {{jsxref("Function.length", "length")}}.</s></dd> + <dt>{{jsxref("Function.prototype.caller")}} {{non-standard_inline}}</dt> + <dd>Вказує функцію, що викликала функцію, яка виконується.</dd> + <dt>{{jsxref("Function.prototype.length")}}</dt> + <dd>Вказує кількість аргументів, очікуваних функцією.</dd> + <dt>{{jsxref("Function.prototype.name")}}</dt> + <dd>Ім'я функції.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>Ім'я, що відображається для функції.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>Вказує функцію, яка створює прототип об'єкта. Більше інформації дивіться на сторінці {{jsxref("Object.prototype.constructor")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Викликає функцію та встановлює її <em>this</em> надане значення, аргументи можуть передаватися об'єктом {{jsxref("Array")}}.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd>Створює нову функцію, в якої під час виклику <em>this</em> присвоєне надане значення, з заданою послідовністю аргументів, що передують будь-якім іншим наданим аргументам під час виклику нової функції.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Викликає (виконує) функцію та присвоює її <em>this</em> надане значення, аргументи можуть передаватися як є.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>Повертає <code>true</code>, якщо функція є <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">генератором</a>; інакше повертає <code>false</code>.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toSource")}}.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toString")}}.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.prototype")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/tosource/index.html b/files/uk/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..a4a3cb4d16 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,70 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Function/toSource +tags: + - Function + - JavaScript + - метод + - нестандартний +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Метод <code><strong>toSource()</strong></code> повертає рядкове представлення першокоду об'єкта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>function</var>.toSource(); +</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядкове представлення першокоду об'єкта.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>toSource</code> повертає наступні значення:</p> + +<ul> + <li>Для вбудованого об'єкта {{jsxref("Function")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний: + + <pre class="brush: js">function Function() { + [native code] +} +</pre> + </li> + <li>Для користувацьких функцій <code>toSource()</code> повертає першокод JavaScript, який визначає об'єкт, у вигляді рядка. + <pre class="brush: js">// Для прикладу: +function hello() { + console.log("Всім привіт!"); +} + +hello.toSource(); +</pre> + + <pre class="brush: js">// Результат: +"function hello() { + console.log(\"Всім привіт!\"); +}"</pre> + </li> +</ul> + +<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді. Ви можете викликати <code>toSource()</code> під час налагодження для дослідження вмісту об'єкта.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.toSource")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/function/tostring/index.html b/files/uk/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..5c4b58e347 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,233 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Function/toString +tags: + - Function + - JavaScript + - Prototype + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toString()</strong></code> повертає рядкове представлення першокоду функції.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>function</var>.toString()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядкове представлення першокоду функції.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("Function")}} заміщує метод {{jsxref("Object.prototype.toString", "toString")}}, успадкований від {{jsxref("Object")}}; він не успадковує {{jsxref("Object.prototype.toString")}}. Для визначених користувачем об'єктів {{jsxref("Function")}} метод <code>toString</code> повертає рядок, який містить текстовий сегмент першокоду, що використовувався для визначення функції.</p> + +<p>JavaScript викликає метод <code>toString</code> автоматично, коли {{jsxref("Function")}} потрібно відобразити у вигляді текстового значення, наприклад, при поєднанні функції з рядком.</p> + +<p>Метод <code>toString()</code> викине виняток типу {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object"), якщо його значення <code>this</code> не є об'єктом <code>Function</code>.</p> + +<pre class="brush: js example-bad">Function.prototype.toString.call('foo'); // TypeError +</pre> + +<p>Якщо метод <code>toString()</code> викликається на вбудованих функціональних об'єктах або функціях, створених <code>Function.prototype.bind</code>, <code>toString()</code> повертає <em>рядок нативної функції</em>, який виглядає так:</p> + +<pre class="brush: js">"function () {\n [native code]\n}" +</pre> + +<p>Якщо метод <code>toString()</code> викликається на функції, створеної конструктором <code>Function</code>, <code>toString()</code> повертає першокод синтезованої декларації функції, названої "anonymous", з наданими параметрами та тілом функції.</p> + +<h2 id="Приклади">Приклади</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Функція</th> + <th scope="col">Результат Function.prototype.toString</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre> +function f(){}</pre> + </td> + <td> + <pre> +"function f(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +class A { a(){} }</pre> + </td> + <td> + <pre> +"class A { a(){} }"</pre> + </td> + </tr> + <tr> + <td> + <pre> +function* g(){}</pre> + </td> + <td> + <pre> +"function* g(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +a => a</pre> + </td> + <td> + <pre> +"a => a"</pre> + </td> + </tr> + <tr> + <td> + <pre> +({ a(){} }.a)</pre> + </td> + <td> + <pre> +"a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +({ *a(){} }.a)</pre> + </td> + <td> + <pre> +"*a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +({ [0](){} }[0])</pre> + </td> + <td> + <pre> +"[0](){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Object.getOwnPropertyDescriptor({ + get a(){} +}, "a").get</pre> + </td> + <td> + <pre> +"get a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Object.getOwnPropertyDescriptor({ + set a(x){} +}, "a").set</pre> + </td> + <td> + <pre> +"set a(x){}"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Function.prototype.toString</pre> + </td> + <td> + <pre> +"function toString() { [native code] }"</pre> + </td> + </tr> + <tr> + <td> + <pre> +(function f(){}.bind(0))</pre> + </td> + <td> + <pre> +"function () { [native code] }"</pre> + </td> + </tr> + <tr> + <td> + <pre> +Function("a", "b")</pre> + </td> + <td> + <pre> +"function anonymous(a\n) {\nb\n}"</pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікації</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Додані ще специфічні вимоги до рядкового представлення.</td> + </tr> + <tr> + <td><a href="https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction"><code>Function.prototype.toString</code> revisions proposal</a></td> + <td>Чернетка</td> + <td>Стандартизує рядок нативної функції, закінчення рядків.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.toString")}}</p> +</div> + +<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2> + +<ul> + <li>Починаючи з Firefox 17, метод <code>Function.prototype.toString()</code> був реалізований зберіганням першокоду функції. Декомпілятор був прибраний, щоб параметр <code>indentation</code> більше не був потрібний. Більше інформації дивіться на сторінці {{bug("761723")}}.</li> + <li>Починаюи з Firefox 38 і до 63, метод <code>Function.prototype.toString()</code> викидав об'єкти {{jsxref("Proxy")}} ({{bug(1100936)}} та {{bug(1440468)}}).</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/generator/index.html b/files/uk/web/javascript/reference/global_objects/generator/index.html new file mode 100644 index 0000000000..30ac13af34 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/index.html @@ -0,0 +1,138 @@ +--- +title: Generator +slug: Web/JavaScript/Reference/Global_Objects/Generator +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Довідка + - генератор + - застарілий генератор + - застарілий ітератор +translation_of: Web/JavaScript/Reference/Global_Objects/Generator +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <code><strong>Generator</strong></code> повертається {{jsxref("Statements/function*", "функцією-генератором", "", 1)}} та відповідає як <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">протоколу ітерабельного об'єкта</a>, так і <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">протоколу ітератора</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }"</pre> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Generator.prototype.next()")}}</dt> + <dd>Повертає значення, видане виразом {{jsxref("Operators/yield", "yield")}}.</dd> + <dt>{{jsxref("Generator.prototype.return()")}}</dt> + <dd>Повертає надане значення та завершує генератор.</dd> + <dt>{{jsxref("Generator.prototype.throw()")}}</dt> + <dd>Викидає помилку у генераторі (також завершує генератор, якщо помилка не була перехоплена всередині генератора).</dd> +</dl> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="Нескінченний_ітератор">Нескінченний ітератор</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); // "Generator { }" + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +// ...</pre> + +<h2 id="Застарілі_обєкти-генератори">Застарілі об'єкти-генератори</h2> + +<p>Firefox (SpiderMonkey) також реалізував більш ранню версію генераторів у <a href="/uk/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, де зірочка (*) у оголошенні функції не була потрібна (ви просто використовували ключове слово <code>yield</code> у тілі функції). Однак, підтримка застарілих генераторів була прибрана, починаючи з Firefox 58 (вийшов 23 січня, 2018) ({{bug(1083482)}}).</p> + +<h3 id="Методи_застарілого_генератора">Методи застарілого генератора</h3> + +<dl> + <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> + <dd>Повертає значення, видане виразом {{jsxref("Operators/yield", "yield")}}. Цей метод відповідає методу <code>next()</code> у об'єкті-генераторі ES2015.</dd> + <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> + <dd>Закриває генератор, таким чином, виклик <code>next()</code> викине помилку <a href="/uk/docs/Archive/Web/StopIteration">StopIteration</a>. Цей метод відповідає методу <code>return()</code> у об'єкті-генераторі ES2015.</dd> + <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> + <dd>Відсилав значення у генератор. Значення повертається виразом {{jsxref("Operators/yield", "yield")}} та повертає значення, видане наступним виразом {{jsxref("Operators/yield", "yield")}}. Метод <code>send(x)</code> відповідає методу <code>next(x)</code> у об'єкті-генераторі ES2015.</dd> + <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> + <dd>Викидає помилку у генераторі. Цей метод відповідає методу <code>throw()</code> у об'єкті-генераторі ES2015.</dd> +</dl> + +<h3 id="Приклад_застарілого_генератора">Приклад застарілого генератора</h3> + +<pre class="brush: js">function* fibonacci() { + var a = yield 1; + yield a * 2; +} + +var it = fibonacci(); +console.log(it); // "Generator { }" +console.log(it.next()); // 1 +console.log(it.send(10)); // 20 +console.log(it.close()); // undefined +console.log(it.next()); // викидає StopIteration (бо генератор вже закритий) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Generator")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<h3 id="Застарілі_генератори">Застарілі генератори</h3> + +<ul> + <li>{{jsxref("Statements/Legacy_generator_function", "Застаріла функція-генератор", "", 1)}}</li> + <li>{{jsxref("Operators/Legacy_generator_function", "Вираз застарілої функції-генератора", "", 1)}}</li> + <li><a href="/uk/docs/Archive/Web/StopIteration">StopIteration</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">Протокол застарілого ітератора</a></li> +</ul> + +<h3 id="Генератори_ES2015">Генератори ES2015</h3> + +<ul> + <li>{{jsxref("Functions", "Функції", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Operators/function", "функціональний вираз")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "вираз function*")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/generator/next/index.html b/files/uk/web/javascript/reference/global_objects/generator/next/index.html new file mode 100644 index 0000000000..ea558c04ed --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/next/index.html @@ -0,0 +1,114 @@ +--- +title: Generator.prototype.next() +slug: Web/JavaScript/Reference/Global_Objects/Generator/next +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>next</strong></code><strong><code>()</code></strong> повертає об'єкт з двома властивостями, <code>done</code> та <code>value</code>. Ви також можете передати параметр у метод <code>next</code>, щоб передати значення у генератор.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, яке передається генератору. Значення буде присвоєне як результат виразу yield, тобто, у [variable] = yield [expression], значення, передане у функцію .next, буде присвоєне [variable]</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object">Об'єкт</a></code> з двома властивостями:</p> + +<ul> + <li><code>done</code> (булеве значення) + + <ul> + <li>Має значення <code>true</code>, якщо ітератор досяг кінця послідовності перебору. В цьому випадку <code>value</code> за бажанням визначає <em>повернене значення</em> ітератора.</li> + <li>Має значення <code>false</code>, якщо ітератор зміг видати наступне значення послідовності. Це аналогічно тому, щоб взагалі не вказувати значення властивості <code>done</code>.</li> + </ul> + </li> + <li><code>value</code> - будь-яке значення JavaScript, повернене ітератором. Може бути пропущене, коли <code>done</code> дорівнює <code>true</code>.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_next">Використання <code>next()</code></h3> + +<p>Наступний приклад демонструє простий генератор та об'єкт, що його вертає метод <code>next</code>:</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }" +g.next(); // "Object { value: 1, done: false }" +g.next(); // "Object { value: 2, done: false }" +g.next(); // "Object { value: 3, done: false }" +g.next(); // "Object { value: undefined, done: true }" +</pre> + +<h3 id="Передача_значень_генератору">Передача значень генератору</h3> + +<p>В цьому прикладі <code>next</code> викликається зі значенням. Зауважте, що перший виклик нічого не залогував, тому що генератор початково нічого не видавав.</p> + +<pre class="brush: js">function* gen() { + while(true) { + var value = yield null; + console.log(value); + } +} + +var g = gen(); +g.next(1); +// "{ value: null, done: false }" +g.next(2); +// 2 +// "{ value: null, done: false }" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Generator.next")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/generator/return/index.html b/files/uk/web/javascript/reference/global_objects/generator/return/index.html new file mode 100644 index 0000000000..fd1ebcbeee --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/return/index.html @@ -0,0 +1,101 @@ +--- +title: Generator.prototype.return() +slug: Web/JavaScript/Reference/Global_Objects/Generator/return +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>return()</strong></code> вертає надане значення та завершує генератор.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>gen</var>.return(value)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, яке треба повернути.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Значення, надане як аргумент.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_return">Використання <code>return()</code></h3> + +<p>Наступний приклад демонструє простий генератор та метод <code>return</code>.</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); + +g.next(); // { value: 1, done: false } +g.return('foo'); // { value: "foo", done: true } +g.next(); // { value: undefined, done: true } +</pre> + +<p>Якщо <code>return(value)</code> викликається на генераторі, який вже знаходиться у "завершеному" стані, він залишиться у "завершеному" стані. Якщо жодного аргументу не надано, властивість <code>value</code> поверненого об'єкта буде такою ж, як при виклику <code>.next()</code>. Якщо аргумент надано, він буде присвоєний як значення властивості <code>value</code> поверненого об'єкта.</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); +g.next(); // { value: 1, done: false } +g.next(); // { value: 2, done: false } +g.next(); // { value: 3, done: false } +g.next(); // { value: undefined, done: true } +g.return(); // { value: undefined, done: true } +g.return(1); // { value: 1, done: true } +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Generator.return")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/generator/throw/index.html b/files/uk/web/javascript/reference/global_objects/generator/throw/index.html new file mode 100644 index 0000000000..ec8fc9d937 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generator/throw/index.html @@ -0,0 +1,100 @@ +--- +title: Generator.prototype.throw() +slug: Web/JavaScript/Reference/Global_Objects/Generator/throw +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>throw()</strong></code> відновлює виконання генератора викиданням у ньому помилки та повертає об'єкт з двома властивостями, <code>done</code> та <code>value</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>gen</var>.throw(exception)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>exception</code></dt> + <dd>Виняток, який треба викинути. З метою налагоджування корисно робити його <code>instanceof</code> {{jsxref("Error")}}.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object">Об'єкт</a></code> з двома властивостями:</p> + +<ul> + <li><code>done</code> (булеве значення) + + <ul> + <li>Має значення <code>true</code>, якщо ітератор досяг кінця послідовності перебору. В цьому випадку <code>value</code> за бажанням визначає <em>повернене значення</em> ітератора.</li> + <li>Має значення <code>false</code>, якщо ітератор зміг видати наступне значення послідовності. Це аналогічно тому, щоб взагалі не вказувати значення властивості <code>done</code>.</li> + </ul> + </li> + <li>будь-яке значення JavaScript, повернене ітератором. Може бути пропущене, коли <code>done</code> дорівнює <code>true</code>.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_throw">Використання <code>throw()</code></h3> + +<p>Наступний приклад демонструє простий генератор та помилку, що викидається методом <code>throw</code>. Помилку, як завжди, можна перехопити блоком <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>.</p> + +<pre class="brush: js">function* gen() { + while(true) { + try { + yield 42; + } catch(e) { + console.log('Перехоплено помилку!'); + } + } +} + +var g = gen(); +g.next(); +// { value: 42, done: false } +g.throw(new Error('Щось пішло не за планом')); +// "Перехоплено помилку!" +// { value: 42, done: false } +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Generator.throw")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html b/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..cb529b5095 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,114 @@ +--- +title: GeneratorFunction +slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +tags: + - ECMAScript 2015 + - GeneratorFunction + - JavaScript + - Ітератор + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +--- +<div>{{JSRef}}</div> + +<p><strong>Конструктор</strong> <strong><code>GeneratorFunction</code></strong> створює новий об'єкт {{jsxref("Statements/function*", "функції-генератора")}}. У JavaScript кожна функція-генератор насправді є об'єктом <code>GeneratorFunction</code>.</p> + +<p>Зауважте, що <code>GeneratorFunction</code> не є глобальним об'єктом. Його можна отримати, виконавши наступний код.</p> + +<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Імена, що використовуватиме функція в якості імен формальних аргументів. Кожне повинне бути рядком, що є коректним ідентифікатором JavaScript або списком таких рядків, розділених комою; наприклад, "<code>x</code>", "<code>theValue</code>" або "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>Рядок, що містить інструкції JavaScript, які складають визначення функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкти {{jsxref("Statements/function*", "функцій-генераторів")}}, створені конструктором <code>GeneratorFunction</code>, розбираються, коли створюється функція. Це менш ефективно, ніж оголошення функції-генератора {{jsxref("Statements/function*", "виразом function*")}} та її виклик у вашому коді, тому що такі функції розбираються з рештою коду.</p> + +<p>Усі аргументи, передані у функцію, вважаються іменами ідентифікаторів параметрів функції, яка має бути створена, у порядку, в якому вони були передані.</p> + +<div class="note"> +<p><strong>Заувага:</strong> {{jsxref("Statements/function*", "функції-генератори")}}, створені конструктором <code>GeneratorFunction</code>, не створюють замикань зі своїм контекстом виконання; вони завжди створюються у глобальній області видимості. Під час виконання вони мають доступ лише до власних локальних змінних та до глобальних, але не до змінних області видимості, в якій був викликаний конструктор <code>GeneratorFunction</code>. Це відрізняється від використання {{jsxref("Global_Objects/eval", "eval")}} з кодом для виразу функції-генератора.</p> +</div> + +<p>Виклик конструктора <code>GeneratorFunction</code> як функції (без оператора <code>new</code>) має такий самий ефект, як і виклик його як конструктора.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code><strong>GeneratorFunction.length</strong></code></dt> + <dd>Властивість довжини конструктора <code>GeneratorFunction</code>, чиє значення дорівнює 1.</dd> + <dt>{{jsxref("GeneratorFunction.prototype")}}</dt> + <dd>Дозволяє додавати властивості до усіх об'єктів функцій-генераторів.</dd> +</dl> + +<h2 id="Прототип_GeneratorFunction">Прототип <code>GeneratorFunction</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype', 'Властивості')}}</div> + +<h2 id="Екземпляри_GeneratorFunction">Екземпляри <code>GeneratorFunction</code></h2> + +<p>Екземпляри <code>GeneratorFunction</code> успадковують методи та властивості від {{jsxref("GeneratorFunction.prototype")}}. Як в усіх конструкторах, ви можете змінити прототип конструктора, щоб внести зміни до усіх екземплярів <code>GeneratorFunction</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_функції-генератора_від_конструктора_GeneratorFunction">Створення функції-генератора від конструктора <code>GeneratorFunction</code></h3> + +<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor +var g = new GeneratorFunction('a', 'yield a * 2'); +var iterator = g(10); +console.log(iterator.next().value); // 20 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/function*", "оператор function*")}}</li> + <li>{{jsxref("Operators/function*", "вираз function*")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Statements/function", "оператор function")}}</li> + <li>{{jsxref("Operators/function", "функціональний вираз")}}</li> + <li>{{jsxref("Functions", "Функції", "", 1)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html new file mode 100644 index 0000000000..8f8fcce4c0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html @@ -0,0 +1,65 @@ +--- +title: GeneratorFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +tags: + - ECMAScript 2015 + - GeneratorFunction + - JavaScript + - Ітератор + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>GeneratorFunction.prototype</strong></code> відображає прототип {{jsxref("GeneratorFunction")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкти {{jsxref("GeneratorFunction")}} успадковуються від <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> не можна змінювати.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code><strong>GeneratorFunction.constructor</strong></code></dt> + <dd>Початковим значенням є {{jsxref("GeneratorFunction")}}.</dd> + <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt> + <dd>Значення дорівнює <code>%GeneratorPrototype%</code>.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/globalthis/index.html b/files/uk/web/javascript/reference/global_objects/globalthis/index.html new file mode 100644 index 0000000000..1ca1578f97 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/globalthis/index.html @@ -0,0 +1,87 @@ +--- +title: globalThis +slug: Web/JavaScript/Reference/Global_Objects/globalThis +translation_of: Web/JavaScript/Reference/Global_Objects/globalThis +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><span class="seoSummary">Глобальна властивість <code><strong>globalThis</strong></code> містить значення глобального <code>this</code>, яке являється глобальним об'єктом.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div> + +<p class="hidden">Код для цього інтерактивного приклада зберігається в репозитарії на GitHub. Якщо Ви бажаєте приєднатися до проекту інтерактивних прикладів, будь-ласка зклонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та відправте нам "pull request".</p> + +<p>{{JS_Property_Attributes(1, 0, 1)}}</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">globalThis +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Історично, для доступу до глобальних об'єктів використовується різний синтаксис в різних оточеннях JavaScript. В Веб ви можете використовувати {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}}, або {{domxref("Window.frames", "frames")}} - але в <a href="/en-US/docs/Web/API/Worker">Веб Воркерах</a> лише <code>self</code> працюватиме. В Node.js нічого з вище-перерахоованого не працюватиме, і ви повинні використовувати <code>global</code>.<br> + Ключове слово <code>this</code> ви можете використовувати в середині функцій в не-суворому режимі, інакше <code>this</code> буде <code>undefined</code> в Модулях та в середині функцій в суворому режимі. Ви також можете використовувати <code>Function('return this')()</code>, але середовища, що відключають {{jsxref("eval", "eval()")}}, типу <a href="/en-US/docs/Glossary/CSP">CSP</a> в браузерах, перешкоджають використанню {{jsxref("Function")}} в такому вигляді.</p> + +<p>Властивість <code>globalThis</code> надає стандартний метод доступу до глобального значення <code>this</code> (і як наслідок, безпосередньо до глобального об'єкту) не залежно від середовища. Навідміну від подібних властивостей, таких як <code>window</code> та <code>self</code>, воно гарантує роботу в середовищі де є <code>window</code> та де його немає. Таким чином, ви можете отримати доступ до глобального об'єкту навіть не знаючи в якому середовищі працює код. Щоб запам'ятати назву, просто запам'ятайте що в глобальному отчені значення <code>this</code> дорівнює <code>globalThis</code>.</p> + +<h3 id="HTML_та_WindowProxy">HTML та WindowProxy</h3> + +<p>В різних двіжках об'єкт <code>globalThis</code> буде посиланням до безпосередього глобального об'єкту, але в браузерах, через міркування безпеки в iframe та cross-window взаємодії, він є посиланням до {{jsxref("Proxy")}} навколо фактичного глобалього об'єкту(до якого ви не можете звернутися безпосередньо). Ця відмінність рідко є актуальною для загального використання, але важливо її запам'ятати.</p> + +<h3 id="Іменування">Іменування</h3> + +<p>Деякі інші популярні варіанти імен, такі як <code>self</code> та <code>global</code> були видалені з розгляду через їх схильність порушити сумістність з існуючим кодом. Детальніше дивіться <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">документ мовних пропозиції</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Задовго до <code>globalThis</code>, єдиним надійним крос-платформенним варіантом отримати глобальний об'єкт для оточення був <code>Function('return this')()</code>. Однак, він був причиною <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> порушень в деяких налаштуваннях, таким чином <a href="https://github.com/paulmillr/es6-shim">es6-shim</a> використовує додаткову перевірку, наприклад:</p> + +<pre class="brush: js">var getGlobal = function () { + if (typeof self !== 'undefined') { return self; } + if (typeof window !== 'undefined') { return window; } + if (typeof global !== 'undefined') { return global; } + throw new Error('unable to locate global object'); +}; + +var globals = getGlobal(); + +if (typeof globals.setTimeout !== 'function') { + // нема setTimeout в даному оточенні! +} +</pre> + +<p>За допомогою <code>globalThis</code>, додатковий пошук/перевірки для глобального об'єкту не потрібні більше:</p> + +<pre class="brush: js">if (typeof globalThis.setTimeout !== 'function') { + // нема setTimeout в даному оточенні! +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-globalthis", "<code>globalThis</code>")}}</td> + <td>{{Spec2("ESDraft")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерна_Сумістність">Браузерна Сумістність</h2> + +<div class="hidden">Таблиця сумістності на цій сторінці згенерована з структурованних данних. Якщо ви бажаєте прийняти участь в формуванні даних, будь-ласка, перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> та направте нам "pull request".</div> + +<p>{{Compat("javascript.builtins.globalThis")}}</p> + +<h3 id="Процес_впровадження">Процес впровадження</h3> + +<p>Наступна таблиця надає денний статус впровадження для цього нововведення, оскільки <code>globalThis</code> не отримала крос-браузерну стабільність. Дані згенеровані запуском відносних тестів в<a href="https://github.com/tc39/test262">Test262</a>, стандартного набору JavaScript тестів, в нічній збірці, або останього релізу для кожного браузерного JavaScript "ядра".</p> + +<div>{{EmbedTest262ReportResultsTable("globalThis")}}</div> diff --git a/files/uk/web/javascript/reference/global_objects/index.html b/files/uk/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..9d69b8718a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/index.html @@ -0,0 +1,193 @@ +--- +title: Стандартні вбудовані об'єкти +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - Джава Скріпт +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>У цьому розділі задокументовано всі стандарти JavaScript, вбудовані об'єкти, включаючи їх методи і поля.</p> + +<div class="onlyinclude"> +<p>Термін "глобальні об'єкти" ("global objects") (або стандартні вбудовані об'єкти) тут не варто плутати з глобальними об'єктами (<strong>global object)</strong>. Тут, глобальні об'єкти посилаються на <strong>об'єкти в глобальній області видимості </strong>(але якщо не використовується строгий режим ECMAScript 5; в такому випадку буде повертатися {{jsxref("undefined")}}). <strong>Глобальний об'єкт </strong>може бути доступний через оператор {{jsxref("Operators/this", "this")}} в глобальній області видимості. Фактично, глобальна область видимості <strong>складається з</strong> полів глобальної області видимості, включаючи успадковані поля, якщо такі є.</p> + +<p>Всі інші об'єкти в глобальній області видимості є або <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">створені скріптами користувача</a> або передані хост-додатком. Хост об'єкти доступні в контексті браузера і є задокументованими в цьому <a href="/en-US/docs/Web/API/Reference">API посиланні</a>. Для більш детальної інформації щодо відмінностей <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> і основ <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, дивіться <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">огляд технологій JavaScript</a>.</p> + +<h2 id="Стандартні_об'єкти_по_категоріях">Стандартні об'єкти по категоріях</h2> + +<h3 id="Поля_значень">Поля значень</h3> + +<p>Ці глобальні поля повертають просте значення; вони не мають жодних полів або методів.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>літерал {{jsxref("null")}}</li> +</ul> + +<h3 id="Поля_методів">Поля методів</h3> + +<p>Ці глобальні методи — це методи, які викликаються глобально частіше, ніж на об'єкті і безпосередньо повертають свій результат виконання тому, хто викликав ці методи.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Базові_об'єкти">Базові об'єкти</h3> + +<p>Ці об'єкти є базовими або фундаментальними, на яких базуються всі інші об'єкти. Вони включають об'єкти, які відображають загальні об'єкти (general objects), методи (functions) або помилки (errors).</p> + +<ul> + <li>{{jsxref("Global_Objects/Object", "Object")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Global_Objects/Boolean", "Boolean")}}</li> + <li>{{jsxref("Global_Objects/Symbol", "Symbol")}}</li> + <li>{{jsxref("Global_Objects/Error", "Error")}}</li> + <li>{{jsxref("Global_Objects/EvalError", "EvalError")}}</li> + <li>{{jsxref("Global_Objects/InternalError", "InternalError")}}</li> + <li>{{jsxref("Global_Objects/RangeError", "RangeError")}}</li> + <li>{{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}</li> + <li>{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}</li> + <li>{{jsxref("Global_Objects/TypeError", "TypeError")}}</li> + <li>{{jsxref("Global_Objects/URIError", "URIError")}}</li> +</ul> + +<h3 id="Числа_і_дати">Числа і дати</h3> + +<p>Ці базові об'єкти відображають числа (numbers), дати (dates), або математичні операції (mathematical calculations).</p> + +<ul> + <li>{{jsxref("Global_Objects/Number", "Number")}}</li> + <li>{{jsxref("Global_Objects/Math", "Math")}}</li> + <li>{{jsxref("Global_Objects/Date", "Date")}}</li> +</ul> + +<h3 id="Обробка_тексту">Обробка тексту</h3> + +<p>Ці об'єкти відображають рядки і підтримують їх обробку.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Індексовані_колекції">Індексовані колекції</h3> + +<p>Ці об'єкти відображають колекції даних, які відсортовані по значенню індекса. Вони включають типізовані масиви і масиво-подібні конструкції.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Колекції_по_ключах">Колекції по ключах</h3> + +<p>Ці об'єкти відображають колекції, які використовують ключі; вони містять елементи, котрі ітеруються в порядку вставлення в колекцію.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Колекції_векторів">Колекції векторів</h3> + +<p>{{Glossary("SIMD")}} векторні типи даних є об'єктами, в яких дані розташовані в лініях.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Структурні_дані">Структурні дані</h3> + +<p>Ці об'єкти відображають і взаємодіють з структурованими буферами даних і зашифрованими даними JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Об'єкти_контролю_абстракціями">Об'єкти контролю абстракціями</h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> + +<h3 id="Відображення">Відображення</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Інтернаціоналізація">Інтернаціоналізація</h3> + +<p>Доповнення до основ ECMAScript для чутливих до мови функціональних можливостей.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Нестандартні_об'єкти">Нестандартні об'єкти</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Інші">Інші</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> + +<p> </p> diff --git a/files/uk/web/javascript/reference/global_objects/infinity/index.html b/files/uk/web/javascript/reference/global_objects/infinity/index.html new file mode 100644 index 0000000000..5224164faa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/infinity/index.html @@ -0,0 +1,79 @@ +--- +title: Infinity +slug: Web/JavaScript/Reference/Global_Objects/Infinity +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Глобальна властивість <code><strong>Infinity</strong></code> є числовим значенням, що представляє нескінченність.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p><code>Infinity</code> - це властивість <em>глобального об'єкта</em>, або, іншими словами, змінна глобальної області видимості.</p> + +<p>Початкове значення <code>Infinity</code> дорівнює {{jsxref("Number.POSITIVE_INFINITY")}}. Значення <code>Infinity</code> (позитивна нескінченність) більше будь-якого іншого числа. Математично це значення поводиться так само, як нескінченність; наприклад, будь-яке позитивне число, помножене на <code>Infinity</code>, дорівнює <code>Infinity</code>, а будь-яке число, розділене на <code>Infinity</code>, дорівнює 0.</p> + +<p>Як визначено у специфікації ECMAScript 5, <code>Infinity</code> є властивістю тільки для читання (реалізовано у JavaScript 1.8.5 / Firefox 4).</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">console.log(Infinity ); /* Infinity */ +console.log(Infinity + 1 ); /* Infinity */ +console.log(Math.pow(10, 1000)); /* Infinity */ +console.log(Math.log(0) ); /* -Infinity */ +console.log(1 / Infinity ); /* 0 */ +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізовано у JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Infinity")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/internalerror/index.html b/files/uk/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..59e8b06396 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,83 @@ +--- +title: InternalError +slug: Web/JavaScript/Reference/Global_Objects/InternalError +tags: + - Error + - InternalError + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p><strong>Об'єкт</strong> <strong><code>InternalError</code> </strong>позначає внутрішню помилку, що виникла у рушії<strong> </strong>JavaScript. Наприклад: <strong>"InternalError</strong>: too much recursion".</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Виняток <code>InternalError</code> викидається, коли виникає внутрішня помилка у рушії JavaScript.</p> + +<p>Приклади використання здебільшого стосуються випадків, коли чогось забагато, наприклад:</p> + +<ul> + <li>"too many switch cases",</li> + <li>"too many parentheses in regular expression",</li> + <li>"array initializer too large",</li> + <li>"too much recursion".</li> +</ul> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt>{{jsxref("InternalError.prototype")}}</dt> + <dd>Дозволяє додавати властивості до об'єктів <code>InternalError</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Сам <code>InternalError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p> + +<h2 id="Екземпляри_InternalError">Екземпляри <code>InternalError</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Методи')}}</div> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.InternalError")}}</p> +</div> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("InternalError.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html new file mode 100644 index 0000000000..bedf48c367 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html @@ -0,0 +1,62 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +tags: + - Error + - InternalError + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>Властивість <code><strong>InternalError.prototype</strong></code> є прототипом конструктора {{jsxref("InternalError")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Всі екземпляри {{jsxref("InternalError")}} успадковуються від <code>InternalError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>InternalError.prototype.constructor</code></dt> + <dd>Визначає функцію, яка створила прототип об'єкта.</dd> + <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> + <dd>Повідомлення помилки. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> + <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> + <dd>Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> + <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> + <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> + <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча прототип {{jsxref("InternalError")}} не має власних методів, екземпляри {{jsxref("InternalError")}} успадковують деякі методи через ланцюжок прототипів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.InternalError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/isfinite/index.html b/files/uk/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..d1c89ad117 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,88 @@ +--- +title: isFinite() +slug: Web/JavaScript/Reference/Global_Objects/isFinite +tags: + - JavaScript + - isFinine + - Довідка + - метод + - функції +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Глобальна функція <code><strong>isFinite()</strong></code> визначає, чи є передане значення скінченним числом. За необхідності, параметр спочатку приводиться до числа.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">isFinite(<var>testValue</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>testValue</var></code></dt> + <dd>Значення, яке потрібно перевірити на скінченність.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><strong><code>false</code></strong>, якщо аргумент є позитивною чи від'ємною {{jsxref("Infinity","нескінченністю")}}, або {{jsxref("NaN")}}, або {{jsxref("undefined")}}; інакше, <strong><code>true</code></strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>isFinite</code> є функцією верхнього рівня, не пов'язаною з жодним об'єктом.</p> + +<p>Ви можете скористатись цією функцією, щоб визначити, чи є значення скінченним числом. Функція <code>isFinite</code> досліджує число, передане у аргументі. Якщо аргумент дорівнює <code>NaN</code>, позитивній нескінченності чи від'ємній нескінченності, цей метод вертає <code>false</code>; інакше, він вертає <code>true</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_isFinite">Використання isFinite</h3> + +<pre class="brush: js notranslate">isFinite(Infinity); // false +isFinite(NaN); // false +isFinite(-Infinity); // false + +isFinite(0); // true +isFinite(2e64); // true +isFinite(910); // true + +isFinite(null); // true, дорівнювало б false з більш + // надійним методом Number.isFinite(null) + +isFinite('0'); // true, дорівнювало б false з більш + // надійним методом Number.isFinite("0") +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.isFinite")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/isnan/index.html b/files/uk/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..96077f3f93 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,190 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Функція <code><strong>isNaN()</strong></code> визначає, чи є передане значення типу {{jsxref("NaN")}} чи ні. Примітка: coercion всередині функції<code>isNaN</code> має <a href="#Description">цікаві</a> правила використання; можливе альтернативне використання {{jsxref("Number.isNaN()")}}, як визначено у ECMAScript 2015.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>isNaN(v<em>alue</em>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>value</code></dt> + <dd>The value to be tested.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><strong><code>true</code></strong> якщо дане значення є {{jsxref("NaN")}}; інакше, <strong><code>false</code></strong>.</p> + +<h2 id="Description">Description</h2> + +<h3 id="The_necessity_of_an_isNaN_function">The necessity of an <code>isNaN</code> function</h3> + +<p>Unlike all other possible values in JavaScript, it is not possible to rely on the equality operators (== and ===) to determine whether a value <em>is</em> {{jsxref("NaN")}} or not, because both <code>NaN == NaN</code> and <code>NaN === NaN</code> evaluate to <code>false</code>. Hence, the necessity of an <code>isNaN</code> function.</p> + +<h3 id="Origin_of_NaN_values">Origin of <code>NaN</code> values</h3> + +<p><code>NaN</code> values are generated when arithmetic operations result in <em>undefined</em> or <em>unrepresentable</em> values. Such values do not necessarily represent overflow conditions. A <code>NaN</code> also results from attempted coercion to numeric values of non-numeric values for which no primitive numeric value is available.</p> + +<p>For example, dividing zero by zero results in a <code>NaN</code> — but dividing other numbers by zero does not.</p> + +<h3 id="Confusing_special-case_behavior">Confusing special-case behavior</h3> + +<p>Since the very earliest versions of the <code>isNaN</code> function specification, its behavior for non-numeric arguments has been confusing. When the argument to the <code>isNaN</code> function is not of type <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a>, the value is first coerced to a Number. The resulting value is then tested to determine whether it is {{jsxref("NaN")}}. Thus for non-numbers that when coerced to numeric type result in a valid non-NaN numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." The confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as IEEE-754 floating-point values. The function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an IEEE-754 'Not A Number' value?"</p> + +<p>The latest version of ECMAScript (ES2015) contains the {{jsxref("Number.isNaN()")}} function. <code>Number.isNaN(x)</code> will be a reliable way to test whether <code>x</code> is <code>NaN</code> or not. Even with <code>Number.isNaN</code>, however, the meaning of <code>NaN</code> remains the precise numeric meaning, and not simply, "not a number". Alternatively, in absense of <code>Number.isNaN</code>, the expression <code>(x != x)</code> is a more reliable way to test whether variable <code>x</code> is <code>NaN</code> or not, as the result is not subject to the false positives that make <code>isNaN</code> unreliable.</p> + +<p>A polyfill for <code>isNaN</code> would be (the polyfill leverages the unique never-equal-to-itself characteristic of <code>NaN</code>):</p> + +<pre class="brush: js">var isNaN = function(value) { + var n = parseInt(value); + return n !== n; +};</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">isNaN(NaN); // true +isNaN(undefined); // true +isNaN({}); // true + +isNaN(true); // false +isNaN(null); // false +isNaN(37); // false + +// strings +isNaN('37'); // false: "37" is converted to the number 37 which is not NaN +isNaN('37.37'); // false: "37.37" is converted to the number 37.37 which is not NaN +isNaN("37,5"); // true +isNaN('123ABC'); // true: parseInt("123ABC") is 123 but Number("123ABC") is NaN +isNaN(''); // false: the empty string is converted to 0 which is not NaN +isNaN(' '); // false: a string with spaces is converted to 0 which is not NaN + +// dates +isNaN(new Date()); // false +isNaN(new Date().toString()); // true + +// This is a false positive and the reason why isNaN is not entirely reliable +isNaN('blabla'); // true: "blabla" is converted to a number. + // Parsing this as a number fails and returns NaN +</pre> + +<h3 id="Useful_special-case_behavior">Useful special-case behavior</h3> + +<p>There is a more usage oriented way to think of <code>isNaN()</code>: If <code>isNaN(x)</code> returns <code>false</code>, you can use <code>x</code> in an arithmetic expression not making the expression return <code>NaN</code>. If it returns <code>true</code>, <code>x</code> will make every arithmetic expression return <code>NaN</code>. This means that in JavaScript, <code>isNaN(x) == true</code> is equivalent to <code>x - 0</code> returning <code>NaN</code> (though in JavaScript <code>x - 0 == NaN</code> always returns false, so you can't test for it). Actually, <code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code>, and <code>Number.isNaN(Number(x))</code> always return the same and in JavaScript <code>isNaN(x)</code> is just the shortest possible form to express each of these terms.</p> + +<p>You can use this, for example, to test whether an argument to a function is arithmetically processable (usable "like" a number), or if it's not and you have to provide a default value or something else. This way you can have a function that makes use of the full versatility JavaScript provides by implicitly converting values depending on context.</p> + +<h2 id="Examples_2">Examples</h2> + +<pre class="brush: js">function increment(x) { + if (isNaN(x)) x = 0; + return x + 1; +} + +// The same effect with Number.isNaN(): +function increment(x) { + if (Number.isNaN(Number(x))) x = 0; + return x + 1; +} + +// In the following cases for the function's argument x, +// isNaN(x) is always false, although x is indeed not a +// number, but can be used as such in arithmetical +// expressions +increment(''); // 1: "" is converted to 0 +increment(new String()); // 1: String object representing an empty string is converted to 0 +increment([]); // 1: [] is converted to 0 +increment(new Array()); // 1: Array object representing an empty array is converted to 0 +increment('0'); // 1: "0" is converted to 0 +increment('1'); // 2: "1" is converted to 1 +increment('0.1'); // 1.1: "0.1" is converted to 0.1 +increment('Infinity'); // Infinity: "Infinity" is converted to Infinity +increment(null); // 1: null is converted to 0 +increment(false); // 1: false is converted to 0 +increment(true); // 2: true is converted to 1 +increment(new Date()); // returns current date/time in milliseconds plus 1 + +// In the following cases for the function's argument x, +// isNaN(x) is always false and x is indeed a number +increment(-1); // 0 +increment(-0.1); // 0.9 +increment(0); // 1 +increment(1); // 2 +increment(2); // 3 +// ... and so on ... +increment(Infinity); // Infinity + +// In the following cases for the function's argument x, +// isNaN(x) is always true and x is really not a number, +// thus the function replaces it by 0 and returns 1 +increment(String); // 1 +increment(Array); // 1 +increment('blabla'); // 1 +increment('-blabla'); // 1 +increment(0 / 0); // 1 +increment('0 / 0'); // 1 +increment(Infinity / Infinity); // 1 +increment(NaN); // 1 +increment(undefined); // 1 +increment(); // 1 + +// isNaN(x) is always the same as isNaN(Number(x)), +// but the presence of x is mandatory here! +isNaN(x) == isNaN(Number(x)); // true for every value of x, including x == undefined, + // because isNaN(undefined) == true and Number(undefined) returns NaN, + // but ... +isNaN() == isNaN(Number()); // false, because isNaN() == true and Number() == 0 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.isNaN")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/json/index.html b/files/uk/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..af5818da2a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,158 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +tags: + - JSON + - JavaScript + - Довідка + - Об'єкт +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <strong><code>JSON</code></strong> містить методи для розбору <a class="external" href="http://json.org/">JavaScript Object Notation</a> ({{glossary("JSON")}}) і конвертації значень у JSON. Його можна або просто викликати, або конструювати; і окрім своїх двох методів він не має у собі іншої корисної функціональності.</p> + +<h2 id="Опис">Опис</h2> + +<h3 id="Об'єктна_нотація_JavaScript">Об'єктна нотація JavaScript</h3> + +<p>JSON - це синтаксис для серіалізації об'єктів, масивів, чисел, строк, булевих значень, та {{jsxref("null")}}. Він заснований на синтаксисі JavaScript, проте дещо відрізняється від нього: деякий JavaScript не є JSON, і деякий JSON не є JavaScript. Докладніше у <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> + +<table> + <caption>Відмінності JavaScript і JSON</caption> + <thead> + <tr> + <th scope="col">Тип у JavaScript</th> + <th scope="col">Відмінність у JSON</th> + </tr> + </thead> + <tbody> + <tr> + <td>Об'єкти та масиви</td> + <td>Назви полів повинні являти собою строки у подвійних лапках; прикінцеві коми заборонені.</td> + </tr> + <tr> + <td>Числа</td> + <td>Ведучі нулі також заборонені (При виконанні JSON.stringify нулі просто проігноруються, проте JSON.parse викине SyntaxError); після десяткової крапки повинна слідувати хоча б одна цифра.</td> + </tr> + <tr> + <td>Строки</td> + <td> + <p>Лише обмежений набір символів можна екранувати; деякі керівні символи заборонені; такі символи юнікоду, як розділювач рядків (<a href="http://unicode-table.com/en/2028/">U+2028</a>) та розділювач абзаців (<a href="http://unicode-table.com/en/2029/">U+2029</a>) дозволені; строки повинні виділятись подвійними лапками. Зверніть увагу на наступні приклади, де {{jsxref("JSON.parse()")}} нормально працює, проте при обчисленні виразу як JavaScript-коду буде отримана помилка {{jsxref("SyntaxError")}}:</p> + + <pre class="brush: js"> +var code = '"\u2028\u2029"'; +JSON.parse(code); // працює +eval(code); // помилка +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Повний синтаксис JSON виглядає так:</p> + +<pre><var>JSON</var> = <strong>null</strong> + або <strong>true</strong> або <strong>false</strong> + або <var>JSONNumber</var> + або <var>JSONString</var> + або <var>JSONObject</var> + або <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>чи</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + або <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>або</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + або <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + або <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + чи <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>або</em> <strong>+</strong> <var>Digits</var> + або <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + чи <var>Digits</var> <var>Digit</var> +<var>Digit</var> = від <strong>0</strong> до <strong>9</strong> +<var>OneToNine</var> = <strong>від 1</strong> до <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>чи</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + чи <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = будь-який символ + за виключенням <strong>"</strong> або <strong>\</strong> або від U+0000 до U+001F + або <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> або <strong>\/</strong> або <strong>\\</strong> або <strong>\b</strong> або <strong>\f</strong> або <strong>\n</strong> або <strong>\r</strong> або <strong>\t</strong> + або <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = від <strong>0</strong> до <strong>9</strong> + або від <strong>A</strong> до <strong>F</strong> + або від <strong>a</strong> до <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + чи <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + чи <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>чи</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>чи</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> + +<p>Беззмістовні пробільні символи можуть бути будь-де за винятком <code><var>JSONNumber</var></code> (числа не повинні містити пробіли) або <code><var>JSONString</var></code> (де це сприймається за частину строки, або призведе до помилки). Символ табуляції (<a href="http://unicode-table.com/en/0009/">U+0009</a>), повернення каретки (<a href="http://unicode-table.com/en/000D/">U+000D</a>), початку рядка (<a href="http://unicode-table.com/en/000A/">U+000A</a>) та пробіл (<a href="http://unicode-table.com/en/0020/">U+0020</a>) - це всі дійсні пробільні символи.</p> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Розбирає строку як JSON, як опція — перетворює результат і його властивості, та повертає його.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Повертає строку JSON відповідно до поданого значення. Як опція — може включити до результату лише певні поля чи замінити значення полів згідно з побажаннями користувача.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<div> +<div> +<div> +<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.JSON")}}</p> +</div> +</div> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/json/parse/index.html b/files/uk/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..685832a864 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,133 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript5 + - JSON + - JavaScript + - Method + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +<div>{{JSRef}}</div> + +<div><span class="seoSummary">Метод <code><strong>JSON.parse()</strong></code> розбирає рядок із JSON, створюючи відповідне до його вмісту значення чи об'єкт. Якщо вказати функцію <code>reviver</code> — другий необов'язковий параметр — її буде використано для перетворення створеного об'єкта та його властивостей перед поверненням.</span> + +<div> </div> + +<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>text</code></dt> + <dd>Рядок, що його має бути розібрано, як JSON. Докладні відомості про синтаксис JSON наведено в статті про об'єкт {{jsxref("JSON")}}.</dd> + <dt><code>reviver</code> {{optional_inline}}</dt> + <dd>Якщо вказано функцію, її буде використано для перетворення отриманих значень перед поверненням.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>{{jsxref("Object", "Об'єкт")}}, що відповідає переданому JSON-рядку.</p> + +<h3 id="Винятки">Винятки</h3> + +<p>Викидає виняток {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}, якщо вміст переданого рядка не є належним JSON.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_JSON.parse()">Використання <code>JSON.parse()</code></h3> + +<pre class="brush: js">JSON.parse('{}'); // {} +JSON.parse('{"x": {"value": 1}}'); // {x: {value: 1}} +JSON.parse('true'); // true +JSON.parse('"щось навіщось"'); // "щось навіщось" +JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] +JSON.parse('null'); // null +</pre> + +<h3 id="Використання_параметра_reviver">Використання параметра <code>reviver</code></h3> + +<p>Якщо <code>reviver</code> вказано, то його буде використано для <em>перетворення</em> кожного значення, отриманого шляхом розбору JSON-рядка. Кожне значення (об'єкт та всі його властивості) окремо піддається перетворенню за допомогою <code>reviver</code> в порядку зсередини назовні (від властивостей найглибше вкладених об'єктів). Задля перетворення чергової властивості до функції <code>reviver</code> передається два аргументи: ім'я властивості (рядок) та її значення. Посилання <code>this</code> вказує на об'єкт, що містить зазначену властивість.</p> + +<p>Якщо функція <code>reviver</code> повертає {{jsxref("undefined")}} (або взагалі не вертає значення), властивість буде видалено з об'єкта. Інакше повернуте значення буде встановлено замість попереднього. Отже, якщо ви маєте на меті перетворити лише деякі значення, для решти функція <code>reviver</code> має вертати значення другого аргументу без змін.</p> + +<pre class="brush: js">JSON.parse('{"p": 5, "x": "5"}', function (key, value) { + return typeof value === 'number' + ? value * 2 // Повернути подвоєне значення, якщо це число. + : value // Решту значень повернути без змін. +}); + +// { p: 10, x: "5" } + +JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function (key, value) { + // Вивести ім'я чергової властивості (для останньої це порожній рядок — ""). + console.log(key); + + // Повернути значення властивості без змін. + return value; +}); + +// 1 +// 2 +// 4 +// 6 +// 5 +// 3 +// "" +</pre> + +<h3 id="Прикінцеві_коми_вважаються_за_помилку">Прикінцеві коми вважаються за помилку</h3> + +<pre class="example-bad brush: js example-bad">// Обидва виклики викидають SyntaxError. +JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкова виознака. Запроваджено у JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.JSON.parse")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/json/stringify/index.html b/files/uk/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..ca0fdc87fc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,321 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify +tags: + - JSON + - JavaScript + - stringify + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>JSON.stringify()</code></strong> подає об'єкт чи {{glossary("Primitive", "просту величину")}} як JSON-рядок, певним чином перетворюючи або оминаючи ті чи ті властивості, якщо вказано необов'язковий другий аргумент — функцію або масив <code>replacer</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, яке слід перетворити на рядок JSON.</dd> + <dt><code>replacer</code> {{optional_inline}}</dt> + <dd>Функція, що змінює значення перед їхнім перетворенням на JSON, або масив {{jsxref("Global_Objects/String", "рядків")}} та {{jsxref("Global_Objects/Number", "чисел")}}, що окреслюють множину властивостей, які буде включено у створений JSON-рядок. Якщо цей аргумент відсутній чи вказано <code>null</code>, до створеного JSON-рядка потраплять всі наявні властивості об'єкта без змін.</dd> + <dt><code>space</code> {{optional_inline}}</dt> + <dd>Значення типу {{jsxref("Global_Objects/String", "String")}} або {{jsxref("Число", "Number")}} що використовується для додавання відступів у JSON задля покращення легкочитності. Якщо вказано число — воно означає кількість пропусків в одному відступі. Якщо передати число більше за 10, буде використано 10. Значення менші за 1 вказують на те що відступи не використовуватимуться. Якщо вказано рядок, то його (або перші 10 символів, якщо він задовгий) буде використано як відступ. Якщо ж параметр не вказано (або <code>null</code>), відступи не додаватимуться.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок JSON, створений із вказаного значення.</p> + +<h3 id="Винятки">Винятки</h3> + +<p>Викидає виняток {{jsxref("TypeError")}} ("cyclic object value") у випадку, якщо знайдено циклічне посилання.</p> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>JSON.stringify()</code> перетворює значення на рядок, що містить JSON-запис того значення:</p> + +<ul> + <li>Якщо значення має свій метод <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify$edit#toJSON()_behavior">toJSON()</a>, саме він буде відповідати за дані, що будуть серіалізовані.</li> + <li>Об'єкти {{jsxref("Global_Objects/Boolean", "Boolean")}}, {{jsxref("Число", "Number")}} та {{jsxref("Global_Objects/String", "String")}} в типовий спосіб перетворюються на відповідні {{glossary("Primitive", "прості величини")}};</li> + <li>{{glossary("Function", "Функцію")}}, {{jsxref("undefined")}} або значення типу {{jsxref("Symbol")}} під час перетворення буде або вилучено (якщо знайдено в об'єкті), або обернено на {{jsxref("null")}} (якщо знайдено в масиві). Метод <code>JSON.stringify</code> також може вертати <code>undefined</code>, якщо йому передано «щирі» величини, як-от <code>JSON.stringify(function(){})</code> чи <code>JSON.stringify(undefined)</code>;</li> + <li>Всі властивості, що мають за ключ величину типу {{jsxref("Symbol")}}, буде знехтувано, навіть якщо задіяно функцію <code>replacer</code>;</li> + <li>Екземпляри {{jsxref("Date")}} реалізовують функцію <code>toJSON()</code> шляхом повертання рядку (такого ж, як і <code>date.toISOString()</code>), тому вони будуть вважатись рядками.</li> + <li>Такі числа, як {{jsxref("Infinity")}} та {{jsxref("NaN")}}, так як і об'єкт {{jsxref("null")}} будуть вважатися за <code>null</code>.</li> + <li>Для всіх інших екземплярів {{jsxref("Object")}}, включно з {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} та {{jsxref("WeakSet")}} будуть серіалізовані лише їх перелічувані поля.</li> +</ul> + +<pre class="brush: js">JSON.stringify({}); // '{}' +JSON.stringify(true); // 'true' +JSON.stringify('foo'); // '"foo"' +JSON.stringify([1, 'false', false]); // '[1,"false",false]' +JSON.stringify([NaN, null, Infinity]); // '[null,null,null]' +JSON.stringify({ x: 5 }); // '{"x":5}' + +JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) +// '"2006-01-02T15:04:05.000Z"' + +JSON.stringify({ x: 5, y: 6 }); +// '{"x":5,"y":6}' or '{"y":6,"x":5}' +JSON.stringify([new Number(1), new String('false'), new Boolean(false)]); +// '[1,"false",false]' + +JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); +// '{"x":[10,null,null,null]}' + +// Стандартні структури даних +JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]); +// '[{},{},{},{}]' + +// TypedArray +JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]); +// '[{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]); +// '[{"0":1},{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Float32Array([1]), new Float64Array([1])]); +// '[{"0":1},{"0":1}]' + +// toJSON() +JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } }); +// '11' + +// Значення типу Symbol: +JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); +// '{}' +JSON.stringify({ [Symbol('foo')]: 'foo' }); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { + if (typeof k === 'symbol') { + return 'a symbol'; + } +}); +// '{}' + +// Неперелічувані властивості: +JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); +// '{"y":"y"}' + +</pre> + +<h3 id="Параметер_replacer">Параметер <code>replacer</code></h3> + +<p>Параметр <code>replacer</code> може бути функцією або масивом. Якщо то функція, вона прийматиме два параметри: ключ та значення, яке са́ме перетворюється. Об'єкт, якому належить перетворювана властивість, доступний всередині <code>replacer</code> через <code>this</code>. Спершу функцію буде викликано з порожнім рядком замість ключа й тим об'єктом, який має бути перетворено, а відтак для кожної властивості того об'єкта буде здійснено окремий виклик <code>replacer</code>. Кожен виклик має вертати значення, що належить додати до рядка JSON:</p> + +<ul> + <li>Якщо повернути {{jsxref("Число", "Number")}}, до JSON буде додано текстовий запис числа як значення властивості;</li> + <li>Якщо повернути {{jsxref("String")}}, до JSON буде додано рядок як значення властивості;</li> + <li>Якщо повернути {{jsxref("Boolean")}}, до JSON буде додано «true» або «false» як значення властивості;</li> + <li>Якщо повернути <code>null</code>, <code>null</code> і буде додано до JSON-рядку.</li> + <li>Якщо повернути інший об'єкт або масив, його буде рекурсивно перетворено на JSON в той самий спосіб (викликаючи <code>replacer</code> для кожної його властивості), а тоді додано до JSON як значення властивості (якщо повернутий об'єкт є функцією, до JSON нічого додано не буде);</li> + <li>Якщо повернути {{jsxref("undefined")}}, властивість не потрапить до JSON.</li> +</ul> + +<div class="note"><strong>Заувага:</strong> Вилучати елементи масиву за допомогою <code>replacer</code> неможливо — якщо повернути <code>undefined</code>, значення елемента лише обернеться на <code>null</code>.</div> + +<div class="note"><strong>Note:</strong> If you wish the replacer to distinguish an initial object from a key with an empty string property (since both would give the empty string as key and potentially an object as value), you will have to keep track of the iteration count (if it is beyond the first iteration, it is a genuine empty string key).</div> + +<h4 id="Приклад_із_функцією">Приклад із функцією</h4> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">replacer</span><span class="punctuation token">(</span>key<span class="punctuation token">,</span> value<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Фільтрація властивостей</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> value <span class="operator token">===</span> <span class="string token">'string'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> undefined<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="punctuation token">{</span>foundation<span class="punctuation token">:</span> <span class="string token">'Mozilla'</span><span class="punctuation token">,</span> model<span class="punctuation token">:</span> <span class="string token">'box'</span><span class="punctuation token">,</span> week<span class="punctuation token">:</span> <span class="number token">45</span><span class="punctuation token">,</span> transport<span class="punctuation token">:</span> <span class="string token">'car'</span><span class="punctuation token">,</span> month<span class="punctuation token">:</span> <span class="number token">7</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>foo<span class="punctuation token">,</span> replacer<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// '{"week":45,"month":7}'</span></code></pre> + +<h4 id="Приклад_із_масивом">Приклад із масивом</h4> + +<p>Якщо <code>replacer</code> являється масивом, його значення позначають імена властивостей вхідного об'єкту, що будуть включені в результат.</p> + +<p> </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>foo<span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'week'</span><span class="punctuation token">,</span> <span class="string token">'month'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// '{"week":45,"month":7}', будуть збережені лише властивості "week" та "month"</span></code></pre> + +<h3 id="Параметер_space">Параметер <code>space</code></h3> + +<p>Аргумент <code>space</code> може застосовуватись для управління відступами в результуючому рядку. Якщо в якості аргументу дано число, кожен із наступних рівнів серіалізації матиме відступ у вигляді відповідної поданому числу кількості пробілів (але не більше 10). Якщо ж в якості аргументу дано рядок, його і буде використано для виконання відступу (або ж 10 перших символів, якщо сам рядок довший).</p> + +<pre class="brush: js">JSON.stringify({ a: 1, b: {c: 2} }, null, 3); +// Вертає рядок: +// '{ +// "a": 1, +// "b": { +// "c": 2 +// } +// }' +</pre> + +<p>А тут замість пропусків буде вжито символ табуляції:</p> + +<pre class="brush: js">JSON.stringify({ a: 1, b: {c: 2} }, null, '\t'); +// Вертає рядок: +// '{ +// "a": 1, +// "b": { +// "c": 2 +// } +// }' +</pre> + +<h3 id="Особливий_метод_toJSON()">Особливий метод <code>toJSON()</code></h3> + +<p>Й хоча методи перетворюваних об'єктів загалом нехтуються, метод з ім'ям <code>toJSON</code> має особливе призначення. Якщо перетворюваний об'єкт має метод <code>toJSON()</code>, його буде викликано, а повернене значення вжито (перетворено на JSON) замість самого об'єкту. <code>JSON.stringify()</code> викликає метод <code>toJSON</code> з одним аргументом:</p> + +<p> </p> + +<ul> + <li>якщо цей об'єкт являється значенням властивості, то ім'я властивості;</li> + <li>якщо це масив, то рядок із індексом масиву;</li> + <li>порожній рядок, якщо <code>JSON.stringify()</code> було викликано прямо на цьому об'єкті</li> +</ul> + +<p>Наприклад:</p> + +<p> </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> + data<span class="punctuation token">:</span> <span class="string token">'data'</span><span class="punctuation token">,</span> + + <span class="function token">toJSON</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span> + <span class="keyword token">return</span> `Тепер я вкладений об'єкт під ключем <span class="string token">'${key}'</span>`<span class="punctuation token">;</span> + + <span class="keyword token">else</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// '{"data":"data"}'</span> + +JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span><span class="punctuation token">{</span> obj <span class="punctuation token">}</span><span class="punctuation token">)</span> +<span class="comment token">// '{"obj":"Тепер я вкладений об'єкт під ключем 'obj'"}'</span> + +JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span><span class="punctuation token">[</span> obj <span class="punctuation token">]</span><span class="punctuation token">)</span> +<span class="comment token">// '["Тепер я вкладений об'єкт під ключем '0'"]'</span></code></pre> + +<h3 id="Проблема_із_JSON.stringify()_при_серіалізації_циклічних_посилань">Проблема із <code>JSON.stringify()</code> при серіалізації циклічних посилань</h3> + +<p>Зауважте, що, оскільки <a href="https://www.json.org/">JSON format</a> не підтримує об'єктні посилання (хоча є <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">чорновик IETF</a>), при спробі кодування об'єкту із циклічними посиланнями буде отримано {{jsxref("TypeError")}}.</p> + +<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> circularReference <span class="operator token">=</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +circularReference<span class="punctuation token">.</span>myself <span class="operator token">=</span> circularReference<span class="punctuation token">;</span> + +<span class="comment token">// Серіалізація циклічного посилання викине "TypeError: cyclic object value"</span> +JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>circularReference<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Для виконання серіалізації циклічних посилань ви можете використати бібліотеку, що їх підтримує (зокрема <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> від Douglas Crockford), або ж реалізувати рішення самостійно, для чого знадобиться пошук і заміна (або видалення) циклічних посилань на підходящі для серіалізації значення.</p> + +<h3 class="highlight-spanned" id="Тлумачення_отриманого_JSON_як_коду_JavaScript"><span class="highlight-span">Тлумачення отриманого JSON як коду JavaScript</span></h3> + +<p>Завважте, що <a class="external external-icon" href="http://timelessrepo.com/json-isnt-a-javascript-subset" rel="noopener">JSON не є точнісінькою підмножиною JavaScript</a>. Два розділювачі (рядка та параграфу) не треба екранувати у JSON, але потрібно у JavaScript. Тож якщо ви маєте намір застосувати функцію <a class="new" href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/eval" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>eval()</code></a> або скористатися <a class="external external-icon" href="https://uk.wikipedia.org/wiki/JSONP" rel="noopener" title="JSONP">JSONP</a>, доведеться здійснити невеличкі перетворення:</p> + +<p> </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> jsFriendlyJSONStringify <span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span><span class="punctuation token">.</span> + <span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/\u2028/g</span><span class="punctuation token">,</span> <span class="string token">'\\u2028'</span><span class="punctuation token">)</span><span class="punctuation token">.</span> + <span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/\u2029/g</span><span class="punctuation token">,</span> <span class="string token">'\\u2029'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> s <span class="operator token">=</span> <span class="punctuation token">{</span> + a<span class="punctuation token">:</span> String<span class="punctuation token">.</span><span class="function token">fromCharCode</span><span class="punctuation token">(</span><span class="number token">0x2028</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + b<span class="punctuation token">:</span> String<span class="punctuation token">.</span><span class="function token">fromCharCode</span><span class="punctuation token">(</span><span class="number token">0x2029</span><span class="punctuation token">)</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'('</span> <span class="operator token">+</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "SyntaxError: unterminated string literal"</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Якщо ловити виключення не має потреби</span> +<span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'('</span> <span class="operator token">+</span> <span class="function token">jsFriendlyJSONStringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// console.log у Firefox знімає екранування Юнікоду, якщо</span> +<span class="comment token">// виводиться в консоль, тому застосуймо alert</span> +<span class="function token">alert</span><span class="punctuation token">(</span><span class="function token">jsFriendlyJSONStringify</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// {"a":"\u2028","b":"\u2029"}</span></code></pre> + +<h3 id="Приклад_застосування_JSON.stringify()_із_localStorage">Приклад застосування <code>JSON.stringify()</code> із <code>localStorage</code></h3> + +<p>У випадку, якщо ви хочете зберегти об'єкт, створений вашим користувачем і дозволити відновити його навіть після закриття браузера, ось наступний приклад із моделлю застосування <code>JSON.stringify()</code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Створення зразка JSON</span> +<span class="keyword token">var</span> session <span class="operator token">=</span> <span class="punctuation token">{</span> + <span class="string token">'screens'</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">,</span> + <span class="string token">'state'</span><span class="punctuation token">:</span> <span class="keyword token">true</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenA'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">450</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">250</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenB'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">650</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">350</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenC'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">750</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenD'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">250</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">60</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenE'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">390</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenF'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">1240</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">650</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Конвертація рядка JSON через JSON.stringify()</span> +<span class="comment token">// далі збереження у localStorage із іменем "session</span>" +localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'session'</span><span class="punctuation token">,</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>session<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Приклад, як перетворити рядок, отриманий за допомогою </span> +<span class="comment token">// JSON.stringify() і збережений у localStorage назад у JSON-об'єкт</span> +<span class="keyword token">var</span> restoredSession <span class="operator token">=</span> JSON<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span>localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'session'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Тепер змінна restoredSession містить об'єкт, що був раніше збережений</span> +<span class="comment token">// у localStorage</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>restoredSession<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Первинне визначення. Запроваджено у JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<div>{{Compat("javascript.builtins.JSON.stringify")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("JSON.parse()")}}</li> + <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Вводить дві функції: <code>JSON.decycle</code> та <code>JSON.retrocycle</code>. Вони дають можливість кодувати і декодувати циклічні структури і ділянки у розширений і зворотньо сумісний формат JSON.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/map/index.html b/files/uk/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..9377f478da --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,201 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Об'єкт <strong><code>Map</code></strong> зберігає пари ключ-значення.</span> Будь-яке значення (і об'єкт, і примітивне значення) може бути використано і як ключ, і як значення.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new Map([<em>iterable</em>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>{{jsxref("Array")}} або інший <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">об'єкт, що перебирається</a>, чиї елементи є парами ключ-значення (масиви з двома елементами, наприклад, <code>[[1, 'one'], [2, 'two']]</code> ). Кожна пара ключ-значення додається до нового <code>Map</code>; значення <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font> вважаються <code>undefined</code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт <code>Map</code> перебирає свої елементи у порядку їх введення — цикл {{jsxref("Statements/for...of", "for...of")}} повертає масив <code>[ключ, значення]</code> під час кожної ітерації.</p> + +<p>Слід зазначити, що <code>Map</code>, що є <code>Map</code>'ом об'єкта, especially a dictionary of dictionaries, буде перебиратися у порядку додавання елементів в об'єкт - у довільному порядку і не упорядковано.</p> + +<h3 id="Еквівалентність_ключів">Еквівалентність ключів</h3> + +<p>Еквівалентність ключів основана на алгоритмі "SameValueZero": <code>NaN</code> вважається <code>NaN</code> (хоча, <code>NaN !== NaN</code>) і всі інші значення вважаються еквівалентними згідно семантики оператора <code>===</code>. У сучасній версії сецифікації ECMAScript <code>-0</code> та <code>+0</code> вважаються еквівалентними, хоча у попередніх версіях було інакше. Більш детально дивіться "Value equality for -0 and 0" у таблиці <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Browser_compatibility">сумісності браузерів</a>.</p> + +<h3 id="Порівняння_об'єктів_та_maps">Порівняння об'єктів та maps</h3> + +<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Object</code>s have been used as <code>Maps</code> historically; however, there are important differences that make using a <code>Map</code> preferable in certain cases:</p> + +<ul> + <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, whereas they can be any value for a <code>Map</code>, including functions, objects, and any primitive.</li> + <li>You can get the size of a <code>Map</code> easily with the <code>size</code> property, while the number of properties in an <code>Object</code> must be determined manually.</li> + <li>A <code>Map</code> is an <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> and can thus be directly iterated, whereas iterating over an <code>Object</code> requires obtaining its keys in some fashion and iterating over them.</li> + <li>An <code>Object</code> has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using <code>map = Object.create(null)</code>, but this is seldom done.</li> + <li>A <code>Map</code> may perform better in scenarios involving frequent addition and removal of key pairs.</li> +</ul> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>The value of the <code>length</code> property is 0.</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd> +</dl> + +<h2 id="Map_instances"><code>Map</code> instances</h2> + +<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> + +<h3 id="Methods">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3> + +<pre class="brush: js">var myMap = new Map(); + +var keyString = 'a string', + keyObj = {}, + keyFunc = function() {}; + +// setting the values +myMap.set(keyString, "value associated with 'a string'"); +myMap.set(keyObj, 'value associated with keyObj'); +myMap.set(keyFunc, 'value associated with keyFunc'); + +myMap.size; // 3 + +// getting the values +myMap.get(keyString); // "value associated with 'a string'" +myMap.get(keyObj); // "value associated with keyObj" +myMap.get(keyFunc); // "value associated with keyFunc" + +myMap.get('a string'); // "value associated with 'a string'" + // because keyString === 'a string' +myMap.get({}); // undefined, because keyObj !== {} +myMap.get(function() {}) // undefined, because keyFunc !== function () {} +</pre> + +<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3> + +<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works because <code>NaN</code>s are indistinguishable from each other:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(NaN, 'not a number'); + +myMap.get(NaN); // "not a number" + +var otherNaN = Number('foo'); +myMap.get(otherNaN); // "not a number" +</pre> + +<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3> + +<p>Maps can be iterated using a <code>for..of</code> loop:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(0, 'zero'); +myMap.set(1, 'one'); +for (var [key, value] of myMap) { + console.log(key + ' = ' + value); +} +// 0 = zero +// 1 = one + +for (var key of myMap.keys()) { + console.log(key); +} +// 0 +// 1 + +for (var value of myMap.values()) { + console.log(value); +} +// zero +// one + +for (var [key, value] of myMap.entries()) { + console.log(key + ' = ' + value); +} +// 0 = zero +// 1 = one +</pre> + +<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3> + +<p>Maps can be iterated using the <code>forEach()</code> method:</p> + +<pre class="brush: js">myMap.forEach(function(value, key) { + console.log(key + ' = ' + value); +}); +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3> + +<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']]; + +// Use the regular Map constructor to transform a 2D key-value Array into a map +var myMap = new Map(kvArray); + +myMap.get('key1'); // returns "value1" + +// Use the Array.from function to transform a map into a 2D key-value Array +console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray + +// Or use the keys or values iterators and convert them to an array +console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Map")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/abs/index.html b/files/uk/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..b75b1e811c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,104 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Global_Objects/Math/abs +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.abs()</code></strong> повертає абсолютне значення (модуль) числа, що дорівнює:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-abs.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Math.abs(<var>x</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Абсолютне значення данного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>abs()</code> статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.abs()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Поведінка_методу_Math.abs()">Поведінка методу <code>Math.abs()</code></h3> + +<p>Передача пустого об'єкту, масиву з кількома числами, не числової строки {{jsxref("undefined")}}/пустої змінної, повертає {{jsxref("NaN")}}. Передача {{jsxref("null")}}, пустої строки або пустого масиву, повертає - 0.</p> + +<pre class="brush: js" dir="rtl">Math.abs('-1'); // 1 +Math.abs(-2); // 2 +Math.abs(null); // 0 +Math.abs(''); // 0 +Math.abs([]); // 0 +Math.abs([2]); // 2 +Math.abs([1,2]); // NaN +Math.abs({}); // NaN +Math.abs('string'); // NaN +Math.abs(); // NaN +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.abs")}}</p> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/acos/index.html b/files/uk/web/javascript/reference/global_objects/math/acos/index.html new file mode 100644 index 0000000000..f549eb1b4c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/acos/index.html @@ -0,0 +1,110 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Reference/Global_Objects/Math/acos +tags: + - JavaScript + - Math + - Довідка + - арккосинус + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.acos()</code></strong> - це метод, який повертає арккосинус (у радіанах) від числа, що являється:</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">],</mo><mspace width="thinmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ унікальний } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p> + +<p>{{EmbedInteractiveExample("pages/js/math-acos.html")}}</p> + +<p> </p> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<p> </p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> + <dt> + <h3 id="Результат">Результат</h3> + </dt> + <dd>Значення арккосинуса (у радіанах) поданого числа між <strong>-1</strong> та <strong>1</strong>; інакше - {{jsxref("NaN")}}.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p><code>Math.acos(x) метод вертає число між</code> 0 і π радіан, для <code>x</code> між-1 і 1. Якщо число вийде за межі -1 ... +1, метод поверне {{jsxref("NaN")}}.</p> + +<p>Оскільки <code>acos()</code> є статичним методом в обєкта <code>Math</code>, ви завжди повинні використовувати його як <code>Math.acos()</code>, а не викликати метод на створеному екземплярі обєкта <code>Math</code> (тому що <code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<p> </p> + +<pre class="brush: js">Math.acos(-2); // NaN +Math.acos(-1); // 3.141592653589793 +Math.acos(0); // 1.5707963267948966 +Math.acos(0.5); // 1.0471975511965979 +Math.acos(1); // 0 +Math.acos(2); // NaN +</pre> + +<p>Для значень менших за -1 або більших за 1, <code>Math.acos()</code> повертає {{jsxref("NaN")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_браузерами">Підтримка браузерами</h2> + +<div> +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> +</div> + +<div>{{Compat("javascript.builtins.Math.acos")}}</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/acosh/index.html b/files/uk/web/javascript/reference/global_objects/math/acosh/index.html new file mode 100644 index 0000000000..01bdf629fa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/acosh/index.html @@ -0,0 +1,91 @@ +--- +title: Math.acosh() +slug: Web/JavaScript/Reference/Global_Objects/Math/acosh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.acosh()</code></strong> повертає гіперболічний арккосинус числа. Тобто:</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0, для якого</mn><mspace width="thickmathspace"></mspace><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-acosh.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.acosh(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Гіперболічний арккосинус даного числа. У випадку, якщо аргумент менший за <strong>1</strong> - {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>acosh()</code> - статичний метод <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.acosh()</code>. Намагатись викликати <code>acosh()</code>, звертаючись до методів створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.acosh">Використання <code>Math.acosh()</code></h3> + +<pre class="brush: js">Math.acosh(-1); // NaN +Math.acosh(0); // NaN +Math.acosh(0.5); // NaN +Math.acosh(1); // 0 +Math.acosh(2); // 1.3169578969248166 +</pre> + +<p>Для значень, що менші за 1 <code>Math.acosh()</code> повертає {{jsxref("NaN")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Для будь-якого <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x \geq 1</annotation></semantics></math> у нас є <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right)</annotation></semantics></math>. Таким чином ми можемо зімітувати метод за допомогою наступної функції:</p> + +<pre class="brush: js">Math.acosh = Math.acosh || function(x) { + return Math.log(x + Math.sqrt(x * x - 1)); +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікації</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.acosh")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/asin/index.html b/files/uk/web/javascript/reference/global_objects/math/asin/index.html new file mode 100644 index 0000000000..53a2a41b26 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/asin/index.html @@ -0,0 +1,103 @@ +--- +title: Math.asin() +slug: Web/JavaScript/Reference/Global_Objects/Math/asin +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Math.asin()</code></strong> повертає значення (в радіанах) арксинуса числа, що являється</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такому унікальному </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>, для якого</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-asin.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.asin(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Арксинус (в радіанах) поданого числа від -1 до 1; інакше - {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Math.asin(x)</code> повертає числове значення між <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> та <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> радіан для <code>x</code> від -1 до 1. Якщо значення <code>x</code> за межами цього проміжку, він повертає {{jsxref("NaN")}}.</p> + +<p>Оскільки <code>asin()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.asin()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.asin()">Використання <code>Math.asin()</code></h3> + +<pre class="brush: js">Math.asin(-2); // NaN +Math.asin(-1); // -1.5707963267948966 (-pi/2) +Math.asin(0); // 0 +Math.asin(0.5); // 0.5235987755982989 +Math.asin(1); // 1.5707963267948966 (pi/2) +Math.asin(2); // NaN +</pre> + +<p>Для значень, менших за -1 чи більших за 1, <code>Math.asin()</code> повертає {{jsxref("NaN")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.asin")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/asinh/index.html b/files/uk/web/javascript/reference/global_objects/math/asinh/index.html new file mode 100644 index 0000000000..4d58b44c80 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/asinh/index.html @@ -0,0 +1,92 @@ +--- +title: Math.asinh() +slug: Web/JavaScript/Reference/Global_Objects/Math/asinh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.asinh()</code></strong> повертає гіперболічний арксинус числа, що являється:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mo lspace="0em" rspace="0em"> для якого sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-asinh.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.asinh(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Гіперболічний арксинус поданого числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>asinh()</code> статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.asinh()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.asinh">Застосування <code>Math.asinh()</code></h3> + +<pre class="brush: js">Math.asinh(1); // 0.881373587019543 +Math.asinh(0); // 0 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>В якості швидкого і брудного трюку для грубої імітації оригіналу можна застосувати формулу <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right)</annotation></semantics></math> у вигляді такої функції:</p> + +<pre class="brush: js">Math.asinh = Math.asinh || function(x) { + if (x === -Infinity) { + return x; + } else { + return Math.log(x + Math.sqrt(x * x + 1)); + } +}; +</pre> + +<p>Являючись формально вірною, вона страждає від значної кількості помилок, пов'язаних із обчисленням чисел із плаваючою комою. Точні результати потребують спеціальної обробки додатніх і від'ємних, дрібних і великих значень аргументів, так, як це зроблено, наприклад, у <a href="https://sourceware.org/git/?p=glibc.git;a=blob;f=sysdeps/ieee754/dbl-64/s_asinh.c">glibc</a> чи <a href="http://git.savannah.gnu.org/cgit/gsl.git/tree/sys/invhyp.c">GNU Scientific Library</a>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.asinh")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/atan/index.html b/files/uk/web/javascript/reference/global_objects/math/atan/index.html new file mode 100644 index 0000000000..bbc76aade4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/atan/index.html @@ -0,0 +1,106 @@ +--- +title: Math.atan() +slug: Web/JavaScript/Reference/Global_Objects/Math/atan +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.atan()</code></strong> повертає арктангенс (у радіанах) від числа, що являється:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>], для якого </mo></mrow><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-atan.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Арктангенс (у радіанах) від поданого числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Math.atan()</code> повертає числове значення з-поміж <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> та <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> радіан.</p> + +<p>Оскільки <code>atan()</code> статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.atan()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.atan()">Застосування <code>Math.atan()</code></h3> + +<pre class="brush: js">Math.atan(1); // 0.7853981633974483 +Math.atan(0); // 0 +Math.atan(-0); // -0 + +Math.atan(Infinity); <span class="objectBox objectBox-number"> // 1.5707963267948966 +Math.atan(-Infinity); // -1.5707963267948966 + +</span>// The angle that the line [(0,0);(x,y)] forms with the x-axis in a Cartesian coordinate system +Math.atan(y / x); +</pre> + +<p>Зверніть увагу - можливо вам захочеться уникнути використання <strong>±</strong><code>Infinity</code> із стилістичних міркуваня. У цьому випадку {{jsxref("Math.atan2()")}} із <code>0</code> в якості другого аргументу може бути ліпшим варіантом.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.atan")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/atan2/index.html b/files/uk/web/javascript/reference/global_objects/math/atan2/index.html new file mode 100644 index 0000000000..a571a3adc4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/atan2/index.html @@ -0,0 +1,119 @@ +--- +title: Math.atan2() +slug: Web/JavaScript/Reference/Global_Objects/Math/atan2 +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.atan2()</code></strong> повертає арктангенс частки поданих чисел.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-atan2.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>y</code></dt> + <dd>Перше число.</dd> + <dt><code>x</code></dt> + <dd>Друге число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Арктангенс частки даних аргументів</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Math.atan2()</code> повертає числове значення з-поміж -π та π, що являє собою кут Тета нахилу вектора <code>(x, y)</code>. Тобто це кут між додатнім напрямком осі OX і вектором <code>(x, y)</code>, виміряний проти годинникової стрілки. Як і інші методи <code>Math</code>, <code>atan2()</code> повертає значення кута у радіанах.</p> + +<div class="note"> +<p>Зауважте порядок розміщення аргументів функції: першою йде координата y, а другою — x.</p> +</div> + +<p> </p> + +<p><img alt="A simple diagram showing the angle returned by atan2(y, x)" src="https://mdn.mozillademos.org/files/11557/atan2.png" style="height: 300px; width: 300px;"></p> + +<p>На відміну від <code>Math.atan()</code>, що працює із часткою координат <code>x</code> та <code>y</code>, <code>Math.atan2()</code> приймає їх на вхід окремо.</p> + +<p>Оскільки <code>atan2()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.atan2()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.atan2()">Застосування <code>Math.atan2()</code></h3> + +<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699 +Math.atan2(15, 90); // 0.16514867741462683 + +Math.atan2(±0, -0); // ±PI. +Math.atan2(±0, +0); // ±0. +Math.atan2(±0, -x); // ±PI for x > 0. +Math.atan2(±0, x); // ±0 for x > 0. +Math.atan2(-y, ±0); // -PI/2 for y > 0. +Math.atan2(y, ±0); // PI/2 for y > 0. +Math.atan2(±y, -Infinity); // ±PI for finite y > 0. +Math.atan2(±y, +Infinity); // ±0 for finite y > 0. +Math.atan2(±Infinity, x); // ±PI/2 for finite x. +Math.atan2(±Infinity, -Infinity); // ±3*PI/4. +Math.atan2(±Infinity, +Infinity); // ±PI/4. +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.atan2")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/atanh/index.html b/files/uk/web/javascript/reference/global_objects/math/atanh/index.html new file mode 100644 index 0000000000..b99208c599 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/atanh/index.html @@ -0,0 +1,92 @@ +--- +title: Math.atanh() +slug: Web/JavaScript/Reference/Global_Objects/Math/atanh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.atanh()</code></strong> повертає значення гіперболічного акртангенса числа, що являється:</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> такий унікальний </mtext><mspace width="thickmathspace"></mspace><mi>y, </mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-atanh.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.atanh(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Гіперболічний арктангенс даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>atanh()</code> - статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.atanh()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.atanh">Застосування <code>Math.atanh()</code></h3> + +<pre class="brush: js">Math.atanh(-2); // NaN +Math.atanh(-1); // -Infinity +Math.atanh(0); // 0 +Math.atanh(0.5); // 0.5493061443340548 +Math.atanh(1); // Infinity +Math.atanh(2); // NaN +</pre> + +<p>Для числових значень, що більші за 1 чи менші від -1, результатом є {{jsxref("NaN")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Для <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo><</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| < 1</annotation></semantics></math>, ми маємо <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math>, тобто можемо емулювати необхідний функціонал за допомогою наступної функції:</p> + +<pre class="brush: js">Math.atanh = Math.atanh || function(x) { + return Math.log((1+x)/(1-x)) / 2; +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.atanh")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html b/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html new file mode 100644 index 0000000000..ff889e3849 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/cbrt/index.html @@ -0,0 +1,100 @@ +--- +title: Math.cbrt() +slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.cbrt()</code></strong> повертає кубічний корінь числа. Тобто:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>такий унікальний</mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.cbrt(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Кубічний корінь даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>cbrt()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.cbrt()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.cbrt()">Застосування <code>Math.cbrt()</code></h3> + +<pre class="brush: js">Math.cbrt(NaN); // NaN +Math.cbrt(-1); // -1 +Math.cbrt(-0); // -0 +Math.cbrt(-Infinity); // -Infinity +Math.cbrt(0); // 0 +Math.cbrt(1); // 1 +Math.cbrt(Infinity); // Infinity +Math.cbrt(null); // 0 +Math.cbrt(2); // 1.2599210498948734 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Для всіх <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math> маємо <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math>, тобто цей метод може бути зімітованим за допомогою функції:</p> + +<pre class="brush: js">if (!Math.cbrt) { + Math.cbrt = function(x) { + var y = Math.pow(Math.abs(x), 1/3); + return x < 0 ? -y : y; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.cbrt")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/ceil/index.html b/files/uk/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..c4e035d57d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,174 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Global_Objects/Math/ceil +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.ceil()</code></strong> повертає найменше ціле число, що є більшим або дорівнює даному числу.</p> + +<p> </p> + +<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<p> </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Найменше ціле число, що є більшим або дорівнює даному числу.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>ceil()</code>є статичним методом <code>Math</code>, він завжди використовується як <code>Math.ceil()</code>, а не метод створеного Вами об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.ceil()">Використання <code>Math.ceil()</code></h3> + +<p>Наступні приклади демонструють використання <code>Math.ceil()</code>.</p> + +<pre class="brush: js">Math.ceil(.95); // 1 +Math.ceil(4); // 4 +Math.ceil(7.004); // 8 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 +Math.ceil(-7.004); // -7 +</pre> + +<h3 id="Робота_з_десятковими_числами">Робота з десятковими числами</h3> + +<pre class="brush: js">// Замикання +(function() { + /** + * Десяткове вирівнювання числа. + * + * @param {String} type Тип вирівнювання. + * @param {Number} value Число. + * @param {Integer} exp Показник степеня (десятковий логарифм від основи округлення). + * @returns {Number} Вирівняне значення. + */ + function decimalAdjust(type, value, exp) { + // Якщо показник степеня невизначений, або 0... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // Якщо значення не є числом, або ж показник степеня не цілий... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Зсув + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Зворотній зсув + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Десяткове округлення + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Десяткове округлення до нижнього + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Десяткове округлення до верхнього + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Округлення +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Округлення до нижнього +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Округлення до верхнього +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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.Math.ceil")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/clz32/index.html b/files/uk/web/javascript/reference/global_objects/math/clz32/index.html new file mode 100644 index 0000000000..9c77d005ec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/clz32/index.html @@ -0,0 +1,113 @@ +--- +title: Math.clz32() +slug: Web/JavaScript/Reference/Global_Objects/Math/clz32 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32 +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.clz32()</code></strong> повертає кількість ведучих нульових бітів 32-бітного двоїчного уявлення даного числа.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-clz32.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.clz32(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Кількість ведучих нульових бітів 32-бітного двоїчного уявлення даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>"<code>clz32</code>" - це скорочено від <code>CountLeadingZeroes32</code>.</p> + +<p>Якщо аргумент <code>x</code> не є числом, він спочатку буде приведений до числового формату, а потім - до 32-бітного беззнакового цілого.</p> + +<p>Якщо в результаті 32-бітне беззнакове ціле число є нулем - функція повертає <code>32</code>, тому що всі його біти являються нульовими.</p> + +<p>Ця функція, зокрема, дуже помічна для систем, що компілюють щось у JS. Наприклад - <a href="/en-US/docs/Emscripten">Emscripten</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.clz32()">Застосування <code>Math.clz32()</code></h3> + +<pre class="brush: js">Math.clz32(1); // 31 +Math.clz32(1000); // 22 +Math.clz32(); // 32 + +[NaN, Infinity, -Infinity, 0, -0, null, undefined, 'foo', {}, []].filter( +function(n) { + return Math.clz32(n) !== 32 +}); // [] + +Math.clz32(true); // 31 +Math.clz32(3.5); // 30 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Найбільш ефективний поліфіл:</p> + +<pre class="brush: js">if (!Math.clz32) { + Math.clz32 = function(x) { + // Let n be ToUint32(x). + // Let p be the number of leading zero bits in + // the 32-bit binary representation of n. + // Return p. + if (x == null || x === 0) { + return 32; + } + return 31 - Math.floor(Math.log(x >>> 0) * Math.LOG2E); + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.clz32")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Math.imul")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/cos/index.html b/files/uk/web/javascript/reference/global_objects/math/cos/index.html new file mode 100644 index 0000000000..8cce369812 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/cos/index.html @@ -0,0 +1,83 @@ +--- +title: Math.cos() +slug: Web/JavaScript/Reference/Global_Objects/Math/cos +tags: + - JavaScript + - Math + - cos + - Довідка + - геометрія + - косинус + - метод + - тригонометрія +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos +--- +<div>{{JSRef}}</div> + +<p><span style="display: none;"> </span><span class="seoSummary">Статична функція <strong><code>Math.cos()</code></strong> повертає {{interwiki("wikipedia", "косинус")}} поданого кута, який повинен бути вказаним у {{interwiki("wikipedia", "радіан", "радіанах")}}. Значення косинуса дорівнює відношенню</span><math style="display: inline;"><mstyle displaystyle="true"><mfrac><msub><mrow><mtext>довжини</mtext> </mrow><mrow><mrow><mtext>прилеглого катета</mtext> </mrow></mrow></msub><msub><mrow><mtext>довжини</mtext> </mrow><mrow><mrow><mtext>гіпотенузи</mtext> </mrow> </mrow> </msub> </mfrac> </mstyle> </math>.<span style="display: none;"> </span></p> + +<div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.cos(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Кут у радіанах, косинус якого необхідно отримати.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Косинус даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Math.cos()</code> повертає числове значення з-поміж -1 та 1, що відповідає косинусу кута.</p> + +<p>Оскільки <code>cos()</code> є статичним методом в обєкта <code>Math</code>, ви завжди повинні використовувати його як <code>Math.cos()</code>, а не викликати метод на створеному екземплярі обєкта <code>Math</code> (тому що <code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.cos">Застосування <code>Math.cos()</code></h3> + +<pre class="brush: js">Math.cos(0); // 1 +Math.cos(1); // 0.5403023058681398 + +Math.cos(Math.PI); // -1 +Math.cos(2 * Math.PI); // 1 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.cos")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/cosh/index.html b/files/uk/web/javascript/reference/global_objects/math/cosh/index.html new file mode 100644 index 0000000000..5973ba2868 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/cosh/index.html @@ -0,0 +1,93 @@ +--- +title: Math.cosh() +slug: Web/JavaScript/Reference/Global_Objects/Math/cosh +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.cosh()</code></strong> повертає значення гіперболічного косинуса числа, що може бути також виражене через {{jsxref("Math.E", "сталу e", "", 1)}}:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.cosh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-cosh.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.cosh(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Гіперболічний косинус даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>cosh()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.cosh()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.cosh">Застосування <code>Math.cosh()</code></h3> + +<pre class="brush: js">Math.cosh(0); // 1 +Math.cosh(1); // 1.5430806348152437 +Math.cosh(-1); // 1.5430806348152437 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Ця функцію можна зімітувати за допомогою {{jsxref("Math.exp()")}}:</p> + +<pre class="brush: js">Math.cosh = Math.cosh || function(x) { + return (Math.exp(x) + Math.exp(-x)) / 2; +} +</pre> + +<p>або ж викликаючи {{jsxref("Math.exp()")}} лише один раз:</p> + +<pre class="brush: js">Math.cosh = Math.cosh || function(x) { + var y = Math.exp(x); + return (y + 1 / y) / 2; +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.cosh")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/e/index.html b/files/uk/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..d04b6dce98 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,85 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Global_Objects/Math/E +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.E</code></strong> відображає сталу Ейлера <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math>, основу натуральних логарифмів, що наближено дорівнює 2.718.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>E</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього <code>Math.E</code>. Намагатись викликати <code>E</code>, звертаючись до полів створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.E">Використання <code>Math.E</code></h3> + +<p>Наступна функція повертає e:</p> + +<pre class="brush: js">function getNapier() { + return Math.E; +} + +getNapier(); // 2.718281828459045 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.E")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/exp/index.html b/files/uk/web/javascript/reference/global_objects/math/exp/index.html new file mode 100644 index 0000000000..770c983bb5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/exp/index.html @@ -0,0 +1,76 @@ +--- +title: Math.exp() +slug: Web/JavaScript/Reference/Global_Objects/Math/exp +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.exp()</code></strong> повертає <code>e<sup>x</sup></code>, де <code>x</code> - аргумент, а <code>e</code> - {{jsxref("Math.E", "число (стала) Ейлера", "", 1)}}, основа натурального логарифму.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Число, що відображає <code>e<sup>x</sup></code>, де <code>e</code> - це {{jsxref("Math.E", "стала Ейлера", "", 1)}}, та <code>x</code> - аргумент.</p> + +<h2 id="Опис">Опис</h2> + +<p>Так як <code>exp()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.exp()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.exp">Застосування <code>Math.exp()</code></h3> + +<pre class="brush: js">Math.exp(-1); // 0.36787944117144233 +Math.exp(0); // 1 +Math.exp(1); // 2.718281828459045 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.exp")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.E")}}</li> + <li>{{jsxref("Math.expm1()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/expm1/index.html b/files/uk/web/javascript/reference/global_objects/math/expm1/index.html new file mode 100644 index 0000000000..9ff397ce07 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/expm1/index.html @@ -0,0 +1,85 @@ +--- +title: Math.expm1() +slug: Web/JavaScript/Reference/Global_Objects/Math/expm1 +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1 +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.expm1()</code></strong> повертає результат обчислення виразу <code>e<sup>x</sup> - 1</code>, де <code>x</code> - це аргумент, а {{jsxref("Math.E", "e", "", 1)}} - основа натурального логарифму.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-expm1.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.expm1(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Число, що відображає результат виразу <code>e<sup>x</sup> - 1</code>, де <code>e</code> - це {{jsxref("Math.E", "стала Ейлера", "", 1)}}, а <code>x</code> - аргумент.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>expm1()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.expm1()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосуваня_Math.expm1">Застосуваня <code>Math.expm1()</code></h3> + +<pre class="brush: js">Math.expm1(-1); // -0.6321205588285577 +Math.expm1(0); // 0 +Math.expm1(1); // 1.718281828459045 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Даний функціонал можна емулювати за допомогою функції {{jsxref("Math.exp()")}}:</p> + +<pre class="brush: js">Math.expm1 = Math.expm1 || function(x) { + return Math.exp(x) - 1; +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.expm1")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.E")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/floor/index.html b/files/uk/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..2507381ebd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,164 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Global_Objects/Math/floor +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Math.floor()</code></strong> повертає найбільше ціле число, менше або рівне даному числу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Найбільше ціле число, менше або рівне даному числу.</p> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки <code>floor()</code> є статичним методом об'єкту <code>Math</code>, він завжди використовується як <code>Math.floor()</code>, а не метод створеного Вами об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.floor()">Використання <code>Math.floor()</code></h3> + +<pre class="brush: js">Math.floor( 45.95); // 45 +Math.floor( 45.05); // 45 +Math.floor( 4 ); // 4 +Math.floor(-45.05); // -46 +Math.floor(-45.95); // -46 +</pre> + +<h3 id="Десяткове_округлення">Десяткове округлення</h3> + +<pre class="brush: js">// Замикання +(function() { + /** + * Десяткове округлення числа до необхідної точності. + * + * @param {String} type Тип округлення. + * @param {Number} value Число. + * @param {Integer} exp Степінь (десятковий логарифм від основи округлення). + * @returns {Number} Округлене число. + */ + function decimalAdjust(type, value, exp) { + // Якщо exp невизначений або дорівнює нулю... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // Якщо value не є числом, або ж степінь exp не являється цілим... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Зсув + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Зворотній зсув + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Десяткове округлення + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Десяткове округлення до меншого + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Десяткове округлення до більшого + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Округлення +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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.Math.floor")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/fround/index.html b/files/uk/web/javascript/reference/global_objects/math/fround/index.html new file mode 100644 index 0000000000..1b7994ccb4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/fround/index.html @@ -0,0 +1,114 @@ +--- +title: Math.fround() +slug: Web/JavaScript/Reference/Global_Objects/Math/fround +tags: + - JavaScript + - Math + - fround + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround +--- +<div>{{JSRef}}</div> + +<p class="seoSummary">Функція <strong><code>Math.fround()</code></strong> повертає найближче зображення числового аргументу у вигляді 32-бітного числа з рухомою комою {{interwiki("wikipedia", "Число_одинарної_точності","одинарної точності" )}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-fround.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>singleFloat</em> = Math.fround(<em>doubleFloat</em>);</pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>doubleFloat</code></dt> + <dd>{{jsxref("Number")}}. Якщо аргумент має інший тип - його буде приведено до числа, або ж до {{jsxref("NaN")}} у випадку, якщо таке приведення неможливе.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Зображеня аргументу у вигляді найближчого 32-бітного числа з рухомою комою <span class="seoSummary">{{interwiki("wikipedia", "Число_одинарної_точності","одинарної точності" )}}</span>.</p> + +<h2 id="Опис">Опис</h2> + +<p>JavaScript всередині використовує 64-бітні числа із рухомою комою подвійної точності. Це забезпечує дуже високу точність обчислень. Однак, інколи у вас може виникнути потреба працювати із 32-бітними числами того ж типу. Зокрема, якщо ви читаєте дані із {{jsxref("Float32Array")}}. Це може викликати певну плутанину: перевірка рівності 64-бітного та 32-бітного чисел може дати негативний результат, навіть якщо числа здаються однаковими.</p> + +<p>Щоб вирішити цю проблему, можна застосувати <code>Math.fround()</code> для перетворення 64-бітного числа у 32-бітне. JavaScript всередині продовжить вважати числа за 64-бітні, натомість виконуючи "округлення до найближчого парного" на 23-му біті мантиси, і встановлююючи наступний за нею біт в <code>0</code>. Якщо число виходить за межі 32-бітного із рухомою комою, то в результаті буде отримана <code>{{jsxref("Infinity")}}</code> чи <code>-Infinity</code>.</p> + +<p>Оскільки <code>fround()</code>є статичним методом <code>Math</code>, він завжди використовується як <code>Math.fround()</code>, а не метод створеного Вами об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.fround()">Застосування <code>Math.fround()</code></h3> + +<p>Число 1.5 може бути точно відтворено у двійковій системі числення, причому 32-бітний і 64-бітний результати будуть однакові:</p> + +<pre class="brush: js">Math.fround(1.5); // 1.5 +Math.fround(1.5) === 1.5; // true +</pre> + +<p>Однак, число 1.337 не може бути точно зображено у двійковій системі числення, тож 32-бітне і 64-бітне зображення цього числа будуть відрізнятись:</p> + +<pre class="brush: js">Math.fround(1.337); // 1.3370000123977661 +Math.fround(1.337) === 1.337; // false +</pre> + +<p><math><semantics><msup><mn>2</mn><mn>150</mn></msup><annotation encoding="TeX">2^150</annotation></semantics></math> - занадто велике для 32-бітного числа із рухомою комою, тому результатом буде <code>Infinity</code>:</p> + +<pre class="brush: js">2 ** 150; // 1.42724769270596e+45 +Math.fround(2 ** 150); // Infinity +</pre> + +<p>Якщо аргумент не може бути приведеним до числа, чи просто являється <a href="https://en.wikipedia.org/wiki/NaN" title="NaN on Wikipedia">not-a-number</a> (<code>NaN</code>), <code>Math.fround()</code> поверне <code>NaN</code>:</p> + +<pre class="brush: js">Math.fround('abc'); // NaN +Math.fround(NaN); // NaN +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Даний функціонал можна відтворити за допомогою наступної функції (за умови наявної підтримки {{jsxref("Float32Array")}}):</p> + +<pre class="brush: js">Math.fround = Math.fround || (function (array) { + return function(x) { + return array[0] = x, array[0]; + }; +})(new Float32Array(1)); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.fround")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.round()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/hypot/index.html b/files/uk/web/javascript/reference/global_objects/math/hypot/index.html new file mode 100644 index 0000000000..465d368930 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/hypot/index.html @@ -0,0 +1,119 @@ +--- +title: Math.hypot() +slug: Web/JavaScript/Reference/Global_Objects/Math/hypot +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.hypot()</code></strong> повертає квадратний корінь від суми квадратів поданих аргументів</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-hypot.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.hypot([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>Числа.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Квадратний корінь від суми квадратів поданих аргументів. Якщо хоча б один з аргументів не може бути приведений до числа - результатом буде {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Обчислення гіпотенузи прямокутного трикутника чи модуля комплексного числа відбувається за формулою <code>Math.sqrt(v1*v1 + v2*v2)</code>, де v1 та v2 - це катети прямокутного трикутника, або ж дійсна та уявна частини комплексного числа. Для обчислення відстані у двох, чи більше вимірах, варто просто додати більше квадратів під знак кореня, наприклад: <code>Math.sqrt(v1*v1 + v2*v2 + v3*v3 + v4*v4)</code>. </p> + +<p>Ця ж функція дозволяє робити це швидше і простіше, варто просто викликати <code>Math.hypot(v1, v2)</code> чи <code>Math.hypot(v1, v2, v3, v4, ...)</code>.</p> + +<p>Вона також дозволяє уникнути проблеми у випадках, коли гіпотенуза ваших чисел дуже велика. Найбільше число, яке ви можете зобразити за допомогою чисел подвійної точності у JS - це <span style="line-height: 1.5;"><code>Number.MAX_VALUE = 1.797...e+308</code> . Якщо ваші вхідні числа більші за 1e154, спроба піднести їх до квадрату у результаті дасть Infinity, що повністю зруйнує результат. Тобто, <code>Math.sqrt(1e200*1e200 + 1e200*1e200) = Infinity</code> . Якщо ж ви натомість застосуєте <code>hypot()</code>, ви отримаєте цілком нормальний результат <code>Math.hypot(1e200, 1e200) = 1.4142...e+200</code> . Це також справедливо для дуже малих чисел. <code>Math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0</code>, але </span><code><span style="line-height: 1.5;">Math.hypot(1e-200, 1e-200) =</span></code><span style="line-height: 1.5;"><code>1.4142...e-200</code>, тобто цілком корисний результат</span><span style="line-height: 1.5;">.</span></p> + +<p>Оскільки <code>hypot()</code> - це статичний метод об'єкту <code>Math</code>, він завжди використовується як <code>Math.hypot()</code>, а не як метод створеного об'єкту <code>Math</code> (<code>Math</code> не є конструктором).</p> + +<p>У випадку, якщо функція викликається без аргументів, результатом є +0.</p> + +<p>А якщо хоча б один з аргументів не може бути зведеним до числа, в результаті отримаємо {{jsxref("NaN")}}.</p> + +<p>Якщо дано лише один аргумент, <code>Math.hypot()</code> повертає такий самий результат, як і <code>Math.abs()</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.hypot">Застосування <code>Math.hypot()</code></h3> + +<pre class="brush: js">Math.hypot(3, 4); // 5 +Math.hypot(3, 4, 5); // 7.0710678118654755 +Math.hypot(); // 0 +Math.hypot(NaN); // NaN +Math.hypot(3, 4, 'foo'); // NaN, +'foo' => NaN +Math.hypot(3, 4, '5'); // 7.0710678118654755, +'5' => 5 +Math.hypot(-3); // 3, the same as Math.abs(-3) +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей функціонал можна легко повторити ось такою функцією:</p> + +<pre class="brush: js">Math.hypot = Math.hypot || function() { + var y = 0, i = arguments.length; + while (i--) y += arguments[i] * arguments[i]; + return Math.sqrt(y); +}; +</pre> + +<p>Більш складний варіант, який дозволяє уникнути описаних вище проблем виходу за межі точності числового формату:</p> + +<pre class="brush: js">Math.hypot = function (x, y) { + // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28 + var max = 0; + var s = 0; + for (var i = 0; i < arguments.length; i += 1) { + var arg = Math.abs(Number(arguments[i])); + if (arg > max) { + s *= (max / arg) * (max / arg); + max = arg; + } + s += arg === 0 && max === 0 ? 0 : (arg / max) * (arg / max); + } + return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s); +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.hypot")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/imul/index.html b/files/uk/web/javascript/reference/global_objects/math/imul/index.html new file mode 100644 index 0000000000..21f5d59a3e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/imul/index.html @@ -0,0 +1,97 @@ +--- +title: Math.imul() +slug: Web/JavaScript/Reference/Global_Objects/Math/imul +tags: + - JavaScript + - Math + - imul + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.imul()</code></strong> повертає результат C-подібного 32-бітного множення двох аргументів.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-imul.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>product</em> = Math.imul(<em>a</em>, <em>b</em>);</pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>a</code></dt> + <dd>Перше число.</dd> + <dt><code>b</code></dt> + <dd>Друге число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Результат C-подібного 32-бітного множення даних аргументів.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Math.imul()</code> дає можливість виконувати 32-бітне цілочисельне множення з C-подібною семантикою. Ця особливість дуже корисна для проектів на зразок <a href="http://en.wikipedia.org/wiki/Emscripten">Emscripten</a>.</p> + +<p>У зв'язку з тим, що <code>imul()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.imul()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<p>Якщо ви використаєте звичайні числа із рухомою комою в imul, ви отримаєте значну деградацію продуктивності. Причина криється у доволі коштовній з точки зору ресурсів конвертації числа із рухомою комою у ціле для виконання множення, і зворотній конвертації результату. <code>imul()</code> існує у зв'язку із тим, що він швидший у єдиному (поки що) випадку: застосування у AsmJS. AsmJS дозволяє JIST-оптимізаторам простіше реалізовувати цілі числа всередині у JavaScript. Множення двох чисел, що уже зберігаються як цілі (що, поки що, можливо лише з AsmJS) за допомогою imul - це єдина потенційна можливість для Math.imul покращити продуктивність у сучасних браузерах.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.imul()">Застосування <code>Math.imul()</code></h3> + +<pre class="brush: js">Math.imul(2, 4); // 8 +Math.imul(-1, 8); // -8 +Math.imul(-2, -2); // 4 +Math.imul(0xffffffff, 5); // -5 +Math.imul(0xfffffffe, 5); // -10 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей метод може бути реалізований за допомогою наступної функції:</p> + +<pre class="brush: js">Math.imul = Math.imul || function(a, b) { + var aHi = (a >>> 16) & 0xffff; + var aLo = a & 0xffff; + var bHi = (b >>> 16) & 0xffff; + var bLo = b & 0xffff; + // зсув на 0 фіксує знак старшої частини + // |0 наприкінці перетворює беззнакове значення у число із знаком + return ((aLo * bLo) + (((aHi * bLo + aLo * bHi) << 16) >>> 0) | 0); +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.imul")}}</p> diff --git a/files/uk/web/javascript/reference/global_objects/math/index.html b/files/uk/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..2a3acad478 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,153 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +tags: + - JavaScript + - Math + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math</code></strong> - це вбудований об'єкт із полями і методами для реалізації математичних сталих та функцій. Не являється функцією.</p> + +<p><code>Math</code> працює з числами типу {{jsxref("Number")}}. Він не підходить для роботи з {{jsxref("BigInt")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>На відміну від багатьох інших глобальних об'єктів, <code>Math</code> не являється конструктором. Всі поля і методи <code>Math</code> статичні. Тобто до сталої Пі потрібно звертатись <code>Math.PI</code>, а функцію синуса викликати через <code>Math.sin(<var>x</var>)</code>, де <code><var>x</var></code> являється аргументом статичного методу. Всі константи задані із максимальною для дійсних чисел у JavaScript точністю.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>Стала Ейлера, основа натуральних логарифмів. Приблизно дорівнює <code>2.718</code>.</dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd>Числове значення натурального логарифму від <code>2</code>. Приблизно дорівнює <code>0.693</code>.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>Числове значення натурального логарифму від <code>10</code>. Приблизно дорівнює <code>2.303</code>.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>Логарифм від <math><semantics><mi><code>e</code></mi><annotation encoding="TeX"></annotation></semantics></math><code>e</code> за основою 2, приблизно дорівнює <code>1.443</code>.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>Логарифм від <code>e</code> за основою 10, приблизно дорівнює <code>0.434</code>.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>Значення відношення довжини кола до його діаметру, наближено дорівнює <code>3.14159</code>.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>Квадратний корінь від ½ (еквівалентно <math><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac {1}{\sqrt{2}}</annotation></semantics></math>). Наближено дорівнює <code>0.707</code>.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>Значення квадратного кореня від <code>2</code>, наближено <code>1.414</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<div class="note"> +<p>Варто зазначити, що тригонометричні функції (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) очікують (і повертають) значення кутів у радіанах.</p> + +<p>Для конвертації радіан в градуси, розділіть значення на <code>(Math.PI / 180)</code>. Або помножте на цю величину для виконання зворотної конвертації</p> +</div> + +<div class="note"> +<p>Майте на увазі, що точність багатьох математичних функцій залежить від конкретної реалізації платформи. Тобто одна і та ж функція у різних браузерах може дати дещо різний результат. Навіть більше - один і той самий JS-рушій на різних ОС чи архітектурах також може дати різні результати!</p> +</div> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt> + <dd>Повертає абсолютне значення (модуль) числа.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt> + <dd>Повертає арккосинус числа.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt> + <dd>Повертає значення гіперболічного арккосинуса числа.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt> + <dd>Повертає арксинус числа.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt> + <dd>Повертає значення гіперболічного арксинуса числа.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt> + <dd>Повертає арктангенс числа.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt> + <dd>Повертає значення гіперболічного арктангенса числа.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt> + <dd>Повертає значення арктангенсу частки поданих чисел.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt> + <dd>Повертає кубічний корінь числа.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt> + <dd>Повертає число, округлене "до більшого".</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt> + <dd>Повертає кількість ведучих нулів 32-бітного цілочисельного уявлення даного числа.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt> + <dd>Повертає косинус числа.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt> + <dd>Повертає значення гіперболічного косинуса числа.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> + <dd>Повертає результат обчислення <code>E<var><sup>x</sup></var></code>, де <code><var>x</var></code> - це аргумент функції, а <code>E</code> - стала Ейлера (<code>2.718</code>…, основа натурального логарифму).</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt> + <dd>Повертає різницю <code>exp(x)</code> і 1 (тобто значення виразу <math><semantics><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><mn>1</mn></mrow><annotation encoding="TeX">e^x - 1</annotation></semantics></math>).</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> + <dd>Повертає результат округлення "до меншого".</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt> + <dd>Повертає найближче число із рухомою комою (крапкою)<a href="https://uk.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D0%BE%D0%B4%D0%B8%D0%BD%D0%B0%D1%80%D0%BD%D0%BE%D1%97_%D1%82%D0%BE%D1%87%D0%BD%D0%BE%D1%81%D1%82%D1%96" title="link to the wikipedia page on single precision"> одинарної точності</a> від аргументу.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt> + <dd>Повертає квадратний корінь від суми квадратів аргументів.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt> + <dd>Повертає результат 32-бітного цілочисельного множення аргументів.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> + <dd>Повертає натуральний логарифм (㏒<sub>e</sub>, або ln) числа.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt> + <dd>Повертає натуральний логарифм (㏒<sub>e</sub>, або ln) виразу <code>1 + x</code> від числа<math><semantics><mi></mi><annotation encoding="TeX">x</annotation></semantics></math>.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt> + <dd>Повертає логарифм за основою 10 від аргументу.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt> + <dd>Повертає логарифм за основою 2 від аргументу.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt> + <dd>Повертає найбільше із нуля чи більше аргументів.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt> + <dd>Повертає найменше із нуля чи більше аргументів.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt> + <dd>Повертає результат піднесення до степеня <code>x<sup>y</sup></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>Повертає псевдовипадкове число від <code>0</code> до <code>1</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt> + <dd>Повертає значення аргументу, округлене до найближчого цілого.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt> + <dd>Повертає знак поданого числа. Визначає, чи являється аргумент додатним числом, від'ємним, чи дорівнює 0.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt> + <dd>Повертає значення синуса аргументу.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt> + <dd>Повертає значення гіперболічного синуса аргументу.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt> + <dd>Повертає додатне значення квадратного кореня від аргументу.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt> + <dd>Повертає значення тангенса аргументу.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt> + <dd>Повертає значення гіперболічного тангенса аргументу.</dd> + <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt> + <dd>Повертає строку <code>"Math"</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt> + <dd>Повертає цілу частину <code><var>x</var></code>, відкидаючи всю дробову частину.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<div>{{Compat("javascript.builtins.Math")}}</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/ln10/index.html b/files/uk/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..82c50b1911 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,66 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN10 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.LN10</code></strong> відображає значення натурального логарифму 10, що наближено дорівнює 2.302:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>LN10</code> - це статичне поле <code>Math</code>, слід завжди використовувати його через <code>Math.LN10</code>, замість викликання його як поля створених вами об'єктів <code>Math</code> (<code>Math</code> не являється конструктором).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Використання_Math.LN10">Використання <code>Math.LN10</code></h3> + +<p>Наступна функція повертає натуральний логарифм 10:</p> + +<pre class="brush:js">function getNatLog10() { + return Math.LN10; +} + +getNatLog10(); // 2.302585092994046 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN10")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/ln2/index.html b/files/uk/web/javascript/reference/global_objects/math/ln2/index.html new file mode 100644 index 0000000000..99e5c1f0a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/ln2/index.html @@ -0,0 +1,70 @@ +--- +title: Math.LN2 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN2 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.LN2</code></strong> відображає значення натурального логарифму 2, що наближено дорівнює 0.693:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>LN2</code> - це статичне поле <code>Math</code>, слід завжди використовувати його через <code>Math.LN2</code>, замість викликання його як поля створених вами об'єктів <code>Math</code> (<code>Math</code> не являється конструктором).</p> + + + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.LN2">Використання <code>Math.LN2</code></h3> + +<p>Наступна функція повертає натуральний логарифм від 2:</p> + +<pre class="brush:js">function getNatLog2() { + return Math.LN2; +} + +getNatLog2(); // 0.6931471805599453 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN2")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/log/index.html b/files/uk/web/javascript/reference/global_objects/math/log/index.html new file mode 100644 index 0000000000..df7d650070 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log/index.html @@ -0,0 +1,113 @@ +--- +title: Math.log() +slug: Web/JavaScript/Reference/Global_Objects/Math/log +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.log()</code></strong> повертає натуральний логарифм (тобто за основою {{jsxref("Math.E", "e")}}) від числа, що являється:</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>такий унікальний</mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x</annotation></semantics></math></p> + +<p>Функція JavaScript <strong><code>Math.log()</code> </strong>еквівелентна <em>ln(x)</em> у математиці.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-log.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) даного числа. Якщо число від'ємне - функція повертає {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо значення аргументу <code>x</code> від'ємне - функція завжди повертає {{jsxref("NaN")}}.</p> + +<p>У зв'язку з тим, що <code>log()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<p>Якщо вам потрібно отримати значення натурального логарифму від 2 чи 10, застосуйте вбудовані сталі {{jsxref("Math.LN2")}} чи {{jsxref("Math.LN10")}} . Якщо вам потрібно отримати значення логарифму за основою 2 чи 10 - використайте {{jsxref("Math.log2()")}} або {{jsxref("Math.log10()")}} . Якщо вам потрібен логарифм за іншою основою, використайте Math.log(x) / Math.log(іншаОснова), як у прикладі нижче; можливо вам також знадобиться попередньо обчислити 1 / Math.log(іншаОснова).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.log()">Застосування <code>Math.log()</code></h3> + +<pre class="brush: js">Math.log(-1); // NaN, out of range +Math.log(0); // -Infinity +Math.log(1); // 0 +Math.log(10); // 2.302585092994046 +</pre> + +<h3 id="Застосування_Math.log()_з_іншою_основою">Застосування <code>Math.log()</code> з іншою основою</h3> + +<p>Наступна функція повертає логарифм від <code>y</code> за основою <code>x</code> (тобто, <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>):</p> + +<pre class="brush: js">function getBaseLog(x, y) { + return Math.log(y) / Math.log(x); +} +</pre> + +<p>Щоправда, якщо ви виконаєте <code>getBaseLog(10, 1000)</code>, вона поверне <code>2.9999999999999996</code> у зв'язку із округленням чисел із рухомою комою. Звісно, це з дуже великою точністю близько до дійсного результату в 3.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/log10/index.html b/files/uk/web/javascript/reference/global_objects/math/log10/index.html new file mode 100644 index 0000000000..5a55bfb3f4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log10/index.html @@ -0,0 +1,92 @@ +--- +title: Math.log10() +slug: Web/JavaScript/Reference/Global_Objects/Math/log10 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10 +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.log10()</code></strong> повертає логарифм за основою 10 від поданого числа, що являється</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>таким унікальним</mtext><mspace width="thickmathspace"></mspace><mi>y, для якого</mi><mspace width="thickmathspace"></mspace><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log10.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Math.log10(<var>x</var>)</pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Логарифм за основою 10 від даного числа. Якщо аргумент від'ємний, то функція повертає {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо значення <code>x</code> менше 0, результатом являється {{jsxref("NaN")}}.</p> + +<p>У зв'язку з тим, що <code>log10()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log10()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<p>Ця функція еквівалентна Math.log(x) / Math.log(10). Для отримання log10(e) слід використовувати вбудовану сталу {{jsxref("Math.LOG10E")}}, яка уже дорівнює 1 / {{jsxref("Math.LN10")}}. </p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.log10">Застосування <code>Math.log10()</code></h3> + +<pre class="brush: js">Math.log10(2); // 0.3010299956639812 +Math.log10(1); // 0 +Math.log10(0); // -Infinity +Math.log10(-2); // NaN +Math.log10(100000); // 5 +</pre> + +<h3 id="Поліфіл">Поліфіл</h3> + +<p>Метод може бути реалізований за допомогою такої функції:</p> + +<pre class="brush: js">Math.log10 = Math.log10 || function(x) { + return Math.log(x) * Math.LOG10E; +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log10")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/log10e/index.html b/files/uk/web/javascript/reference/global_objects/math/log10e/index.html new file mode 100644 index 0000000000..a04db0bd60 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log10e/index.html @@ -0,0 +1,66 @@ +--- +title: Math.LOG10E +slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.LOG10E</code></strong> відображає значення логарифму <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math> за основою 10, що приблизно дорівнює 0.434:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log10e.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>LOG10E</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.LOG10E</code>. Намагатись викликати <code>LOG10E</code>, звертаючись до полів створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.LOG10E">Використання <code>Math.LOG10E</code></h3> + +<p>Наступна функція повертає логарифм <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math> за основою 10:</p> + +<pre class="brush:js">function getLog10e() { + return Math.LOG10E; +} + +getLog10e(); // 0.4342944819032518 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LOG10E")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/log1p/index.html b/files/uk/web/javascript/reference/global_objects/math/log1p/index.html new file mode 100644 index 0000000000..99edc4fbf5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log1p/index.html @@ -0,0 +1,94 @@ +--- +title: Math.log1p() +slug: Web/JavaScript/Reference/Global_Objects/Math/log1p +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.log1p()</code></strong> повертає натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) від результату виразу <strong><code>1 + дане число</code></strong>. Тобто</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mo>-</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log1p</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\forall x > -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log1p.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.log1p(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Натуральний логарифм (за основою {{jsxref("Math.E", "e")}}) від <code>1+x</code>. Якщо значення аргументу менше за <strong>-1</strong>, функція повертає {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Для дуже малих значень <em>x</em>, додавання 1 може повністю або частково зменшити точність . Числа із рухомою комою подвійної точності, що застосовуються у JS, дають вам приблизно 15 знаків точності. 1 + 1e-15 = 1.000000000000001, але 1 + 1e-16 = 1.000000000000000, тобто 1.0. Просто тому, що 15 останніх знаків при такому округленні зникають. </p> + +<p>Коли ви обчислюєте log(1 + x), ви отримаєте результат, дуже близький до x у випадках, коли x являється малою величиною (саме тому це називається 'натуральним' логарифмом). Якщо ви обчислите Math.log(1 + 1.1111111111e-15) - ви, ймовірно, отримаєте щось близьке до 1.1111111111e-15. Якщо ж, натомість, ви візьмете логарифм від<span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">1.00000000000000111022 (так, двійкове округлення інколи виглядає не надто гарно)</span><span style="line-height: 1.5;">, ви отримаєте в якості відповіді</span><span style="line-height: 1.5;"> 1.11022...e-15, із лише трьома значущими цифрами. Зате за допомогою Math.log1p(</span>1.1111111111e-15<span style="line-height: 1.5;">) ви отримаєте значно точніший результат - 1.1111111110999995e-15 - із 15 значущими цифрами (власне навіть 16 для цього випадку).</span></p> + +<p>Якщо значення <code>x</code> менше, ніж -1, результатом зажди буде {{jsxref("NaN")}}.</p> + +<p>У зв'язку з тим, що <code>log1p()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log1p()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.log1p">Застосування <code>Math.log1p()</code></h3> + +<pre class="brush: js">Math.log1p(1); // 0.6931471805599453 +Math.log1p(0); // 0 +Math.log1p(-1); // -Infinity +Math.log1p(-2); // NaN +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Метод може бути відтворений за допомогою наступної функції:</p> + +<pre class="brush: js">Math.log1p = Math.log1p || function(x) { + return Math.log(1 + x); +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log1p")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.expm1()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/log2/index.html b/files/uk/web/javascript/reference/global_objects/math/log2/index.html new file mode 100644 index 0000000000..43e87c72f8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log2/index.html @@ -0,0 +1,102 @@ +--- +title: Math.log2() +slug: Web/JavaScript/Reference/Global_Objects/Math/log2 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.log2()</code></strong> повертає логарифм за основою 2 від числа. Інакше кажучи,</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>такий унікальній</mtext><mspace width="thickmathspace"></mspace><mi>y,</mi><mspace width="thickmathspace"></mspace><mtext>для якого</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Логарифм за основою 2 від даного числа. Якщо значення аргументу від'ємне, функція повертає {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо значення аргументу <code>x</code> менше від 0, результат завжди дорівнює {{jsxref("NaN")}}.</p> + +<p>У зв'язку з тим, що <code>log2()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.log2()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<p>Ця фукнція є еквівалентною комбінації методів Math.log(x) / Math.log(2). Для log2(e) використовуйте вбудовану сталу {{jsxref("Math.LOG2E")}}, яка дорівнює 1 / {{jsxref("Math.LN2")}}. </p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.log2()">Застосування <code>Math.log2()</code></h3> + +<pre class="brush: js">Math.log2(3); // 1.584962500721156 +Math.log2(2); // 1 +Math.log2(1); // 0 +Math.log2(0); // -Infinity +Math.log2(-2); // NaN +Math.log2(1024); // 10 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Даний поліфіл емулює функцію <code>Math.log2</code>. Зауважте, що він повертає неточні значення для деяких аргументів (наприклад, 1 << 29), тому обгорніть його у {{jsxref("Math.round()")}}, якщо працюєте із бітовими масками.</p> + +<pre class="brush: js">Math.log2 = Math.log2 || function(x) { + return Math.log(x) * Math.LOG2E; +}; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log2")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/log2e/index.html b/files/uk/web/javascript/reference/global_objects/math/log2e/index.html new file mode 100644 index 0000000000..fab39f96f0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/log2e/index.html @@ -0,0 +1,66 @@ +--- +title: Math.LOG2E +slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.LOG2E</code></strong> відображає логарифм <math><semantics><mi>e</mi><annotation encoding="TeX">e </annotation></semantics></math> за основою 2, що приблизно дорівнює 1.442:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log2e.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>LOG2E</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.LOG2E</code>. Намагатись викликати <code>LOG2E</code>, звертаючись до полів створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.LOG2E">Застосування <code>Math.LOG2E</code></h3> + +<p>Наступна функція повертає логарифм <math><semantics><mi>e</mi><annotation encoding="TeX">e</annotation></semantics></math> за основою 2:</p> + +<pre class="brush: js">function getLog2e() { + return Math.LOG2E; +} + +getLog2e(); // 1.4426950408889634 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LOG2E")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/max/index.html b/files/uk/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..d76643fb1e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,102 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Global_Objects/Math/max +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +<div>{{JSRef}}</div> + +<p>Фукнція <strong><code>Math.max()</code></strong> повертає найбільше значення із довільної кількості (0 та більше) аргументів.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-max.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>Числа.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Найбільше із даних чисел. Якщо хоча б один із аргументів неможливо привести до числового типу - буде повернуто {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку з тим, що <code>max()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.max()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<p>Якщо не дано жодного аргумента, результатом буде -{{jsxref("Infinity")}}.</p> + +<p>Якщо щонайменше один із аргументів не можна привести до числового типу, то результатом буде {{jsxref("NaN")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.max">Застосування <code>Math.max()</code></h3> + +<pre class="brush: js">Math.max(10, 20); // 20 +Math.max(-10, -20); // -10 +Math.max(-10, 20); // 20 +</pre> + +<h4 id="Отримання_найбільшого_з_елементів_масиву">Отримання найбільшого з елементів масиву</h4> + +<p>{{jsxref("Array.prototype.reduce", "Array.reduce()")}} може застосовуватись для пошуку найбільшого елементу в числовому масиві шляхом порівняння кожного значення:</p> + +<pre class="brush: js">var arr = [1,2,3]; +var max = arr.reduce(function(a, b) { + return Math.max(a, b); +}); +</pre> + +<p>Наступна функція використовує {{jsxref("Function.prototype.apply()")}} для отримання найбільшого серед масиву чисел. <code>getMaxOfArray([1, 2, 3])</code> еквівалентна до <code>Math.max(1, 2, 3)</code>, проте ви можете застосовувати <code>getMaxOfArray()</code> для масивів, сформованих у процесі виконання програми. Цей спосіб слід застосовувати лише для масивів з відносно невеликою кількістю елементів.</p> + +<pre class="brush: js">function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); +}</pre> + + + +<p>Новий <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">оператор поширення (spread operator)</a> - це більш компактний спосіб записати рішення на базі <code>apply</code> для отримання максимуму із масиву чисел:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; +var max = Math.max(...arr); +</pre> + +<p>Однак, як оператор поширення (<code>...</code>), так і <code>apply</code> призведуть до помилки або повернуть невірний результат, якщо вхідний масив має забагато елементів, бо вони намагаються передати елементи масиву в якості параметрів функції. Дивіться <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Using_apply_and_built-in_functions">Використання методу <code>apply</code> і вбудованих фукнцій</a> для більш докладної інформації. Рішення на базі <code>reduce</code> не має такої проблеми.</p> + + + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.max")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.min()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/min/index.html b/files/uk/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..f5e5993976 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,98 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Global_Objects/Math/min +tags: + - JavaScript + - Math + - min + - Довідка + - Мінімум + - Найменше + - Найменше значення + - Найменше число + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Статична функція <code><strong>Math.min()</strong></code> повертає найменше з чисел, поданих на вхід, або ж {{jsxref("NaN")}}, якщо жоден із аргументів не є числом та не може бути перетворений у нього.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/math-min.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Аргументі">Аргументі</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>Нуль, чи більше чисел, з-поміж яких буде вибрано найменше значення.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Найменше з поданих чисел. Якщо хоча б один із аргументів не можна перетворити на число, результатом буде {{jsxref("NaN")}}. Якщо функція викликана без аргументів, вона поверне {{jsxref("Infinity")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку з тим, що <code>min()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.min()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<p>Якщо не дано жодного аргументу, результатом буде {{jsxref("Infinity")}}.</p> + +<p>Якщо хоча б один із аргументів не може бути приведеним до числа, результатом буде {{jsxref("NaN")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.min">Застосування <code>Math.min()</code></h3> + +<p>Знайти мінімальне значення з-поміж <code>x</code> та <code>y</code>, і присвоїти його <code>z</code>:</p> + +<pre class="brush: js">var x = 10, y = -20; +var z = Math.min(x, y); +</pre> + +<h3 id="Вибірка_значень_із_Math.min">Вибірка значень із <code>Math.min()</code></h3> + +<p><code>Math.min()</code> часто використовується для того, щоб вибрати значення, що менше або дорівнює якійсь межі. Зокрема, це</p> + +<pre class="brush: js">var x = f(foo); + +if (x > boundary) { + x = boundary; +} +</pre> + +<p>можна переписати ось так:</p> + +<pre class="brush: js">var x = Math.min(f(foo), boundary); +</pre> + +<p>{{jsxref("Math.max()")}} може використовуватись подібним чином для вибірки значень із протилежного боку.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.min")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/pi/index.html b/files/uk/web/javascript/reference/global_objects/math/pi/index.html new file mode 100644 index 0000000000..de82df2302 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/pi/index.html @@ -0,0 +1,64 @@ +--- +title: Math.PI +slug: Web/JavaScript/Reference/Global_Objects/Math/PI +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.PI</code></strong> відображає значення відношення довжини кола до його діаметру, що приблизно дорівнює 3.14159:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-pi.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>PI</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.PI</code>. Намагатись викликати <code>PI</code>, звертаючись до полів створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.PI">Застосування <code>Math.PI</code></h3> + +<p>Наступна функція використовує <code>Math.PI</code> для обчислення довжини кола за заданим діаметром:</p> + +<pre class="brush: js">function calculateCircumference(radius) { + return Math.PI * (radius + radius); +} + +calculateCircumference(1); // 6.283185307179586 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.PI")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/pow/index.html b/files/uk/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..951aeccb66 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,117 @@ +--- +title: Math.pow() +slug: Web/JavaScript/Reference/Global_Objects/Math/pow +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.pow()</code></strong> повертає результат піднесення основи до показника степеня, тобто, <code>основа<sup>степінь</sup></code>.</p> + +<p> </p> + +<div>{{EmbedInteractiveExample("pages/js/math-pow.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<p> </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.pow(<var>base</var>, <var>exponent</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>base</code></dt> + <dd>Основа степеня.</dd> + <dt><code>exponent</code></dt> + <dd>Показник степеня, до якого буде піднесено основу.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Число, що відображає значення основи, піднесеної до показника степеня.</p> + +<h2 id="Опис">Опис</h2> + +<p>Тому що <code>pow()</code> є статичним методом <code>Math</code>, він завжди використовується як <code>Math.pow()</code>, аніж як метод створеного об'єкту <code>Math</code> (<code>Math</code> не має конструктора).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.pow()">Використання <code>Math.pow()</code></h3> + +<pre class="brush: js">// просте +Math.pow(7, 2); // 49 +Math.pow(7, 3); // 343 +Math.pow(2, 10); // 1024 +// дроби як показники степеня +Math.pow(4, 0.5); // 2 (корінь квадратний від 4) +Math.pow(8, 1/3); // 2 (корінь кубічний від 8) +Math.pow(2, 0.5); // 1.4142135623730951 (корінь квадратний від 2) +Math.pow(2, 1/3); // 1.2599210498948732 (корінь кубічний від 2) +// показники степеня зі знаками +Math.pow(7, -2); // 0.02040816326530612 (1/49) +Math.pow(8, -1/3); // 0.5 +// основи зі знаками +Math.pow(-7, 2); // 49 (квадрати завжди позитивні) +Math.pow(-7, 3); // -343 (куби можуть бути негативними) +Math.pow(-7, 0.5); // NaN (негативні числа не мають дійсного квадратного кореня) +// через те, що "парні" та "непарні" корені є близькими один до одного, +// та через обмеження точності представлення чисел з рухомою комою +// негативні основи з дробовими показниками степіня завжди повертають NaN + +Math.pow(-7, 1/3); // NaN +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення, впроваджене у JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.pow")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).">Exponentiation operator</a> {{experimental_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/random/index.html b/files/uk/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..14ee5ccbd5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,113 @@ +--- +title: Math.random() +slug: Web/JavaScript/Reference/Global_Objects/Math/random +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.random()</code></strong> повертає псевдо-випадкове число із рухомою комою з проміжку 0–1 (включно із 0, але не включаючи 1) із приблизно рівномірним розподілом значень на ньому (в подальшому його можна масштабувати до потрібних розмірів). Вихідне зерно-параметр для алгоритму генерації випадкового числа обирається реалізацією; воно не може бути обраним чи перевизначеним користувачем.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-random.html")}}</div> + +<div class="note"> +<p><code>Math.random()</code> <em>не надає</em> криптографічно стійких випадкових чисел. Не слід застосовувати їх будь-де у місцях, пов'язаних із інформаційною безпекою. Натомість використовуйте Web Crypto API, а точніше - метод {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Math.random()</pre> + +<h3 id="Результат">Результат</h3> + +<p>Псевдовипадкове число із рухомою комою між <code>0</code> (включно) та 1 (виключно).</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Зауважте, що числа у JavaScript являються стандартизованими згідно IEEE 754 числами із рухомою комою із поведінкою "округлення до найближчого парного". Тому проміжки, що охоплюються наступними фукнціями (за винятком власне <code>Math.random()</code>) не зовсім точні. За умови дуже великих обраних меж (2<sup>53</sup> чи більших) можливо <em>у дуже рідкісних</em> випадках отримати значення верхньої межі, яке зазвичай виключається.</p> + +<h3 id="Отримання_випадкового_числа_з-поміж_0_(включно)_та_1_(виключно)">Отримання випадкового числа з-поміж 0 (включно) та 1 (виключно)</h3> + +<pre class="brush: js">function getRandom() { + return Math.random(); +} +</pre> + +<h3 id="Отримання_випадкового_числа_з-поміж_двох_значень">Отримання випадкового числа з-поміж двох значень</h3> + +<p>Наступний приклад повертає випадкове число між двома вказаними значеннями. Результат не менший від (інколи дорівнює) <code>min</code>, і менший за (але не дорівнює) <code>max</code>.</p> + +<pre class="brush: js">function getRandomArbitrary(min, max) { + return Math.random() * (max - min) + min; +} +</pre> + +<h3 id="Отримання_випадкового_цілого_з-поміж_двох_значень">Отримання випадкового цілого з-поміж двох значень</h3> + +<p>Наступний приклад повертає випадкове <em>ціле число</em> між двома заданими значеннями. Результат не менший від <code>min</code> (або ж від наступного цілого, більшого за <code>min</code>, якщо <code>min</code> не являється цілим), і менший за (але не дорівнює) <code>max</code>.</p> + +<pre class="brush: js">function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; //Включно з мінімальним та виключаючи максимальне значення + +} +</pre> + +<div class="note"> +<p>Застосування <code>Math.round()</code> для отримання цілих може виглядати доволі привабливо, проте це призведе до спотворення рівномірного розподілу ймовірності результатів, що може бути неприйнятним для ваших потреб.</p> +</div> + +<h3 id="Отримання_випадкового_цілого_з-поміж_двох_значень_включно">Отримання випадкового цілого з-поміж двох значень, включно</h3> + +<p>В той час, коли фукнція <code>getRandomInt()</code> включає до спектру результатів мінімум, вона виключає звідти максимум. Що, якщо вам знадобиться включити до можливих результатів як мінімум, так і максимум? Наступна фукнція <code>getRandomIntInclusive()</code> дозволяє цього досягти:</p> + +<pre class="brush: js">function getRandomIntInclusive(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; //Включаючи мінімум та максимум +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус документу</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. JavaScript 1.0 (UNIX Only) / JavaScript 1.1 (All platforms).</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.random")}}</p> + +<p class="countTop"> </p> diff --git a/files/uk/web/javascript/reference/global_objects/math/sign/index.html b/files/uk/web/javascript/reference/global_objects/math/sign/index.html new file mode 100644 index 0000000000..a3b2668270 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sign/index.html @@ -0,0 +1,116 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Reference/Global_Objects/Math/sign +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.sign()</code></strong> повертає знак числа, визначаючи, чи являється число додатнім, від'ємним, або нулем.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-sign.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Число, що відображає знак аргументу. Якщо аргумент являється додатнім числом, від'ємним числом, додатнім чи від'ємним нулем, функція поверне відповідно <code>1</code>, <code>-1</code>, <code>0</code> чи <code>-0</code>. В інших випадках результатом буде {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку з тим, що <code>sign()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sign()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<p>Ця функція має 5 різних видів результатів: <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>. Вони відповідно відображають "додатнє число", "від'ємне число", "додатній нуль", "від'ємний нуль" та {{jsxref("NaN")}}.</p> + +<p>Аргумент буде неявно перетворено у <code>number</code> при передачі у функцію.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.sign()">Застосування <code>Math.sign()</code></h3> + +<pre class="brush: js">Math.sign(3); // 1 +Math.sign(-3); // -1 +Math.sign('-3'); // -1 +Math.sign(0); // 0 +Math.sign(-0); // -0 +Math.sign(NaN); // NaN +Math.sign('foo'); // NaN +Math.sign(); // NaN +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">if (!Math.sign) { + Math.sign = function(x) { + // Якщо x - NaN, результатом буде NaN. + // Якщо x - -0, результатом буде -0. + // Якщо x - +0, результатом буде +0. + // Якщо x від'ємний, але не -0, результатом буде -1. + // Якщо x додатній, але не +0, результатом буде +1. + return ((x > 0) - (x < 0)) || +x; + // Більш наочне уявлення представлено нижче + // + // ( (x > 0) ? 0 : 1 ) // якщо від'ємний x - то від'ємна 1 + // + // інакще (бо не може бути одночасно - та +) + // ( (x < 0) ? 0 : -1 ) // якщо додатній x - то додатня 1 + // || // якщо x є 0, -0, чи NaN, чи не являється числом, + // +x // то результатом буде x, (чи) якщо x не є + // // числом, то x приводиться до чисельного типу + }; +} +</pre> + +<p>У наведеному вище поліфілі не потрібно ніяких додаткових приведень типів <code>(x > 0) чи (x < 0)</code>, бо їх віднімання одного від іншого вже вимагає конвертації із булевого типу в числа.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.sign")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/sin/index.html b/files/uk/web/javascript/reference/global_objects/math/sin/index.html new file mode 100644 index 0000000000..9a9c2bffe4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sin/index.html @@ -0,0 +1,78 @@ +--- +title: Math.sin() +slug: Web/JavaScript/Reference/Global_Objects/Math/sin +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.sin()</code></strong> повертає синус числа.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-sin.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число (кут у радіанах).</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Синус даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Math.sin()</code> повертає число з-поміж -1 та 1, що відповідає синусу даного у радіанах кута.</p> + +<p>У зв'язку з тим, що <code>sin()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sin()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.sin">Застосування <code>Math.sin()</code></h3> + +<pre class="brush: js">Math.sin(0); // 0 +Math.sin(1); // 0.8414709848078965 + +Math.sin(Math.PI / 2); // 1 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.sin")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/sinh/index.html b/files/uk/web/javascript/reference/global_objects/math/sinh/index.html new file mode 100644 index 0000000000..f3e3d83b02 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sinh/index.html @@ -0,0 +1,93 @@ +--- +title: Math.sinh() +slug: Web/JavaScript/Reference/Global_Objects/Math/sinh +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.sinh()</code></strong> повертає гіперболічний синус числа. За допомогою{{jsxref("Math.E", "сталої e", "", 1)}} це можна обчислити так:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-sinh.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.sinh(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Гіперболічний синус даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку з тим, що <code>sinh()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sinh()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.sinh">Застосування <code>Math.sinh()</code></h3> + +<pre class="brush: js">Math.sinh(0); // 0 +Math.sinh(1); // 1.1752011936438014 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Такий же результат можна отримати за допомогою фукнції {{jsxref("Math.exp()")}}:</p> + +<pre class="brush: js">Math.sinh = Math.sinh || function(x) { + return (Math.exp(x) - Math.exp(-x)) / 2; +} +</pre> + +<p>або ж викликаючи {{jsxref("Math.exp()")}} лише один раз:</p> + +<pre class="brush: js">Math.sinh = Math.sinh || function(x) { + var y = Math.exp(x); + return (y - 1 / y) / 2; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.sinh")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html new file mode 100644 index 0000000000..7ef247ceff --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sqrt/index.html @@ -0,0 +1,81 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.sqrt()</code></strong> повертає квадратний корінь від числа, що являється</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>такий унікальний</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0, для якого</mn><mspace width="thickmathspace"></mspace><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Квадратний корінь даного числа. Якщо число від'ємне, функція повертає {{jsxref("NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо значення <code>x</code> від'ємне, <code>Math.sqrt()</code> повертає {{jsxref("NaN")}}.</p> + +<p>У зв'язку з тим, що <code>sqrt()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.sqrt()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.sqrt">Застосування <code>Math.sqrt()</code></h3> + +<pre class="brush: js">Math.sqrt(9); // 3 +Math.sqrt(2); // 1.414213562373095 + +Math.sqrt(1); // 1 +Math.sqrt(0); // 0 +Math.sqrt(-1); // NaN +Math.sqrt(-0); // -0 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.sqrt")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html new file mode 100644 index 0000000000..a73d0f91af --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html @@ -0,0 +1,65 @@ +--- +title: Math.SQRT1_2 +slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.SQRT1_2</code></strong> відображає значення квадратного кореня від 1/2, що приблизно дорівнює 0.707:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>=</mo><mfrac><msqrt><mn>2</mn></msqrt><mn>2</mn></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} = \frac{\sqrt{2}}{2} \approx 0.707</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>SQRT1_2</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.SQRT1_2</code>. Намагатись викликати <code>SQRT1_2</code>, звертаючись до полів створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.SQRT1_2">Застосування <code>Math.SQRT1_2</code></h3> + +<p>Наступна функція повертає значення квадратного кореня від 1/2:</p> + +<pre class="brush:js">function getRoot1_2() { + return Math.SQRT1_2; +} + +getRoot1_2(); // 0.7071067811865476 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.SQRT1_2")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html new file mode 100644 index 0000000000..546d939b3f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html @@ -0,0 +1,65 @@ +--- +title: Math.SQRT2 +slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +tags: + - JavaScript + - Math + - Властивість + - Довідка + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +--- +<div>{{JSRef}}</div> + +<p>Поле <strong><code>Math.SQRT2</code></strong> відображає значення квадратного кореня із 2, що приблизно дорівнює 1.414:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь-ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку із тим, що <code>SQRT2</code> - це статичне поле <code>Math</code>, слід завжди звертатись до нього у формі <code>Math.SQRT2</code>. Намагатись викликати <code>SQRT2</code>, звертаючись до полів створених вами об'єктів <code>Math</code> - некоректно (<code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Math.SQRT2">Використання <code>Math.SQRT2</code></h3> + +<p>Наступна функція повертає значення квадратного кореня із 2:</p> + +<pre class="brush: js">function getRoot2() { + return Math.SQRT2; +} + +getRoot2(); // 1.4142135623730951 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.SQRT2")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/tan/index.html b/files/uk/web/javascript/reference/global_objects/math/tan/index.html new file mode 100644 index 0000000000..1a5149a778 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/tan/index.html @@ -0,0 +1,83 @@ +--- +title: Math.tan() +slug: Web/JavaScript/Reference/Global_Objects/Math/tan +tags: + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.tan()</code></strong> повертає тангенс від числа.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число, що являє собою кут в радіанах.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Тангенс даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Math.tan()</code> повертає числове значення, що відповідає тангенсу поданого кута.</p> + +<p>У зв'язку з тим, що <code>tan()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.tan()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.tan">Застосування <code>Math.tan()</code></h3> + +<pre class="brush: js">Math.tan(1); // 1.5574077246549023 +</pre> + +<p>Так як функція <code>Math.tan()</code> приймає значення в радіанах, але зазвичай зручніше працювати із градусами, наступна функція приймає значення кута в градусах, перетворює його в радіани та повертає тангенс.</p> + +<pre class="brush: js">function getTanDeg(deg) { + var rad = deg * Math.PI/180; + return Math.tan(rad); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_в_браузерах">Підтримка в браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.tan")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/tanh/index.html b/files/uk/web/javascript/reference/global_objects/math/tanh/index.html new file mode 100644 index 0000000000..84bd6008fb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/tanh/index.html @@ -0,0 +1,85 @@ +--- +title: Math.tanh() +slug: Web/JavaScript/Reference/Global_Objects/Math/tanh +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.tanh()</code></strong> повертає значення гіперболічного тангенса від числа, що також можна висловити як:</p> + +<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Гіперболічний тангенс даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>У зв'язку з тим, що <code>tanh()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.tanh()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.tanh">Застосування <code>Math.tanh()</code></h3> + +<pre class="brush: js">Math.tanh(0); // 0 +Math.tanh(Infinity); // 1 +Math.tanh(1); // 0.7615941559557649 +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Даний метод можна емулювати за допомогою функції {{jsxref("Math.exp()")}}:</p> + +<pre class="brush: js">Math.tanh = Math.tanh || function(x){ + var a = Math.exp(+x), b = Math.exp(-x); + return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.tanh")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/trunc/index.html b/files/uk/web/javascript/reference/global_objects/math/trunc/index.html new file mode 100644 index 0000000000..d3fa2704c5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/trunc/index.html @@ -0,0 +1,128 @@ +--- +title: Math.trunc() +slug: Web/JavaScript/Reference/Global_Objects/Math/trunc +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.trunc()</code></strong> повертає цілу частину числа, повністю відкидаючи дробову.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-trunc.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Math.trunc(<var>x</var>) +</pre> + +<h3 id="Аргументи">Аргументи</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Результат">Результат</h3> + +<p>Ціла частина даного числа.</p> + +<h2 id="Опис">Опис</h2> + +<p>На відміну від трьох інших методів <code>Math</code> ({{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} та {{jsxref("Math.round()")}}), принцип роботи <code>Math.trunc()</code> дуже простий. Функція просто відкидає кому (крапку) та всі цифри правої частини, не зважаючи на те, являється аргумент додатнім, чи від'ємним.</p> + +<p>Аргумент, поданий на вхід цієї функції, буде неявно приведений до чисельного типу.</p> + +<p>У зв'язку з тим, що <code>trunc()</code> - це статичний метод <code>Math</code>, слід завжди викликати його як <code>Math.trunc()</code>, аніж як метод створеного вами об'єкту <code>Math</code> (оскільки <code>Math</code> не являється конструктором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Застосування_Math.trunc()">Застосування <code>Math.trunc()</code></h3> + +<pre class="brush: js">Math.trunc(13.37); // 13 +Math.trunc(42.84); // 42 +Math.trunc(0.123); // 0 +Math.trunc(-0.123); // -0 +Math.trunc('-1.123'); // -1 +Math.trunc(NaN); // NaN +Math.trunc('foo'); // NaN +Math.trunc(); // NaN +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js">if (!Math.trunc) { + Math.trunc = function(v) { + v = +v; + if (!isFinite(v)) return v; + + return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0); + + // повертає: + // 0 -> 0 + // -0 -> -0 + // 0.2 -> 0 + // -0.2 -> -0 + // 0.7 -> 0 + // -0.7 -> -0 + // Infinity -> Infinity + // -Infinity -> -Infinity + // NaN -> NaN + // null -> 0 + }; +} +</pre> + +<p>чи:</p> + +<pre class="brush: js">if (!Math.trunc) { + Math.trunc = function(v) { + v = +v; + return (v - v % 1) || (!isFinite(v) || v === 0 ? v : v < 0 ? -0 : 0); + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.trunc")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/math/заокругелння/index.html b/files/uk/web/javascript/reference/global_objects/math/заокругелння/index.html new file mode 100644 index 0000000000..92cc055f83 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/math/заокругелння/index.html @@ -0,0 +1,194 @@ +--- +title: Math.round() +slug: Web/JavaScript/Reference/Global_Objects/Math/заокругелння +tags: + - JavaScript + - Math + - Довідка + - Заокруглення + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +<div>{{JSRef}}</div> + +<p>Функція <strong><code>Math.round()</code></strong> повертає значення числа заокруглене до найближчого цілого.</p> + +<p> </p> + +<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<p> </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Math.round(<var>x</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Число.</dd> +</dl> + +<h3 id="Повернуте_значення">Повернуте значення</h3> + +<p>Значення отриманого числа, округлене до найближчого цілого.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо дробова частина числа більша або рівна 0.5, аргумент буде округлено до найближчого більшого цілого. Якщо дробова частина числа менша 0.5, аргумент буде округлено до найближчого меншого цілого. Якщо дробова частина рівна 0.5, то аргумент буде округлено до найближчого цілого в напрямку +∞. <strong>Зверніть увагу, що функція round() відрізняється від багатьох мов, які часто приводять цей випадок до наступного цілого числа, віддаленого від нуля</strong> (маємо інший результат у випадку від'ємних чисел з дробовою частиною рівною 0.5).</p> + +<p>Оскільки round() - це статичний метод Math, ви завжди використовуєте його як Math.round (), а не як метод об'єкта Math, який ви створили (Math не має конструктора).</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">Math.round( 20.49); // 20 +Math.round( 20.5); // 21 +Math.round( 42 ); // 42 +Math.round(-20.5); // -20 +Math.round(-20.51); // -21 +</pre> + +<h3 id="Десяткове_округлення">Десяткове округлення</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Decimal adjustment of a number. + * + * @param {String} type The type of adjustment. + * @param {Number} value The number. + * @param {Integer} exp The exponent (the 10 logarithm of the adjustment base). + * @returns {Number} The adjusted value. + */ + function decimalAdjust(type, value, exp) { + // If the exp is undefined or zero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // If the value is not a number or the exp is not an integer... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // If the value is negative... + if (value < 0) { + return -decimalAdjust(type, -value, exp); + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +Math.round10(1.005, -2); // 1.01 -- compare this with Math.round(1.005*100)/100 above +Math.round10(-1.005, -2); // -1.01 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h3 id="PHP-Like_rounding_Method">PHP-Like rounding Method</h3> + +<p>The code below can be used to add your own version of Math.round to your own namespace which takes a precision parameter. Unlike Decimal rounding in the example above, this performs no conversion to and from strings, and the precision parameter works same way as PHP and Excel whereby a positive 1 would round to 1 decimal place and -1 would round to the tens.</p> + +<pre class="brush: js">var myNamespace = {}; + +myNamespace.round = function(number, precision) { + var factor = Math.pow(10, precision); + var tempNumber = number * factor; + var roundedTempNumber = Math.round(tempNumber); + return roundedTempNumber / factor; +}; + +myNamespace.round(1234.5678, 1); // 1234.6 +myNamespace.round(1234.5678, -1); // 1230</pre> + +<h2 id="Cпецифікації">Cпецифікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Впроваджено в JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_браузерів">Сумісність браузерів</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Math.round")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/nan/index.html b/files/uk/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..7a2ee5fd8c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,91 @@ +--- +title: NaN +slug: Web/JavaScript/Reference/Global_Objects/NaN +tags: + - JavaScript + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Глобальна властивість <code><strong>NaN</strong></code> - це значення, що служить для відображення "не числа" (Not-A-Number).</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>NaN</code> є властивістю <em>глобального об'єкта</em>. Іншими словами, це змінна глобальної області видимості.</p> + +<p>Початковим значенням <code>NaN</code> є "не число" — так само, як і значення {{jsxref("Number.NaN")}}. У сучасних переглядачах <code>NaN</code> — це властивість, недоступна для запису та налаштування. Навіть якщо у вашому випадку це не так, уникайте її перевизначення. У програмах <code>NaN</code> застосовується досить рідко.</p> + +<p>Існує п'ять різних типів операцій, що повертають <code>NaN</code>:</p> + +<ul> + <li>Число не може бути розібране (наприклад, <code>parseInt("blabla")</code> чи <code>Number(undefined)</code>)</li> + <li>Математична операція, в якій результат не є дійсним числом (наприклад, <code>Math.sqrt(-1)</code>)</li> + <li>Операндом аргументу є NaN (наприклад, <code>7 ** NaN</code>)</li> + <li>Невизначеності (наприклад, 0 * <code>Infinity</code>)</li> + <li>Будь-яка операція, що містить рядок та не є операцією додавання (наприклад, "ква"/3)</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Первірка_на_NaN">Первірка на <code>NaN</code></h3> + +<p><code>NaN</code> не дорівнює (через <code>==</code>, <code>!=</code>, <code>===</code> та <code>!==</code>) будь-якому значенню, в тому числі іншому значенню NaN. Використовуйте {{jsxref("Number.isNaN()")}} або {{jsxref("Global_Objects/isNaN", "isNaN()")}}, щоб якнайточніше визначити, чи значення є NaN. Або ж виконуйте порівняння аргументу із самим собою: тільки NaN не дорівнює собі.</p> + +<pre class="brush: js notranslate">NaN === NaN; // false +Number.NaN === NaN; // false +isNaN(NaN); // true +isNaN(Number.NaN); // true + +function valueIsNaN(v) { return v !== v; } +valueIsNaN(1); // false +valueIsNaN(NaN); // true +valueIsNaN(Number.NaN); // true +</pre> + +<p>Однак, пам'ятайте про відмінність між <code>isNaN()</code> та <code>Number.isNaN()</code>: перший поверне <code>true</code>, якщо аргумент є <code>NaN</code>, або якщо він стане <code>NaN</code> після приведення до чисельного типу, в той час як другий поверне <code>true</code> лише у випадку, якщо аргумент на даний момент є <code>NaN</code>:</p> + +<pre class="brush: js notranslate">isNaN('привіт'); // повертає 'true'. +Number.isNaN('привіт'); // повертає 'false'. +</pre> + +<p>Додатково, деякі методи масивів не знаходять NaN, в той час, як інші знаходять.</p> + +<pre class="brush: js notranslate">let arr = [2, 4, NaN, 12]; +arr.indexOf(NaN); // -1 (false) +arr.includes(NaN); // true +arr.findIndex(n => Number.isNaN(n)); // 2</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_веб-переглядачах">Підтримка у веб-переглядачах</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div> + +<p>{{Compat("javascript.builtins.NaN")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/null/index.html b/files/uk/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..2088955324 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,93 @@ +--- +title: 'null' +slug: Web/JavaScript/Reference/Global_Objects/null +tags: + - JavaScript + - Literal + - Проста величина +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Значення <code>null</code> позначає навмисну відсутність будь-якого значення об'єкта. Воно є однією з {{glossary("Primitive", "простих величин")}} у JavaScript.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Значення <code>null</code> має відповідний літерал:</p> + +<pre class="syntaxbox">null</pre> + +<h2 id="Опис">Опис</h2> + +<p>Власне <code>null</code> не є ідентифікатором властивості глобального об'єкта (змінною в загальній області видимості), як {{jsxref("Global_Objects/undefined", "undefined")}}. Натомість <code>null</code> є значенням, яке свідчить, що змінна не вказує на об'єкт. В різних API значення <code>null</code> часто повертається там, де очікують отримати об'єкт, вказуючи таким чином, що відповідного об'єкта немає.</p> + +<pre class="brush: js">// Змінна foo не існує. Вона не була оголошена тож і початкового значння не має: +foo; // "ReferenceError: foo is not defined" + +// Тепер змінна foo оголошена й існує, але вона не має ані типу, ані значення: +var foo = null; +foo; // виводить "null" +</pre> + +<h3 id="Різниця_між_null_та_undefined">Різниця між <code>null</code> та <code>undefined</code></h3> + +<p>Порівнюючи змінну з <code>null</code> чи <code>undefined</code> зважайте на <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">різницю між операторами рівності (==) й тотожності (===)</a>, оскільки перший за потреби здійснює перетворення типів.</p> + +<pre class="brush: js">typeof null // "object" (не "null" з метою зворотної сумісності) +typeof undefined // "undefined" +null === undefined // false +null == undefined // true +null === null // true +null == null // true +!null // true +isNaN(1 + null) // false +isNaN(1 + undefined) // true</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкова виознака.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.null")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li> + <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html new file mode 100644 index 0000000000..cf5a10c622 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html @@ -0,0 +1,101 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p>Ця функціональність не рекомендована до використання на користь визначення гетерів за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">синтаксису ініціалізації об'єктів</a> або API {{jsxref("Object.defineProperty()")}}. Хоча ця функціональність широко реалізована, вона описана у <a href="https://tc39.github.io/ecma262/#sec-additional-ecmascript-features-for-web-browsers">специфікації ECMAScript</a> тільки задля legacy-використання. Цей метод не бажано використовувати, оскільки існують кращі альтернативи.</p> +</div> + +<p>Метод <code><strong>__defineGetter__</strong></code> прив'язує властивість об'єкта до функції, яка викликатиметься під час звернення до властивості.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Рядок, що містить ім'я властивості, яку треба прив'язати до наданої функції.</dd> + <dt><code>func</code></dt> + <dd>Функція, що прив'язується до вказаної властивості.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>__defineGetter__</code> дозволяє визначити {{jsxref("Operators/get", "гетер", "", 1)}} на існуючому об'єкті.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// Нестандартний та не рекомендований спосіб + +var o = {}; +o.__defineGetter__('gimmeFive', function() { return 5; }); +console.log(o.gimmeFive); // 5 + + +// Стандартні способи + +// Використання оператора get +var o = { get gimmeFive() { return 5; } }; +console.log(o.gimmeFive); // 5 + +// Використання Object.defineProperty +var o = {}; +Object.defineProperty(o, 'gimmeFive', { + get: function() { + return 5; + } +}); +console.log(o.gimmeFive); // 5 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.defineGetter")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li>Оператор {{jsxref("Operators/get", "get")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посібник JS: Визначення гетерів та сетерів</a></li> + <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Блог-стаття] Прибирання __defineGetter__ та __defineSetter__</a></li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html new file mode 100644 index 0000000000..c8874d8a8a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html @@ -0,0 +1,116 @@ +--- +title: Object.prototype.__defineSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p>Ця функціональність не рекомендована до використання на користь <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%86%D0%BD%D1%96%D1%86%D1%96%D0%B0%D0%BB%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">синтаксису ініціалізації об'єктів</a> або API {{jsxref("Object.defineProperty()")}}.</p> + +<p>Однак, оскільки вона широко використовується у Всесвітній мережі, дуже малоймовірно, що веб-переглядачі припинять її підтримку<span class="tlid-translation translation" lang="es"><span title="">.</span></span></p> +</div> + +<p>Метод <code><strong>__defineSetter__</strong></code> прив'язує властивість об'єкта до функції, яка викликатиметься під час спроби присвоїти значення цієї властивості.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>.__defineSetter__(<var>prop</var>, <var>fun</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Рядок, що містить ім'я властивості, яка буде прив'язана до наданої функції.</dd> + <dt><code>fun</code></dt> + <dd>Функція, що викликатиметься при спробі присвоїти значення вказаної властивості. Ця функція має форму + <pre class="brush: js">function(<var>val</var>) { . . . }</pre> + + <dl> + <dt><code>val</code></dt> + <dd>Псевдонім змінної, яка містить значення для присвоєння <code>prop</code>.</dd> + </dl> + </dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>__defineSetter__</code> дозволяє визначення {{jsxref("Operators/set", "сетера", "", 1)}} на попередньо створеному об'єкті.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// <span class="tlid-translation translation" lang="es"><span title="">Нестандартний та не рекомендований спосіб</span></span> + +var o = {}; +o.__defineSetter__('value', function(val) { this.anotherValue = val; }); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 + + +// Стандартні способи + +// Використання оператора set +var o = { set value(val) { this.anotherValue = val; } }; +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 + +// Використання Object.defineProperty +var o = {}; +Object.defineProperty(o, 'value', { + set: function(val) { + this.anotherValue = val; + } +}); +o.value = 5; +console.log(o.value); // undefined +console.log(o.anotherValue); // 5 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. <span class="tlid-translation translation" lang="es"><span title="">Si desea contribuir a los datos, consulte</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div> + +<p>{{Compat("javascript.builtins.Object.defineSetter")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li> + <li>Оператор {{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посибник JavaScript: Визначення гетерів та сетерів</a></li> + <li><a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Блог-стаття] Прибирання __defineGetter__ та __defineSetter__</a></li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html new file mode 100644 index 0000000000..d801ac6354 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html @@ -0,0 +1,89 @@ +--- +title: Object.prototype.__lookupGetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <code><strong>__lookupGetter__</strong></code> повертає функцію, прив'язану в якості гетера вказаної властивості.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>obj</var>.__lookupGetter__(<var>sprop</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>sprop</code></dt> + <dd>Рядок, що містить ім'я властивості, гетер якої має бути повернений.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Функція, прив'язана в якості гетера до вказаної властивості.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо для властивості об'єкта був визначений гетер, неможливо отримати посилання на нього через цю властивість, оскільки властивість посилається на значення, яке повертає ця функція. Методом <code>__lookupGetter__</code> можна отримати посилання на функцію-гетер.</p> + +<p>Зараз це стало можливо робити стандартизованими засобами, через {{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.getPrototypeOf()")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var obj = { + get foo() { + return Math.random() > 0.5 ? 'foo' : 'bar'; + } +}; + + +// Нестандартний та не рекомендований спосіб +obj.__lookupGetter__('foo'); +// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; }) + + +// Стандартний спосіб +Object.getOwnPropertyDescriptor(obj, "foo").get; +// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; }) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.lookupGetter")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li>Оператор {{jsxref("Functions/get", "get")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посібник JavaScript: Визначення гетерів та сетерів</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html b/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html new file mode 100644 index 0000000000..c7ce0deb21 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html @@ -0,0 +1,89 @@ +--- +title: Object.prototype.__lookupSetter__() +slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <code><strong>__lookupSetter__</strong></code> повертає функцію, прив'язану в якості сетера вказаної властивості.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>obj</var>.__lookupSetter__(<var>sprop</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>sprop</code></dt> + <dd>Рядок, що містить ім'я властивості, сетер якої має бути повернений.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Функція, прив'язана в якості сетера до вказаної властивості.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо для властивості об'єкта був визначений сетер, неможливо отримати посилання на функцію-сетер через цю властивість, оскільки властивість посилається на значення, яке повертає функція-гетер. Методом <code>__lookupSetter__</code> можна отримати посилання на функцію-сетер.</p> + +<p>Зараз це стало можливо робити стандартизованим засобом, через {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var obj = { + set foo(value) { + this.bar = value; + } +}; + + +// Нестандартний та не рекомендований спосіб +obj.__lookupSetter__('foo') +// (function(value) { this.bar = value; }) + + +// Стандартний спосіб +Object.getOwnPropertyDescriptor(obj, 'foo').set; +// (function(value) { this.bar = value; }) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Включено у (нормативний) додаток для додаткової legacy-функціональності ECMAScript для веб-переглядачів (зауважте, що специфікація кодифікує те, що вже реалізовано).</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.lookupSetter")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>Оператор {{jsxref("Functions/set", "set")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Посібник JavaScript: Визначення гетерів та сетерів</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/assign/index.html b/files/uk/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..3bbaac64b9 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,273 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Object.assign()</code></strong> призначено для копіювання у цільовий об'єкт всіх особистих (не успадкованих) перелічуваних властивостей одного або декількох об'єктів. Метод повертає цільовий об'єкт.</p> + +<p>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Object.assign(<var>target</var>, ...<var>sources</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><em><code>target</code></em></dt> + <dd>Цільовий об'єкт.</dd> + <dt><em><code>sources</code></em></dt> + <dd>Вхідні об'єкти (щонайменше один).</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Цільовий об'єкт.</p> + +<h2 id="Опис">Опис</h2> + +<p>Властивості цільового об'єкта будуть заміщені властивостями вхідних об'єктів, якщо вони мають той самий ключ. Пізніші властивості вхідних об'єктів схожим чином заміщують більш ранні.</p> + +<p>Метод <code>Object.assign()</code> копіює лише перелічувані та <em>особисті</em> властивості з кожного джерела у цільовий об'єкт. Він використовує <code>[[Get]]</code> на вхідних об'єктах та <code>[[Set]]</code> на цільовому об'єкті, а отже, здійснює виклики гетерів і сетерів. Таким чином, він <em>присвоює</em> властивості, а не просто копіює чи визначає нові властивості. Ця особливість може зробити метод непридатним для приєднання нових властивостей до прототипу, якщо вхідні джерела містять гетери.</p> + +<p>Для копіювання визначень властивостей разом з їх перелічуваністю у прототип натомість скористайтеся методами {{jsxref("Object.getOwnPropertyDescriptor()")}} та {{jsxref("Object.defineProperty()")}}.</p> + +<p>Копіюються властивості обох типів: як {{jsxref("String","рядкові")}}, так і {{jsxref("Symbol","символьні")}}.</p> + +<p>В разі помилки, наприклад, якщо властивість є недоступною для запису, викидається помилка {{jsxref("TypeError")}}, а об'єкт <code>target</code> може бути змінений, якщо будь-які властивості були додані до викидання помилки.</p> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> <code>Object.assign()</code> не викидає помилок, якщо серед джерел є значення {{jsxref("null")}} чи {{jsxref("undefined")}}.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Клонування_обєкта">Клонування об'єкта</h3> + +<pre class="brush: js notranslate">const obj = { a: 1 }; +const copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Deep_Clone" name="Deep_Clone">Заувага щодо створення глибокої копії</h3> + +<p>Для створення глибокої копії необхідно скористатись альтернативними методами, тому що метод <code>Object.assign()</code> копіює значення властивостей. Якщо значенням джерела буде посилання на об'єкт, метод скопіює лише значення посилання.</p> + +<pre class="brush: js notranslate">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} + + // Глибока копія + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} +} + +test();</pre> + +<h3 id="Злиття_обєктів">Злиття об'єктів</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { b: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign(o1, o2, o3); + +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, змінено сам цільовий об'єкт</pre> + +<h3 id="Злиття_обєктів_з_однаковими_властивостями">Злиття об'єктів з однаковими властивостями</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1, b: 1, c: 1 }; +const o2 = { b: 2, c: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>Властивості перезаписуються однойменними властивостями інших об'єктів, що стоять далі в списку параметрів.</p> + +<h3 id="Копіювання_символьних_властивостей">Копіювання символьних властивостей</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { [Symbol('foo')]: 2 }; + +const obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +</pre> + +<h3 id="Властивості_з_ланцюжка_прототипів_та_неперелічувані_властивості_скопіювати_не_можна">Властивості з ланцюжка прототипів та неперелічувані властивості скопіювати не можна</h3> + +<pre class="brush: js notranslate">const obj = Object.create({ foo: 1 }, { // властивість foo належить до ланцюжка прототипів об'єкта obj + bar: { + value: 2 // bar є неперелічуваною властивістю + }, + baz: { + value: 3, + enumerable: true // baz є перелічуваною особистою властивістю + } +}); + +const copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +</pre> + +<h3 id="Прості_величини_буде_загорнуто_у_обєкти">Прості величини буде загорнуто у об'єкти</h3> + +<pre class="brush: js notranslate">const v1 = 'абв'; +const v2 = true; +const v3 = 10; +const v4 = Symbol('foo'); + +const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Прості величини будуть загорнуті, null та undefined ігноруються. +// Зауважте, лише рядкові обгортки можуть мати особисті неперелічувані властивості. +console.log(obj); // { "0": "а", "1": "б", "2": "в" } +</pre> + +<h3 id="Винятки_переривають_процес_копіювання">Винятки переривають процес копіювання</h3> + +<pre class="brush: js notranslate">const target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // Властивість target.foo доступна лише для читання + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// Викидається виняток під час присвоювання target.foo + +console.log(target.bar); // 2, перше джерело було успішно скопійовано +console.log(target.foo2); // 3, першу властивість другого джерела було успішно скопійовано +console.log(target.foo); // 1, тут трапилась помилка +console.log(target.foo3); // undefined, метод assign завершився, властивість foo3 не буде скопійована +console.log(target.baz); // undefined, третє джерело також не буде скопійоване +</pre> + +<h3 id="Копіювання_аксесорів">Копіювання аксесорів</h3> + +<pre class="brush: js notranslate">const obj = { + foo: 1, + get bar() { + return 2; + } +}; + +let copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 }, значенням copy.bar буде значення, що поверне геттер obj.bar + +// Ця функція присвоювання повністю скопіює дескриптори +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + // За замовчуванням, метод Object.assign копіює перелічувані властивості типу Symbol також + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +var copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Наведений {{Glossary("Polyfill", "поліфіл")}} не підтримує символьних властивостей, позаяк ES5 не має такого типу:</p> + +<pre class="brush: js notranslate">if (typeof Object.assign != 'function') { + // Має бути writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length функції дорівнює 2 + 'use strict'; + if (target == null || target === undefined) { + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null && nextSource !== undefined) { + for (var nextKey in nextSource) { + // Запобігає помилок, коли hasOwnProperty заміщено + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); + } +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Object.assign")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перелічуваність та належність властивостей</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">Розклад у об'єктних літералах</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/constructor/index.html b/files/uk/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..ef2362cdec --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,237 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Global_Objects/Object/constructor +tags: + - JavaScript + - Object + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +<div>{{JSRef}}</div> + +<p>Повертає посилання на функцію-конструктор {{jsxref("Object", "об'єкта")}}, що створила екземпляр об'єкта. Зауважте, що значення цієї властивості є посиланням на саму функцію, а не рядком, що містить ім'я функції. Значення, доступне лише для читання, мають лише примітивні значення, як то <code>1</code>, <code>true</code> або <code>"test"</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Усі об'єкти (за виключенням об'єктів, створених через <code>Object.create(null)</code>) матимуть властивість <code>constructor</code>. Об'єкти, створені без явного використання функції-конструктора (тобто, об'єктними та масивними літералами), матимуть властивість <code>constructor</code>, що вказує на конструктор фундаментального об'єкта для цього об'єкта.</p> + +<pre class="brush: js">var o = {}; +o.constructor === Object; // true + +var o = new Object; +o.constructor === Object; // true + +var a = []; +a.constructor === Array; // true + +var a = new Array; +a.constructor === Array; // true + +var n = new Number(3); +n.constructor === Number; // true</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Відображення_конструктора_об'єкта">Відображення конструктора об'єкта</h3> + +<p>Наступний приклад створює конструктор <code>Tree</code> та об'єкт цього типу, <code>theTree</code>. Далі приклад демонструє властивість <code>constructor</code> об'єкта <code>theTree</code>.</p> + +<pre class="brush: js">function Tree(name) { + this.name = name; +} + +var theTree = new Tree('Redwood'); +console.log('theTree.constructor дорівнює ' + theTree.constructor); +</pre> + +<p>Цей приклад виведе наступний результат:</p> + +<pre class="brush: js">theTree.constructor дорівнює function Tree(name) { + this.name = name; +} +</pre> + +<h3 id="Зміна_конструктора_об'єкта">Зміна конструктора об'єкта</h3> + +<p>Наступний приклад покаже як можна змінити конструктор загальних об'єктів. Тільки <code>true</code>, <code>1</code> та <code>"test"</code> не зміняться, оскілки їхні конструктори доступні лише для читання. Цей приклад демонструє, що не завжди безпечно покладатися на властивість об'єкта <code>constructor</code>.</p> + +<pre class="brush:js">function Type () {} + +var types = [ + new Array(), + [], + new Boolean(), + true, // лишається незмінним + new Date(), + new Error(), + new Function(), + function () {}, + Math, + new Number(), + 1, // лишається незмінним + new Object(), + {}, + new RegExp(), + /(?:)/, + new String(), + 'test' // лишається незмінним +]; + +for (var i = 0; i < types.length; i++) { + types[i].constructor = Type; + types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()]; +} + +console.log(types.join('\n')); +</pre> + +<p>Цей приклад виведе наступний результат (коментарі додані для довідки):</p> + +<pre class="brush: js">function Type() {},false, // new Array() +function Type() {},false, // [] +function Type() {},false,false // new Boolean() +function Boolean() { + [native code] +},false,true // true +function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600 // new Date() +function Type() {},false,Error // new Error() +function Type() {},false,function anonymous() { + +} // new Function() +function Type() {},false,function () {} // function () {} +function Type() {},false,[object Math] // Math +function Type() {},false,0 // new Number() +function Number() { + [native code] +},false,1 // 1 +function Type() {},false,[object Object] // new Object() +function Type() {},false,[object Object] // {} +function Type() {},false,/(?:)/ // new Regexp() +function Type() {},false,/(?:)/ // /(?:)/ +function Type() {},false, // new String() +function String() { + [native code] +},false,test</pre> + +<h3 id="Зміна_конструктора_функції">Зміна конструктора функції</h3> + +<p>Переважно ця властивість використовується для визначення функції як <strong>функції-конструктора</strong> з подальшим викликом її з оператором <strong>new</strong> та наслідуванням через ланцюжок прототипів.</p> + +<pre class="brush: js">function Parent() {} +Parent.prototype.parentMethod = function parentMethod() {}; + +function Child() {} +Child.prototype = Object.create(Parent.prototype); // перевизначення дочірнього прототипу на прототип Parent + +Child.prototype.constructor = Child; // повернення початкового конструктора прототипу Child</pre> + +<p>Але коли нам потрібно виконувати цей останній рядок? Нажаль, відповідь - залежить від обставин.</p> + +<p>Спробуємо визначити випадки, коли переприсвоєння початкового конструктора зіграє важливу роль, а коли воно стане додатковим непотрібним рядком коду.</p> + +<p>Візьмемо наступний випадок: об'єкт має метод <strong>create</strong> для створення самого себе.</p> + +<pre class="brush: js">function Parent() {}; +function CreatedConstructor() {} + +CreatedConstructor.prototype = Object.create(Parent.prototype); + +CreatedConstructor.prototype.create = function create() { + return new this.constructor(); +} + +new CreatedConstructor().create().create(); // TypeError undefined is not a function, оскільки constructor === Parent</pre> + +<p>У наведеному вище прикладі виняток виникне тому, що конструктор посилається на Parent.</p> + +<p>Щоб уникнути цього, просто призначте потрібний конструктор, який ви збираєтесь використовувати.</p> + +<pre class="brush: js">function Parent() {}; +function CreatedConstructor() {} + +CreatedConstructor.prototype = Object.create(Parent.prototype); +CreatedConstructor.prototype.constructor = CreatedConstructor; // призначте конструктор, який будете використовувати + +CreatedConstructor.prototype.create = function create() { + return new this.constructor(); +} + +new CreatedConstructor().create().create(); // так непогано</pre> + +<p>Гаразд, тепер зрозуміло, чому зміна конструктора може бути досить корисною.</p> + +<p>Розглянемо інший випадок.</p> + +<pre class="brush: js">function ParentWithStatic() {} + +ParentWithStatic.startPosition = { x: 0, y:0 }; +ParentWithStatic.getStartPosition = function getStartPosition() { + return this.startPosition; +} + +function Child(x, y) { + this.position = { + x: x, + y: y + }; +} + +Child.prototype = Object.create(ParentWithStatic.prototype); +Child.prototype.constructor = Child; + +Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() { + var position = this.position; + var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, оскільки конструктор - Child + + return { + offsetX: startPosition.x - position.x, + offsetY: startPosition.y - position.y + } +};</pre> + +<p>В цьому прикладі нам треба залишити батьківський конструктор, щоб все працювало як слід.</p> + +<p><strong>Висновок</strong>: ручна зміна або встановлення конструктора може призвести до різноманітних та іноді заплутаних наслідків. Щоб запобігти цьому, визначте роль конструктора у кожному конкретному випадку. В більшості випадків конструктор не використовується, і в перепризначенні немає необхідності.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Object.constructor")}}</p> + +<div id="compat-mobile"></div> diff --git a/files/uk/web/javascript/reference/global_objects/object/count/index.html b/files/uk/web/javascript/reference/global_objects/object/count/index.html new file mode 100644 index 0000000000..67940e270a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/count/index.html @@ -0,0 +1,44 @@ +--- +title: Object.prototype.__count__ +slug: Web/JavaScript/Reference/Global_Objects/Object/count +tags: + - JavaScript + - Object + - Властивість + - застаріла + - нестандартна +translation_of: Archive/Web/JavaScript/Object.count +--- +<div>{{JSRef}}{{Non-standard_Header}}{{obsolete_header("gecko2")}}</div> + +<p>Властивість <strong><code>__count__</code></strong> містила кількість перелічуваних властивостей об'єкта, але була прибрана.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>.__count__</pre> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">{ 1: 1 }.__count__ // 1 +[].__count__ // 0 +[1].__count__ // 1 +[1, /* hole */, 2, 3].__count__ // 3 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.count")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Blog post] More changes coming to SpiderMonkey: the magical __count__ property is being removed</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/create/index.html b/files/uk/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..189aba3ebb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,406 @@ +--- +title: Object.create() +slug: Web/JavaScript/Reference/Global_Objects/Object/create +tags: + - ECMAScript 5 + - JavaScript + - 'Null' + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.create()</strong></code> створює новий об'єкт, використовуючи існуючий об'єкт як прототип для новоствореного об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-create.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.create(<var>proto</var>, [<var>propertiesObject</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>proto</var></code></dt> + <dd>Об'єкт, що має бути прототипом для новоствореного об'єкта.</dd> + <dt><code><var>propertiesObject</var></code><var> </var>{{Optional_inline}}</dt> + <dd>Якщо вказаний та не дорівнює {{jsxref("undefined")}}, об'єкт, чиї власні перелічувані властивості (тобто, властивості, визначені на самому об'єкті, а <em>не</em> перелічувані властивості, отримані через ланцюжок прототипів) визначають дескриптори властивостей, що мають бути додані до новоствореного об'єкта, з відповідними іменами властивостей. Ці властивості відповідають другому аргументу {{jsxref("Object.defineProperties()")}}.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий об'єкт з зазначеним прототипом та властивостями.</p> + +<h3 id="Винятки">Винятки</h3> + +<p>Виняток {{jsxref("TypeError")}}, якщо параметр <code>propertiesObject</code> дорівнює {{jsxref("null")}} або це об'єкт, що не є обгорткою простого типу.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Класичне_наслідування_через_Object.create">Класичне наслідування через <code>Object.create()</code></h3> + +<p>Нижче наведено приклад використання <code>Object.create()</code> для отримання класичного наслідування. Це приклад одиночного наслідування, єдиного, яке підтримує JavaScript.</p> + +<pre class="brush: js">// Shape - батьківський клас +function Shape() { + this.x = 0; + this.y = 0; +} + +// метод батьківського класу +Shape.prototype.move = function(x, y) { + this.x += x; + this.y += y; + console.info('Фігуру переміщено.'); +}; + +// Rectangle - дочірній клас +function Rectangle() { + Shape.call(this); // виклик батьківського конструктора. +} + +// дочірній клас розширює батьківській клас +Rectangle.prototype = Object.create(Shape.prototype); + +//Якщо ви не призначите Object.prototype.constructor значення Rectangle, +//він візьме prototype.constructor класу Shape (батьківського). +//Щоб уникнути цього, ми призначаємо prototype.constructor значення Rectangle (дочірній). +Rectangle.prototype.constructor = Rectangle; + +var rect = new Rectangle(); + +console.log('Чи є rect екземпляром Rectangle?', rect instanceof Rectangle); // true +console.log('Чи є rect екземпляром Shape?', rect instanceof Shape); // true +rect.move(1, 1); // Виводить 'Фігуру переміщено.' +</pre> + +<p>Якщо ви бажаєте успадкуватись від кількох об'єктів, можна використати домішки.</p> + +<pre class="brush: js">function MyClass() { + SuperClass.call(this); + OtherSuperClass.call(this); +} + +// успадкувати від одного класу +MyClass.prototype = Object.create(SuperClass.prototype); +// змішати з іншим +Object.assign(MyClass.prototype, OtherSuperClass.prototype); +// перепризначити конструктор +MyClass.prototype.constructor = MyClass; + +MyClass.prototype.myMethod = function() { + // зробити щось +}; +</pre> + +<p>Метод {{jsxref("Object.assign()")}} копіює властивості з прототипу OtherSuperClass у прототип MyClass, роблячи їх доступними для усіх екземплярів MyClass. <code>Object.assign()</code> був запроваджений у ES2015 і <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Запасний_варіант_(поліфіл)">може бути відтворений поліфілом</a>. Якщо необхідна підтримка більш старих переглядачів, можна використати <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> або <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code>.</p> + +<h3 id="Використання_аргументу_propertiesObject_у_Object.create">Використання аргументу <code>propertiesObject</code> у <code>Object.create()</code></h3> + +<pre class="brush: js">var o; + +// створити об'єкт з прототипом null +o = Object.create(null); + + +o = {}; +// є еквівалентом: +o = Object.create(Object.prototype); + + +// У цьому прикладі ми створюємо об'єкт з парою +// зразкових властивостей. (Зауважте, що другий параметр +// встановлює ключі у відповідності до *дескрипторів властивості*.) +o = Object.create(Object.prototype, { + // foo - це звичайна властивість-значення + foo: { + writable: true, + configurable: true, + value: 'hello' + }, + // bar - це властивість-аксесор (має гетер та сетер) + bar: { + configurable: false, + get: function() { return 10; }, + set: function(value) { + console.log('Призначення `o.bar` значення', value); + } +/* з аксесорами ES2015 наш код може виглядати так + get() { return 10; }, + set(value) { + console.log('Призначення `o.bar` значення', value); + } */ + } +}); + + +function Constructor() {} +o = new Constructor(); +// є еквівалентом: +o = Object.create(Constructor.prototype); +// Звісно, якщо у функції Constructor присутній +// код ініціалізації, +// Object.create() не може його відобразити + + +// Створити новий об'єкт, чиїм прототипом є новий, порожній +// об'єкт, та додати єдину властивість 'p' зі значенням 42. +o = Object.create({}, { p: { value: 42 } }); + +// за замовчуванням властивості НЕДОСТУПНІ для запису, +// переліку чи налаштування: +o.p = 24; +o.p; +// 42 + +o.q = 12; +for (var prop in o) { + console.log(prop); +} +// 'q' + +delete o.p; +// false + +// щоб визначити властивість у ES3 +o2 = Object.create({}, { + p: { + value: 42, + writable: true, + enumerable: true, + configurable: true + } +}); +/* є еквівалентом: +o2 = Object.create({p: 42}) */ + +</pre> + +<h2 id="Користувацькі_та_нульові_обєкти">Користувацькі та нульові об'єкти</h2> + +<p>Новий об'єкт, створений на основі користувацького об'єкта (особливо об'єкт, створений на основі об'єкта <code>null</code>, який по суті є користувацьким об'єктом, що НЕ МАЄ членів), може поводитись неочікувано. Особливо під час налагодження, оскільки звичайні функції утиліт для перетворення/видалення об'єктних властивостей можуть генерувати помилки або просто втрачати інформацію (особливо якщо використовують перехоплювачі помилок, що ігнорують помилки). Наприклад, ось два об'єкти:</p> + +<pre class="brush: js">oco = Object.create( {} ); // створити нормальний об'єкт +ocn = Object.create( null ); // створити "нульовий" об'єкт + +> console.log(oco) // {} -- Виглядає нормально +> console.log(ocn) // {} -- Поки що теж виглядає нормально + +oco.p = 1; // створити просту властивість на нормальному об'єкті +ocn.p = 0; // створити просту властивість на "нульовому" об'єкті + +> console.log(oco) // {p: 1} -- Досі виглядає нормально +> console.log(ocn) // {p: 0} -- Теж виглядає нормально. АЛЕ СТРИВАЙТЕ... +</pre> + +<p><br> + Як показано вище, поки що все виглядає нормальним. Однак, при спробі використати ці об'єкти, їхні відмінності швидко стають очевидними:</p> + +<pre class="brush: js">> "oco is: " + oco // виводить "oco is: [object Object]" + +> "ocn is: " + ocn // викидає помилку: Cannot convert object to primitive value +</pre> + +<p>Перевірка лише декількох з багатьох базових вбудованих функцій більш чітко демонструє величину проблеми:</p> + +<pre class="brush: js">> alert(oco) // виводить [object Object] +> alert(ocn) // викидає помилку: Cannot convert object to primitive value + +> oco.toString() // виводить [object Object] +> ocn.toString() // викидає помилку: ocn.toString is not a function + +> oco.valueOf() // виводить {} +> ocn.valueOf() // викидає помилку: ocn.valueOf is not a function + +> oco.hasOwnProperty("p") // виводить "true" +> ocn.hasOwnProperty("p") // викидає помилку: ocn.hasOwnProperty is not a function + +> oco.constructor // виводить "Object() { [native code] }" +> ocn.constructor // виводить "undefined" +</pre> + +<p><br> + Як вже сказано, ці відмінності можуть швидко зробити процес відлагодження навіть простих на вигляд проблем дуже заплутаним. Наприклад:</p> + +<p><em>Проста звичайна функція налагодження:</em></p> + +<pre class="brush: js">// вивести пари ключ-значення властивостей верхнього рівня наданого об'єкта +function ShowProperties(obj){ + for(var prop in obj){ + console.log(prop + ": " + obj[prop] + "\n" ) + } +}</pre> + +<p><br> + <em>Не такі прості результати: (особливо якщо перехоплювач помилок сховав повідомлення про помилки)</em></p> + +<pre class="brush: js">ob={}; ob.po=oco; ob.pn=ocn; // створити складний об'єкт з наданих вище тестових об'єктів в якості значень властивостей + +> ShowProperties( ob ) // вивести властивості верхнього рівня +- po: [object Object] +- Error: Cannot convert object to primitive value + +Зауважте, що виводиться тільки перша властивість. +</pre> + +<p><br> + <em>(Але якщо такий самий об'єкт був просто створений в іншому порядку -- принаймні, в деяких реалізаціях...)</em></p> + +<pre class="brush: js">ob={}; ob.pn=ocn; ob.po=oco; // створити знову такий самий об'єкт, але створити ті самі властивості в іншому порядку + +> ShowProperties( ob ) // вивести властивості верхнього рівня +- Error: Cannot convert object to primitive value + +Зауважте, що жодна властивість не виводиться.</pre> + +<p>Зауважте, що такий відмінний порядок може виникнути статично, через відмінний зафіксований код, як ось тут, а може й динамічно, через порядок, в якому виконуються під час запуску гілки коду з додаванням властивостей, що залежить від вхідних даних та/або випадкових змінних. Знову ж таки, реальний порядок перебору не гарантований, в якому б порядку не додавалися члени об'єкта.</p> + +<h4 id="Деякі_рішення_що_не_працюють">Деякі рішення, що не працюють</h4> + +<p>Гарне вирішення проблеми відсутніх об'єктних методів не завжди є очевидним.</p> + +<p>Пряме додавання відсутнього об'єктного метода зі стандартного об'єкта НЕ працює:</p> + +<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше) + +ocn.toString = Object.toString; // оскільки йому бракує методу, призначити його прямо зі стандартного об'єкта + +<span style="letter-spacing: -0.00333rem;">> ocn.toString // виводить "toString() { [native code] }" -- схоже, що відсутній метод тепер додано</span> +> ocn.toString == Object.toString // виводить "true" -- схоже, це той самий метод, що й у стандартному об'єкті + +> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function +</pre> + +<p><br> + Пряме додавання відсутнього об'єктного метода у "прототип" нового об'єкта також не працює, оскільки у нового об'єкта немає справжнього прототипа (що й є справжньою причиною УСІХ цих проблем), і його не можна додати <strong>прямо</strong>:</p> + +<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше) + +ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined + +ocn.prototype = {}; // спробувати створити прототип +ocn.prototype.toString = Object.toString; // оскільки об'єкту бракує методу, призначити його прямо зі стандартного об'єкта<span style="letter-spacing: -0.00333rem;"> + +> ocn.toString() // error: ocn.toString is not a function</span> +</pre> + +<p><br> + Додавання відсутнього об'єктного метода використанням стандартного об'єкта в якості прототипа нового об'єкта також не працює:</p> + +<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше) +Object.setPrototypeOf(ocn, Object); // встановити значенням прототипу нового об'єкта стандартний об'єкт + +> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function +</pre> + +<h4 id="Деякі_вдалі_рішення">Деякі вдалі рішення</h4> + +<p>Як вже сказано, пряме додавання відсутнього об'єктного методу зі <strong>стандартного об'єкта </strong>НЕ працює. Однак, пряме додавання <strong>загального</strong> метода ПРАЦЮЄ:</p> + +<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше) + +ocn.toString = toString; // оскільки об'єкту бракує методу, призначити його прямо з загальної версії + +> ocn.toString() // виводить "[object Object]" +> "ocn is: " + ocn // виводить "ocn is: [object Object]" + + +ob={}; ob.pn=ocn; ob.po=oco; // створити складний об'єкт (такий самий, як і раніше) + +> ShowProperties(ob) // вивести властивості верхнього рівня +- po: [object Object] +- pn: [object Object] +</pre> + +<p>Однак, встановлення загального <strong>прототипу</strong> прототипом нового об'єкта працює навіть краще:</p> + +<pre class="brush: js">ocn = Object.create( null ); // створити "нульовий" об'єкт (такий самий, як і раніше) +Object.setPrototypeOf(ocn, Object.prototype); // встановити значенням прототипу нового об'єкта "загальний" об'єкт (НЕ стандартний об'єкт) +</pre> + +<p><em>(На додачу до функцій, пов'язаних з рядками, що наведені вище, це також додає:)</em></p> + +<pre class="brush: js">> ocn.valueOf() // виводить {} +> ocn.hasOwnProperty("x") // виводить "false" +> ocn.constructor // виводить "Object() { [native code] }" + +// ...та вся решта властивостей та методів Object.prototype. +</pre> + +<p>Як бачимо, об'єкти, змінені таким чином, тепер виглядають дуже схожими на звичайні об'єкти.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей поліфіл покриває основний сценарій використання, а саме, створення нового об'єкта, для якого був обраний прототип, але не бере до уваги другий аргумент.</p> + +<p>Зауважте, що в той час як використання <code>null</code> в якості <code>[[Prototype]]</code> підтримується в реальному методі ES5 <code>Object.create</code>, цей поліфіл не може це підтримувати через обмеження, притаманне версіям ECMAScript нижче 5.</p> + +<pre class="brush: js"> if (typeof Object.create !== "function") { + Object.create = function (proto, propertiesObject) { + if (typeof proto !== 'object' && typeof proto !== 'function') { + throw new TypeError("Прототипом об'єкта може бути тільки об'єкт: " + proto); + } else if (proto === null) { + throw new Error("Реалізація Object.create у цьому браузері є шимом та не підтримує 'null' в якості першого аргументу."); + } + + if (typeof propertiesObject != 'undefined') { + throw new Error("Реалізація Object.create у цьому браузері є шимом та не підтримує другий аргумент."); + } + + function F() {} + F.prototype = proto; + + return new F(); + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.create")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>John Resig's post on <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html new file mode 100644 index 0000000000..342fea9106 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html @@ -0,0 +1,198 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +tags: + - ECMAScript 5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.defineProperties()</strong></code> визначає нові або модифікує існуючі властивості прямо на об'єкті, вертаючи цей об'єкт.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>Об'єкт, на якому визначаються чи модифікуються властивості.</dd> + <dt><code><var>props</var></code></dt> + <dd>Об'єкт, чиї ключі відображають імена властивостей, які треба визначити чи модифікувати, і чиї значення є об'єктами, що описують ці властивості. Кожне значення у <code>props</code> має бути або дескриптором даних, або дескриптором доступу; воно не може бути обома (детальніше читайте у {{jsxref("Object.defineProperty()")}}).</dd> + <dd>Дескриптори даних та дескриптори доступу можуть мати наступні необов'язкові ключі:</dd> + <dd> + <dl> + <dt><code>configurable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, і якщо властивість може бути видалена з відповідного об'єкта.<br> + <strong>За замовчуванням <code>false</code>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість відображається під час переліку властивостей відповідного об'єкта.<br> + <strong>За замовчуванням <code>false</code>.</strong></dd> + </dl> + + <p>Дескриптор даних також має наступні необов'язкові ключі:</p> + + <dl> + <dt><code>value</code></dt> + <dd>Значення, пов'язане з властивістю. Може бути будь-яким з чинних значень JavaScript (числом, об'єктом, функцією і т.д.).<br> + <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене {{jsxref("Operators/Оператори_присвоєння", "оператором присвоєння", "", 1)}}.<br> + <strong>За замовчуванням <code>false</code>.</strong></dd> + </dl> + + <p>Дескриптор доступу також має наступні необов'язкові ключі:</p> + + <dl> + <dt><code>get</code></dt> + <dd>Функція, що виступає властивістю-гетером, або {{jsxref("undefined")}}, якщо гетера немає. Значення, що повертає функція, буде використане як значення властивості.<br> + <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd> + <dt><code>set</code></dt> + <dd>Функція, що виступає властивістю-сетером, або {{jsxref("undefined")}}, якщо сетера немає. Функція буде отримувати єдиним аргументом нове значення, що призначається властивості.<br> + <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd> + </dl> + + <p>Якщо в дескриптора немає жодного з ключів <code>value</code>, <code>writable</code>, <code>get</code> або <code>set</code>, він сприймається як дескриптор даних. Якщо дескриптор має і <code>value</code> або <code>writable</code>, і <code>get</code> або <code>set</code>, викидається виняток.</p> + </dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт, переданий у функцію.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Object.defineProperties</code>, по суті, визначає всі властивості у відповідності до власних перелічуваних властивостей <code>props</code> на об'єкті <code>obj</code>.</p> + +<h2 id="Приклад">Приклад</h2> + +<pre class="brush: js">var obj = {}; +Object.defineProperties(obj, { + 'property1': { + value: true, + writable: true + }, + 'property2': { + value: 'Привіт', + writable: false + } + // і т.д., і т.п. +}); +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>За умови незміненого середовища виконання, де всі імена та властивості посилаються на свої первинні значення, метод <code>Object.defineProperties</code> є майже повністю еквівалентним (зауважте коментар у <code>isCallable</code>) наступній реімплементації у JavaScript:</p> + +<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) { + function convertToDescriptor(desc) { + function hasProperty(obj, prop) { + return Object.prototype.hasOwnProperty.call(obj, prop); + } + + function isCallable(v) { + // Увага: відредагуйте за необхідності, якщо інші значення, крім функцій, доступні для виклику. + return typeof v === 'function'; + } + + if (typeof desc !== 'object' || desc === null) + throw new TypeError('bad desc'); + + var d = {}; + + if (hasProperty(desc, 'enumerable')) + d.enumerable = !!desc.enumerable; + if (hasProperty(desc, 'configurable')) + d.configurable = !!desc.configurable; + if (hasProperty(desc, 'value')) + d.value = desc.value; + if (hasProperty(desc, 'writable')) + d.writable = !!desc.writable; + if (hasProperty(desc, 'get')) { + var g = desc.get; + + if (!isCallable(g) && typeof g !== 'undefined') + throw new TypeError('bad get'); + d.get = g; + } + if (hasProperty(desc, 'set')) { + var s = desc.set; + if (!isCallable(s) && typeof s !== 'undefined') + throw new TypeError('bad set'); + d.set = s; + } + + if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d)) + throw new TypeError('identity-confused descriptor'); + + return d; + } + + if (typeof obj !== 'object' || obj === null) + throw new TypeError('bad obj'); + + properties = Object(properties); + + var keys = Object.keys(properties); + var descs = []; + + for (var i = 0; i < keys.length; i++) + descs.push([keys[i], convertToDescriptor(properties[keys[i]])]); + + for (var i = 0; i < descs.length; i++) + Object.defineProperty(obj, descs[i][0], descs[i][1]); + + return obj; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.defineProperties")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..6e6907e958 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,501 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +tags: + - ECMAScript 5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +<div>{{JSRef}}</div> + +<p>Статичний метод <code><strong>Object.defineProperty()</strong></code> визначає нову властивість безпосередньо на об'єкті, або модифікує існуючу властивість на об'єкті, та повертає об'єкт.</p> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Цей метод викликається прямо на конструкторі {{jsxref("Object")}}, а не на екземплярі типу <code>Object</code>.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, на якому визначається властивість.</dd> + <dt><code>prop</code></dt> + <dd>Ім'я або {{jsxref("Symbol", "символ")}} властивості для визначення чи модифікації.</dd> + <dt><code>descriptor</code></dt> + <dd>Дескриптор для властивості, що модифікується чи визначається.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт, що був переданий у функцію.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод дозволяє точно додавати чи модифікувати властивість об'єкту. Звичайне додавання властивості через призначення створює властивості, які з'являються під час переліку властивостей (цикл {{jsxref("Statements/for...in", "for...in")}} або метод {{jsxref("Object.keys")}}), чиї значення можуть бути змінені та можуть бути {{jsxref("Operators/delete", "видалені", "", 1)}}. Даний метод дозволяє змінити ці додаткові деталі у стані за замовчуванням. За замовчуванням, значення, додані за допомогою <code>Object.defineProperty()</code>, є незмінними.</p> + +<p>Дескриптори властивостей у об'єктах бувають двох основних видів: дескриптори даних та дескриптори доступу. <em>Дескриптор даних</em> - це властивість, що має значення, яке може бути або не бути доступне для запису. <em>Дескриптор доступу</em> -<dfn> це властивість, описана парою функцій </dfn>гетер-сетер. Дескриптор має бути одного з двох видів, і не може належати до обох.</p> + +<p>І дескриптори даних, і дескриптори доступу є об'єктами. Вони мають наступні необов'язкові ключі (Значення за замовчуванням у випадку визначення властивостей через Object.defineProperty()):</p> + +<dl> + <dt><code>configurable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкту.<br> + <strong>За замовчуванням <code>false</code>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті..<br> + <strong>За замовчуванням <code>false</code>.</strong></dd> +</dl> + +<p>Дескриптор даних також має наступні необов'язкові ключі:</p> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, пов'язане з властивістю. Може бути будь-яким з чинних значень JavaScript (числом, об'єктом, функцією і т. д.).<br> + <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене за допомогою {{jsxref("Operators/Assignment_Operators", "оператора присвоєння", "", 1)}}.<br> + <strong>За замовчуванням <code>false</code>.</strong></dd> +</dl> + +<p>Дескриптор доступу також має наступні необов'язкові ключі:</p> + +<dl> + <dt><code>get</code></dt> + <dd>Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає. Коли відбувається звернення до властивості, ця функція викликається без аргументів, а <code>this</code> присвоюється об'єкт, через який відбулось звернення до властивості (це може бути не той об'єкт, на якому властивість була визначена, через наслідування).<br> + <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd> + <dt><code>set</code></dt> + <dd>Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає. Коли властивості присвоюється значення, функція викликається з одним аргументом (значення, яке присвоюється), а <code>this</code> присвоюється об'єкт, через який відбувається присвоєння.<br> + <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd> +</dl> + +<p>Якщо в дескриптора немає жодного з ключів <code>value</code>, <code>writable</code>, <code>get</code> або <code>set</code>, він сприймається як дескриптор даних. Якщо дескриптор має і <code>value</code> або <code>writable</code>, і <code>get</code> або <code>set</code>, викидається виняток.</p> + +<p>Майте на увазі, що ці атрибути не обов'язково є особистими властивостями дескриптора. Успадковані властивості також будуть враховуватись. Щоб впевнитись, що значення за замовчуванням збережуться, ви можете заморозити {{jsxref("Object.prototype")}} заздалегідь, явно вказуючи всі опції, або вказати {{jsxref("null")}} через {{jsxref("Object.create", "Object.create(null)")}}.</p> + +<pre class="brush: js">// використовуючи __proto__ +var obj = {}; +var descriptor = Object.create(null); // немає успадкованих властивостей +// за замовчуванням недоступний для запису, переліку та налаштування +descriptor.value = 'static'; +Object.defineProperty(obj, 'key', descriptor); + +// явно задані ключі +Object.defineProperty(obj, 'key', { + enumerable: false, + configurable: false, + writable: false, + value: 'static' +}); + +// перероблення того самого об'єкта +function withValue(value) { + var d = withValue.d || ( + withValue.d = { + enumerable: false, + writable: false, + configurable: false, + value: null + } + ); + + // уникаємо дублювання операції присвоєння значення + if (d.value !== value) d.value = value; + + return d; +} +// ... і ... +Object.defineProperty(obj, 'key', withValue('static')); + +// якщо замороження доступне, воно запобігає додаванню або +// видаленню властивостей прототипу об'єкта +// (value, get, set, enumerable, writable, configurable) +(Object.freeze || Object)(Object.prototype);</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Якщо хочете дізнатись, як використовувати метод <code>Object.defineProperty</code> з двійковими прапорами, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">додаткові приклади</a>.</p> + +<h3 id="Створення_властивості">Створення властивості</h3> + +<p>Коли зазначеної властивості в об'єкті не існує, <code>Object.defineProperty()</code> створює нову властивість за описом. Поля можуть бути пропущені у дескрипторі, тоді для цих полів будуть задані значення за замовчуванням.</p> + +<pre class="brush: js">var o = {}; // Створює новий об'єкт + +// Приклад властивості об'єкта, доданої +// за допомогою defineProperty з дескриптором даних +Object.defineProperty(o, 'a', { + value: 37, + writable: true, + enumerable: true, + configurable: true +}); +// Властивість 'а' існує в об'єкті o, її значення дорівнює 37 + +// Приклад властивості об'єкта, доданої +// за допомогою defineProperty з дескриптором доступу +var bValue = 38; +Object.defineProperty(o, 'b', { + get: function() { return bValue; }, + set: function(newValue) { bValue = newValue; }, + enumerable: true, + configurable: true +}); +o.b; // 38 +// Властивість 'b' існує в об'єкті o, її значення дорівнює 38 +// Значення o.b тепер завжди ідентичне bValue, +// якщо o.b не була перевизначена + +// Не можна змішувати обидва типи +Object.defineProperty(o, 'conflict', { + value: 0x9f91102, + get: function() { return 0xdeadbeef; } +}); +// викидає TypeError: value існує +// тільки в дескрипторах даних, +// get існує тільки в дескрипторах доступу</pre> + +<h3 id="Модифікація_властивості">Модифікація властивості</h3> + +<p>Коли властивість вже існує, <code>Object.defineProperty()</code> намагається модифікувати властивість згідно значень у дескрипторі та поточної конфігурації об'єкта. Якщо атрибут <code>configurable</code> старого дескриптора дорівнював <code>false</code>, властивість вважається недоступною для налаштування. Неможливо змінити жоден атрибут властивості-аксесора, недоступної для налаштування. Для властивості-значення можливо змінити значення, якщо властивість доступна для запису, також можливо змінити атрибут <code>writable</code> з <code>true</code> на <code>false</code>. Неможливо переключатись між типами властивостей, коли властивість недоступна для налаштування.</p> + +<p>Помилка {{jsxref("TypeError")}} викидається при спробах змінити атрибути властивості, недоступної для налаштування (окрім <code>value</code> та <code>writable</code>, якщо їх дозволено змінювати), крім випадку, коли поточне та нове значення однакові.</p> + +<h4 id="Атрибут_writable">Атрибут writable</h4> + +<p>Коли атрибут властивості <code>writable</code> встановлений у <code>false</code>, властивість вважається недоступною для запису. Їй не можна переприсвоїти значення.</p> + +<pre class="brush: js">var o = {}; // Створює новий об'єкт + +Object.defineProperty(o, 'a', { + value: 37, + writable: false +}); + +console.log(o.a); // виводить 37 +o.a = 25; // Помилка не викидається +// (Викидалась би у строгому режимі, +// навіть якщо значеня таке саме) +console.log(o.a); // виводить 37. Присвоєння не спрацювало. + +// строгий режим +(function() { + 'use strict'; + var o = {}; + Object.defineProperty(o, 'b', { + value: 2, + writable: false + }); + o.b = 3; // викидає TypeError: "b" доступна лише для читання + return o.b; // без попереднього рядка вертає 2 +}());</pre> + +<p class="brush: js">Як видно з прикладу, спроби запису у властивість, недоступну для запису, не змінюють її, але й не викидають помилки.</p> + +<h4 id="Атрибут_enumerable">Атрибут enumerable</h4> + +<p>Атрибут властивості <code>enumerable</code> визначає, чи буде властивість підхоплена методом {{jsxref("Object.assign()")}} або оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">розкладу</a>. Для не {{jsxref("Symbols", "символьних")}} властивостей він також визначає, чи буде властивість з'являтись у циклі {{jsxref("Statements/for...in", "for...in")}} та у {{jsxref("Object.keys()")}}, чи ні.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + value: 1, + enumerable: true +}); +Object.defineProperty(o, 'b', { + value: 2, + enumerable: false +}); +Object.defineProperty(o, 'c', { + value: 3 +}); // enumerable за замовчуванням дорівнює false +o.d = 4; // enumerable за замовчуванням дорівнює true, + // якщо властивість створюється через присвоєння +Object.defineProperty(o, Symbol.for('e'), { + value: 5, + enumerable: true +}); +Object.defineProperty(o, Symbol.for('f'), { + value: 6, + enumerable: false +}); + +for (var i in o) { + console.log(i); +} +// виводить 'a' та 'd' (у невизначеному порядку) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +o.propertyIsEnumerable('d'); // true +o.propertyIsEnumerable(Symbol.for('e')); // true +o.propertyIsEnumerable(Symbol.for('f')); // false + +var p = { ...o } +p.a // 1 +p.b // undefined +p.c // undefined +p.d // 4 +p[Symbol.for('e')] // 5 +p[Symbol.for('f')] // undefined</pre> + +<h4 id="Атрибут_configurable">Атрибут configurable</h4> + +<p>Атрибут <code>configurable</code> контролює одночасно, чи може властивість бути видалена з об'єкту, та чи можуть її атрибути (інші, крім <code>value</code> та <code>writable</code>) бути змінені.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + get() { return 1; }, + configurable: false +}); + +Object.defineProperty(o, 'a', { + configurable: true +}); // викидає TypeError +Object.defineProperty(o, 'a', { + enumerable: true +}); // викидає TypeError +Object.defineProperty(o, 'a', { + set() {} +}); // викидає TypeError (set не був визначений попередньо) +Object.defineProperty(o, 'a', { + get() { return 1; } +}); // викидає TypeError +// (хоча новий get робить рівно те саме) +Object.defineProperty(o, 'a', { + value: 12 +}); // викидає TypeError +// ('value' можна змінити, коли 'configurable' дорівнює false, +// але не у цьому випадку, через аксесор 'get') + +console.log(o.a); // виводить 1 +delete o.a; // Нічого не відбувається +console.log(o.a); // виводить 1</pre> + +<p>Якби атрибут <code>configurable</code> властивості <code>o.a</code> дорівнював <code>true</code>, жодна з помилок не з'явилася б, і властивість була б видалена наприкінці.</p> + +<h3 id="Додавання_властивостей_та_значень_за_замовчуванням">Додавання властивостей та значень за замовчуванням</h3> + +<p>Важливо враховувати, яким чином задаються значення атрибутів за замовчуванням. Часто є різниця між простим присвоєнням значення через крапкову нотацію та використанням <code>Object.defineProperty()</code>, як показано нижче у прикладі.</p> + +<pre class="brush: js">var o = {}; + +o.a = 1; +// є еквівалентом: +Object.defineProperty(o, 'a', { + value: 1, + writable: true, + configurable: true, + enumerable: true +}); + +// З іншого боку, +Object.defineProperty(o, 'a', { value: 1 }); +// є еквівалентом: +Object.defineProperty(o, 'a', { + value: 1, + writable: false, + configurable: false, + enumerable: false +}); +</pre> + +<h3 id="Користувацьки_сетери_та_гетери">Користувацьки сетери та гетери</h3> + +<p>Приклад нижче показує, як реалізувати об'єкт, що самоархівується. Коли призначається властивість <code>temperature</code>, масив <code>archive</code> отримує запис журналу подій.</p> + +<pre class="brush: js">function Archiver() { + var temperature = null; + var archive = []; + + Object.defineProperty(this, 'temperature', { + get: function() { + console.log('get!'); + return temperature; + }, + set: function(value) { + temperature = value; + archive.push({ val: temperature }); + } + }); + + this.getArchive = function() { return archive; }; +} + +var arc = new Archiver(); +arc.temperature; // 'get!' +arc.temperature = 11; +arc.temperature = 13; +arc.getArchive(); // [{ val: 11 }, { val: 13 }] +</pre> + +<p>У цьому прикладі гетер завжди повертає одне й те саме значення.</p> + +<pre class="brush: js">var pattern = { + get() { + return 'Що б ти не призначив, ' + + 'я завжди повертаю цей рядок'; + }, + set() { + this.myname = "Це рядок з моїм ім'ям"; + } +}; + +function TestDefineSetAndGet() { + Object.defineProperty(this, 'myproperty', pattern); +} + +var instance = new TestDefineSetAndGet(); +instance.myproperty = 'тест'; +console.log(instance.myproperty); +// Що б ти не призначив, я завжди повертаю цей рядок + +console.log(instance.myname); // Це рядок з моїм ім'ям</pre> + +<h3 id="Успадкування_властивостей">Успадкування властивостей</h3> + +<p>Якщо властивість-аксесор була успадкована, її методи <code>get</code> та <code>set</code> викликатимуться при зверненні до властивості та будуть модифіковані на об'єктах-нащадках. Якщо ці методи використовують змінну для зберігання значення, це значення буде спільним для усіх об'єктів.</p> + +<pre class="brush: js">function myclass() { +} + +var value; +Object.defineProperty(myclass.prototype, "x", { + get() { + return value; + }, + set(x) { + value = x; + } +}); + +var a = new myclass(); +var b = new myclass(); +a.x = 1; +console.log(b.x); // 1</pre> + +<p>Це можна виправити, зберігаючи значення у іншій властивості. У методах <code>get</code> та <code>set</code> <code>this</code> вказує на об'єкт, що використовується для звернення або для модифікації властивості.</p> + +<pre class="brush: js">function myclass() { +} + +Object.defineProperty(myclass.prototype, "x", { + get() { + return this.stored_x; + }, + set(x) { + this.stored_x = x; + } +}); + +var a = new myclass(); +var b = new myclass(); +a.x = 1; +console.log(b.x); // undefined</pre> + +<p>На відміну від властивостей-аксесорів, властивості-значення завжди присвоюються самому об'єкту, а не прототипу. Проте, якщо успадковується властивість-значення, недоступна для запису, це все одно не дозволяє змінювати властивість на об'єкті.</p> + +<pre class="brush: js">function myclass() { +} + +myclass.prototype.x = 1; +Object.defineProperty(myclass.prototype, "y", { + writable: false, + value: 1 +}); + +var a = new myclass(); +a.x = 2; +console.log(a.x); // 2 +console.log(myclass.prototype.x); // 1 +a.y = 2; // Ігнорується, викидає виняток у строгому режимі +console.log(a.y); // 1 +console.log(myclass.prototype.y); // 1</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p> + +<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2> + +<h3 id="Перевизначення_властивості_length_обєкта_Array">Перевизначення властивості <code>length</code> об'єкта <code>Array</code></h3> + +<p>Можливість перевизначити властивість масивів {{jsxref("Array.length", "length")}} є предметом звичайних обмежень. (Властивість {{jsxref("Array.length", "length")}} початково недоступна для налаштування та переліку, і доступна для запису. Таким чином, для незміненого масиву можливо змінити значення властивості {{jsxref("Array.length", "length")}} або зробити її недоступною для запису. Неможливо змінити її доступність для переліку чи налаштування, або, якщо вона недоступна для запису, змінити її значення чи доступність для запису.) Однак, не усі переглядачі дозволяють це перевизначення.</p> + +<p>Firefox від 4 до 22 викине {{jsxref("TypeError")}} на всяку спробу будь-яким чином (дозволено це чи ні) перевизначити властивість масиву {{jsxref("Array.length", "length")}}.</p> + +<p>Версії Chrome, у яких реалізовано <code>Object.defineProperty()</code>, у певних обставинах ігнорують значення довжини масиву, відмінне від поточного значення властивості масиву {{jsxref("Array.length", "length")}}. У деяких обставинах зміна доступності для запису, схоже, непомітно не спрацьовує (і не викидає виняток). Разом з тим, деякі методи, що змінюють масив, такі як {{jsxref("Array.prototype.push")}}, не визнають недоступну для запису довжину масиву.</p> + +<p>Версії Safari, у яких реалізовано <code>Object.defineProperty()</code>, ігнорують значення <code>length</code>, яке відрізняється від поточної властивості масиву {{jsxref("Array.length", "length")}}, і спроби змінити її доступність для запису не викидають помилки, але насправді не змінюють доступність властивості для запису.</p> + +<p>Лише Internet Explorer 9 та новіші, а також Firefox 23 та новіші, схоже, повністю та коректно реалізують перевизначення властивості масивів {{jsxref("Array.length", "length")}}. На сьогоднішній день не варто покладатись на те, що перевизначення властивості масиву {{jsxref("Array.length", "length")}} працюватиме чи поводитиметься певним чином. І навіть коли ви <em>можете</em> на це покластись, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">існує дуже вагома причина не робити цього</a>.</p> + +<h3 id="Примітки_щодо_Internet_Explorer_8">Примітки щодо Internet Explorer 8</h3> + +<p>Internet Explorer 8 реалізував метод <code>Object.defineProperty()</code>, який може використовуватись <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">тільки на об'єктах DOM</a>. Кілька моментів варто зазначити:</p> + +<ul> + <li>Спроби використати <code>Object.defineProperty()</code> на вбудованих об'єктах викине помилку.</li> + <li>Атрибутам властивості мають бути надані певні значення. Атрибути <code>configurable</code>, <code>enumerable</code> та <code>writable</code> мають усі дорівнювати <code>true</code> для дескриптора даних, а також <code>true</code> для <code>configurable</code>, <code>false</code> для <code>enumerable</code> для дескриптора доступу.(?) Будь-яка спроба задати інше значення (?) призведе до викидання помилки.</li> + <li>Переналаштування властивості вимагає спочатку видалення цієї властивості. Якщо властивість не була видалена, вона залишиться такою, як була до спроби переналаштування.</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Operators/get", "get")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Додаткові приклади <code>Object.defineProperty</code></a></li> + <li>{{jsxref("Reflect.defineProperty()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/entries/index.html b/files/uk/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..8b555e8991 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,157 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Global_Objects/Object/entries +tags: + - JavaScript + - Властивість + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +<div>{{JSRef}}</div> + +<div><span class="seoSummary">Метод <code><strong>Object.entries()</strong></code> повертає масив пар ключ-значення особистих, перелічуваних, рядкових властивостей наданого об'єкта, у тому самому порядку, у якому їх надає цикл {{jsxref("Statements/for...in", "for...in")}} (різниця лише в тому, що цикл for-in також перебирає </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"><span class="seoSummary">властивості з ланцюга прототипів).</span> Порядок масиву, поверненого </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">Object.entries()</strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, не залежить від того, як був визначений об'єкт</span>. Якщо вам потрібне певне впорядкування, то масив слід відсортувати наступним чином: <code>Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));</code>.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, чиї пари ключ-значення особистих перелічуваних рядкових властивостей потрібно повернути.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<div>Масив пар <code>[key, value]</code> з особистих, перелічуваних, рядкових властивостей даного об'єкта.</div> + +<h2 id="Опис">Опис</h2> + +<p><code>Object.entries()</code> повертає масив, чиїми елементами є масиви, що відповідають парам <code>[key, value]</code> перелічуваних рядкових властивостей, знайдених безпосередньо на об'єкті. Порядок властивостей є таким самим, як і при переборі властивостей об'єкта вручну за допомогою циклу.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] + +// подібний до масиву об'єкт +const obj = { 0: 'а', 1: 'б', 2: 'в' }; +console.log(Object.entries(obj)); // [ ['0', 'а'], ['1', 'б'], ['2', 'в'] ] + +// подібний до масиву об'єкт з випадковим порядком ключів +const anObj = { 100: 'а', 2: 'б', 7: 'в' }; +console.log(Object.entries(anObj)); // [ ['2', 'б'], ['7', 'в'], ['100', 'а'] ] + +// getFoo є неперелічуваною властивістю +const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); +myObj.foo = 'bar'; +console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] + +// аргумент, що не є об'єктом, буде приведений до об'єкта +console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] + +// повертає порожній масив для усіх простих типів, оскільки примітиви не мають особистих властивостей +console.log(Object.entries(100)); // [ ] + +// елегантно перебирає пари ключ-значення +const obj = { a: 5, b: 7, c: 9 }; +for (const [key, value] of Object.entries(obj)) { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +} + +// або, використовуючи додаткові функції масивів +Object.entries(obj).forEach(([key, value]) => { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +}); +</pre> + +<h3 id="Перетворення_Object_на_Map">Перетворення <code>Object</code> на <code>Map</code></h3> + +<p>Конструктор {{jsxref("Map", "new Map()")}} приймає ітерабельний об'єкт, отриманий через <code>entries</code>. За допомогою <code>Object.entries</code>, ви легко можете перетворити {{jsxref("Object")}} на {{jsxref("Map")}}:</p> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +const map = new Map(Object.entries(obj)); +console.log(map); // Map { foo: "bar", baz: 42 } +</pre> + +<h3 id="Перебір_обєкта">Перебір об'єкта</h3> + +<p>Використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація#Деструктуризація_масивів">деструктуризацію масивів</a>, ви можете легко перебирати об'єкти.</p> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Щоб додати підтримку методу <code>Object.entries</code> у старих середовищах, що не підтримують його початково, ви можете використати <span class="tlid-translation translation" lang="uk"><span title="">демонстраційну реалізацію </span></span><code>Object.entries</code><span class="tlid-translation translation" lang="uk"><span title=""> у</span></span> <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> <span class="tlid-translation translation" lang="uk"><span title="">(якщо вам не потрібна підтримка </span></span>IE<span class="tlid-translation translation" lang="uk"><span title="">), поліфіл у репозиторіях</span></span> <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>, або можете просто скористатись простим, готовим до розгортання поліфілом, наведеним нижче.</p> + +<pre class="brush: js">if (!Object.entries) { + Object.entries = function( obj ){ + var ownProps = Object.keys( obj ), + i = ownProps.length, + resArray = new Array(i); // попередньо виділити пам'ять під масив + while (i--) + resArray[i] = [ownProps[i], obj[ownProps[i]]]; + + return resArray; + }; +} +</pre> + +<p>Для наведеного вище поліфілу, якщо вам потрібна підтримка IE < 9, тоді вам також знадобиться поліфіл Object.keys (як той, що наведений у статті {{jsxref("Object.keys")}})</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.entries")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.fromEntries()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/eval/index.html b/files/uk/web/javascript/reference/global_objects/object/eval/index.html new file mode 100644 index 0000000000..19a476dfc1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/eval/index.html @@ -0,0 +1,46 @@ +--- +title: Object.prototype.eval() +slug: Web/JavaScript/Reference/Global_Objects/Object/eval +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.eval +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <code><strong>Object.eval()</strong></code> обчислював рядок коду JavaScript у контексті об'єкта, але цей метод застарів та був прибраний.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>.eval(<var>string</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>string</code></dt> + <dd>Будь-який рядок, що відображає вираз, інструкцію чи послідовність інструкцій JavaScript. Вираз може містити змінні та властивості існуючих об'єктів.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>eval</code> більше не може використовуватись в якості методу об'єкта. Використовуйте замість нього глобальну функцію {{jsxref("Global_Objects/eval", "eval()")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.eval")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/freeze/index.html b/files/uk/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..86269bfda1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,256 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Global_Objects/Object/freeze +tags: + - ECMAScript 5 + - JavaScript + - Object + - freeze + - Об'єкт + - заморожування + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.freeze()</strong></code> <strong>заморожує</strong> об'єкт. Заморожений об'єкт не може бути змінений; заморожування запобігає додаванню нових властивостей, видаленню існуючих властивостей, зміні доступності існуючих властивостей для переліку, налаштування та запису, а також зміні значень існуючих властивостей. Також, заморожування об'єкта не дає змінювати його прототип. Метод <code>freeze()</code> повертає той самий об'єкт, що був переданий.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, який потрібно заморозити.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт, переданий у функцію.</p> + +<h2 id="Опис">Опис</h2> + +<p>Ніщо не може бути додане чи видалене з набору властивостей замороженого об'єкта. Будь-яка спроба це зробити зазнає невдачі, або непомітно, або з викиданням винятку {{jsxref("TypeError")}} (найчастіше, але не винятково, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}).</p> + +<p>Для властивостей-значень замороженого об'єкта не можна змінювати значення, атрибутам writable та configurable встановлено значення false. Властивості-аксесори (гетери та сетери) працюють, як і раніше (і так само створюють ілюзію, що ви міняєте значення). Зауважте, що значення, які є об'єктами, можна змінювати, якщо тільки вони теж не заморожені. Масив, як об'єкт, може бути заморожений; після цього його елементи не можуть бути змінені, і жоден елемент не може бути доданий чи видалений з масиву.</p> + +<p><code>freeze()</code> повертає той самий об'єкт, який був переданий у функцію. Він <em>не створює</em> заморожену копію.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Заморожування_обєктів">Заморожування об'єктів</h3> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'ква' +}; + +// До заморожування: можна додавати нові властивості, +// а також змінювати чи видаляти існуючі властивості +obj.foo = 'мяв'; +obj.lumpy = 'гав'; +delete obj.prop; + +// Заморожуємо. +var o = Object.freeze(obj); + +// Повертається той самий об'єкт, який ми передали. +o === obj; // true + +// Об'єкт заморожено. +Object.isFrozen(obj); // === true + +// Тепер будь-які зміни не працюють +obj.foo = 'му'; // нічого не робить +// непомітно не додає властивість +obj.quaxxor = 'весела качка'; + +// У строгому режимі такі спроби викинуть винятки TypeError +function fail(){ + 'use strict'; + obj.foo = 'бум'; // викидає TypeError + delete obj.foo; // викидає TypeError + delete obj.quaxxor; // повертає true, бо атрибут 'quaxxor' не був доданий + obj.sparky = 'фух'; // викидає TypeError +} + +fail(); + +// Спроба внести зміни через Object.defineProperty; +// обидві інструкції викинуть TypeError. +Object.defineProperty(obj, 'ohai', { value: 17 }); +Object.defineProperty(obj, 'foo', { value: 'уф' }); + +// Також неможливо змінити прототип +// обидві наведені інструкції викинуть TypeError. +Object.setPrototypeOf(obj, { x: 20 }) +obj.__proto__ = { x: 20 } +</pre> + +<h3 id="Заморожування_масивів">Заморожування масивів</h3> + +<pre class="brush: js">let a = [0]; +Object.freeze(a); // Тепер масив не можна змінювати. + +a[0]=1; // непомітно не спрацьовує +a.push(2); // непомітно не спрацьовує + +// У строгому режимі такі спроби викидатимуть TypeError +function fail() { + "use strict" + a[0] = 1; + a.push(2); +} + +fail();</pre> + +<p>Заморожений об'єкт є <em>незмінним</em>. Однак, він не обов'язково є <em>константою</em>. Наступний приклад демонструє, що заморожений об'єкт не є константою (неглибока заморозка).</p> + +<pre class="brush: js">obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'значенняА'; + +obj1.internal.a // 'значенняА'</pre> + +<p>Щоб об'єкт був константою, все дерево посилань (прямі та непрямі посилання на інші об'єкти) має посилатися тільки на незмінні заморожені об'єкти. Заморожений об'єкт називається незмінним, бо <em>стан </em>об'єкта (значення та посилання на інші об'єкти) всередині всього об'єкта є зафіксованим. Зауважте, що рядки, числа та булеві значення завжди незмінні, і що функції та масиви є об'єктами.</p> + +<h4 id="Що_таке_неглибока_заморозка">Що таке "неглибока заморозка"?</h4> + +<p>Результат виклику <code>Object.freeze(<var>object</var>)</code> стосується лише безпосередніх властивостей об'єкта <code>object</code>, і запобігає додаванню, видаленню чи переприсвоєнню значень властивостей у майбутньому <em>тільки</em> на об'єкті <code>object</code>. Якщо ж значеннями цих властивостей є інші об'єкти, ці об'єкти не заморожуються, і на них можуть здійснюватись операції додавання, видалення чи переприсвоєння значень властивостей.</p> + +<pre class="brush: js">var employee = { + name: "Дмитро", + designation: "Розробник", + address: { + street: "Городоцька", + city: "Львів" + } +}; + +Object.freeze(employee); + +employee.name = "Вова"; // непомітно не спрацює у нестрогому режимі +employee.address.city = "Винники"; // атрибути дочірнього об'єкта можна змінювати + +console.log(employee.address.city) // Виведе: "Винники" +</pre> + +<p>Щоб зробити об'єкт незмінним, рекурсивно заморозьте кожну властивість типу object (глибока заморозка). Застосовуйте свій шаблон для кожного конкретного елементу, коли знаєте, що об'єкт не містить {{interwiki("wikipedia", "Цикл_(теорія_графів)", "циклів")}} у дереві посилань, інакше запуститься нескінченний цикл. Покращенням функції <code>deepFreeze()</code> була б внутрішня функція, яка отримує аргументом шлях (наприклад, масив), щоб можна було заборонити рекурсивний виклик <code>deepFreeze()</code>, коли об'єкт знаходиться у процесі перетворення на незмінний об'єкт. Ви все одно ризикуєте заморозити об'єкт, який не треба заморожувати, наприклад, [window].</p> + +<pre class="brush: js">function deepFreeze(object) { + + // Отримати імена властивостей, визначених на об'єкті + var propNames = Object.getOwnPropertyNames(object); + + // Заморозити властивості перед тим, як заморожувати себе + + for (let name of propNames) { + let value = object[name]; + + object[name] = value && typeof value === "object" ? + deepFreeze(value) : value; + } + + return Object.freeze(object); +} + +var obj2 = { + internal: { + a: null + } +}; + +deepFreeze(obj2); + +obj2.internal.a = 'новеЗначення'; // непомітно не спрацює у нестрогому режимі +obj2.internal.a; // null +</pre> + +<h2 id="Примітки_щодо_використання">Примітки щодо використання</h2> + +<p>У ES5, якщо аргументом цього методу є не об'єкт (примітив), він спричинить помилку {{jsxref("TypeError")}}. У ES2015 аргумент, який не є об'єктом, сприйматиметься як звичайний заморожений об'єкт, і буде просто повернений.</p> + +<pre class="brush: js">> Object.freeze(1) +TypeError: 1 is not an object // код ES5 + +> Object.freeze(1) +1 // код ES2015 +</pre> + +<p>Об'єкти {{domxref("ArrayBufferView")}} з елементами спричинять помилку {{jsxref("TypeError")}}, оскільки вони є представленнями ділянок пам'яті, і неодмінно спричинять інші можливі проблеми:</p> + +<pre class="brush: js">> Object.freeze(new Uint8Array(0)) // Немає елементів +Uint8Array [] + +> Object.freeze(new Uint8Array(1)) // Має елементи +TypeError: Cannot freeze array buffer views with elements + +> Object.freeze(new DataView(new ArrayBuffer(32))) // Немає елементів +DataView {} + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Немає елементів +Float64Array [] + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Має елементи +TypeError: Cannot freeze array buffer views with elements +</pre> + +<p>Зауважте наступне; оскільки три стандартні властивості (<code>buf.byteLength</code>, <code>buf.byteOffset</code> та <code>buf.buffer</code>) є доступними лише для читання (так само, як у {{jsxref("ArrayBuffer")}} чи у {{jsxref("SharedArrayBuffer")}}), немає причини намагатися заморожувати ці властивості.</p> + +<h3 id="Порівняння_з_Object.seal">Порівняння з <code>Object.seal()</code></h3> + +<p>Об'єкти, запечатані через {{jsxref("Object.seal()")}}, дозволяють змінювати свої існуючі властивості. Властивості об'єктів, заморожених через <code>Object.freeze()</code>, стають незмінними.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.freeze")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html b/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html new file mode 100644 index 0000000000..28e960ca54 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/fromentries/index.html @@ -0,0 +1,112 @@ +--- +title: Object.fromEntries() +slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +tags: + - JavaScript + - Довідка + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.fromEntries()</strong></code> перетворює список пар ключ-значення на об'єкт.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.fromEntries(<var>iterable</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>iterable</var></code></dt> + <dd>Ітерабельний об'єкт, наприклад, {{jsxref("Array")}} або {{jsxref("Map")}}, або інші об'єкти, що реалізують <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_перебируваного">протокол перебируваного</a>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий об'єкт, чиї властивості надані записами ітерабельного об'єкта.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>Object.fromEntries()</code> приймає список пар ключ-значення і повертає новий об'єкт, властивості якого надані цими записами. Аргумент <em>iterable</em> має бути об'єктом, що реалізує метод <code>@@iterator</code>, який повертає об'єкт ітератор, що утворює подібний до масиву об'єкт з двома елементами. Перший його елемент - це значення, що використовується в якості ключа властивості, а другий елемент - значення, що буде асоціюватися з цим ключем.</p> + +<p><code>Object.fromEntries()</code> виконує дію протилежну до {{jsxref("Object.entries()")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перетворення_Map_на_Object">Перетворення <code>Map</code> на <code>Object</code></h3> + +<p>За допомогою <code>Object.fromEntries</code>, можна перетворити {{jsxref("Map")}} на {{jsxref("Object")}}:</p> + +<pre class="brush: js">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]); +const obj = Object.fromEntries(map); +console.log(obj); // { foo: "bar", baz: 42 } +</pre> + +<h3 id="Перетворення_Array_на_Object">Перетворення <code>Array</code> на <code>Object</code></h3> + +<p>За допомогою <code>Object.fromEntries</code> можна перетворити {{jsxref("Array")}} на {{jsxref("Object")}}:</p> + +<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; +const obj = Object.fromEntries(arr); +console.log(obj); // { 0: "a", 1: "b", 2: "c" } +</pre> + +<h3 id="Перетворення_обєкта">Перетворення об'єкта</h3> + +<p>За допомогою методу <code>Object.fromEntries</code>, його протилежності {{jsxref("Object.entries()")}} та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array#Методи_2">методів маніпулювання масивами</a> можна ось так трансформувати об'єкти:</p> + +<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 }; + +const object2 = Object.fromEntries( + Object.entries(object1) + .map(([ key, val ]) => [ key, val * 2 ]) +); + +console.log(object2); +// { a: 2, b: 4, c: 6 }</pre> + +<div class="hidden"> +<p>Please do not add polyfills on MDN pages. For more details, refer to: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення у ECMAScript 2019.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html b/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html new file mode 100644 index 0000000000..9fef482fd6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html @@ -0,0 +1,52 @@ +--- +title: Object.getNotifier() +slug: Web/JavaScript/Reference/Global_Objects/Object/getNotifier +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.getNotifier +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>Object.getNotifer()</code></strong> використовувався для створення об'єкта, який дозволяв штучно викликати зміну, але застарів та був прибраний з переглядачів.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.getNotifier(<em>obj</em>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, для якого потрібно отримати сповіщувач.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт-сповіщувач, пов'язаний з об'єктом, переданим у функцію.</p> + +<h2 id="Опис">Опис</h2> + +<p>Сповіщувач використовувався для запуску штучних змін, за якими спостерігатиме <code>Object.observe()</code>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification.</a></p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.getNotifier")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..71b7d34b53 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html @@ -0,0 +1,159 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +tags: + - ECMAScript 5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.getOwnPropertyDescriptor()</strong></code> повертає дескриптор властивості для особистої властивості (такої, що присутня безпосередньо на об'єкті, а не у ланцюжку його прототипів) наданого об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, в якому потрібно знайти властивість.</dd> + <dt><code>prop</code></dt> + <dd>Ім'я або {{jsxref("Symbol","символ")}} властивості, опис якої отримується.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Дескриптор наданої властивості, якщо така існує на об'єкті, інакше {{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод дозволяє вивчити докладний опис властивості. Властивість у JavaScript складається з імені у вигляді рядка або {{jsxref("Symbol", "символа")}} та дескриптора властивості. Більше інформації щодо типів дескрипторів властивостей та їхніх атрибутів можна знайти у статті {{jsxref("Object.defineProperty()")}}.</p> + +<p>Дескриптор властивості - це запис, що має деякі з наступних атрибутів:</p> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, пов'язане з властивістю (тільки у дескрипторах даних).</dd> + <dt><code>writable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене (тільки у дескрипторах даних).</dd> + <dt><code>get</code></dt> + <dd>Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає (тільки у дескрипторах доступу).</dd> + <dt><code>set</code></dt> + <dd>Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає (тільки у дескрипторах доступу).</dd> + <dt><code>configurable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкта.</dd> + <dt><code>enumerable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var o, d; + +o = { get foo() { return 17; } }; +d = Object.getOwnPropertyDescriptor(o, 'foo'); +// d дорівнює { +// configurable: true, +// enumerable: true, +// get: /*функція-гетер*/, +// set: undefined +// } + +o = { bar: 42 }; +d = Object.getOwnPropertyDescriptor(o, 'bar'); +// d дорівнює { +// configurable: true, +// enumerable: true, +// value: 42, +// writable: true +// } + +o = { [Symbol.for('baz')]: 73 } +d = Object.getOwnPropertyDescriptor(o, Symbol.for('baz')); +// d дорівнює { +// configurable: true, +// enumerable: true, +// value: 73, +// writable: true +// } + +o = {}; +Object.defineProperty(o, 'qux', { + value: 8675309, + writable: false, + enumerable: false +}); +d = Object.getOwnPropertyDescriptor(o, 'qux'); +// d дорівнює { +// value: 8675309, +// writable: false, +// enumerable: false, +// configurable: false +// } +</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5, якщо перший аргумент цього методу не є об'єктом (є примітивом), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 перший аргумент, що не є об'єктом, буде спочатку приведений до об'єкта.</p> + +<pre class="brush: js">Object.getOwnPropertyDescriptor('foo', 0); +// TypeError: "foo" is not an object // код ES5 + +Object.getOwnPropertyDescriptor('foo', 0); +// Об'єкт, повернений кодом ES2015: { +// configurable: false, +// enumerable: true, +// value: "f", +// writable: false +// } +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html new file mode 100644 index 0000000000..fa5dae0e79 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html @@ -0,0 +1,118 @@ +--- +title: Object.getOwnPropertyDescriptors() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +tags: + - JavaScript + - Object + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.getOwnPropertyDescriptors()</strong></code> повертає дескриптори всіх особистих властивостей наданого об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, для якого потрібно отримати дескриптори всіх особистих властивостей.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт, що містить дескриптори всіх особистих властивостей об'єкта. Може бути порожній об'єкт, якщо властивостей немає.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод дозволяє вивчити докладний опис усіх особистих властивостей об'єкта. Властивість у JavaScript складається з імені у вигляді рядка або {{jsxref("Symbol","символа")}} та дескриптора властивості. Більше інформації щодо типів дескрипторів властивостей та їхніх атрибутів можна знайти у статті {{jsxref("Object.defineProperty()")}}.</p> + +<p>Дескриптор властивості - це запис, що має деякі з наступних атрибутів:</p> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, пов'язане з властивістю (тільки у дескрипторах даних).</dd> + <dt><code><strong>writable</strong></code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене (тільки у дескрипторах даних).</dd> + <dt><code>get</code></dt> + <dd>Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає (тільки у дескрипторах доступу).</dd> + <dt><code>set</code></dt> + <dd>Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає (тільки у дескрипторах доступу).</dd> + <dt><code>configurable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкта.</dd> + <dt><code>enumerable</code></dt> + <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_дрібного_клону">Створення дрібного клону</h3> + +<p>В той час як метод {{jsxref("Object.assign()")}} скопіює лише особисті та перелічувані властивості з наданого об'єкта у цільовий, ви можете скористатись цим методом та {{jsxref("Object.create()")}} для дрібного копіювання між двома невідомими об'єктами:</p> + +<pre class="brush: js">Object.create( + Object.getPrototypeOf(obj), + Object.getOwnPropertyDescriptors(obj) +); +</pre> + +<h3 id="Створення_підкласу">Створення підкласу</h3> + +<p>Типовим способом створення підкласу є визначити підклас, присвоїти його прототипу екземпляр суперкласу, і далі визначити властивості на цьому екземплярі. Це може бути незграбно, особливо для гетерів та сетерів. Ви можете натомість скористатись даним кодом для призначення прототипу:</p> + +<pre class="brush: js">function superclass() {} +superclass.prototype = { + // Визначте тут свої методи та властивості +}; +function subclass() {} +subclass.prototype = Object.create( + superclass.prototype, + { + // Визначте тут свої методи та властивості + } +); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення у ECMAScript 2017.</td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Поліфіл</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html new file mode 100644 index 0000000000..df8c13a161 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html @@ -0,0 +1,175 @@ +--- +title: Object.getOwnPropertyNames() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +tags: + - ECMAScript5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Object.getOwnPropertyNames()</code></strong> повертає масив усіх властивостей (в тому числі неперелічуваних, за винятком властивостей, що використовують символ), знайдених безпосередньо на наданому об'єкті.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js">Object.getOwnPropertyNames(<var>obj</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>Об'єкт, чиї перелічувані та неперелічувані властивості будуть повернені.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Масив рядків, що відповідає властивостям, знайденим безпосередньо у наданому об'єкті.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Object.getOwnPropertyNames()</code> повертає масив, чиї елементи є рядками, що відповідають перелічуваним та неперелічуваним властивостям, знайденим безпосередньо на наданому об'єкті <code><var>obj</var></code>. Порядок перелічуваних властивостей у масиві відповідає порядку, в якому видає властивості об'єкта цикл {{jsxref("Statements/for...in", "for...in")}} (або метод {{jsxref("Object.keys()")}}). Порядок неперелічуваних властивостей у масиві, а також порядок посеред перелічуваних властивостей, не визначені.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Object.getOwnPropertyNames">Використання <code>Object.getOwnPropertyNames()</code></h3> + +<pre class="brush: js">var arr = ['а', 'б', 'в']; +console.log(Object.getOwnPropertyNames(arr).sort()); +// виведе ["0", "1", "2", "length"] + +// подібний до масиву об'єкт +var obj = { 0: 'а', 1: 'б', 2: 'в' }; +console.log(Object.getOwnPropertyNames(obj).sort()); +// виведе ["0", "1", "2"] + +// Виведення імен та значень властивостей через Array.forEach +Object.getOwnPropertyNames(obj).forEach( + function (val, idx, array) { + console.log(val + ' -> ' + obj[val]); + } +); +// виведе +// 0 -> а +// 1 -> б +// 2 -> в + +// неперелічувана властивість +var my_obj = Object.create({}, { + getFoo: { + value: function() { return this.foo; }, + enumerable: false + } +}); +my_obj.foo = 1; + +console.log(Object.getOwnPropertyNames(my_obj).sort()); +// виведе ["foo", "getFoo"] +</pre> + +<p>Якщо вам потрібні тільки перелічувані властивості, дивіться {{jsxref("Object.keys()")}} або скористайтесь циклом {{jsxref("Statements/for...in", "for...in")}} (зауважте, що це також поверне перелічувані властивості, знайдені у ланцюжку прототипів об'єкта, якщо тільки вони не були відфільтровані методом {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).</p> + +<p>Елементи, знайдені у ланцюжку прототипів, не додаються у список:</p> + +<pre class="brush: js">function ParentClass() {} +ParentClass.prototype.inheritedMethod = function() {}; + +function ChildClass() { + this.prop = 5; + this.method = function() {}; +} +ChildClass.prototype = new ParentClass; +ChildClass.prototype.prototypeMethod = function() {}; + +console.log( + Object.getOwnPropertyNames( + new ChildClass() // ["prop", "method"] + ) +); +</pre> + +<h3 id="Отримати_лише_неперелічувані_властивості">Отримати лише неперелічувані властивості</h3> + +<p>Тут використовується функція {{jsxref("Array.prototype.filter()")}} для видалення перелічуваних ключів (отриманих методом {{jsxref("Object.keys()")}}) зі списка усіх ключів (отриманих методом <code>Object.getOwnPropertyNames()</code>), таким чином, повертаючи тільки неперелічувані ключі.</p> + +<pre class="brush: js">var target = myObject; +var enum_and_nonenum = Object.getOwnPropertyNames(target); +var enum_only = Object.keys(target); +var nonenum_only = enum_and_nonenum.filter(function(key) { + var indexInEnum = enum_only.indexOf(key); + if (indexInEnum == -1) { + // Ключ не знайдений у ключах enum_only, + // це означає, що він є неперелічуваним, + // тому повертаємо true, щоб залишити його у фільтрі + return true; + } else { + return false; + } +}); + +console.log(nonenum_only); +</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5, якщо аргумент цього методу не є об'єктом (примітив), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, буде приведений до об'єкта.</p> + +<pre class="brush: js">Object.getOwnPropertyNames('foo'); +// TypeError: "foo" is not an object (код ES5) + +Object.getOwnPropertyNames('foo'); +// ["0", "1", "2", "length"] (код ES2015) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}</p> + +<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2> + +<p>До Firefox 28 метод <code>Object.getOwnPropertyNames</code> не бачив невирішених властивостей об'єктів {{jsxref("Error")}}. Це було виправлено у пізніших версіях ({{bug("724768")}}).</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Array.forEach()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html new file mode 100644 index 0000000000..45fb9dc9f8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html @@ -0,0 +1,91 @@ +--- +title: Object.getOwnPropertySymbols() +slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +tags: + - ECMAScript 2015 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.getOwnPropertySymbols()</strong></code> повертає масив усіх символьних властивостей, знайдених безпосередньо на наданому об'єкті.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js"><code>Object.getOwnPropertySymbols(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, чиї символьні властивості будуть повернені.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Масив усіх символьних властивостей, знайдених безпосередньо на наданому об'єкті.</p> + +<h2 id="Опис">Опис</h2> + +<p>Подібно до {{jsxref("Object.getOwnPropertyNames()")}}, ви можете отримати усі символьні властивості наданого об'єкта у вигляді масиву символів. Зауважте, що сам метод {{jsxref("Object.getOwnPropertyNames()")}} не містить символьних властивостей об'єкта і повертає лише рядкові властивості.</p> + +<p>Оскільки жоден об'єкт не має початково символьних властивостей, <code>Object.getOwnPropertySymbols()</code> повертає порожній масив, якщо ви не присвоїли символьні властивості своєму об'єкту.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var obj = {}; +var a = Symbol('a'); +var b = Symbol.for('b'); + +obj[a] = 'localSymbol'; +obj[b] = 'globalSymbol'; + +var objectSymbols = Object.getOwnPropertySymbols(obj); + +console.log(objectSymbols.length); // 2 +console.log(objectSymbols); // [Symbol(a), Symbol(b)] +console.log(objectSymbols[0]); // Symbol(a) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Symbol","Символ")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..c9aeaa48c6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,98 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +tags: + - ECMAScript5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.getPrototypeOf()</strong></code> повертає прототип (тобто, значення внутрішньої властивості <code>[[Prototype]]</code>) вказаного об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>Об'єкт, чий прототип буде повернений.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Прототип наданого об'єкта. Якщо немає успадкованих властивостей, повертається {{jsxref("null")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5 буде викинуто виняток {{jsxref("TypeError")}}, якщо параметр <var>obj</var> не є об'єктом. У ES2015 параметр буде приведений до {{jsxref("Object","об'єкта")}}.</p> + +<pre class="brush: js">Object.getPrototypeOf('foo'); +// TypeError: "foo" is not an object (код ES5) +Object.getPrototypeOf('foo'); +// String.prototype (код ES2015) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.getPrototypeOf")}}</p> + +<h2 id="Примітки_щодо_Opera">Примітки щодо Opera</h2> + +<p>Хоча старіші версії Opera поки що не підтримують <code>Object.getPrototypeOf()</code>, Opera підтримує нестандартну властивість {{jsxref("Object.proto", "__proto__")}}, починаючи з Opera 10.50.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>Пост John Resig щодо <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..b41d85e896 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,158 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>hasOwnProperty()</code></strong> повертає булеве значення, яке вказує, чи є задана властивість особистою властивістю об'єкта (тобто, не успадкованою).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><var>prop</var></dt> + <dd>Ім'я у вигляді {{jsxref("String", "рядка")}} або {{Glossary("Symbol","символ")}} властивості, яку потрібно перевірити.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>{{jsxref("Boolean","Булеве значення")}}, яке вказує, чи є задана властивість особистою властивістю об'єкта.</p> + +<h2 id="Опис">Опис</h2> + +<p>Всі нащадки {{jsxref("Object")}} успадковують метод <code>hasOwnProperty</code>. Цей метод можна використовувати, щоб визначити, чи є вказана властивість особистою властивістю об'єкта; на відмінну від оператора {{jsxref("Operators/in", "in")}}, цей метод не перевіряє властивість у ланцюзі прототипів об'єкта. Якщо {{jsxref("Object","об'єкт")}} є {{jsxref("Array","масивом")}}, то метод <code>hasOwnProperty</code> може перевірити, чи існує індекс у масиві.</p> + +<h2 id="Примітка">Примітка</h2> + +<p><code>hasOwnProperty</code> повертає <code>true</code>, навіть якщо значення властивості дорівнює <code>null</code> або <code>undefined</code>.</p> + +<pre class="brush: js">o = new Object(); +o.propOne = null; +o.hasOwnProperty('propOne'); // повертає true +o.propTwo = undefined; +o.hasOwnProperty('propTwo'); // повертає true +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_hasOwnProperty_для_перевірки_існування_властивості">Використання <code>hasOwnProperty</code> для перевірки існування властивості</h3> + +<p>Наступний приклад визначає, чи має об'єкт <code>o</code> властивість на ім'я <code>prop</code>:</p> + +<pre class="brush: js">o = new Object(); +o.hasOwnProperty('prop'); // повертає false +o.prop = 'exists'; +o.hasOwnProperty('prop'); // повертає true +</pre> + +<h3 id="Прямі_властивості_проти_успадкованих">Прямі властивості проти успадкованих</h3> + +<p>Наступний приклад демонструє різницю між прямими властивостями та успадкованими через ланцюг прототипів:</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; +o.hasOwnProperty('prop'); // повертає true +o.hasOwnProperty('toString'); // повертає false +o.hasOwnProperty('hasOwnProperty'); // повертає false +</pre> + +<h3 id="Перебір_властивостей_обєкта">Перебір властивостей об'єкта</h3> + +<p>Наступний приклад показує, як перебирати властивості об'єкта, не рухаючи успадковані властивості. Зауважте, що цикл {{jsxref("Statements/for...in", "for...in")}} перебирає лише перелічувані властивості, тому не слід вважати, виходячи з відсутності неперелічуваних властивостей, показаних у циклі, що <code>hasOwnProperty</code> сам обмежений суто перелічуваними елементами (як у випадку з {{jsxref("Object.getOwnPropertyNames()")}}).</p> + +<pre class="brush: js">var buz = { + fog: 'stack' +}; + +for (var name in buz) { + if (buz.hasOwnProperty(name)) { + console.log('це властивість (' + + name + '). Значення: ' + buz[name]); + } + else { + console.log(name); // toString або щось інше + } +} +</pre> + +<h3 id="Використання_hasOwnProperty_в_якості_назви_властивості">Використання <code>hasOwnProperty</code> в якості назви властивості</h3> + +<p>JavaScript не захищає ім'я властивості <code>hasOwnProperty</code>; як наслідок, якщо існує можливість, що об'єкт може мати властивість з цим ім'ям, то необхідно використовувати <em>зовнішній</em> метод <code>hasOwnProperty</code>, щоб отримати правильний результат:</p> + +<pre class="brush: js">var foo = { + hasOwnProperty: function() { + return false; + }, + bar: 'Небезпечна зона' +}; + +foo.hasOwnProperty('bar'); // завжди повертає false + +// Використаємо hasOwnProperty іншого об'єкта +// і викличемо його з 'this', рівним foo +({}).hasOwnProperty.call(foo, 'bar'); // true + +// Також можна використати властивість hasOwnProperty +// з прототипа Object для цієї мети +Object.prototype.hasOwnProperty.call(foo, 'bar'); // true +</pre> + +<p>Зауважте, що в останньому випадку не створюється нових об'єктів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_браузерів">Підтримка браузерів</h2> + + + +<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Посібник JavaScript: Наслідування та ланцюжок прототипів</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/index.html b/files/uk/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..6fdb6e8adb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,267 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>Клас <code><strong>Object</strong></code> відображає один з <a href="/uk/docs/Web/JavaScript/Data_structures">типів даних JavaScript</a>. Він використовується для збереження різноманітних колекцій, що використовують ключі, та більш складних сутностей. Об'єкти можуть бути створені за допомогою конструктора {{jsxref("Object/Object", "Object()")}} або <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктного ініціалізатора / літерального синтаксису</a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Майже усі об'єкти у JavaScript є екземплярами {{jsxref("Object")}}; типовий об'єкт успадковує властивості (в тому числі методи) від <code>Object.prototype</code>, хоча ці властивості можуть бути перекриті (перевизначені). Однак, можна навмисно створити <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Object</span></font>, для якого це буде не так (наприклад, за допомогою {{jsxref("Object.create", "Object.create(null)")}}), або змінити його таким чином (наприклад, через {{jsxref("Object.setPrototypeOf")}}).</p> + +<p>Зміни у прототипі <code>Object</code> видимі <strong>усім</strong> об'єктам через ланцюжок прототипів, якщо властивості та методи, яких стосуються ці зміни, не були перевизначені далі у ланцюжку прототипів. Це надає дуже потужний, хоча й потенційно небезпечний, механізм для перевизначення або розширення поведінки об'єкта.</p> + +<p><font face="Open Sans, Arial, sans-serif">Конструктор </font><code>Object</code> створює обгортку об'єкта для заданого значення.</p> + +<ul> + <li>Якщо значенням є {{jsxref("null")}} або {{jsxref("undefined")}}, конструктор створить та поверне порожній об'єкт.</li> + <li>В іншому випадку, він поверне об'єкт того типу, який відповідає наданому значенню.</li> + <li>Якщо значення вже є об'єктом, конструктор поверне це значення.</li> +</ul> + +<p>Під час виклику не у контексті конструктора, <code>Object</code> поводиться ідентично до <code>new Object()</code>.</p> + +<p>Дивіться також <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">Ініціалізатор об'єктів / літеральний синтаксис</a>.</p> + +<h3 id="Видалення_властивості_обєкта">Видалення властивості об'єкта</h3> + +<p>У самому об'єкті не існує методів для видалення своїх властивостей (таких, як {{jsxref("Map.prototype.delete", "Map.prototype.delete()")}}). Щоб зробити це, необхідно скористатись <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">оператором delete</a>.</p> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt>{{jsxref("Object/Object", "Object()")}}</dt> + <dd>Створює новий об'єкт <code>Object</code>. Це обгортка для наданого значення.</dd> +</dl> + +<h2 id="Статичні_методи">Статичні методи</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Копіює значення усіх перелічуваних особистих властивостей з одного або більше об'єктів у цільовий об'єкт.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Створює новий об'єкт із вказаним прототипним об'єктом і властивостями.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Додає зазначену властивість, описану наданим дескриптором, до об'єкта.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Додає зазначені властивості, описані наданими дескрипторами, до об'єкта.</dd> + <dt>{{jsxref("Object.entries()")}}</dt> + <dd>Повертає масив, що містить усі пари <code>[key, value]</code> <strong>особистих</strong> перелічуваних рядкових властивостей данного об'єкта.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Заморожує об'єкт: інший код не може видаляти або змінювати будь-які властивості.</dd> + <dt>{{jsxref("Object.fromEntries()")}}</dt> + <dd>Повертає новий об'єкт з ітерабельного об'єкта, що містить пари ключ-значення (зворотний до {{jsxref("Object.entries")}}).</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Повертає дескриптор властивості для зазначенної властивості об'єкта.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt> + <dd>Повертає об'єкт, що містить дескриптори всіх особистих властивостей об'єкта.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Повертає масив, що містить імена всіх <strong>особистих</strong> перелічуваних і неперелічуванних властивостей даного об'єкта.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Повертає масив усіх символьних властивостей, знайдених безпосередньо на даному об'єкті.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Повертає прототип вказаного об'єкта.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Перевіряє, чи мають два аргументи однакове значення. Прирівнює усі значення NaN (що відрізняється як від абстрактної рівності, так і від строгої рівності).</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Визначає, чи дозволене розширення об'єкта.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Визначає, чи є об'єкт замороженим.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Визначає, чи є об'єкт запечатанним.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Повертає масив, що містить імена всіх <strong>особистих</strong> перелічуваних рядкових властивостей даного об'єкта.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Запобігає будь-яким розширенням об'єкта.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Запобігає можливості іншого коду видаляти властивості об'єкта.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Встановлює прототип (тобто, внутрішню властивість <code>[[Prototype]]</code> об'єкта).</dd> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>Повертає масив, який містить значення, що відповідають усім <strong>особистим</strong> перелічуваним рядковим властивостям даного об'єкта.</dd> +</dl> + +<h2 id="Властивості_екземплярів">Властивості екземплярів </h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Визначає функцію, що створює прототип об'єкта.</dd> + <dt>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</dt> + <dd>Вказує на об'єкт, що був використаний як прототип, коли створювався екземпляр об'єкта.</dd> + <dt>{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}}</dt> + <dd>Дозволяє визначити функцію, яка буде виконуватись, коли на об'єкті викликатиметься неіснуючий елемент.</dd> +</dl> + +<h2 id="Методи_екземплярів">Методи екземплярів</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}}</dt> + <dd>Прив'язує функцію до властивості, яка, під час звернення до неї, викликатиме цю функцію та повертатиме значення, яке повернула функція.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}}</dt> + <dd>Прив'язує функцію до властивості, яка, під час присвоєння, виконує цю функцію, яка змінює властивість.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}}</dt> + <dd>Повертає функцію, прив'язану до вказаної властивості методом {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}}.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}}</dt> + <dd>Повертає функцію, прив'язану до вказаної властивості методом {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}}.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Повертає булеве значення, що вказує, чи об'єкт містить вказану властивість як особисту властивість цього об'єкта, а не успадковану через ланцюжок прототипів.</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Повертає булеве значення, що вказує, чи присутній об'єкт, на якому викликається цей метод, у ланцюжку прототипів вказаного об'єкта.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Повертає булеве значення, що вказує, чи встановлений внутрішній <a href="/uk/docs/Web/JavaScript/Data_structures#Properties">атрибут ECMAScript [[Enumerable]]</a>.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Викликає {{jsxref("Object.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Повертає рядок, що відображає об'єкт.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}}</dt> + <dd>Прибирає точку спостереження з властивості об'єкта.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Повертає просту величину вказаного об'єкта.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Додає точку спостереження до властивості об'єкта.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Object_з_типами_undefined_та_null">Використання <code>Object</code> з типами <code>undefined</code> та <code>null</code></h3> + +<p>Наступні приклади зберігають порожній об'єкт <code>Object</code> в <code>o</code>:</p> + +<pre class="brush: js notranslate">var o = new Object(); +</pre> + +<pre class="brush: js notranslate">var o = new Object(undefined); +</pre> + +<pre class="brush: js notranslate">var o = new Object(null); +</pre> + +<h3 id="Використання_Object_для_створення_обєктів_Boolean">Використання <code>Object</code> для створення об'єктів <code>Boolean</code></h3> + +<p>Наступні приклади зберігають об'єкти {{jsxref("Boolean")}} у <code>o</code>:</p> + +<pre class="brush: js notranslate">// еквівалентно до o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js notranslate">// еквівалентно до o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h3 id="Прототипи_обєктів">Прототипи об'єктів</h3> + +<p>Змінюючи поведінку існуючих методів <code>Object.prototype</code>, розгляньте включення коду додаванням вашого розширення до чи після існуючої логіки. Наприклад, цей (неперевірений) код буде попередньо виконувати власну логіку перед тим, як буде виконано вбудовану логіку або інше розширення.</p> + +<p>Коли викликається функція, аргументи виклику містяться у подібній до масиву "змінній" <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>. Наприклад, у виклику <code>myFn(a, b, c)</code>, arguments, що знаходиться у тілі <code>myFn</code>, міститиме 3 подібні до масиву елементи, що відповідають <code>(a, b, c)</code>.</p> + +<p>Модифікуючи прототипи з хуками, просто передайте <code>this</code> та arguments (стан виклику) до поточної поведінки, викликавши <code>apply()</code> на функції. Цей шаблон може використовуватись для будь-яких прототипів, наприклад, <code>Node.prototype</code>, <code>Function.prototype</code>, і т. д.</p> + +<pre class="brush: js notranslate">var current = Object.prototype.valueOf; + +// Оскільки моя властивість "-prop-value" є наскрізною та не завжди +// знаходиться в тому самому ланцюжку прототипів, я хочу змінити Object.prototype: +Object.prototype.valueOf = function() { + if (this.hasOwnProperty('-prop-value')) { + return this['-prop-value']; + } else { + // Це не схоже на один з моїх об'єктів, тому повернемось + // до початкової поведінки, відтворивши поточну поведінку якнайкраще. + // Метод apply поводиться як "super" у деяких інших мовах. + // І хоча valueOf() не приймає аргументів, можливо, інший хук їх прийматиме. + return current.apply(this, arguments); + } +}</pre> + +<p>Оскільки JavaScript, насправді, не має об'єктів підкласу, прототип є зручним обхідним рішенням для створення об'єкта у ролі "базового класу" з певними функціями, що діють як об'єкти. Наприклад:</p> + +<pre class="brush: js notranslate">var Person = function(name) { + this.name = name; + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Привіт, я ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this, name); + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Привіт, я ' + this.name + ', ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this, name); +}; + +Customer.prototype = Object.create(Person.prototype); + +var Mime = function(name) { + Person.call(this, name); + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); + +var bob = new Employee('Боб', 'будівельник'); +var joe = new Customer('Джо'); +var rg = new Employee('Ред Грін', 'майстер на всі руки'); +var mike = new Customer('Майк'); +var mime = new Mime('Мім'); + +bob.greet(); +// Привіт, я Боб, будівельник + +joe.greet(); +// Привіт, я Джо + +rg.greet(); +// Привіт, я Ред Грін, майстер на всі руки + +mike.greet(); +// Привіт, я Майк + +mime.greet();</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Object")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">Ініціалізатор об'єктів</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/is/index.html b/files/uk/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..58578ab5d3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,128 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Global_Objects/Object/is +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Рівність + - Тотожність + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +<div>{{JSRef}}</div> + +<div>Метод <code><strong>Object.is()</strong></code> з'ясовує, чи мають два аргументи <a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">однакове значення</a>.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.is(<var>value1</var>, <var>value2</var>);</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value1</code></dt> + <dd>Перше значення для порівняння.</dd> + <dt><code>value2</code></dt> + <dd>Друге значення для порівняння.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>{{jsxref("Boolean", "Булеве значення")}}, що вказує, чи мають вказані аргументи однакове значення.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Object.is()</code> визначає, чи мають вказані аргументи <a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">однакове</a> значення. Два значення вважаються однаковими за однієї з наступних умов:</p> + +<ul> + <li>обидва {{jsxref("undefined")}};</li> + <li>обидва {{jsxref("null")}};</li> + <li>обидва <code>true</code> або обидва <code>false</code>;</li> + <li>обидва є рядками однакової довжини з однаковими символами у однаковому порядку;</li> + <li>обидва є тим самим об'єктом (тобто, обидва мають те саме посилання);</li> + <li>обидва є числами та + <ul> + <li>обидва <code>+0</code>;</li> + <li>обидва <code>-0</code>;</li> + <li>обидва {{jsxref("NaN")}};</li> + <li>або обидва ненульові та не {{jsxref("NaN")}}, і мають однакові значення.</li> + </ul> + </li> +</ul> + +<p>Це <em>не</em> те саме, що й рівність відповідно до оператора {{jsxref("Operators/Оператори_порівняння", "==", "#Equality")}}. Оператор <code>==</code> здійснює приведення типів обох операндів (якщо вони належать до різних типів даних) перед перевіркою на рівність (в результаті такий вираз як <code>"" == false</code> має значення <code>true</code>), натомість, метод <code>Object.is</code> не перетворює жодне значення.</p> + +<p>Це також <em>не</em> те саме, що й рівність відповідно до оператора {{jsxref("Operators/Оператори_порівняння", "===", "#Identity")}}. Оператор <code>===</code> (так само, як оператор <code>==</code>) вважає рівними числові значення <code>-0</code> та <code>+0</code>, а значення {{jsxref("Number.NaN")}} не вважає рівним до {{jsxref("NaN")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">Object.is('foo', 'foo'); // true +Object.is(window, window); // true + +Object.is('foo', 'bar'); // false +Object.is([], []); // false + +var foo = { a: 1 }; +var bar = { a: 1 }; +Object.is(foo, foo); // true +Object.is(foo, bar); // false + +Object.is(null, null); // true + +// Особливі Випадки +Object.is(0, -0); // false +Object.is(-0, -0); // true +Object.is(NaN, 0/0); // true +</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<pre class="brush: js">if (!Object.is) { + Object.is = function(x, y) { + // Алгоритм SameValue + if (x === y) { // Steps 1-5, 7-10 + // Кроки 6.b-6.e: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // Крок 6.a: NaN == NaN + return x !== x && y !== y; + } + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Object.is")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">Перевірка на рівність та однаковість</a> — порівняння усіх трьох вбудованих мірил однаковості</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html b/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html new file mode 100644 index 0000000000..440aa85e1f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/isextensible/index.html @@ -0,0 +1,112 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +tags: + - ECMAScript5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Object.isExtensible()</code></strong> визначає, чи є об'єкт розширюваним (чи може він бути доповнений новими властивостями).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, який необхідно перевірити.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("Boolean","Булеве значення")}}, що вказує, чи є об'єкт розширюваним.</p> + +<h2 id="Опис">Опис</h2> + +<p>За замовчуванням об'єкти є розширюваними: нові властивості можуть додаватися до них, і (у рушіях, що підтримують {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}) їхня властивість __proto__ може бути змінена. Об'єкт можна зробити нерозширюваним за допомогою {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} або {{jsxref("Object.freeze()")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// Нові об'єкти є розширюваними. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...але це можна змінити. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Запечатані об'єкти є за визначенням нерозширюваними. +var sealed = Object.seal({}); +Object.isExtensible(sealed); // === false + +// Заморожені об'єкти також за визначенням є нерозширюваними. +var frozen = Object.freeze({}); +Object.isExtensible(frozen); // === false +</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5, якщо аргументом даного методу виступає не об'єкт (примітивне значення), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 ж, якщо аргументом методу буде не об'єкт, він буде сприйнятий як звичайний нерозширюваний об'єкт, тобто, вихідним значенням буде <code>false</code>.</p> + +<pre class="brush: js">Object.isExtensible(1); +// TypeError: 1 is not an object (код ES5) + +Object.isExtensible(1); +// false (код ES2015) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.isExtensible")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..b693befb9a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,178 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +tags: + - ECMAScript 5 + - JavaScript + - Об'єкт + - метод + - розширюваний +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.isFrozen()</strong></code> визначає, чи є об'єкт {{jsxref("Object.freeze()", "замороженим", "", 1)}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт для перевірки.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>{{jsxref("Boolean", "Булеве значення")}}, що вказує, чи є наданий об'єкт замороженим.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт є замороженим тільки тоді, коли він не є {{jsxref("Object.isExtensible()", "розширюваним", "", 1)}}, всі його властивості недоступні для налаштування, і всі його властивості-значення (тобто, властивості, які не є властивостями-аксесорами, що мають гетер або сетер) недоступні для запису.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// Новий об'єкт є розширюваним, отже, він не заморожений +Object.isFrozen({}); // === false + +// Пустий об'єкт, котрий є нерозширюваним, +// є порожньо замороженим. +var vacuouslyFrozen = Object.preventExtensions({}); +Object.isFrozen(vacuouslyFrozen); // === true + +// Новий об'єкт з однією властивістю є також розширюваним, +// отже, не заморожений. +var oneProp = { p: 42 }; +Object.isFrozen(oneProp); // === false + +// Припинення розширювання об'єкту не робить його замороженим, +// тому що властивість досі доступна +// для налаштування (та запису). +Object.preventExtensions(oneProp); +Object.isFrozen(oneProp); // === false + +// ...але видалення цієї властивості робить об'єкт +// порожньо замороженим. +delete oneProp.p; +Object.isFrozen(oneProp); // === true + +// Нерозширюваний об'єкт з властивістю, недоступною для запису, +// але доступною для налаштування, не є замороженим. +var nonWritable = { e: 'plep' }; +Object.preventExtensions(nonWritable); +Object.defineProperty(nonWritable, 'e', { + writable: false +}); // зробити властивість недоступною для запису +Object.isFrozen(nonWritable); // === false + +// Якщо зробити цю властивість недоступною для налаштування, +// тоді об'єкт буде замороженим. +Object.defineProperty(nonWritable, 'e', { + configurable: false +}); // зробити властивість недоступною для налаштування +Object.isFrozen(nonWritable); // === true + +// Нерозширюваний об'єкт з властивістю, недоступною +// для налаштування, але доступною для запису, також не є замороженим. +var nonConfigurable = { release: 'the kraken!' }; +Object.preventExtensions(nonConfigurable); +Object.defineProperty(nonConfigurable, 'release', { + configurable: false +}); +Object.isFrozen(nonConfigurable); // === false + +// Якщо зробити цю властивість недоступною для запису, +// тоді об'єкт буде заморожений. +Object.defineProperty(nonConfigurable, 'release', { + writable: false +}); +Object.isFrozen(nonConfigurable); // === true + +// Нерозширюваний об'єкт з властивістю-аксесором, +// доступною для налаштування, не є замороженим. +var accessor = { get food() { return 'ням'; } }; +Object.preventExtensions(accessor); +Object.isFrozen(accessor); // === false + +// ...але якщо зробити цю властивість недоступною для налаштування, +// тоді об'єкт буде замороженим. +Object.defineProperty(accessor, 'food', { + configurable: false +}); +Object.isFrozen(accessor); // === true + +// Але найпростіший спосіб зробити об'єкт замороженим - +// це викликати на ньому метод Object.freeze. +var frozen = { 1: 81 }; +Object.isFrozen(frozen); // === false +Object.freeze(frozen); +Object.isFrozen(frozen); // === true + +// За визначенням, заморожений об'єкт є нерозширюваним. +Object.isExtensible(frozen); // === false + +// Також, за визначенням, заморожений об'єкт є запечатаним. +Object.isSealed(frozen); // === true +</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5, якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний заморожений об'єкт, метод просто поверне <code>true</code>.</p> + +<pre class="brush: js">Object.isFrozen(1); +// TypeError: 1 is not an object (код ES5) + +Object.isFrozen(1); +// true (код ES2015) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html new file mode 100644 index 0000000000..b5472b105d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -0,0 +1,125 @@ +--- +title: Object.prototype.isPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +tags: + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>isPrototypeOf()</strong></code> перевіряє, чи існує об'єкт у ланцюжку прототипів іншого об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}</div> + + + +<div class="note"> +<p><code>isPrototypeOf()</code> відрізняється від оператора {{jsxref("Operators/instanceof", "instanceof")}}.У виразі "<code>object instanceof AFunction</code>" ланцюжок прототипів об'єкта <code>object</code> перевіряється на <code>AFunction.prototype</code>, а не на сам об'єкт <code>AFunction</code>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>prototypeObj</var>.isPrototypeOf(<var>object</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Об'єкт, чий ланцюжок прототипів перевірятиметься.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("Boolean","Булеве значення")}}, що зазначає, чи присутній об'єкт, що викликав метод, у ланцюжку прототипів вказаного об'єкта.</p> + +<h3 id="Помилки_що_викидаються">Помилки, що викидаються</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Помилка {{jsxref("TypeError")}} викидається, якщо <code><var>prototypeObj</var></code> дорівнює undefined або null.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>isPrototypeOf()</code> дозволяє перевірити, чи існує об'єкт у ланцюжку прототипів іншого об'єкта.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Цей приклад демонструє, що <code>Baz.prototype</code>, <code>Bar.prototype</code>, <code>Foo.prototype</code> та <code>Object.prototype</code> присутні у ланцюжку прототипів об'єкта <code>baz</code>:</p> + +<pre class="brush: js">function Foo() {} +function Bar() {} +function Baz() {} + +Bar.prototype = Object.create(Foo.prototype); +Baz.prototype = Object.create(Bar.prototype); + +var baz = new Baz(); + +console.log(Baz.prototype.isPrototypeOf(baz)); // true +console.log(Bar.prototype.isPrototypeOf(baz)); // true +console.log(Foo.prototype.isPrototypeOf(baz)); // true +console.log(Object.prototype.isPrototypeOf(baz)); // true +</pre> + +<p>Метод <code>isPrototypeOf()</code>, разом з оператором {{jsxref("Operators/instanceof", "instanceof")}} можуть стати в нагоді, коли ви маєте код, який працює тільки з об'єктами, похідними від певного ланцюга прототипів, наприклад, щоб гарантувати, що певні методи або властивості будуть присутні на цьому об'єкті.</p> + +<p>Наприклад, перевіримо, чи походить об'єкт <code>baz</code> від <code>Foo.prototype</code>:</p> + +<pre class="brush: js">if (Foo.prototype.isPrototypeOf(baz)) { + // виконати безпечні дії +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.6', 'Object.prototype.isPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.isprototypeof', 'Object.prototype.isPrototypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.isprototypeof', 'Object.prototype.isPrototypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li> + <div>{{jsxref("Object.setPrototypeOf()")}}</div> + </li> + <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} </li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/issealed/index.html b/files/uk/web/javascript/reference/global_objects/object/issealed/index.html new file mode 100644 index 0000000000..5bb61b22c6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/issealed/index.html @@ -0,0 +1,139 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed +tags: + - ECMAScript 5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.isSealed()</strong></code> визначає, чи є об'єкт запечатаним.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, який треба перевірити.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("Boolean","Булеве значення")}}, що вказує, чи є об'єкт запечатаним.</p> + +<h2 id="Опис">Опис</h2> + +<p>Повертає <code>true</code>, якщо об'єкт запечатаний, інакше повертає <code>false</code>. Об'єкт вважається запечатаним, якщо він {{jsxref("Object.isExtensible", "нерозширюваний", "", 1)}} та якщо всі його властивості недоступні для налаштування і, відповідно, недоступні для видалення (але не обов'язково недоступні для запису).</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// За замовчуванням об'єкти не запечатані. +var empty = {}; +Object.isSealed(empty); // === false + +// Якщо зробити порожній об'єкт нерозширюваним, +// він стає порожньо запечатаним. +Object.preventExtensions(empty); +Object.isSealed(empty); // === true + +// Те саме стосується непорожнього об'єкта, +// хіба що усі його властивості недоступні для налаштування. +var hasProp = { fee: 'Крибле крабле бум' }; +Object.preventExtensions(hasProp); +Object.isSealed(hasProp); // === false + +// Але зробимо їх усі недоступними для налаштування, +// і об'єкт стає запечатаним. +Object.defineProperty(hasProp, 'fee', { + configurable: false +}); +Object.isSealed(hasProp); // === true + +// Звісно, найпростіший спосіб запечатати об'єкт - +// це Object.seal. +var sealed = {}; +Object.seal(sealed); +Object.isSealed(sealed); // === true + +// Запечатаний об'єкт, за визначенням, нерозширюваний. +Object.isExtensible(sealed); // === false + +// Запечатаний об'єкт може бути замороженим, +// але це не обов'язково. +Object.isFrozen(sealed); // === true +// (усі властивості також недоступні для запису) + +var s2 = Object.seal({ p: 3 }); +Object.isFrozen(s2); // === false +// ('p' досі доступна для запису) + +var s3 = Object.seal({ get p() { return 0; } }); +Object.isFrozen(s3); // === true +// (для аксесорів має значення тільки доступність для налаштування) +</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5 якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний запечатаний об'єкт, метод просто поверне <code>true</code>.</p> + +<pre class="brush: js">Object.isSealed(1); +// TypeError: 1 is not an object (код ES5) + +Object.isSealed(1); +// true (код ES2015) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.isSealed")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/keys/index.html b/files/uk/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..796209d575 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,171 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +tags: + - ECMAScript5 + - JavaScript + - Method + - Object + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.keys()</strong></code> повертає масив <strong>імен</strong> особистих перелічуваних властивостей переданого об'єкта в тому самому порядку, що його повертає звичайний цикл.</p> + +<p>{{EmbedInteractiveExample("pages/js/object-keys.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, перелік властивостей якого треба отримати.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Масив рядків, що передають імена всіх перелічуваних властивостей переданого об'єкта.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Object.keys()</code> повертає масив рядків, що передають імена перелічуваних властивостей, які належать безпосередньо об'єктові <code>obj</code>. Порядок отриманих властивостей збігається із тим, що його забезпечує перебір властивостей вручну за допомогою циклу.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// простий масив +var arr = ['а', 'б', 'в']; +console.log(Object.keys(arr)); // виводить ['0', '1', '2'] + +// масив як об'єкт +var obj = { 0: 'а', 1: 'б', 2: 'в' }; +console.log(Object.keys(obj)); // виводить ['0', '1', '2'] + +// масив як об'єкт з випадковим порядком ключів +var anObj = { 100: 'а', 2: 'б', 7: 'в' }; +console.log(Object.keys(anObj)); // виводить ['2', '7', '100'] + +// getFoo є неперелічуваною властивістю +var myObj = Object.create({}, { + getFoo: { + value: function () { return this.foo; } + } +}); +myObj.foo = 1; +console.log(Object.keys(myObj)); // виводить ['foo']</pre> + +<p>Якщо вам потрібні усі властивості, навіть неперелічувані, зверніть увагу на <code>{{jsxref("Object.getOwnPropertyNames()")}}</code>.</p> + +<h2 id="Зауваги">Зауваги</h2> + +<p>У ES5 метод викидає {{jsxref("Global_Objects/TypeError", "TypeError")}}, якщо арґумент не є об'єктом (а натомість є {{glossary("Primitive", "простою величиною")}}). Водночас у ES2015 арґумент, що належить до простого типу даних, буде перетворено на об'єкт.</p> + +<pre class="brush: js">Object.keys('foo'); +// TypeError: "foo" is not an object (код ES5) + +Object.keys('foo'); +// ["0", "1", "2"] (код ES2015) +</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Для старіших середовищ, де метод <code>Object.keys()</code> відсутній, можна забезпечити запасний варіант, скориставшись таким кодом:</p> + +<pre class="brush: js">// З https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +if (!Object.keys) { + Object.keys = (function() { + 'use strict'; + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ], + dontEnumsLength = dontEnums.length; + + return function(obj) { + if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + var result = [], prop, i; + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + return result; + }; + }()); +} +</pre> + +<p>Зауважте, що наведений код у IE7 (а також, можливо, у IE8) повертає також неперелічувані властивості для об'єктів, що їх отримано з іншого вікна.</p> + +<p>Простий запасний варіант для переглядача можна знайти в статті <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Object.keys")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html b/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html new file mode 100644 index 0000000000..fbd98cf2e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html @@ -0,0 +1,166 @@ +--- +title: Object.prototype.__noSuchMethod__ +slug: Web/JavaScript/Reference/Global_Objects/Object/noSuchMethod +tags: + - JavaScript + - Object + - Властивість + - застаріла + - нестандартна +translation_of: Archive/Web/JavaScript/Object.noSuchMethod +--- +<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko43")}}</div> + +<p>Властивість <strong><code>__noSuchMethod__</code></strong> використовувалась для посилання на функцію, що мала виконатися, коли на об'єкті викликався неіснуючий метод, але ця функція більше не доступна.</p> + +<p>В той час як метод <code><strong>__noSuchMethod__</strong></code> був прибраний, специфікація ECMAScript 2015 містить об'єкт {{JSxRef("Proxy")}}, який допоможе досягти описаного нижче (і навіть більше).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>obj</var>.__noSuchMethod__ = <var>fun</var></code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>fun</code></dt> + <dd>Функція, що має вигляд</dd> + <dd> + <pre class="brush: js"><code>function (<var>id</var>, <var>args</var>) { . . . }</code></pre> + + <dl> + <dt><code>id</code></dt> + <dd>Ім'я неіснуючого методу, що був викликаний</dd> + <dt><code>args</code></dt> + <dd>Масив аргументів, переданих у метод</dd> + </dl> + </dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>За замовчуванням спроба викликати метод, який не існує, на об'єкті призводить до викидання {{JSxRef("TypeError")}}. Цю поведінку можна обійти, визначивши функцію у властивості об'єкта <code>__noSuchMethod__</code>. Функція приймає два аргумента, перший - це ім'я метода, що викликається, другий - це масив аргументів, які передаються під час виклику. Другий аргумент є справжнім масивом (тобто, він успадковується через ланцюг {{JSxRef("Array.prototype")}}), а не подібним до масиву <a href="/uk/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments" title="JavaScript/Reference/Functions/arguments">об'єктом arguments</a>.</p> + +<p>Якщо цей метод не можна викликати, чи тому що він дорівнює <code>undefined</code>, чи був видалений, чи йому вручну було присвоєне нефункціональне значення, рушій JavaScript повернеться до викидання <code>TypeError</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Проста_перевірка___noSuchMethod__">Проста перевірка <code>__noSuchMethod__</code></h3> + +<pre class="brush: js">var o = { + __noSuchMethod__: function(id, args) { + console.log(id, '(' + args.join(', ') + ')'); + } +}; + +o.foo(1, 2, 3); +o.bar(4, 5); +o.baz(); + +// Виведе +// foo (1, 2, 3) +// bar (4, 5) +// baz () +</pre> + +<h3 id="Використання___noSuchMethod___для_імітації_множинного_спадкування">Використання <code>__noSuchMethod__</code> для імітації множинного спадкування</h3> + +<p>Приклад коду, що реалізує примітивну форму множинного спадкування, наведений нижче.</p> + +<pre class="brush: js">// Не працює, якщо батьківські об'єкти є результатом множинного спадкування +function noMethod(name, args) { + var parents = this.__parents_; + + // Пройти через усі батьківські об'єкти + for (var i = 0; i < parents.length; i++) { + // Якщо знаходимо функцію у батьківського об'єкта, викликаємо її + if (typeof parents[i][name] == 'function') { + return parents[i][name].apply(this, args); + } + } + + // Якщо ми дістались сюди, метод не був знайдений + throw new TypeError; +} + +// Додавало батьківський об'єкт для множинного спадкування +function addParent(obj, parent) { + // Якщо об'єкт неініціалізований, ініціалізуємо його + if (!obj.__parents_) { + obj.__parents_ = []; + obj.__noSuchMethod__ = noMethod; + } + + // Додати батьківський об'єкт + obj.__parents_.push(parent); +} +</pre> + +<p>Приклад використання цієї ідеї наведений нижче.</p> + +<pre class="brush: js">// Базовий клас 1 +function NamedThing(name) { + this.name = name; +} + +NamedThing.prototype = { + getName: function() { return this.name; }, + setName: function(newName) { this.name = newName; } +} + +// Базовий клас 2 +function AgedThing(age) { + this.age = age; +} + +AgedThing.prototype = { + getAge: function() { return this.age; }, + setAge: function(age) { this.age = age; } +} + +// Дочірній клас. Наслідується від NamedThing та AgedThing, +// а також визначає адресу +function Person(name, age, address){ + addParent(this, NamedThing.prototype); + NamedThing.call(this, name); + addParent(this, AgedThing.prototype); + AgedThing.call(this, age); + this.address = address; +} + +Person.prototype = { + getAddr: function() { return this.address; }, + setAddr: function(addr) { this.address = addr; } +} + +var bob = new Person('Боб', 25, 'Нью-Йорк'); + +console.log('getAge ' + (('getAge' in bob) ? 'належить' : 'не належить') + ' Бобу'); +// getAge не належить Бобу + +console.log("Вік Боба: " + bob.getAge()); +// Вік Боба: 25 + +console.log('getName ' + (('getName' in bob) ? 'належить' : 'не належить') + ' Бобу'); +// getName не належить Бобу + +console.log("Ім'я Боба: " + bob.getName()); +// Ім'я Боба: Боб + +console.log('getAddr ' + (('getAddr' in bob) ? 'належить' : 'не належить') + ' Бобу'); +// getAddr належить Бобу + +console.log("Адреса Боба: " + bob.getAddr()); +// Адреса Боба: Нью-Йорк +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Ця функціональність була прибрана, дивіться {{bug(683218)}}.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.noSuchMethod")}}</p> +</div> diff --git a/files/uk/web/javascript/reference/global_objects/object/object/index.html b/files/uk/web/javascript/reference/global_objects/object/object/index.html new file mode 100644 index 0000000000..223a18bbb8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/object/index.html @@ -0,0 +1,84 @@ +--- +title: Конструктор Object() +slug: Web/JavaScript/Reference/Global_Objects/Object/Object +tags: + - JavaScript + - Довідка + - Конструктор + - Об'єкт +translation_of: Web/JavaScript/Reference/Global_Objects/Object/Object +--- +<div>{{JSRef}}</div> + +<p><strong>Конструктор</strong> <strong><code>Object</code></strong> створює об'єктну обгортку для наданого значення.</p> + +<ul> + <li>Якщо значенням є {{jsxref("null")}} або {{jsxref("undefined")}}, це створить та поверне порожній об'єкт.</li> + <li>Інакше, буде повернений об'єкт того типу, який відповідає наданому значенню.</li> + <li>Якщо значення вже є об'єктом, буде повернене це значення.</li> +</ul> + +<p>Викликаний не у контексті конструктора, <code>Object</code> поводиться ідентично до <code>new Object()</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">new Object() +new Object(<var>value</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Будь-яке значення.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_нового_обєкта">Створення нового об'єкта</h3> + +<pre class="brush: js notranslate">let o = new Object() +o.foo = 42 + +console.log(o) +// Object { foo: 42 }</pre> + +<h3 id="Використання_Object_з_типами_undefined_та_null">Використання <code>Object</code> з типами <code>undefined</code> та <code>null</code></h3> + +<p>Наступні приклади зберігають порожній об'єкт <code>Object</code> у <code>o</code>:</p> + +<pre class="brush: js notranslate">let o = new Object() +</pre> + +<pre class="brush: js notranslate">let o = new Object(undefined) +</pre> + +<pre class="brush: js notranslate">let o = new Object(null)</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-constructor', 'Object constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.Object.Object")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">Ініціалізатор об'єкта</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/observe/index.html b/files/uk/web/javascript/reference/global_objects/object/observe/index.html new file mode 100644 index 0000000000..ec4d1ca5e8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/observe/index.html @@ -0,0 +1,153 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Global_Objects/Object/observe +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>Object.observe()</code></strong> використовувався для асинхронного спостереження за змінами у об'єкті. Він надавав послідовність змін у порядку виникнення. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете, натомість, скористатись більш загальним об'єктом {{jsxref("Proxy")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт для спостереження.</dd> + <dt><code>callback</code></dt> + <dd>Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом: + <dl> + <dt><code>changes</code></dt> + <dd>Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін: + <ul> + <li><strong><code>name</code></strong>: Ім'я властивості, яка була змінена.</li> + <li><strong><code>object</code></strong>: Змінений об'єкт після того, як відбулася зміна.</li> + <li><strong><code>type</code></strong>: Строка, що вказує тип зміни. Один з <code>"add"</code>, <code>"update"</code> або <code>"delete"</code>.</li> + <li><strong><code>oldValue</code></strong>: Тільки для типів <code>"update"</code> та <code>"delete"</code>. Значення перед зміною.</li> + </ul> + </dd> + </dl> + </dd> + <dt><code>acceptList</code></dt> + <dd>Список типів змін для спостереження на наданому об'єкті для наданої функції <code>callback</code>. Якщо не заданий, буде використаний масив <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт для спостереження.</p> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>callback</code> викликається кожен раз, коли у <code>obj</code> відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Логування_усіх_шістьох_типів">Логування усіх шістьох типів</h3> + +<pre class="brush: js">var obj = { + foo: 0, + bar: 1 +}; + +Object.observe(obj, function(changes) { + console.log(changes); +}); + +obj.baz = 2; +// [{name: 'baz', object: <obj>, type: 'add'}] + +obj.foo = 'привіт'; +// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}] + +delete obj.baz; +// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}] + +Object.defineProperty(obj, 'foo', {writable: false}); +// [{name: 'foo', object: <obj>, type: 'reconfigure'}] + +Object.setPrototypeOf(obj, {}); +// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}] + +Object.seal(obj); +// [ +// {name: 'foo', object: <obj>, type: 'reconfigure'}, +// {name: 'bar', object: <obj>, type: 'reconfigure'}, +// {object: <obj>, type: 'preventExtensions'} +// ] +</pre> + +<h3 id="Звязування_даних">Зв'язування даних</h3> + +<pre class="brush: js">// Модель користувача +var user = { + id: 0, + name: 'Брендан Айк', + title: 'п.' +}; + +// Створити привітання для користувача +function updateGreeting() { + user.greeting = 'Вітаю, ' + user.title + ' ' + user.name + '!'; +} +updateGreeting(); + +Object.observe(user, function(changes) { + changes.forEach(function(change) { + // Кожен раз, коли змінюється ім'я чи титул, оновити привітання + if (change.name === 'name' || change.name === 'title') { + updateGreeting(); + } + }); +}); +</pre> + +<h3 id="Користувацький_тип_зміни">Користувацький тип зміни</h3> + +<pre class="brush: js">// Точка на 2-вимірній площині +var point = {x: 0, y: 0, distance: 0}; + +function setPosition(pt, x, y) { + // Виконуємо користувацьку зміну + Object.getNotifier(pt).performChange('reposition', function() { + var oldDistance = pt.distance; + pt.x = x; + pt.y = y; + pt.distance = Math.sqrt(x * x + y * y); + return {oldDistance: oldDistance}; + }); +} + +Object.observe(point, function(changes) { + console.log('Зміна відстані: ' + (point.distance - changes[0].oldDistance)); +}, ['reposition']); + +setPosition(point, 3, 4); +// Зміна відстані: 5 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.observe")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> + <li><a href="https://esdiscuss.org/topic/an-update-on-object-observe">Прибирання Object.Observer</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/parent/index.html b/files/uk/web/javascript/reference/global_objects/object/parent/index.html new file mode 100644 index 0000000000..03a5568469 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/parent/index.html @@ -0,0 +1,41 @@ +--- +title: Object.prototype.__parent__ +slug: Web/JavaScript/Reference/Global_Objects/Object/Parent +tags: + - JavaScript + - Object + - Властивість + - застаріла + - нестандартна +translation_of: Archive/Web/JavaScript/Object.parent +--- +<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko2")}}</div> + +<p>Властивість <strong><code>__parent__</code></strong> вказувала на контекст об'єкта, але була прибрана.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>.__parent__</pre> + +<h2 id="Опис">Опис</h2> + +<p>Для об'єктів верхнього рівня це, наприклад, window.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.parent")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a></li> + <li><a href="/uk/docs/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..3fe25fb9b0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,139 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +tags: + - ECMAScript5 + - JavaScript + - Object + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.preventExtensions()</strong></code> метод позбавляє можливості додавати нові властивості до об'єкта (тобто, розширювати об'єкт у подальшому).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.preventExtensions(<var>obj</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, котрий має стати нерозширюваним.</dd> +</dl> + +<h3 id="Вихідне_значення">Вихідне значення</h3> + +<p>Об'єкт, що робиться нерозширюваним.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт вважається розширюваним, якщо до нього можуть бути додані нові властивості. <code>Object.preventExtensions()</code> робить об'єкт нерозширюваним, тобто таким, який уже ніколи не зможе містити інших властивостей, окрім тих, котрі він мав на момент застосування до нього даного методу. Зверніть увагу на те, що властивості нерозширюваного об'єкта все ж можна <em>видаляти</em>. Спроба ж додати нові властивості до нерозширюваного об'єкта не увінчається успіхом: або властивості просто не будуть додані без жодних помилок, або ж згенерується помилка типу {{jsxref("TypeError")}} (найчастіше, але не виключно, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}}).</p> + +<p><code>Object.preventExtensions()</code> має вплив лише на додавання особистих властивостей об'єкта. Властивості можуть бути додані до прототипу об'єкта.<br> + <br> + Цей метод робить <code>[[prototype]]</code> цільового об'єкта незмінним; будь-яке перевизначення <code>[[prototype]]</code> спричинить помилку <code>TypeError</code>. Ця поведінка є специфічною для внутрішньої властивості <code>[[prototype]]</code>, інші властивості цільового об'єкта залишаються змінними.</p> + +<p>Як тільки об'єкт стає нерозширюваним, неможливо зробити його знову розширюваним.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// Object.preventExtensions повертає об'єкт, +// який робиться нерозширюваним. +var obj = {}; +var obj2 = Object.preventExtensions(obj); +obj === obj2; // true + +// За замовчуванням усі об'єкти є розширюваними. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...але це можна змінити. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Object.defineProperty викине помилку, якщо спробувати додати +// нову вдастивість до нерозширюваного об'єкта. +var nonExtensible = { removable: true }; +Object.preventExtensions(nonExtensible); +Object.defineProperty(nonExtensible, 'new', { + value: 8675309 +}); // викине TypeError + +// У строгому режимі спроба додати нові властивості +// до нерозширюваного об'єкта спричиняє помилку TypeError. +function fail() { + 'use strict'; + // викида TypeError + nonExtensible.newProperty = 'FAIL'; +} +fail(); +</pre> + +<p>Прототип нерозширюваного об'єкта є незмінним:</p> + +<pre class="brush: js">var fixed = Object.preventExtensions({}); +// викине 'TypeError'. +fixed.__proto__ = { oh: 'hai' };</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5, якщо аргументом даного методу виступає не об'єкт (примітив), це спричинить помилку {{jsxref("TypeError")}}. У ES2015 ж, якщо аргументом методу буде не об'єкт, він буде сприйнятий як звичайний нерозширюваний об'єкт, і буде просто повернений.</p> + +<pre class="brush: js">Object.preventExtensions(1); +// TypeError: 1 is not an object (код ES5) + +Object.preventExtensions(1); +// 1 (код ES2015) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.preventExtensions")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..b7eafe88f0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html @@ -0,0 +1,149 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +tags: + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>propertyIsEnumerable()</strong></code> повертає булеве значення, що позначає, чи є вказана властивість перелічуваною.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Ім'я властивості, яку необхідно перевірити.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("Boolean","Булеве значення")}}, що позначає, чи є вказана властивість перелічуваною.</p> + +<h2 id="Опис">Опис</h2> + +<p>Кожен об'єкт має метод <code>propertyIsEnumerable</code>. Цей метод може визначити, чи може вказана властивість об'єкта бути перелічена циклом {{jsxref("Statements/for...in", "for...in")}}, за винятком властивостей, успадкованих через ланцюжок прототипів. Якщо об'єкт не має вказаної властивості, метод поверне <code>false</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базове_використання_propertyIsEnumerable">Базове використання <code>propertyIsEnumerable</code></h3> + +<p>Наступний приклад демонструє використання <code>propertyIsEnumerable</code> на об'єктах та масивах:</p> + +<pre class="brush: js">var o = {}; +var a = []; +o.prop = 'перелічувана'; +a[0] = 'перелічувана'; + +o.propertyIsEnumerable('prop'); // повертає true +a.propertyIsEnumerable(0); // повертає true +</pre> + +<h3 id="Визначені_користувачем_обєкти_проти_вбудованих_обєктів">Визначені користувачем об'єкти проти вбудованих об'єктів</h3> + +<p>Наступний приклад демонструє перелічуваність визначених користувачем властивостей у порівнянні з вбудованими:</p> + +<pre class="brush: js">var a = ['перелічувана']; + +a.propertyIsEnumerable(0); // повертає true +a.propertyIsEnumerable('length'); // повертає false + +Math.propertyIsEnumerable('random'); // повертає false +this.propertyIsEnumerable('Math'); // повертає false +</pre> + +<h3 id="Прямі_властивості_проти_успадкованих">Прямі властивості проти успадкованих</h3> + +<pre class="brush: js">var a = []; +a.propertyIsEnumerable('constructor'); // повертає false + +function firstConstructor() { + this.property = 'не перелічувана'; +} + +firstConstructor.prototype.firstMethod = function() {}; + +function secondConstructor() { + this.method = function method() { return 'перелічувана'; }; +} + +secondConstructor.prototype = new firstConstructor; +secondConstructor.prototype.constructor = secondConstructor; + +var o = new secondConstructor(); +o.arbitraryProperty = 'перелічувана'; + +o.propertyIsEnumerable('arbitraryProperty'); // повертає true +o.propertyIsEnumerable('method'); // повертає true +o.propertyIsEnumerable('property'); // повертає false + +o.property = 'перелічувана'; + +o.propertyIsEnumerable('property'); // повертає true + +// Наступні повертають false, оскільки вони присутні на прототипі, який +// propertyIsEnumerable не враховує (хоча останні дві +// перебираються циклом for-in) +o.propertyIsEnumerable('prototype'); // повертає false (згідно з JS 1.8.1/FF3.6) +o.propertyIsEnumerable('constructor'); // повертає false +o.propertyIsEnumerable('firstMethod'); // повертає false +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/proto/index.html b/files/uk/web/javascript/reference/global_objects/object/proto/index.html new file mode 100644 index 0000000000..969759158b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/proto/index.html @@ -0,0 +1,127 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Reference/Global_Objects/Object/proto +tags: + - ECMAScript 2015 + - JavaScript + - Object + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +<div>{{JSRef}}{{Deprecated_header}} +<div class="blockIndicator warning"> +<p><strong>Застереження:</strong> Зміна властивості об'єкта <code>[[Prototype]]</code>, за природою того, як сучасні рушії JavaScript оптимізують доступ до властивостей, є дуже повільною операцією в <strong><em>кожному</em></strong> переглядачі та рушії JavaScript. Ефект для продуктивності від зміни спадкування є витонченим та обширним, і не обмежується лише часом, витраченим на команду <code>obj.__proto__ = ...</code>, але може поширюватися на <strong><em>будь-який</em></strong> код, що має доступ до <strong><em>будь-якого</em></strong> об'єкта, чия властивість <code>[[Prototype]]</code> була змінена. Якщо ви дбаєте про продуктивність, вам варто уникати присвоювати <code>[[Prototype]]</code> об'єкта. Замість цього створіть новий об'єкт з бажаною властивістю <code>[[Prototype]]</code>, використовуючи {{JSxRef("Object.create()")}}.</p> +</div> + +<div class="blockIndicator warning"> +<p><strong>Застереження: </strong>В той час, як властивість <code>Object.prototype.__proto__</code> підтримується більшістю нинішніх переглядачів, її існування та точна поведінка були стандартизовані у специфікації ECMAScript 2015 тільки в якості legacy-функціональності для сумісності з веб-переглядачами. Для кращої підтримки рекомендовано натомість використовувати {{JSxRef("Object.getPrototypeOf()")}}.</p> +</div> +</div> + +<p>Властивість {{JSxRef("Object.prototype")}} <code>__proto__</code> - це властивість-аксесор (функція-гетер та функція-сетер), яка відкриває внутрішню властивість <code>[[Prototype]]</code> (або об'єкт, або {{JSxRef("Global_Objects/null", "null")}}) об'єкта, через який до неї звертаються.</p> + +<p>Використання <code>__proto__</code> є суперечливим і не заохочується. Ця властивість ніколи не включалась у специфікації мови EcmaScript, але сучасні переглядачі вирішили все одно її реалізувати. Тільки останнім часом властивість <code>__proto__</code> була стандартизована у специфікації мови ECMAScript 2015 для сумісності веб-переглядачів, і буде підтримуватись у майбутньому. Її використання не рекомендоване на користь {{JSxRef("Object.getPrototypeOf")}}/{{JSxRef("Reflect.getPrototypeOf")}} та {{JSxRef("Object.setPrototypeOf")}}/{{JSxRef("Reflect.setPrototypeOf")}} (хоча, все одно, присвоєння <code>[[Prototype]]</code> об'єкта є повільною операцією, якої бажано уникати, якщо швидкодія має значення).</p> + +<p>Властивість <code>__proto__</code> також може бути використана при визначенні об'єктного літералу, щоб встановити властивість об'єкта <code>[[Prototype]]</code> при створенні, як альтернатива {{JSxRef("Object.create()")}}. Дивіться: <a href="/uk/docs/Web/JavaScript/Reference/Operators/Object_initializer">Ініціалізація об'єктів / синтаксис літералів</a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Функція-гетер <code>__proto__</code> відкриває значення внутрішньої властивості об'єкта <code>[[Prototype]]</code>. Для об'єктів, що були створені об'єктним літералом, ця величина дорівнює {{JSxRef("Object.prototype")}}. Для об'єктів, створених літералами масивів, це значення дорівнює {{JSxRef("Array.prototype")}}. Для функцій воно дорівнює {{JSxRef("Function.prototype")}}. Для об'єктів, створених через <code>new fun</code>, де <code>fun</code> є однією з вбудованих функцій-конструкторів JavaScript ({{JSxRef("Array")}}, {{JSxRef("Boolean")}}, {{JSxRef("Date")}}, {{JSxRef("Number")}}, {{JSxRef("Object")}}, {{JSxRef("String")}} і так далі — в тому числі нові конструктори, додані з розвитком JavaScript), це значення завжди дорівнює <code>fun.prototype</code>. Для об'єктів, створених за допомогою <code>new fun</code>, де <code>fun</code> - це функція, визначена у скрипті, це значення дорівнює значенню <code>fun.prototype</code>. (Якщо тільки конструктор не повернув явно інший об'єкт, або значення <code>fun.prototype</code> не було переприсвоєне після створення екземпляра).</p> + +<p>Сетер <code>__proto__</code> дозволяє змінювати властивість об'єкта <code>[[Prototype]]</code>. Об'єкт має бути розширюваним згідно з {{JSxRef("Object.isExtensible()")}}: якщо це не так, викидається {{JSxRef("Global_Objects/TypeError", "TypeError")}}. Надана величина має бути об'єктом або {{JSxRef("Global_Objects/null", "null")}}. Передача будь-якого іншого значення не дасть ніякого результату.</p> + +<p>Щоб зрозуміти, як прототипи використовуються для наслідування, дивіться статтю посібника <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наслідування та ланцюжок прототипів</a>.</p> + +<p>Властивість <code>__proto__</code> - це проста властивість-аксесор {{JSxRef("Object.prototype")}}, що складається з функції-гетера та функції-сетера. Звернення до властивості <code>__proto__</code>, яке зрештою звертається до {{JSxRef("Object.prototype")}}, знайде цю властивість, але звернення, яке не звертається до {{JSxRef("Object.prototype")}}, не знайде її. Якщо інша властивість <code>__proto__</code> буде знайдена до того, як відбудеться звернення до {{JSxRef("Object.prototype")}}, то ця властивість сховає знайдену у {{JSxRef("Object.prototype")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання___proto__">Використання __proto__</h3> + +<pre class="brush: js notranslate">function Circle() {}; +const shape = {}; +const circle = new Circle(); + +// Присвоїти прототип об'єкта. +// НЕ РЕКОМЕНДОВАНО. Цей код написаний лише для прикладу. НЕ РОБІТЬ ЦЬОГО у справжньому коді. +shape.__proto__ = circle; + +// Отримати прототип об'єкта +console.log(shape.__proto__ === circle); // true + +const ShapeA = function () {}; +const ShapeB = { + a() { + console.log('aaa'); + } +}; +console.log(ShapeA.prototype.__proto__ = ShapeB); + +const shapea = new ShapeA(); +shapea.a(); // aaa +console.log(ShapeA.prototype === shapea.__proto__); // true + +// або +const ShapeC = function () {}; +const ShapeD = { + a() { + console.log('a'); + } +}; + +const shapeC = new ShapeC(); +shapeC.__proto__ = ShapeD; +shapeC.a(); // a +console.log(ShapeC.prototype === shapeC.__proto__); // false + +// або +function Test() {}; +Test.prototype.myname = function () { + console.log('myname'); +}; + +const a = new Test(); +console.log(a.__proto__ === Test.prototype); // true +a.myname(); // myname + +// або +const fn = function () {}; +fn.prototype.myname = function () { + console.log('myname'); +}; + +var obj = { + __proto__: fn.prototype +}; + +obj.myname(); // myname +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікації</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.proto")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Object.prototype.isPrototypeOf()")}}</li> + <li>{{JSxRef("Object.getPrototypeOf()")}}</li> + <li>{{JSxRef("Object.setPrototypeOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/seal/index.html b/files/uk/web/javascript/reference/global_objects/object/seal/index.html new file mode 100644 index 0000000000..568686ede7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/seal/index.html @@ -0,0 +1,151 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Reference/Global_Objects/Object/seal +tags: + - ECMAScript5 + - JavaScript + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.seal()</strong></code> запечатує об'єкт, запобігаючи створенню нових властивостей та відмічаючи усі існуючі властивості як недоступні для налаштування. Значення існуючих властивостей можна і надалі змінювати, якщо вони доступні для запису.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.seal(<var>obj</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>obj</var></code></dt> + <dd>Об'єкт, який має бути запечатаний.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Об'єкт, який запечатується.</p> + +<h2 id="Опис">Опис</h2> + +<p>За замовчуванням, об'єкти є {{jsxref("Object.isExtensible()", "розширюваними", "", 1)}} (до них можна додати нові властивості). Запечатування об'єкту запобігає створенню нових властивостей і робить усі існуючі властивосні недоступними для налаштування. Це робить набір властивостей об'єкта зафіксованим і незмінним. Перетворення всіх властивостей на недоступні для налаштування також запобігає зміні властивостей-значень на властивості-аксесори, та навпаки, але не запобігає зміні значеннь властивостей. Спроби додати чи видалити властивість з запечатаного об'єкта, або перетворити властивість-значення на властивість-аксесор, не спрацюють, або непомітно, або з викиданням {{jsxref("TypeError")}} (найчастіше, але не виключно, у {{jsxref("Strict_mode", "строгому режимі", "", 1)}})</p> + +<p>Ланцюг прототипів залишається незмінним. Проте, властивість {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} також запечатується.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'му' +}; + +// Нові властивості можуть бути додані, існуючі властивості +// можуть бути змінені або видалені. +obj.foo = 'мяв'; +obj.lumpy = 'ква'; +delete obj.prop; + +var o = Object.seal(obj); + +o === obj; // true +Object.isSealed(obj); // === true + +// На запечатаному об'єкті можна змінювати значення властивостей +obj.foo = 'кря'; + +// Але не можна перетворити властивості-значення на властивості-аксесори, +// і навпаки. +Object.defineProperty(obj, 'foo', { + get: function() { return 'g'; } +}); // викидає TypeError + +// Тепер будь-які спроби змін в об'єкті, окрім змін властивостей, +// не працюватимуть. +obj.quaxxor = 'весела качка'; +// непомітно не додасть властивість +delete obj.foo; +// непомітно не видалить властивість + +// ...а у строгому режимі такі спроби +// викидатимуть помилки TypeError. +function fail() { + 'use strict'; + delete obj.foo; // викидає TypeError + obj.sparky = 'гав'; // викидає TypeError +} +fail(); + +// Спроби додавання властивостей за допомогою +// Object.defineProperty також викидатимуть помилки. +Object.defineProperty(obj, 'ohai', { + value: 17 +}); // викидає TypeError +Object.defineProperty(obj, 'foo', { + value: 'рох' +}); // змінює значення існуючої властивості +</pre> + +<h2 id="Примітки">Примітки</h2> + +<p>У ES5, якщо аргументом цього методу є не об'єкт (примітив), це спричинить {{jsxref("TypeError")}}. У ES2015 аргумент, що не є об'єктом, сприйматиметься як звичайний запечатаний об'єкт, і буде просто повернений.</p> + +<pre class="brush: js">Object.seal(1); +// TypeError: 1 is not an object (код ES5) + +Object.seal(1); +// 1 (код ES2015) +</pre> + +<h3 id="Порівняння_з_Object.freeze">Порівняння з <code>Object.freeze()</code></h3> + +<p>Існуючі властивості об'єктів, заморожених методом {{jsxref("Object.freeze()")}}, стають незмінними. Властивості об'єкта, запечатаного методом <code>Object.seal()</code>, надалі можуть бути зміненні.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікації</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.seal")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html new file mode 100644 index 0000000000..0e052f3bb5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html @@ -0,0 +1,220 @@ +--- +title: Object.setPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Об'єкт + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Object.setPrototypeOf()</strong></code> присвоює прототипу (тобто, внутрішній властивості <code>[[Prototype]]</code>) вказаного об'єкта інший об'єкт або {{jsxref("null")}}.</p> + +<div class="warning"> +<p><strong>Застереження:</strong> Зміна властивості об'єкта <code>[[Prototype]]</code> за природою того, <a href="https://mathiasbynens.be/notes/prototypes">як сучасні рушії JavaScript оптимізують доступ до властивостей</a>, є дуже повільною операцією у кожному переглядачі та рушії JavaScript. До того ж, ефект від зміни наслідування є неочевидним та обширним, і не обмежується лише часом, витраченим на інструкцію <code>Object.setPrototypeOf(...)</code>, а може стосуватися <strong><em>будь-якого</em></strong> коду, що звертається до будь-якого об'єкта, чия властивість <code>[[Prototype]]</code> була змінена.</p> + +<p>Оскільки ця функціональність є частиною мови, тягар її ефективної (в ідеалі) реалізації досі лежить на розробниках рушіїв. Поки розробники рушіїв не вирішать цю проблему, якщо вам важлива продуктивність, вам варто уникати присвоювати <code>[[Prototype]]</code> об'єкта. Замість цього, створіть новий об'єкт з бажаним значенням <code>[[Prototype]]</code>, використовуючи {{jsxref("Object.create()")}}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, прототипу якого треба присвоїти значення.</dd> + <dt><code>prototype</code></dt> + <dd>Новий прототип об'єкта (об'єкт або {{jsxref("null")}}).</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Вказаний об'єкт.</p> + +<h2 id="Опис">Опис</h2> + +<p>Викидає виняток {{jsxref("TypeError")}}, якщо об'єкт, чия властивість <code>[[Prototype]]</code> змінюється, є нерозширюваним згідно з {{jsxref("Object.isExtensible()")}}. Не робить нічого, якщо параметр <code>prototype</code> не є об'єктом або {{jsxref("null")}} (число, рядок, булеве значення або {{jsxref("undefined")}}). Інакше, цей метод змінює значення <code>[[Prototype]]</code> об'єкта <code>obj</code> на нове значення.</p> + +<p>Метод <code>Object.setPrototypeOf()</code> присутній у специфікації ECMAScript 2015. Він, загалом, вважається правильним способом встановлювати прототип об'єкта, у порівнянні з більш суперечливою властивістю {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var dict = Object.setPrototypeOf({}, null); +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Використовуючи більш стару властивість {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}, ми легко можемо визначити метод <code>Object.setPrototypeOf</code>, якщо він досі не є доступним:</p> + +<pre class="brush: js">if (!Object.setPrototypeOf) { + // Працює лише у Chrome та FireFox, не працює у IE: + Object.prototype.setPrototypeOf = function(obj, proto) { + if(obj.__proto__) { + obj.__proto__ = proto; + return obj; + } else { + // Якщо ви хочете повернути прототип Object.create(null): + var Fn = function() { + for (var key in obj) { + Object.defineProperty(this, key, { + value: obj[key], + }); + } + }; + Fn.prototype = proto; + return new Fn(); + } + } +}</pre> + +<h2 id="Додавання_ланцюжків_прототипів">Додавання ланцюжків прототипів</h2> + +<p>Комбінація <code>Object.getPrototypeOf()</code> та {{jsxref("Object.proto", "Object.prototype.__proto__")}} дозволяє додавати цілі ланцюжки прототипів до нового прототипу:</p> + +<pre class="brush: js">/** +*** Object.appendChain(@object, @prototype) +* +* Додає перший невбудований прототип з ланцюжка до нового прототипу. +* Повертає @object (якщо це була проста величина, вона буде перетворена на об'єкт). +* +*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body") +*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body") +* +* Додає перший невбудований прототип з ланцюжка до вбудованого об'єкта Function.prototype, +* а потім додає new Function(["@arg"(s)], "@function_body") до цього ланцюжка. +* Повертає функцію. +* +**/ + +Object.appendChain = function(oChain, oProto) { + if (arguments.length < 2) { + throw new TypeError('Object.appendChain - Недостатньо аргументів'); + } + if (typeof oProto !== 'object' && typeof oProto !== 'string') { + throw new TypeError("другий аргумент Object.appendChain повинен бути об'єктом або рядком"); + } + + var oNewProto = oProto, + oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain); + + for (var o1st = this.getPrototypeOf(o2nd); + o1st !== Object.prototype && o1st !== Function.prototype; + o1st = this.getPrototypeOf(o2nd) + ) { + o2nd = o1st; + } + + if (oProto.constructor === String) { + oNewProto = Function.prototype; + oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1)); + this.setPrototypeOf(oReturn, oLast); + } + + this.setPrototypeOf(o2nd, oNewProto); + return oReturn; +} +</pre> + +<h3 id="Використання">Використання</h3> + +<h4 id="Перший_приклад_Додавання_ланцюжка_до_прототипу">Перший приклад: Додавання ланцюжка до прототипу</h4> + +<pre class="brush: js">function Mammal() { + this.isMammal = 'так'; +} + +function MammalSpecies(sMammalSpecies) { + this.species = sMammalSpecies; +} + +MammalSpecies.prototype = new Mammal(); +MammalSpecies.prototype.constructor = MammalSpecies; + +var oCat = new MammalSpecies('Кіт'); + +console.log(oCat.isMammal); // 'так' + +function Animal() { + this.breathing = 'так'; +} + +Object.appendChain(oCat, new Animal()); + +console.log(oCat.breathing); // 'так' +</pre> + +<h4 id="Другий_приклад_Перетворення_простого_значення_на_екземпляр_свого_конструктора_та_додавання_його_ланцюжка_до_прототипу">Другий приклад: Перетворення простого значення на екземпляр свого конструктора та додавання його ланцюжка до прототипу</h4> + +<pre class="brush: js">function MySymbol() { + this.isSymbol = 'так'; +} + +var nPrime = 17; + +console.log(typeof nPrime); // 'number' + +var oPrime = Object.appendChain(nPrime, new MySymbol()); + +console.log(oPrime); // '17' +console.log(oPrime.isSymbol); // 'так' +console.log(typeof oPrime); // 'object' +</pre> + +<h4 id="Третій_приклад_Додавання_ланцюжка_до_обєкта_Function.prototype_та_додавання_нової_функції_до_цього_ланцюжка">Третій приклад: Додавання ланцюжка до об'єкта Function.prototype та додавання нової функції до цього ланцюжка</h4> + +<pre class="brush: js">function Person(sName) { + this.identity = sName; +} + +var george = Object.appendChain(new Person('Георгій'), + 'console.log("Всім привіт!!");'); + +console.log(george.identity); // 'Георгій' +george(); // 'Всім привіт!!' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.setPrototypeOf")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Reflect.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html new file mode 100644 index 0000000000..cc85fc6920 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html @@ -0,0 +1,111 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +tags: + - JavaScript + - Довідка + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toLocaleString()</strong></code> повертає рядок, що відображає об'єкт. Цей метод призначений, щоб бути заміщеним у похідних об'єктах для специфічних задач щодо локалі.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>obj</var>.toLocaleString()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що відображає об'єкт.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод {{jsxref("Object","об'єкта")}} <code>toLocaleString</code> повертає результат виклику {{jsxref("Object.toString", "toString()")}}.</p> + +<p>Ця функція надана, щоб дати об'єктам загальний метод <code>toLocaleString</code>, хоча не усі його використовуватимуть. Дивіться наведений нижче список.</p> + +<h3 id="Обєкти_які_заміщують_toLocaleString">Об'єкти, які заміщують <code>toLocaleString</code></h3> + +<ul> + <li>{{jsxref("Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Число", "Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("TypedArray")}}: {{jsxref("TypedArray.prototype.toLocaleString()")}}</li> + <li>{{jsxref("BigInt")}}: {{jsxref("BigInt.prototype.toLocaleString()")}}</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Заміщення_toLocaleString_у_масиві">Заміщення toLocaleString() у масиві</h3> + +<p>На об'єктах <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString">toLocaleString()</a></code> може використовуватись для виводу масиву значень у вигляді рядка, з необов'язковим додаванням специфічних мовних ідентифікаторів (наприклад, символів валюти):</p> + +<p>Наприклад:</p> + +<pre class="brush: js notranslate">const testArray = [4, 7, 10]; + +let euroPrices = testArray.toLocaleString('fr', { style: 'currency', currency: 'EUR'}); +// "4,00 €,7,00 €,10,00 €"</pre> + +<h3 id="Заміщення_toLocaleString_у_обєктах_Date">Заміщення toLocaleString() у об'єктах Date</h3> + +<p>На об'єктах <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString">toLocaleString()</a></code> використовується для виводу дати згідно особливостей мовних налаштувань:</p> + +<p>Наприклад:</p> + +<pre class="brush: js notranslate">const testDate = new Date(Date.now()); +// "Date Fri May 29 2020 18:04:24 GMT+0100 (Британський літній час)" + +let deDate = testDate.toLocaleString('de'); +// "29.5.2020, 18:04:24" + +var frDate = testDate.toLocaleString('fr'); +//"29/05/2020 à 18:04:24"</pre> + +<h3 id="Заміщення_toLocaleString_у_обєктах_Number">Заміщення toLocaleString() у об'єктах Number</h3> + +<p>На об'єктах <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString">toLocaleString()</a></code> використовується для виводу чисел згідно особливостей мовних налаштувань, наприклад, з правильними роздільниками:</p> + +<p>Наприклад:</p> + +<pre class="notranslate">const testNumber = 2901234564; +// "2901234564" + +let deNumber = testNumber.toLocaleString('de'); +// "2.901.234.564" + +let frNumber = testNumber.toLocaleString('fr'); +// "2 901 234 564"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/tosource/index.html b/files/uk/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..1de70827b6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,132 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Object/toSource +tags: + - JavaScript + - Об'єкт + - застарілий + - метод + - нестандартний + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>toSource()</code></strong> повертає рядок, який відображає першокод об'єкта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code>Object.toSource(); +<var>obj</var>.toSource(); +</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядок, який відображає першокод об'єкта.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>toSource()</code> повертає наступні значення:</p> + +<ul> + <li>Для вбудованого об'єкта {{jsxref("Object")}} <code>toSource()</code> повертає наступний рядок, який вказує, що першокод недоступний: + + <pre class="brush: js notranslate">function Object() { + [native code] +} +</pre> + </li> + <li>Для екземплярів {{jsxref("Object")}} <code>toSource()</code> повертає рядок, який відображає першокод.</li> +</ul> + +<p>Ви можете викликати <code>toSource()</code> під час налагодження для дослідження вмісту об'єкта.</p> + +<h3 id="Перезапис_методу_toSource">Перезапис методу <code>toSource()</code></h3> + +<p>Перезапис <code>toSource()</code> не несе ніякої шкоди об'єктам. Наприклад:</p> + +<pre class="brush: js notranslate">function Person(name) { + this.name = name; +} + +Person.prototype.toSource = function Person_toSource() { + return 'new Person(' + uneval(this.name) + ')'; +}; + +console.log(new Person('Джо').toSource()); // ---> new Person("Джо") +</pre> + +<h3 id="Вбудовані_методи_toSource">Вбудовані методи <code>toSource()</code></h3> + +<p>Кожен базовий тип JavaScript має свій власний метод <code>toSource()</code>. Ці об'єкти наступні:</p> + +<ul> + <li>{{jsxref("Array.prototype.toSource()")}} — об'єкт {{jsxref("Array")}}.</li> + <li>{{jsxref("Boolean.prototype.toSource()")}} — об'єкт {{jsxref("Boolean")}}.</li> + <li>{{jsxref("Date.prototype.toSource()")}} — об'єкт {{jsxref("Date")}}.</li> + <li>{{jsxref("Function.prototype.toSource()")}} — об'єкт {{jsxref("Function")}}.</li> + <li>{{jsxref("Number.prototype.toSource()")}} — об'єкт {{jsxref("Число","Number")}}.</li> + <li>{{jsxref("RegExp.prototype.toSource()")}} — об'єкт {{jsxref("RegExp")}}.</li> + <li>{{jsxref("String.prototype.toSource()")}} — об'єкт {{jsxref("String")}}.</li> + <li>{{jsxref("Symbol.prototype.toSource()")}} — об'єкт {{jsxref("Symbol")}}.</li> + <li><code>Math.toSource()</code> — Повертає рядок "Math".</li> +</ul> + +<h3 id="Обмеження_для_циклічних_обєктів">Обмеження для циклічних об'єктів</h3> + +<p>У випадках, коли об'єкт містить посилання на самого себе, наприклад, циклічно зв'язаний список чи дерево, котре можна пройти обома шляхами, <code>toSource()</code> не відтворюватиме посилання на самого себе, починаючи з Firefox 24. Наприклад:</p> + +<pre class="brush: js notranslate">var obj1 = {}; +var obj2 = { a: obj1 }; +obj1.b = obj2; + +console.log('Циклічний: ' + (obj1.b.a == obj1)); + +var objSource = obj1.toSource(); // повертає "({b:{a:{}}})" + +obj1 = eval(objSource); + +console.log('Циклічний: ' + (obj1.b.a == obj1)); +</pre> + +<p>Якщо застосовується циклічна структура, і потрібен метод <code>toSource()</code>, об'єкт має перезаписати <code>toSource()</code>, або використовуючи посилання на конструктор, або надавши анонімну функцію.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toSource">Використання <code>toSource()</code></h3> + +<p>Наступний код визначає тип об'єкта <code>Dog</code> і створює <code>theDog</code>, об'єкт типу <code>Dog</code>:</p> + +<pre class="brush: js notranslate">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Галя', 'лабрадор', 'шоколадний', 'самиця'); +</pre> + +<p>Якщо викликати метод <code>toSource()</code> об'єкта <code>theDog</code>, він поверне першокод JavaScript, який визначає об'єкт:</p> + +<pre class="brush: js notranslate">theDog.toSource(); +// повертає ({name:"Галя", breed:"лабрадор", color:"шоколадний", sex:"самиця"}) +</pre> + +<h2 id="Специфікація">Специфікація</h2> + +<p>Не є частиною жодних стандартів.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.toSource")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/tostring/index.html b/files/uk/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..681a6c6f06 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,148 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toString +tags: + - JavaScript + - Об'єкт + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<div>{{JSRef}}</div> + +<div>Метод <code><strong>toString()</strong></code> повертає рядок, який відображає об'єкт.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</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"><code><var>obj</var>.toString()</code></pre> + +<h3 id="Повертає">Повертає</h3> + +<p>Рядок, який відображає об'єкт.</p> + +<h2 id="Опис">Опис</h2> + +<p>Кожен об'єкт має метод <code>toString()</code>, який автоматично викликається, коли об'єкт повинен бути відображений як рядок, або коли об'єкт знаходиться у виразі, де очікується рядок. За замовчуванням, метод <code>toString()</code> успадковується усіма об'єктами, похідними від <code>Object</code>. Якщо цей метод не був перезаписаний у користувацькому об'єкті, то <code>toString()</code> поверне "<code>[object <var>type</var>]</code>", де <code><var>type</var></code> - це тип об'єкта. Наступний код це демонструє:</p> + +<pre class="brush: js">var o = new Object(); +o.toString(); // повертає [object Object] +</pre> + +<div class="note"> +<p><strong>Примітка:</strong> Починаючи з JavaScript 1.8.5, <code>toString()</code>, викликаний для {{jsxref("null")}}, повертає <code>[object <em>Null</em>]</code>, для {{jsxref("undefined")}} повертає <code>[object <em>Undefined</em>]</code>, як визначенно у 5-й версії ECMAScript і згодом у Ерраті. Дивіться {{anch("Використання_toString_для_визначення_класу_обєкта", "Використання toString() для визначення класу об'єкта")}}.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перезапис_стандартного_методу_toString">Перезапис стандартного методу <code>toString</code></h3> + +<p>Ви можете створити функцію, яка викликатиметься замість стандартного методу <code>toString()</code>. Метод <code>toString()</code> не приймає жодних аргументів і має повернути рядок. Метод <code>toString()</code>, який ви створите, може повертати будь-яке значення, але найбільш корисним буде, якщо він повертатиме інформацію про об'єкт.</p> + +<p>Наступний код визначає тип об'єкта <code>Dog</code> і створює <code>theDog</code>, об'єкт типу <code>Dog</code>:</p> + +<pre class="brush: js">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Галя', 'лабрадор', 'шоколадна', 'самиця'); +</pre> + +<p>Якщо ви викличете метод <code>toString()</code> для цього користувацького об'єкта, він поверне стандартне значення, успадковане від {{jsxref("Object")}}:</p> + +<pre class="brush: js">theDog.toString(); // повертає [object Object] +</pre> + +<p>Наступний код створює і присвоює значення <code>dogToString()</code>, щоб перезаписати стандартний метод <code>toString()</code>. Ця функція генерує рядок, що складається з імені, породи, кольору і статі об'єкта, у вигляді "<code>властивість = значення;</code>".</p> + +<pre class="brush: js">Dog.prototype.toString = function dogToString() { + var ret = 'Собака ' + this.name + ' - ' + this.color + ' ' + this.sex + ' ' + this.breed; + return ret; +} +</pre> + +<p>або</p> + +<pre class="brush: js">Dog.prototype.toString = function dogToString() { + return `Собака ${this.name} - ${this.color} ${this.sex} ${this.breed}`; +} +</pre> + +<p>Завдяки цьому коду, як тільки <code>theDog</code> буде використаний у контексті рядка, JavaScript автоматично викличе новий метод <code>toString()</code>, який поверне наступний рядок:</p> + +<pre class="brush: js">"Собака Галя - шоколадна самиця лабрадор" +</pre> + +<h3 id="Використання_toString_для_визначення_класу_обєкта">Використання toString() для визначення класу об'єкта</h3> + +<p>Метод <code>toString()</code> може бути використаний з будь-яким об'єктом, щоб отримати його клас. Щоб використати <code>Object.prototype.toString()</code> для будь-якого об'єкта, необхідно викликати {{jsxref("Function.prototype.call()")}} або {{jsxref("Function.prototype.apply()")}}, передаючи об'єкт, який ви хочете дослідити, першим параметром (<code>thisArg</code>).</p> + +<pre class="brush: js">var toString = Object.prototype.toString; + +toString.call(new Date); // [object Date] +toString.call(new String); // [object String] +toString.call(Math); // [object Math] + +// Починаючи з JavaScript 1.8.5 +toString.call(undefined); // [object Undefined] +toString.call(null); // [object Null] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Виклик на {{jsxref("null")}} повертає <code>[object <em>Null</em>]</code>, а {{jsxref("undefined")}} повертає <code>[object <em>Undefined</em>]</code></td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.toString")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html b/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html new file mode 100644 index 0000000000..678544cabe --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/unobserve/index.html @@ -0,0 +1,102 @@ +--- +title: Object.unobserve() +slug: Web/JavaScript/Reference/Global_Objects/Object/unobserve +tags: + - JavaScript + - Об'єкт + - застарілий + - метод +translation_of: Archive/Web/JavaScript/Object.unobserve +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>Object.unobserve()</code></strong> використовувався для видалення спостерігачів, встановлених методом {{jsxref("Object.observe()")}}, але він застарів та був прибраний з переглядачів. Ви можете натомість скористатись більш загальним об'єктом {{jsxref("Proxy")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.unobserve(<var>obj</var>, <var>callback</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, за яким треба припинити спостереження.</dd> + <dt><code>callback</code></dt> + <dd>Посилання на спостерігач, який треба припинити викликати кожен раз, коли у об'єкті <strong>obj</strong> відбувається зміна.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Вказаний об'єкт.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Object.unobserve()</code> має викликатися після {{jsxref("Object.observe()")}}, щоб прибрати з об'єкта спостерігач.</p> + +<p>Параметр callback має бути посиланням на функцію, а не анонімною функцією, бо це посилання буде використано, щоб прибрати попередній спостерігач. Немає сенсу викликати <strong>Object.unobserve() </strong>з анонімною функцією зворотного виклику, вона не прибере жоден спостерігач.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Припинення_спостереження_за_обєктом">Припинення спостереження за об'єктом</h3> + +<pre class="brush: js">var obj = { + foo: 0, + bar: 1 +}; + +var observer = function(changes) { + console.log(changes); +} + +Object.observe(obj, observer); + +obj.newProperty = 2; +// [{name: 'newProperty', object: <obj>, type: 'add'}] + +Object.unobserve(obj, observer); + +obj.foo = 1; +// Функція зворотного виклику не викликалась</pre> + +<h3 id="Використання_анонімної_функції">Використання анонімної функції</h3> + +<pre class="brush: js">var person = { + name: 'Ахмед', + age: 25 +}; + +Object.observe(person, function(changes) { + console.log(changes); +}); + +person.age = 40; +// [{name: 'age', object: <obj>, oldValue: 25, type: 'update'}] + +Object.unobserve(person, function(changes) { + console.log(changes); +}); + +person.age = 63; +// [{name: 'age', object: <obj>, oldValue: 40, type: 'update'}] +// Функція зворотного виклику викликатиметься завжди +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.unobserve")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li> + <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html b/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html new file mode 100644 index 0000000000..7ad4d67028 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/unwatch/index.html @@ -0,0 +1,71 @@ +--- +title: Object.prototype.unwatch() +slug: Web/JavaScript/Reference/Global_Objects/Object/unwatch +tags: + - JavaScript + - Об'єкт + - застарілий + - метод + - налагодження +translation_of: Archive/Web/JavaScript/Object.unwatch +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p><strong>Застереження:</strong> Не використовуйте <code>unwatch()</code> та {{jsxref("Object.prototype.watch", "watch()")}}! Ці два методи були реалізовані лише у Firefox до 58-ї версії, вони <strong>застаріли та були прибрані у Firefox 58+</strong>. До того ж, використання точок спостереження має серйозний негативний вплив на продуктивність, особливо при використанні на глобальних об'єктах, таких як <code>window</code>. Звісно, ви можете, натомість, використовувати <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">сетери та гетери</a> або <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Proxy">проксі</a>.</p> +</div> + +<p>Метод <code><strong>unwatch()</strong></code> прибирає точку спостереження, встановлену методом {{jsxref("Object.prototype.watch", "watch()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>obj</var>.unwatch(<var>prop</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Ім'я властивості об'єкта, за якою треба припинити спостереження.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Налагоджувач JavaScript має функціональність, схожу на ту, що надає даний метод, а також інші налагоджувальні можливості. Інформацію щодо налагоджувача дивіться у статті <a href="/uk/docs/Venkman">Venkman</a>.</p> + +<p>За замовчуванням, цей метод успадковується кожним об'єктом, похідним від {{jsxref("Object")}}.</p> + +<div class="note"> +<p><strong>Заувага:</strong> Причина, з якої <code>unwatch()</code> приймає властивість <em>prop</em> єдиним параметром, в тому, що метод {{jsxref("Object.watch", "watch()")}} допускає лише один обробник.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<p>Дивіться {{jsxref("Object.watch", "watch()")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Реалізований у JavaScript 1.2.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.unwatch")}}</p> +</div> + +<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2> + +<ul> + <li>Виклик <code>unwatch()</code> на об'єктах {{domxref("Document")}} викидає помилку {{jsxref("TypeError")}}, починаючи з Firefox 23 ({{bug(903332)}}). Це було виправлено у Firefox 27.</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.watch()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/valueof/index.html b/files/uk/web/javascript/reference/global_objects/object/valueof/index.html new file mode 100644 index 0000000000..153f2be121 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/valueof/index.html @@ -0,0 +1,115 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf +tags: + - JavaScript + - valueOf + - Об'єкт + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +<div>{{JSRef}}</div> + +<div><span class="seoSummary">Метод <strong><code>valueOf()</code></strong> повертає просту величину вказаного об'єкта.</span></div> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>object</var>.valueOf()</pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Проста величина вказаного об'єкта.</p> + +<h2 id="Опис">Опис</h2> + +<p>JavaScript викликає метод <code>valueOf</code>, щоб <span class="tlid-translation translation" lang="uk"><span title="">перетворити</span></span> об'єкт на просту величину. Рідко трапляється необхідність викликати його вручну. JavaScript автоматично застосовує <code>valueOf</code>, коли зустрічає об'єкт там, де очікується проста величина.</p> + +<p>З<span class="tlid-translation translation" lang="uk"><span title="">а замовчуванням,</span></span> кожен об'єкт, який походить від {{jsxref("Object")}}, успадковує метод <code>valueOf</code>. Кожний вбудований об'єкт перезаписує цей метод, щоб повертати відповідне значення. Якщо об'єкт не має простої величини, <code>valueOf</code> повертає сам об'єкт.</p> + +<p>Ви можете використовувати <code>valueOf</code> у своєму коді, щоб перетворити вбудований об'єкт на просту величину. Коли ви створюєте користувацький об'єкт, ви можете перезаписати <code>Object.prototype.valueOf()</code>, щоб викликати свій метод замість початкового метода {{jsxref("Object")}}.</p> + +<h3 id="Перезапис_valueOf_для_користувацьких_обєктів">Перезапис valueOf для користувацьких об'єктів</h3> + +<p>Ви можете створити функцію, яка буде викликатися замість стандартного методу <code>valueOf</code>. Ваша функція не повинна приймати аргументів.</p> + +<p>Припустимо, ви маєте об'єкт <code>MyNumberType</code> і бажаєте створити для нього метод <code>valueOf</code>. Наступний код призначає створену користувачем функцію методу <code>valueOf</code><span class="tlid-translation translation" lang="uk"><span title="">:</span></span></p> + +<pre class="brush: js">MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre> + +<p>З наведеним кодом, в будь-який момент, коли об'єкт типу <code>MyNumberType</code> використовується у контексті, де він має бути представлений простою величиною, JavaScript автоматично викличе функцію, визначену у коді.</p> + +<p>Зазвичай, JavaScript викликає метод об'єкта <code>valueOf</code>, але ви можете викликати його власноруч, наступним чином:</p> + +<pre class="brush: js"><var>myNumberType</var>.valueOf()</pre> + +<div class="note"> +<p><strong>Заувага:</strong> Об'єкти Object у контексті рядка приводяться за допомогою методу {{jsxref("Object.toString", "toString()")}}, це відрізняє їх від об'єктів {{jsxref("String")}}, що перетворюються на рядкові примітиви, використовуючи <code>valueOf</code>. Усі об'єкти мають приведення до рядка виду "<code>[object <em>type</em>]</code>". Але чимало об'єктів не приводяться до числа, булевого значення чи функції.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_valueOf">Використання valueOf</h3> + +<pre class="brush: js">function MyNumberType(n) { + this.number = n; +} + +MyNumberType.prototype.valueOf = function() { + return this.number; +}; + +var myObj = new MyNumberType(4); +myObj + 3; // 7 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Object.valueOf")}}</p> + +<h2 id="Див._також"><span class="tlid-translation translation" lang="uk"><span title="">Див. також</span></span></h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("Symbol.toPrimitive")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/values/index.html b/files/uk/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..f3a933dbe8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,104 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Global_Objects/Object/values +tags: + - JavaScript + - Method + - Object + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Object.values()</code></strong> вертає масив значень всіх особистих (не успадкованих) перелічуваних властивостей переданого об'єкта. Порядок властивостей в масиві є тим самим, що й у циклі {{jsxref("Statements/for...in", "for...in")}} (різниця лише в тому, що цикл обходить також і властивості прототипу).</p> + +<p>{{EmbedInteractiveExample("pages/js/object-values.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Об'єкт, значення властивостей якого треба отримати.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Масив значень всіх особистих властивостей переданого об'єкта.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>Object.values()</code> повертає масив значень властивостей, які належать безпосередньо об'єктові <code>obj</code>. Порядок отриманих властивостей збігається із тим, що його забезпечує перебір через {{jsxref("Statements/for...in", "for...in")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; +console.log(Object.values(obj)); // ['bar', 42] + +// подібний до масиву об'єкт +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(obj)); // ['a', 'b', 'c'] + +// подібний до масиву об'єкт з випадковим порядком ключів +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(an_obj)); // ['b', 'c', 'a'] + +// властивість getFoo є неперелічуваною +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.values(my_obj)); // ['bar'] + +// аргументи, що не є об'єктами, буде перетворені на об'єкти +console.log(Object.values('foo')); // виводить ['f', 'o', 'o']</pre> + +<h2 id="Запасний_варіант_поліфіл">Запасний варіант (поліфіл)</h2> + +<p>Для старіших середовищ, де метод <code>Object.values()</code> відсутній, можна скористатися запасним варіантом з репозиторіїв <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> або <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ES8')}}</td> + <td>Первинне визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Object.values")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/object/watch/index.html b/files/uk/web/javascript/reference/global_objects/object/watch/index.html new file mode 100644 index 0000000000..9f5536aa6e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/object/watch/index.html @@ -0,0 +1,153 @@ +--- +title: Object.prototype.watch() +slug: Web/JavaScript/Reference/Global_Objects/Object/watch +tags: + - JavaScript + - Об'єкт + - застарілий + - метод + - налагодження +translation_of: Archive/Web/JavaScript/Object.watch +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p><strong>Застереження:</strong> Не використовуйте <code>watch()</code> та {{jsxref("Object.prototype.unwatch", "unwatch()")}}! Ці два методи були реалізовані лише у Firefox до 58-ї версії, вони <strong>застаріли та були прибрані у Firefox 58+</strong>. До того ж, використання точок спостереження має серйозний негативний вплив на продуктивність, особливо при використанні на глобальних об'єктах, таких як <code>window</code>. Звісно, ви можете, натомість, використовувати <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">сетери та гетери</a> або <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Proxy">проксі</a>.</p> +</div> + +<p>Метод <code><strong>watch()</strong></code> стежить за присвоєнням властивості значення, та запускає функцію, коли це відбувається.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>obj</var>.watch(<var>prop</var>, <var>handler</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Ім'я властивості об'єкта, за змінами якої ви бажаєте стежити.</dd> + <dt><code>handler</code></dt> + <dd>Функція, яка викликатиметься, коли значення вказаної властивості змінюється.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Стежить за присвоєнням значень властивості <code>prop</code> у даному об'єкті, викликає <code>handler(prop, oldval, newval)</code>, коли присвоюється значення <code>prop</code>, та зберігає повернене значення у цій властивості. Точка спостереження може фільтрувати (або анулювати) присвоєння значення, повертаючи змінене значення <code>newval</code> (або повертаючи значення <code>oldval</code>).</p> + +<p>Якщо ви видалите властивість, для якої встановлено точку спостереження, ця точка спостереження не зникає. Якщо ви пізніше заново створите властивість, точка спостереження продовжить діяти.</p> + +<p>Щоб видалити точку спостереження, скористайтесь методом {{jsxref("Object.unwatch", "unwatch()")}}. За замовчуванням, метод <code>watch</code> успадковується кожним об'єктом, похідним від {{jsxref("Object")}}.</p> + +<p>Налагоджувач JavaScript має функціональність, схожу на ту, що надає даний метод, а також інші налагоджувальні можливості. Інформацію щодо налагоджувача дивіться у статті <a href="/uk/docs/Venkman">Venkman</a>.</p> + +<p>У Firefox <code>handler</code> викликається тільки з присвоєнь у скрипті, а не з нативного коду. Для прикладу, <code>window.watch('location', myHandler)</code> не викличе <code>myHandler</code>, якщо користувач натисне на посилання на закладку в активному документі. Однак, <code>window.location += '#myAnchor'</code> викличе <code>myHandler</code>.</p> + +<div class="note"> +<p><strong>Заувага:</strong> Виклик <code>watch()</code> на об'єкті для вказаної властивості перезаписує будь-який попередній обробник, призначений цій властивості.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_watch_та_unwatch">Використання <code>watch</code> та <code>unwatch</code></h3> + +<pre class="brush: js">var o = { p: 1 }; + +o.watch('p', function (id, oldval, newval) { + console.log('Значення o.' + id + ' було змінене з ' + oldval + ' на ' + newval); + return newval; +}); + +o.p = 2; +o.p = 3; +delete o.p; +o.p = 4; + +o.unwatch('p'); +o.p = 5; +</pre> + +<p>Цей скрипт виведе наступне:</p> + +<pre>Значення o.p було змінене з 1 на 2 +Значення o.p було змінене з 2 на 3 +Значення o.p було змінене з undefined на 4 +</pre> + +<h3 id="Використання_watch_для_перевірки_властивостей_обєкта">Використання <code>watch</code> для перевірки властивостей об'єкта</h3> + +<p>Ви можете використати <code>watch</code>, щоб перевірити будь-які присвоєння значень властивостям об'єкта. Даний приклад перевіряє, що кожна людина (Person) завжди матиме дійсне ім'я (name) та вік (age) між 0 та 200.</p> + +<pre class="brush: js">Person = function(name, age) { + this.watch('age', Person.prototype._isValidAssignment); + this.watch('name', Person.prototype._isValidAssignment); + this.name = name; + this.age = age; +}; + +Person.prototype.toString = function() { + return this.name + ', ' + this.age; +}; + +Person.prototype._isValidAssignment = function(id, oldval, newval) { + if (id === 'name' && (!newval || newval.length > 30)) { + throw new RangeError("помилкове ім'я для: " + this); + } + if (id === 'age' && (newval < 0 || newval > 200)) { + throw new RangeError('помилковий вік для: ' + this); + } + return newval; +} + +will = new Person('Вілл', 29); +console.log(will); // Вілл, 29 + +try { + will.name = ''; +} catch (e) { + console.log(e); +} + +try { + will.age = -4; +} catch (e) { + console.log(e); +} +</pre> + +<p>Цей скрипт виведе наступне:</p> + +<pre>Вілл, 29 +RangeError: помилкове ім'я для: Вілл, 29 +RangeError: помилковий вік для: Вілл, 29 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій. Реалізований у JavaScript 1.2.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.watch")}}</p> +</div> + +<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2> + +<ul> + <li>Цей <a class="external link-https" href="https://gist.github.com/384583">Поліфіл</a> надає метод <code>watch</code> для усіх переглядачів, що сумісні з ES5.</li> + <li>Використання {{jsxref("Proxy")}} дозволяє робити навіть більш глибокі зміни у роботі з присвоєнням властивостей.</li> + <li>Виклик <code>watch()</code> на об'єкті {{domxref("Document")}} викидає помилку {{jsxref("TypeError")}}, починаючи з Firefox 23 ({{bug(903332)}}). Це було виправлено у Firefox 27.</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.unwatch()")}}</li> + <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/parsefloat/index.html b/files/uk/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..41fe2a7650 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,111 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/parseFloat +tags: + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><span class="seoSummary">Функція <code><strong>parseFloat()</strong></code> розбирає аргумент (перетворивши його спочатку на рядок за потреби) та повертає число з плаваючою крапкою.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</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 notranslate">parseFloat(<em>string</em>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>string</var></code></dt> + <dd>Значення, яке потрібно розібрати. Якщо цей аргумент не є рядком, то він буде перетворений на рядок за допомогою абстрактної операції <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. {{glossary("whitespace","Пробільний символ")}} на початку цього аргументу ігнорується.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Число з плаваючою крапкою з наданого рядка <code><var>string</var></code>.</p> + +<p>Або {{jsxref("NaN")}}, коли перший непробільний символ не може бути перетворений на число.</p> + +<h2 id="Опис">Опис</h2> + +<p><code>parseFloat</code> є функцією верхнього рівня, а не методом будь-якого з об'єктів.</p> + +<ul> + <li>Якщо <code>parseFloat</code> зустрічає символ, що не є знаком плюс (<code>+</code>), знаком мінус (<code>-</code> U+002D дефіс-мінус), цифрою (<code>0</code>–<code>9</code>), десятковою крапкою (<code>.</code>), знаком експоненціального запису (<code>e</code> чи <code>E</code>), він повертає значення, записане до цього символа, ігноруючи недозволений символ та символи за ним.</li> + <li><em>Друга</em> десяткова крапка також зупиняє аналіз (символи, що йдуть перед цим символом, будуть розібрані).</li> + <li>Пробільні символи на початку та в кінці аргументу ігноруються.</li> + <li>Якщо перший символ аргументу не може бути перетворений на число (не є жодним з наведених вище символів), <code>parseFloat</code> вертає {{jsxref("NaN")}}.</li> + <li><code>parseFloat</code> також може розібрати та повернути {{jsxref("Infinity")}}.</li> + <li><code>parseFloat</code> перетворює синтаксис {{jsxref("BigInt")}} на {{jsxref("Число", "Number")}}, втрачаючи точність. Це відбувається, оскільки літера <code>n</code> в кінці числа відкидається.</li> +</ul> + +<p>Використовуйте для розбору рядка також функцію {{jsxref("Число", "Number(значення)")}}, яка перетворює на {{jsxref("NaN")}} аргументи з будь-якими недозволеними символами.</p> + +<p><code>parseFloat</code> спрацює для нерядкових об'єктів, якщо вони мають метод {{jsxref("Object.toString", "toString")}} або метод {{jsxref("Object.valueOf", "valueOf")}}. Повернене значення буде таким самим, яким було б після виклику <code>parseFloat</code> на результаті цих методів.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="parseFloat_що_повертає_число"><code>parseFloat</code>, що повертає число</h3> + +<p>Наступні приклади повернуть <code>3.14</code>:</p> + +<pre class="brush: js notranslate">parseFloat(3.14); +parseFloat('3.14'); +parseFloat(' 3.14 '); +parseFloat('314e-2'); +parseFloat('0.0314E+2'); +parseFloat('3.14якісь нечислові символи'); +parseFloat({ toString: function() { return "3.14" } }); +</pre> + +<h3 id="parseFloat_що_вертає_NaN"><code>parseFloat</code>, що вертає <code>NaN</code></h3> + +<p>Наступний приклад поверне <code>NaN</code>:</p> + +<pre class="brush: js notranslate">parseFloat('FF2'); +</pre> + +<h3 id="parseFloat_та_BigInt"><code>parseFloat</code> та <code>BigInt</code></h3> + +<p>Обидва наступних приклади повернуть <code>900719925474099300</code>, втративши точність, оскільки ціле число надто велике, щоб бути представленим як число з плаваючою крапкою:</p> + +<pre class="brush: js notranslate">parseFloat(900719925474099267n); +parseFloat('900719925474099267n'); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.parseFloat")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/parseint/index.html b/files/uk/web/javascript/reference/global_objects/parseint/index.html new file mode 100644 index 0000000000..c92f886216 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/parseint/index.html @@ -0,0 +1,215 @@ +--- +title: parseInt() +slug: Web/JavaScript/Reference/Global_Objects/parseInt +tags: + - JavaScript + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/parseInt +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Функція <code><strong>parseInt()</strong></code> розбирає рядковий аргумент і повертає число з вказаною <a href="https://en.wikipedia.org/wiki/Radix">основою</a> системи числення.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div> + +<p class="hidden">код для цього інтерактивного прикладу зберігається в репозиторії GitHub .Якщо ви хочете внести свій внесок у проект інтерактивних прикладів, будь-ласка клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і присилайте нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">parseInt(<em>string</em>, <em>radix</em>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>string</code></dt> + <dd>Значення, яке розбиратиметься. Якщо цей аргумент не є рядком, тоді він буде перетворений на рядок абстрактною операцією <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. Пробільні символи на початку аргументу ігноруються.</dd> + <dt><code>radix</code> {{optional_inline}}</dt> + <dd>Ціле число між <code>2</code> і <code>36</code>, яке вказує <var>основу</var> (в математичних системах числення) значення <em><code>string</code></em>. Будьте обережні — воно <strong><em>не</em></strong> дорівнює за замовчуванням <code>10</code>!</dd> + <dd class="blockIndicator warning"><a href="#Опис">Наведений нижче опис</a> поясює більш детально, що відбувається, якщо значення <em><code>radix</code></em> не надане.</dd> +</dl> + +<h3 id="Повернене_значення">Повернене значення</h3> + +<p>Число, отримане з наданого рядка <em><code>string</code></em>.</p> + +<p>Або {{jsxref("NaN")}}, коли</p> + +<ul> + <li>значення <code>radix</code> менше за <code>2</code> чи більше за <code>36</code>, або</li> + <li>перший непробільний символ не може бути перетворений на число.</li> +</ul> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>parseInt</code> перетворює перший аргумент на рядок, розбирає цей рядок, після чого повертає ціле число або <code>NaN</code>.</p> + +<p>Якщо не <code>NaN</code>, повернене значення буде цілим числом, яке є першим аргументом, прочитаним як число у вказаній системі числення <code><var>radix</var></code>. (Наприклад, <code><var>radix</var></code>, що дорівнює <code>10</code>, перетворює перший аргумент на десяткове число, <code>8</code> - на вісімкове, <code>16</code> на шістнадцяткове, і т. д.)</p> + +<p>Для основ, більших за <code>10</code>, літери англійського алфавіту позначають цифри, більші за <code>9</code>. Наприклад, для шістнадцяткових цифр (основа <code>16</code>) використовуються букви від <code>A</code> до <code>F</code>.</p> + +<p>Якщо метод <code>parseInt</code> зустрічає символ, який не є числом у вказаній системі <code>radix</code>, він ігнорує цей символ та усі наступні символи та повертає ціле число, розібране до цієї позиції. <code>parseInt</code> обрізає числа до цілих значень. Пробільні символи попереду та в кінці є дозволеними.</p> + +<p>Оскільки деякі числа використовують символ <code>e</code> у своєму рядковому представленні (наприклад, <strong><code>6.022e23</code></strong> для 6.022 × 10<sup>23</sup>), використання <code>parseInt</code> для обрізання чисел призведе до неочікуваних результатів при використанні на дуже великих чи дуже малих числах. <code>parseInt</code> не слід використовувати як заміну {{jsxref("Math.floor()")}}.</p> + +<p>Якщо <code>radix</code> дорівнює <code>undefined</code>, <code>0</code> або його значення невизначене, JavaScript припускає наступне:</p> + +<ol> + <li>Якщо вхідний рядок <code>string</code> починається з <code>"0x"</code> або <code>"0X"</code> (нуль, за яким іде мала чи велика літера X), вважається, що <var>radix</var> дорівнює 16, а решта рядка розбирається як шістнадцяткове число.</li> + <li>Якщо вхідний рядок <code>string</code> починається з <code>"0"</code> (нуль), вважається, що <var>radix</var> дорівнює <code>8</code> (вісімкова система) або <code>10</code> (десяткова). Яку саме основу буде обрано, залежить від реалізації. ECMAScript 5 пояснює, що <em>має</em> використовуватись <code>10</code> (десяткова система), але ще не усі переглядачі це підтримують. З цієї причини <strong>завжди вказуйте <code><var>radix</var></code> при використанні <code>parseInt</code></strong>.</li> + <li>Якщо вхідний рядок <code>string</code> починається з будь-якого іншого значення, основа дорівнює <code>10</code> (десяткова).</li> +</ol> + +<p>Якщо перша літера не може бути перетворена на число, <code>parseInt</code> вертає <code>NaN</code>.</p> + +<p>Для арифметичних цілей, значення <code>NaN</code> не є числом в жодній системі числення. Ви можете викликати функцію {{jsxref("isNaN")}}, щоб визначити, чи результат <code>parseInt</code> дорівнює <code>NaN</code>. Якщо <code>NaN</code> передається у арифметичні операції, результатом операції також буде <code>NaN</code>.</p> + +<p>Щоб перетворити число на його рядковий літерал у певній системі числення, використовуйте <code><em>вашеЧисло</em>.toString(radix)</code>.</p> + +<div class="blockIndicator warning"> +<p><strong>Застереження щодо {{jsxref("BigInt")}}</strong>: <code>parseInt</code> перетворює {{jsxref("BigInt")}} на {{jsxref("Число", "Number")}} та в процесі втрачає точність, оскільки нечислові значення в кінці аргументу, в тому числі "n", відкидаються.</p> +</div> + +<h3 id="Вісімкові_інтерпретації_без_значення_radix">Вісімкові інтерпретації без значення radix</h3> + +<p>Хоча це не схвалюється у ECMAScript 3 та заборонене у ECMAScript 5, багато реалізацій інтерпретують числові рядки, що починаються з <code>0</code>, як вісімкові. Наступне може перетворитись на вісімковий результат, а може й на десятковий. <strong>Завжди вказуйте <code><var>radix</var></code>, щоб запобігти цій ненадійній поведінці.</strong></p> + +<pre class="brush: js notranslate">parseInt('0e0') // 0 +parseInt('08') // 0, бо '8' не вісімкова цифра.</pre> + +<p>Специфікація ECMAScript 5 функції <code>parseInt</code> більше не дозволяє реалізаціям сприймати рядки, що починаються з символу <code>0</code>, як вісімкові значення.</p> + +<p>ECMAScript 5 зазначає:</p> + +<blockquote> +<p>Функція <code>parseInt</code> створює цілочисельне значення, продиктоване інтерпретацією вмісту рядкового аргументу у відповідності до вказаної основи системи числення. Пробільний символ на початку рядка ігнорується. Якщо основа дорівнює <code>undefined</code> або <code>0</code>, вона вважається рівною <code>10</code>, окрім випадків, коли число починається з пар символів <code>0x</code> або <code>0X</code>, в такому випадку основа вважається рівною <code>16</code>.</p> +</blockquote> + +<p>Це відрізняється від ECMAScript 3, де вісімкова інтерпретація просто <em>не схвалюється</em> (але дозволена).</p> + +<p>У багатьох реалізаціях ця поведінка не адаптована станом на 2013 рік. І, оскільки старші веб-переглядачі мають підтримуватись, <strong>завжди вказуйте значення radix</strong>.</p> + +<h3 id="Більш_строга_функція_розбору">Більш строга функція розбору</h3> + +<p>Іноді корисно мати більш строгий спросіб розбору цілих чисел.</p> + +<p>Регулярні вирази можуть стати в пригоді:</p> + +<pre class="brush: js notranslate">function filterInt(value) { + if (/^[-+]?(\d+|Infinity)$/.test(value)) { + return Number(value) + } else { + return NaN + } +} + +console.log(filterInt('421')) // 421 +console.log(filterInt('-421')) // -421 +console.log(filterInt('+421')) // 421 +console.log(filterInt('Infinity')) // Infinity +console.log(filterInt('421e+0')) // NaN +console.log(filterInt('421hop')) // NaN +console.log(filterInt('hop1.61803398875')) // NaN +console.log(filterInt('1.61803398875')) // NaN</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_parseInt">Використання parseInt</h3> + +<p>Усі наступні приклади повертають <code>15</code>:</p> + +<pre class="brush: js notranslate">parseInt('0xF', 16) +parseInt('F', 16) +parseInt('17', 8) +parseInt(021, 8) +parseInt('015', 10) // але `parseInt(015, 10)` поверне 13 +parseInt(15.99, 10) +parseInt('15,123', 10) +parseInt('FXX123', 16) +parseInt('1111', 2) +parseInt('15 * 3', 10) +parseInt('15e2', 10) +parseInt('15px', 10) +parseInt('12', 13) +</pre> + +<p>Усі наступні приклади повертають <code>NaN</code>:</p> + +<pre class="brush: js notranslate">parseInt('Привіт', 8) // Зовсім не число +parseInt('546', 2) // Числа, інші, ніж 0 чи 1, недозволені у двійковій системі +</pre> + +<p>Усі наступні приклади повертають <code>-15</code>:</p> + +<pre class="brush: js notranslate">parseInt('-F', 16) +parseInt('-0F', 16) +parseInt('-0XF', 16) +parseInt(-15.1, 10) +parseInt('-17', 8) +parseInt('-15', 10) +parseInt('-1111', 2) +parseInt('-15e1', 10) +parseInt('-12', 13) +</pre> + +<p>Усі наступні приклади повертають <code>4</code>:</p> + +<pre class="brush: js notranslate">parseInt(4.7, 10) +parseInt(4.7 * 1e22, 10) // Дуже велике число стає 4 +parseInt(0.00000000000434, 10) // Дуже маленьке число стає 4 +</pre> + +<p>Якщо число більше за 1e+21 (включно) або менше за 1e-7 (включно), метод поверне <code>1</code>. (при використанні основи 10).</p> + +<pre class="brush: js notranslate">parseInt(0.0000001,10); +parseInt(0.000000123,10); +parseInt(1e-7,10); +parseInt(1000000000000000000000,10); +parseInt(123000000000000000000000,10); +parseInt(1e+21,10);</pre> + +<p>Наступний приклад повертає <code>224</code>:</p> + +<pre class="brush: js notranslate">parseInt('0e0', 16) +</pre> + +<p>Значення {{jsxref("BigInt")}} втрачають точність:</p> + +<pre class="brush: js notranslate">parseInt(900719925474099267n) +// 900719925474099300</pre> + +<p>parseInt не працює з <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Числові_роздільники">числовими роздільниками</a>:</p> + +<pre class="brush: js notranslate">parseInt('123_456'); +// 123 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.parseInt")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Number.toString()")}}</li> + <li>{{jsxref("Object.valueOf")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/all/index.html b/files/uk/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..156b5f499f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,232 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Promise.all()</code></strong> повертає єдиний {{jsxref("Promise","проміс")}}, який виконується, коли усі проміси, передані у вигляді ітерабельного об'єкта, були виконані, або коли ітерабельний об'єкт не містить жодного проміса. Він відхиляється з причиною першого відхиленого проміса.</p> + +<p>Зазвичай використовується після того, як були запущені асинхронні задачі, що виконуються конкурентно, та були створені проміси для їхніх результатів, щоб мати змогу зачекати, доки усі задачі не будуть виконані.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">Ітерабельний об'єкт</a>, такий як {{jsxref("Array")}}.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<ul> + <li><strong>Вже вирішений</strong> {{jsxref("Promise", "проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> є порожнім.</li> + <li><strong>Асинхронно вирішений</strong> {{jsxref("Promise","проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> не містить промісів. Зауважте, що Google Chrome 58 у цьому випадку повертає <strong>вже вирішений</strong> проміс.</li> + <li>{{jsxref("Promise","Проміс")}} <strong>у стані очікування</strong> у всіх інших випадках. Цей повернений проміс далі вирішується/відхиляється <strong>асинхронно</strong> (як тільки стек стане порожнім), коли усі проміси у переданому <var>ітерабельному об'єкті</var> будуть вирішені, або якщо будь-який з промісів буде відхилено. Дивіться приклад щодо "Асинхронності або синхронності Promise.all" нижче. Повернені значення будуть розташовані у порядку, в якому були передані проміси, незалежно від порядку завершення.</li> +</ul> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод може бути корисним для збирання результатів множини промісів.</p> + +<h3 id="Виконання">Виконання</h3> + +<p>Повернений проміс виконується з масивом, що містить <strong>усі </strong>значення <var>ітерабельного об'єкта,</var> переданого в якості аргумента (також значення, що не є промісами).</p> + +<ul> + <li>Якщо був переданий порожній <var>ітерабельний об'єкт</var>, тоді цей метод вертає (синхронно) вже вирішений проміс.</li> + <li>Якщо усі передані проміси виконуються, або це не проміси, проміс, повернений <code>Promise.all</code>, виконується асинхронно.</li> +</ul> + +<h3 id="Відхилення">Відхилення</h3> + +<p>Якщо будь-який з переданих промісів відхиляється, <code>Promise.all</code> асинхронно відхиляється зі значенням відхиленого проміса, незалежно від того, чи були вирішені інші проміси.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Promise.all">Використання <code>Promise.all</code></h3> + +<p><code>Promise.all</code> чекає на усі виконання (або на перше відхилення).</p> + +<pre class="brush: js">var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve("foo"); + }, 100); +}); + +Promise.all([p1, p2, p3]).then(values => { + console.log(values); // [3, 1337, "foo"] +});</pre> + +<p>Якщо <var>ітерабельний об'єкт</var> містить значення, що не є промісами, вони будуть проігноровані, але все одно міститимуться у поверненому масиві проміса (якщо проміс виконається):</p> + +<pre class="brush: js">// рахуватиметься, ніби передано порожній ітерабельний об'єкт, отже, він виконається +var p = Promise.all([1,2,3]); +// рахуватиметься, ніби переданий ітерабельний об'єкт містить лише вирішений проміс зі значенням "444", отже, він виконається +var p2 = Promise.all([1,2,3, Promise.resolve(444)]); +// рахуватиметься, ніби переданий ітерабельний об'єкт містить лише відхилений проміс зі значенням "555", отже, він буде відхилений +var p3 = Promise.all([1,2,3, Promise.reject(555)]); + +// використовуючи setTimeout, ми можемо виконати код після того, як стек стане порожнім +setTimeout(function() { + console.log(p); + console.log(p2); + console.log(p3); +}); + +// виводить +// Promise { <state>: "fulfilled", <value>: Array[3] } +// Promise { <state>: "fulfilled", <value>: Array[4] } +// Promise { <state>: "rejected", <reason>: 555 }</pre> + +<h3 id="Асинхронність_або_синхронність_Promise.all">Асинхронність або синхронність <code>Promise.all</code></h3> + +<p>Наступний приклад демонструє асинхронність (або синхронність, якщо передано порожній <var>ітерабельний об'єкт</var>) <code>Promise.all</code>:</p> + +<pre class="brush: js">// ми передаємо в якості аргумента масив вже вирішених промісів, +// щоб запустити Promise.all якомога швидше +var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.all(resolvedPromisesArray); +// негайно виводимо значення p +console.log(p); + +// використовуючи setTimeout, ми можемо виконати код після того, як стек стане порожнім +setTimeout(function() { + console.log('стек тепер порожній'); + console.log(p); +}); + +// виводить, в порядку: +// Promise { <state>: "pending" } +// стек тепер порожній +// Promise { <state>: "fulfilled", <value>: Array[2] } +</pre> + +<p>Те саме відбувається, якщо <code>Promise.all</code> відхиляється:</p> + +<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)]; +var p = Promise.all(mixedPromisesArray); +console.log(p); +setTimeout(function() { + console.log('стек тепер порожній'); + console.log(p); +}); + +// виводить +// Promise { <state>: "pending" } +// стек тепер порожній +// Promise { <state>: "rejected", <reason>: 44 } +</pre> + +<p><code>Promise.all</code> вирішується синхронно <strong>лише тоді</strong>, коли переданий <var>ітерабельний об'єкт</var> є порожнім:</p> + +<pre class="brush: js">var p = Promise.all([]); // буде негайно вирішений +// значення, що не є промісами, будуть проігноровані, але обчислення відбуватиметься асинхронно +var p2 = Promise.all([1337, "привіт"]); +console.log(p); +console.log(p2) +setTimeout(function() { + console.log('стек тепер порожній'); + console.log(p2); +}); + +// виводить +// Promise { <state>: "fulfilled", <value>: Array[0] } +// Promise { <state>: "pending" } +// стек тепер порожній +// Promise { <state>: "fulfilled", <value>: Array[2] }</pre> + +<h3 id="Швидке_відхилення_у_Promise.all">Швидке відхилення у <code>Promise.all</code></h3> + +<p><code>Promise.all</code> відхиляється, якщо будь-який з його елементів було відхилено. Наприклад, якщо ви передаєте чотири проміси, які вирішуються після затримки, та один проміс, який негайно відхиляється, тоді <code>Promise.all</code> буде негайно відхилено.</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('один'), 1000); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(() => resolve('два'), 2000); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(() => resolve('три'), 3000); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(() => resolve('чотири'), 4000); +}); +var p5 = new Promise((resolve, reject) => { + reject(new Error('відхилено')); +}); + + +// Використовуємо .catch: +Promise.all([p1, p2, p3, p4, p5]) +.then(values => { + console.log(values); +}) +.catch(error => { + console.error(error.message) +}); + +//Виведе: +//"відхилено" + +</pre> + +<p>Цю поведінку можливо змінити, обробивши можливі відхилення:</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('p1_відкладене_вирішення'), 1000); +}); + +var p2 = new Promise((resolve, reject) => { + reject(new Error('p2_негайне_відхилення')); +}); + +Promise.all([ + p1.catch(error => { return error }), + p2.catch(error => { return error }), +]).then(values => { + console.log(values[0]) // "p1_відкладене_вирішення" + console.error(values[1]) // "Error: p2_негайне_відхилення" +}) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.all")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.race()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html new file mode 100644 index 0000000000..739dafbb96 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html @@ -0,0 +1,67 @@ +--- +title: Promise.allSettled() +slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +tags: + - JavaScript + - Promise + - allSettled + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +--- +<p>{{JSRef}}</p> + +<p>Метод <code><strong>Promise.allSettled()</strong></code> повертає проміс, який вирішується після того, як усі надані проміси були або вирішені, або відхилені, з масивом об'єктів, що містять результат кожного проміса.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>Promise</em>.allSettled(<em>iterable</em>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">Ітерабельний об'єкт</a>, такий, як {{jsxref("Array")}}, кожен елемент якого є об'єктом <code>Promise</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("Promise")}} у стані <strong>очікування</strong>, який буде <strong>асинхронно</strong> виконаний, як тільки кожен проміс у вказаному наборі промісів буде завершений, або успішним виконанням, або будучи відхиленим. В цей момент обробнику поверненого проміса передається масив, що містить результат для кожного проміса з початкового набору промісів.</p> + +<p>У кожного об'єкта результату присутній рядок <code>status</code> (статус). Якщо статус дорівнює <code>fulfilled</code> (виконаний), тоді присутній параметр <code>value</code> (значення). Якщо статус дорівнює <code>rejected</code> (відхилений), тоді присутній параметр <code>reason</code> (причина). Значення (або причина) відображає значення, з яким кожен проміс був виконаний (або відхилений).</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td><a href="https://tc39.es/proposal-promise-allSettled/#sec-promise.allsettled"><code>Promise.allSettled()</code> (TC39 Stage 4 Draft)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p> + +<h3 id="Хід_реалізації">Хід реалізації</h3> + +<p>Наведена таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p> + +<div>{{EmbedTest262ReportResultsTable("Promise.allSettled")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Проміси</a></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li> + <li><a href="/uk/docs/Learn/JavaScript/Asynchronous/Promises">Витончене асинхронне програмування за допомогою промісів</a></li> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.all()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/any/index.html b/files/uk/web/javascript/reference/global_objects/promise/any/index.html new file mode 100644 index 0000000000..3e450db558 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/any/index.html @@ -0,0 +1,86 @@ +--- +title: Promise.any() +slug: Web/JavaScript/Reference/Global_Objects/Promise/any +tags: + - JavaScript + - Promise + - Експериментальний + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any +--- +<div>{{JSRef}}</div> + +<p><code>Promise.any()</code> приймає ітерабельний об'єкт з об'єктами {{JSxRef("Promise")}} та, як тільки один з промісів виконується, вертає єдиний проміс, який вирішується зі значенням цього проміса. Якщо жодний проміс не виконався (якщо усі надані проміси були відхилені), тоді повернений проміс буде відхилено з об'єктом, який досі є предметом обговорення: або масив причин відхилення, або {{JSxRef("AggregateError")}}, новий підклас {{JSxRef("Error")}}, який поєднує окремі помилки. Найголовніше, цей метод є протилежністю методу {{JSxRef("Promise.all()")}}.</p> + +<div class="blockIndicator warning"> +<p><strong>Застереження!</strong> Метод <code>Promise.any()</code> є експериментальним та не повністю підтримується усіма переглядачами. Він наразі на стадії <a href="https://github.com/tc39/proposal-promise-any" rel="external">TC39 Candidate stage (стадія 3)</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre>Promise.any(<var>iterable</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">Ітерабельний об'єкт</a>, такий як {{JSxRef("Array")}}.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<ul> + <li><strong>Вже вирішений</strong> {{JSxRef("Promise","проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> є порожнім.</li> + <li><strong>Асинхронно вирішений</strong> {{JSxRef("Promise","проміс")}}, якщо переданий <var>ітерабельний об'єкт</var> не містить промісів.</li> + <li>{{JSxRef("Promise","Проміс")}} <strong>у стані очікування</strong> у всіх інших випадках. Цей повернений проміс далі вирішується/відхиляється <strong>асинхронно</strong> (як тільки стек стане порожнім), коли будь-який з промісів у переданому <var>ітерабельному об'єкті</var> буде вирішено, або якщо усі проміси буде відхилено.</li> +</ul> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод корисний для повернення першого проміса, який виконується. Він завершується після виконання проміса, тому не очікує на завершення інших промісів, як тільки його знаходить. На відміну від {{JSxRef("Promise.all()")}}, який вертає <em>масив</em> вирішених значень, ми отримуємо лише одне вирішене значення (за умови, що принаймні один проміс вирішується). Це може бути вигідно, якщо нам потрібно, щоб лише один проміс було вирішено, і нам байдуже, який саме. Також, на відміну від {{JSxRef("Promise.race()")}}, який вертає перше <em>встановлене</em> значення, цей метод вертає перше <em>вирішене</em> значення. Цей метод ігноруватиме усі відхилені проміси до першого вирішеного проміса.</p> + +<h3 id="Виконання">Виконання</h3> + +<p>Якщо будь-який з переданих промісів виконається, повернений проміс асинхронно виконується зі значенням виконаного проміса, незалежно від того, чи були інші проміси виконані чи відхилені.</p> + +<ul> + <li>Якщо був переданий порожній <var>ітерабельний об'єкт</var>, тоді цей метод вертає (синхронно) вже вирішений проміс.</li> + <li>Якщо будь-який з переданих промісів виконується, або передано не проміси, проміс, повернений <code>Promise.any</code> виконується асинхронно.</li> +</ul> + +<h3 id="Відхилення">Відхилення</h3> + +<p>Якщо усі передані проміси було відхилено, <code>Promise.any</code> асинхронно відхиляється з одним з двох варіантів (щодо яких ще не дійшли згоди): </p> + +<ul> + <li>масив, що містить <strong>усі </strong>причини відхилень <var>ітерабельного об'єкта</var>, переданого в якості аргумента, або</li> + <li>об'єкт {{JSxRef("AggregateError")}}, що розширює {{JSxRef("Error")}} та містить вказівник на масив винятків.</li> +</ul> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td><a href="https://tc39.es/proposal-promise-any/#sec-promise.any">ESNext Promise.any Proposal</a></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Promise.any")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Promise")}}</li> + <li>{{JSxRef("Promise.allSettled()")}}</li> + <li>{{JSxRef("Promise.all()")}}</li> + <li>{{JSxRef("Promise.race()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/catch/index.html b/files/uk/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..7e84771513 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,189 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>catch()</strong></code> вертає {{jsxref("Promise","проміс")}} та має справу лише з відхиленнями. Він поводиться так само, як виклик {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (насправді, <code>obj.catch(onRejected)</code> здійснює внутрішній виклик <code>obj.then(undefined, onRejected)</code>). Це означає, що ви маєте надати функцію <code>onRejected</code>, навіть якщо хочете отримати повернене значення <code>undefined</code> - наприклад, <code>obj.catch(() => {})</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>p</var>.catch(<var>onRejected</var>); + +p.catch(function(<var>reason</var>) { + // відхилення +}); +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>onRejected</var></code></dt> + <dd>{{jsxref("Function","Функція")}}, що викликається, коли об'єкт <code>Promise</code> відхилено. Ця функція має один аргумент: + <dl> + <dt><code><var>reason</var></code></dt> + <dd>Причина відхилення.</dd> + </dl> + Проміс, повернений методом <code>catch()</code>, відхиляється, якщо <code>onRejected</code> викидає помилку або повертає проміс, що сам є відхиленим; інакше, він вирішується.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Здійснює внутрішній виклик <code>Promise.prototype.then</code> на об'єкті, на якому був викликаний, передаючи параметри <code>undefined</code> та отриманий обробник <code>onRejected</code>. Повертає значення цього виклику, тобто, {{jsxref("Promise")}}.</p> + +<div class="warning"> +<p>Зауважте, що наведені нижче приклади викидають екземпляри <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>. Це вважається гарною практикою у порівнянні з викиданням рядків: Інакше та частина, що здійснює перехоплення, була б змушена робити перевірки, щоб дізнатись, чи є аргумент рядком, чи помилкою, і ви могли б втратити цінну інформацію, таку як траси стеків.</p> +</div> + +<p><strong>Демонстрація внутрішнього виклику:</strong></p> + +<pre class="brush: js">// заміщуємо початковий Promise.prototype.then/catch, щоб додати трохи логів +(function(Promise){ + var originalThen = Promise.prototype.then; + var originalCatch = Promise.prototype.catch; + + Promise.prototype.then = function(){ + console.log('> > > > > > викликано .then на %o з аргументами: %o', this, arguments); + return originalThen.apply(this, arguments); + }; + Promise.prototype.catch = function(){ + console.error('> > > > > > викликано .catch на %o з аргументами: %o', this, arguments); + return originalCatch.apply(this, arguments); + }; + +})(this.Promise); + + + +// викликаємо catch на вже вирішеному промісі +Promise.resolve().catch(function XXX(){}); + +// виводить: +// > > > > > > викликано .catch на Promise{} з аргументами: Arguments{1} [0: function XXX()] +// > > > > > > викликано .then на Promise{} з аргументами: Arguments{2} [0: undefined, 1: function XXX()] +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>catch</code> використовується для обробки помилок у композиції промісів. Оскільки він вертає {{jsxref("Promise","проміс")}}, його <a href="/uk/docs/Web/JavaScript/Guide/Using_promises#Chaining_after_a_catch">можна додавати в ланцюги</a> так само, як метод {{jsxref("Promise.then", "then()")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_та_ланцюгування_метода_catch">Використання та ланцюгування метода <code>catch</code></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve('Успіх!'); +}); + +p1.then(function(value) { + console.log(value); // "Успіх!" + throw new Error('о, ні!'); +}).catch(function(e) { + console.error(e.message); // "о, ні!" +}).then(function(){ + console.log('після catch ланцюг відновлено'); +}, function () { + console.log('Не запуститься через catch'); +}); + +// Наступний код поводиться так само +p1.then(function(value) { + console.log(value); // "Успіх!" + return Promise.reject('о, ні!'); +}).catch(function(e) { + console.error(e); // "о, ні!" +}).then(function(){ + console.log('після catch ланцюг відновлено'); +}, function () { + console.log('Не запуститься через catch'); +}); +</pre> + +<h3 id="Підводні_камені_при_викиданні_помилок">Підводні камені при викиданні помилок</h3> + +<pre class="brush: js">// Викидання помилок викличе метод catch у більшості випадків +var p1 = new Promise(function(resolve, reject) { + throw new Error('Ой-ой!'); +}); + +p1.catch(function(e) { + console.error(e); // "Ой-ой!" +}); + +// Помилки, викинуті всередині асинхронних функцій, поводитимуться, як неперехоплені +var p2 = new Promise(function(resolve, reject) { + setTimeout(function() { + throw new Error('Неперехоплений виняток!'); + }, 1000); +}); + +p2.catch(function(e) { + console.error(e); // Це ніколи не виконається +}); + +// Помилки, викинуті після виклику resolve, глушаться +var p3 = new Promise(function(resolve, reject) { + resolve(); + throw new Error('Заглушений виняток!'); +}); + +p3.catch(function(e) { + console.error(e); // Це ніколи не виконається +});</pre> + +<h3 id="Якщо_він_вирішений">Якщо він вирішений</h3> + +<pre class="brush: js">//Створюємо проміс, що не викличе onReject +var p1 = Promise.resolve("виклик наступного"); + +var p2 = p1.catch(function (reason) { + //Це ніколи не буде викликано + console.error("перехоплено p1!"); + console.error(reason); +}); + +p2.then(function (value) { + console.log("onFulfilled наступного проміса"); /* onFulfilled наступного проміса */ + console.log(value); /* виклик наступного */ +}, function (reason) { + console.log("onRejected наступного проміса"); + console.log(reason); +});</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.catch")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/finally/index.html b/files/uk/web/javascript/reference/global_objects/promise/finally/index.html new file mode 100644 index 0000000000..f67c7fb1e3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/finally/index.html @@ -0,0 +1,103 @@ +--- +title: Promise.prototype.finally() +slug: Web/JavaScript/Reference/Global_Objects/Promise/finally +tags: + - JavaScript + - Promise + - finally + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>finally()</strong></code> вертає {{jsxref("Promise")}}. Коли проміс встановлено, тобто, або виконано, або відхилено, виконується вказана функція зворотного виклику. Це надає можливість виконати код незалежно від того, чи був проміс успішно виконаний, чи відхилений, як тільки проміс було оброблено.</p> + +<p>Це допомагає уникати дублювання коду у обробниках проміса {{jsxref("Promise.then", "then()")}} та {{jsxref("Promise.catch", "catch()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>p.finally(onFinally)</var>; + +p.finally(function() { + // встановлений (виконаний або відхилений) +}); +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>onFinally</code></dt> + <dd>{{jsxref("Function", "Функція")}}, що викликається, коли <code>Promise</code> встановлений.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Вертає {{jsxref("Promise","проміс")}}, чиєму обробнику <code>finally</code> присвоєна вказана функція <code>onFinally</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>finally()</code> може бути корисним, якщо ви хочете виконати певну обробку або прибирання, як тільки проміс встановлено, незалежно від результату.</p> + +<p>Метод <code>finally()</code> дуже схожий на виклик <code>.then(onFinally, onFinally)</code>, але є пара відмінностей:</p> + +<ul> + <li>Створюючи вбудовану функцію, ви можете передати її один раз, замість того, щоб або оголошувати її двічі, або створювати для неї змінну</li> + <li>Зворотній виклик <code>finally</code> не отримує жодних аргументів, оскільки не існує надійних методів визначити, чи був проміс виконаний, чи відхилений. Цей випадок використання розрахований саме на те, що вам <em>неважлива</em> причина відхилення чи повернене значення, і тому немає необхідності їх надавати. Отже, для прикладу: + <ul> + <li>На відміну від <code>Promise.resolve(2).then(() => {}, () => {})</code> (який буде вирішений з <code>undefined</code>), <code>Promise.resolve(2).finally(() => {})</code> буде вирішений з <code>2</code>.</li> + <li>Також, на відміну від <code>Promise.reject(3).then(() => {}, () => {})</code> (який буде виконаний з <code>undefined</code>), <code>Promise.reject(3).finally(() => {})</code> буде відхилений з <code>3</code>.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Заувага:</strong> <code>throw</code> (або повернення відхиленого проміса) у зворотному виклику <code>finally</code> відхилить новий проміс з причиною відхилення, вказаною у виклику <code>throw</code>.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">let isLoading = true; + +fetch(myRequest).then(function(response) { + var contentType = response.headers.get("content-type"); + if(contentType && contentType.includes("application/json")) { + return response.json(); + } + throw new TypeError("От халепа, немає JSON!"); + }) + .then(function(json) { /* обробити JSON далі */ }) + .catch(function(error) { console.error(error); /* цей рядок може викинути помилку, наприклад, якщо console = {} */ }) + .finally(function() { isLoading = false; }); + +</pre> + +<div class="hidden"> +<p>Будь ласка, не додавайте поліфіли у статті MDN. Більше інформації дивіться за посиланням: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.finally")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/index.html b/files/uk/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..1f18c8bd76 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,232 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript 2015 + - JavaScript + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <strong><code>Promise</code></strong> відображає остаточне завершення (або неуспіх) асинхронної операції та значення, яке вона повертає.</p> + +<p>Щоб дізнатись, як працюють проміси та як їх можна використовувати, радимо вам спочатку прочитати статтю <a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a>.</p> + +<h2 id="Опис">Опис</h2> + +<p><code><strong>Promise</strong></code> - це проксі для значення, яке може бути невідомим на момент створення проміса. Це дозволяє зв'язувати обробники з кінцевим успішним значенням чи причиною неуспіху асинхронних дій. Таким чином, асинхронні методи повертають значення, як синхронні методи: замість того, щоб негайно повернути кінцеве значення, асинхронний метод повертає <em>проміс</em>, щоб надати значення в певний момент у майбутньому.</p> + +<p>Об'єкт <code>Promise</code> може знаходитись в одному з цих станів:</p> + +<ul> + <li><em>pending (у стані очікування)</em>: початковий стан, ані виконаний, ані відхилений.</li> + <li><em>fulfilled (виконаний)</em>: означає, що операція завершилася вдало.</li> + <li><em>rejected (відхилений)</em>: означає, що операція була неуспішною.</li> +</ul> + +<p>Проміс у стані очікування може стати або виконаним (<em>fulfilled</em>) з певним значенням, або відхиленим (<em>rejected</em>) з причиною відхилення (помилкою). Коли щось із цього відбувається, викликаються відповідні обробники, що ставляться в чергу методом об'єкта <code>then</code>. (Якщо проміс вже був виконаний чи відхилений ще до моменту приєднання відповідного обробника, то обробник буде викликаний, таким чином не відбувається "стану гонки" між завершенням асинхронної операції та приєднанням її обробників)</p> + +<p>Оскільки методи <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> та <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> повертають проміси, їх можна з'єднувати в ланцюжки.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17088/promises.png" style="height: 297px; width: 801px;"></p> + +<div class="note"> +<p><strong>Не варто плутати з</strong><span lang="uk"><span><strong>:</strong> Декілька інших мов мають механізми лінивих обчислень та відкладених розрахунків, які також називаються "promises" - наприклад,</span> Scheme. <span>Проміси у JavaScript відображають процеси, які вже відбуваються і які можуть бути з'єднані в ланцюги з функціями зворотного виклику.</span> <span>Якщо вам потрібне ліниве обчислення виразу, розгляньте </span></span><a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a><span lang="uk"><span> без аргументів: <code>f = () => вираз</code> для створення лінивого виразу, та <code>f()</code> для обчислення.</span></span></p> +</div> + +<div class="note"> +<p><strong>Заувага</strong>: Проміс називають <em>встановленим</em> (<em>settled)</em>, якщо він або виконаний, або відхилений, але не знаходиться у стані очікування. Ви також почуєте термін <em>вирішений</em> (<em>resolved</em>) щодо промісів - він означає, що проміс встановлений, або ж "зафіксований", щоб відповідати стану іншого проміса. Стаття <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and Fates</a> містить більше подробиць щодо термінології промісів.</p> +</div> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt><code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise">Promise()</a></code></dt> + <dd>Конструктор переважно використовується для загортання функцій, які самі не підтримують проміси.</dd> +</dl> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd><span id="result_box" lang="uk"><span>Значення довжини, завжди дорівнює 1 (кількість аргументів конструктора)</span></span>.</dd> + <dt><code>Promise.prototype</code></dt> + <dd>Прототип для конструктора <code>Promise</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Чекає, доки усі проміси не будуть вирішені, або поки будь-який з промісів не буде відхилений.</dd> + <dd><span id="result_box" lang="uk"><span>Якщо повернений проміс вирішується, він вирішується із сукупним масивом значень вирішених промісів, у тому ж порядку, в якому вони визначені в ітерабельному об'єкті промісів.</span> </span></dd> + <dd><span lang="uk"><span>В разі відхилення, він відхиляється з причиною з першого відхиленого проміса у ітерабельному об'єкті.</span></span></dd> + <dt>{{JSxRef("Promise.allSettled", "Promise.allSettled(iterable)")}}</dt> + <dd>Чекає, доки усі проміси не будуть встановлені (кожен має бути або вирішений, або відхилений).</dd> + <dd>Повертає проміс, який вирішується після того, як усі надані проміси були або вирішені, або відхилені, з масивом об'єктів, які описують результат кожного проміса.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Чекає, доки будь-який з промісів не буде або вирішений, або відхилений.</dd> + <dd>Якщо повернений проміс вирішений, він вирішується зі значенням першого проміса з ітерабельного об'єкта, який був вирішений.</dd> + <dd><span id="result_box" lang="uk"><span>Якщо він відхилений, він відхиляється з причиною першого відхиленого проміса.</span></span></dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.відхилено", "Promise.reject(reason)")}}</dt> + <dd>Повертає новий об'єкт <code>Promise</code>, відхилений з наданою причиною.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd><span id="result_box" lang="uk"><span>Повертає новий об'єкт <code>Promise</code>, який вирішується з наданим значенням.</span> <span>Якщо значенням є промісоподібний об'єкт (такий, що має метод <code>then</code>), то повернений проміс буде його "дотримуватись", приймаючи його кінцевий стан; у іншому випадку повернений проміс буде виконаний з наданим значенням</span><span>.</span></span></dd> + <dd>Загалом, якщо ви не знаєте, є значення промісом чи ні, використайте {{JSxRef("Promise.resolve", "Promise.resolve(value)")}} та працюйте з поверненим значенням як з промісом.</dd> +</dl> + +<h2 id="Прототип_Promise">Прототип Promise</h2> + +<h3 id="Властивості_2">Властивості</h3> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>Вертає функцію, яка створила прототип екземпляра. Це за замовчуванням функція {{jsxref("Promise")}}.</dd> +</dl> + +<h3 id="Методи_2">Методи</h3> + +<dl> + <dt>{{jsxref("Promise.prototype.catch()")}}</dt> + <dd>Додає до проміса функцію зворотного виклику для обробки відхилення та вертає новий проміс, що вирішується з поверненим значенням цієї функції, коли вона викликається, або з початковим значенням виконання, якщо проміс, навпаки, виконається.</dd> + <dt>{{jsxref("Promise.prototype.then()")}}</dt> + <dd>Додає до проміса обробники виконання та відхилення та вертає новий проміс, що вирішується з поверненим значенням обробника, який викликався, або з початковим встановленим значенням, якщо проміс не оброблявся (тобто, якщо відповідний обробник <code>onFulfilled</code> чи <code>onRejected</code> не є функцією).</dd> + <dt>{{jsxref("Promise.prototype.finally()")}}</dt> + <dd>Додає до проміса обробник та вертає новий проміс, який вирішується, коли вирішується початковий проміс. Обробник викликається, коли проміс встановлений, тобто, або виконаний, або відхилений.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базовий_приклад">Базовий приклад</h3> + +<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) => { + // Викликаємо resolve(...), коли те, що ми робили асинхронно, успішно виконалось, і reject(...), якщо неуспішно. + // В цьому прикладі ми використовуємо setTimeout(...) для симуляції асинхронного коду. + // В житті ви, ймовірно, використовуватиме щось на кшталт XHR або HTML5 API. + setTimeout( function() { + resolve("Успіх!") // Є! Все пройшло добре! + }, 250) +}) + +myFirstPromise.then((successMessage) => { + // successMessage - це те, що ми передаємо у наведену вище функцію resolve(...). + // Це не обов'язково має бути рядок, але, якщо це повідомлення про успіх, то, мабуть, це буде він. + console.log("Є! " + successMessage) +});</pre> + +<h3 id="Ускладнений_приклад">Ускладнений приклад</h3> + +<div class="hidden"> +<pre class="brush: html"><button id="btn">Зробити проміс!</button> +<div id="log"></div></pre> +</div> + +<p>Цей маленький приклад демонструє механізм об'єкта <code>Promise</code>. Метод <code>testPromise()</code> викликається кожний раз, коли натискається кнопка <a href="/uk/docs/Web/HTML/Element/button" title="The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality."><code><button></code></a>. Він створює проміс, який буде виконаний з використанням <a href="/uk/docs/Web/API/Window/setTimeout" title="REDIRECT WindowTimers.setTimeout"><code>window.setTimeout()</code></a> з лічильником проміса (число, що стартує від 1) кожні 1-3 секунди, у випадковому порядку. Конструктор <code>Promise()</code> використовується для створення проміса.</p> + +<p>Виконання проміса логується просто, виконанням зворотного виклику через {{jsxref("Promise.prototype.then()","p1.then()")}}. Кілька логів демонструють, як синхронна частина методу відокремлюється від асинхронного завершення проміса.</p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + var thisPromiseCount = ++promiseCount; + + var log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Запуск (<small>Синхронний код запущено</small>)<br/>'); + + // Створюємо новий проміс: ми передаємо лічильник цього проміса, починаючи з 1 (після очікування 3с) + var p1 = new Promise( + // Функція вирішення викликається з можливістю вирішити або + // відхилити проміс + function(resolve, reject) { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Запуск проміса (<small>Асинхронний код запущено</small>)<br/>'); + // Це лише приклад для створення асинхронності + window.setTimeout( + function() { + // Ми виконуємо проміс! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // Визначаємо, що робити, коли проміс вирішено/виконано, викликом then(), + // а метод catch() визначає, що робити, якщо проміс відхилено. + p1.then( + // Залогувати значення виконання + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Проміс виконано (<small>Асинхронний код завершений</small>)<br/>'); + }) + .catch( + // Залогувати причину відхилення + function(reason) { + console.log('Обробити тут відхилений проміс ('+reason+').'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Проміс створено (<small>Синхронний код завершений</small>)<br/>'); +} +</pre> + +<div class="hidden"> +<pre class="brush: js">if ("Promise" in window) { + var btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "Живий приклад недоступний, оскільки ваш переглядач не підтримує інтерфейс об'єктів <code>Promise<code>."; +}</pre> +</div> + +<p>Цей приклад починається натисканням кнопки. Вам потрібен переглядач, що підтримує об'єкти <code>Promise</code>. Натиснувши кнопку кілька разів за короткий відрізок часу, ви навіть побачите, як різні проміси виконуються один після іншого.</p> + +<p>{{EmbedLiveSample("Ускладнений_приклад", "500", "200")}}</p> + +<h2 id="Завантаження_зображення_за_допомогою_XHR">Завантаження зображення за допомогою XHR</h2> + +<p>Інший простий приклад використання об'єктів <code>Promise</code> та <code><a href="/uk/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> - для завантаження зображення - доступний у репозиторії <a href="https://github.com/mdn/js-examples/tree/master/promises-test">promise-test</a> на MDN GitHub. Ви також можете <a href="https://mdn.github.io/js-examples/promises-test/">побачити його в дії</a>. Кожний крок супроводжується коментарями та дозволяє відслідкувати архітектуру Promise та XHR.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="https://github.com/anonyco/SPromiseMeSpeedJS/blob/master/README.md">Speed-polyfill to polyfill both promise availability and promise performance.</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/promise/index.html b/files/uk/web/javascript/reference/global_objects/promise/promise/index.html new file mode 100644 index 0000000000..574121ebba --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/promise/index.html @@ -0,0 +1,77 @@ +--- +title: Конструктор Promise() +slug: Web/JavaScript/Reference/Global_Objects/Promise/Promise +tags: + - JavaScript + - Promise + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/Promise +--- +<div>{{JSRef}}</div> + +<p>Конструктор <strong><code>Promise</code></strong> використовується переважно для того, щоб загортати функції, які не підтримують проміси початково.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html", "taller")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">new Promise(<var>executor</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>executor</code></dt> + <dd>Функція, яка передається з аргументами <code>resolve</code> та <code>reject</code>. Функція <code>executor</code> (виконавець) виконується негайно, реалізацією проміса, передаючи функції <code>resolve</code> та <code>reject</code> (виконавець викликається ще до того, як конструктор <code>Promise</code> повертає створений об'єкт). Функції <code>resolve</code> та <code>reject</code>, коли вони викликаються, відповідно, вирішують або відхиляють проміс. Виконавець, зазвичай, ініціює якісь асинхронні дії, і, як тільки вони завершуються, викликає або функцію <code>resolve</code>, щоб вирішити проміс, або відхиляє його в разі виникнення помилки. Якщо функція-виконавець викинула помилку, проміс відхиляється. Повернене значення виконавця ігнорується.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<p>Об'єкт <code>Promise</code> створюється за допомогою ключового слова <code>new</code> та свого конструктора. Цей конструктор приймає своїм аргументом функцію, що називається "функцією-виконавцем". Ця функція має приймати дві функції в якості параметрів. Перша з цих функцій (<code>resolve</code>) викликається, коли асинхронна задача завершується успішно та повертає результат задачі. Друга (<code>reject</code>) викликається, коли задача завершується неуспішно, та повертає причину невдачі, яка, зазвичай, є об'єктом помилки.</p> + +<pre class="brush: js; notranslate">const myFirstPromise = new Promise((resolve, reject) => { + // зробити щось асинхронне, що зрештою викличе або: + // + // resolve(someValue) // виконаний + // або + // reject("причина невдачі") // відхилений +}); +</pre> + +<p>Щоб надати функцію з функціональністю промісу, просто зробіть, щоб вона повертала проміс:</p> + +<pre class="brush: js; notranslate">function myAsyncFunction(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest() + xhr.open("GET", url) + xhr.onload = () => resolve(xhr.responseText) + xhr.onerror = () => reject(xhr.statusText) + xhr.send() + }); +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-constructor', 'Promise constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.Promise")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html b/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html new file mode 100644 index 0000000000..e558cdf02c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/prototype/index.html @@ -0,0 +1,69 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +tags: + - JavaScript + - Promise + - ДжаваСкріпт + - Проміс +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>Параметр <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> відображає прототип для конструктора {{jsxref("Promise")}} constructor.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Екземпляри {{jsxref("Promise")}} успадковуються від {{jsxref("Promise.prototype")}}. Ви можете використовувати прототип конструктора, щоб добавляти параметри або методи до всіх екземплярів <code>Promise</code>.</p> + +<h2 id="Параметри">Параметри</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>Повертає функцію, яка створила прототип екземпляра. Це є функція {{jsxref("Promise")}} по замовчуванню.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> + <dd>Добавляє колбек обробник відхилення проміса, і повертає новий проміс, який вирішується значенням, яке повертається з функції колбеку, якщо вона була викликана, або його початковий результат виконання, якщо даний проміс був виконаний.</dd> + <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> + <dd>Добавляє до проміса функції колбеки для випадків, коли проміс був виконаний (onFulfilled) і відхилений (onRejected) і повертає новий проміс, який вирішується значенням, яке було повернуто з onFulfilled функції колбеку, або з початковим значенням, яке було вирішено, коли даний проміс не був оброблений (тобто коли обробники <code>onFulfilled</code> або <code>onRejected</code> не є функцією).</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> + +<p>{{Compat("javascript/promise","Promise.prototype")}}</p> + +<h2 id="Дивитися_також">Дивитися також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/race/index.html b/files/uk/web/javascript/reference/global_objects/promise/race/index.html new file mode 100644 index 0000000000..c810db2cc0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/race/index.html @@ -0,0 +1,177 @@ +--- +title: Promise.race() +slug: Web/JavaScript/Reference/Global_Objects/Promise/race +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Promise.race()</strong></code> повертає проміс, який виконується чи відхиляється, як тільки один з промісів ітерабельного об'єкта буде виконаний чи відхилений, зі значеням або причиною з цього проміса.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</div> + +<p class="hidden">Початковий код до цього інтерактивного демо зберігаєтся в GitHub репозиторії. Якщо ви хочете внести свій вклад до проекту цього інтерактивного демо, будь ласка, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і надішліть нам запит на злиття.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>Promise.race(iterable)</var>;</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt>iterable</dt> + <dd>Ітерабельний об'єкт, наприклад, {{jsxref("Array")}}. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітерабельного_обєкта">ітерабельний об'єкт</a>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт {{jsxref("Promise")}} <strong>у стані очікування</strong>, який <strong>асинхронно</strong> видає значення першого проміса з наданого ітерабельного об'єкта, що виконується або відхиляється.</p> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>race</code> повертає об'єкт <code>Promise</code>, який встановлюється таким самим чином (і отримує таке ж значення), як і перший встановлений проміс ітерабельного об'єкта, переданого як аргумент.</p> + +<p>Якщо передано пустий ітерабельний об'єкт, повернений проміс буде вічно перебувати у стані очікування.</p> + +<p>Якщо ітерабельний об'єкт містить одне або більше значень, що не є промісами, та/або вже встановлений проміс, тоді <code>Promise.race</code> буде вирішено з першим таким значенням, знайденим в ітерабельному об'єкті.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Асинхронність_Promise.race"><font face="consolas, Liberation Mono, courier, monospace">Асинхронність <code>Promise.race</code></font></h3> + +<p>Цей приклад демострує асинхронність функції <code>Promise.race:</code></p> + +<pre class="brush: js">// ми передаємо в якості аргументу масив вже вирішених промісів, +// щоб запустити Promise.race якомога швидше +var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.race(resolvedPromisesArray); +// негайно виводимо значення p +console.log(p); + +// використовуючи setTimeout, ми можемо виконати код, коли стек стане порожнім +setTimeout(function(){ + console.log('тепер стек порожній'); + console.log(p); +}); + +// порядок виведення: +// Promise { <state>: "pending" } +// тепер стек порожній +// Promise { <state>: "fulfilled", <value>: 33 }</pre> + +<p>Пустий ітерабельний об'єкт спричиняє поверення проміса, який вічно знаходитиметься в стані очікування:</p> + +<pre class="brush: js">var foreverPendingPromise = Promise.race([]); +console.log(foreverPendingPromise); +setTimeout(function(){ + console.log('тепер стек порожній'); + console.log(foreverPendingPromise); +}); + +// порядок виведення: +// Promise { <state>: "pending" } +// тепер стек порожній +// Promise { <state>: "pending" } +</pre> + +<p>Якщо ітерабельний об'єкт містить одне або більше значень, що не є промісами, та/або вже встановлені проміси, тоді <code>Promise.race</code> буде вирішено з першим таким значенням, знайденим у масиві:</p> + +<pre class="brush: js">var foreverPendingPromise = Promise.race([]); +var alreadyResolvedProm = Promise.resolve(666); + +var arr = [foreverPendingPromise, alreadyResolvedProm, "не проміс"]; +var arr2 = [foreverPendingPromise, "не проміс", Promise.resolve(666)]; +var p = Promise.race(arr); +var p2 = Promise.race(arr2); + +console.log(p); +console.log(p2); +setTimeout(function(){ + console.log('тепер стек порожній'); + console.log(p); + console.log(p2); +}); + +// порядок виведення: +// Promise { <state>: "pending" } +// Promise { <state>: "pending" } +// тепер стек порожній +// Promise { <state>: "fulfilled", <value>: 666 } +// Promise { <state>: "fulfilled", <value>: "не проміс" } +</pre> + +<h3 id="Використання_Promise.race_–_приклади_з_setTimeout">Використання <code>Promise.race</code> – приклади з <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout</code></a></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + setTimeout(() => resolve('один'), 500); +}); +var p2 = new Promise(function(resolve, reject) { + setTimeout(() => resolve('два'), 100); +}); + +Promise.race([p1, p2]) +.then(function(value) { + console.log(value); // "два" + // Обидва вирішуються, але p2 швидший +}); + +var p3 = new Promise(function(resolve, reject) { + setTimeout(() => resolve('три'), 100); +}); +var p4 = new Promise(function(resolve, reject) { + setTimeout(() => reject(new Error('чотири')), 500); +}); + +Promise.race([p3, p4]) +.then(function(value) { + console.log(value); // "три" + // p3 швидший, тому він виконується +}, function(reason) { + // Не викликається +}); + +var p5 = new Promise(function(resolve, reject) { + setTimeout(() => resolve("п'ять"), 500); +}); +var p6 = new Promise(function(resolve, reject) { + setTimeout(() => reject(new Error('шість')), 100); +}); + +Promise.race([p5, p6]) +.then(function(value) { + // Не викликається +}, function(reason) { + console.log(reason); // "шість" + // p6 швидший, тому він відхиляється +});</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</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.Promise.race")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.all()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html b/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..88aeba5465 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,137 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Проміс + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Promise.resolve()</strong></code> повертає об'єкт {{jsxref("Promise")}}, вирішений з наданим значенням. Якщо значенням є проміс, то цей проміс буде повернено; якщо значенням є промісоподібний об'єкт (thenable) (такий, що має {{jsxref("Promise.then", "метод \"then\"")}}), то повернений проміс буде його "дотримуватись", приймаючи його кінцевий стан; у іншому випадку повернений проміс буде виконаний з наданим значенням. Функція вирівнює вкладені шари промісоподібних об'єктів (наприклад, проміс, що вирішується з промісом, який вирішується з чимось ще) у єдиний шар.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>Promise.resolve(value)</var>; +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt>value</dt> + <dd>Аргумент, з яким буде вирішений даний <code>Promise</code>. Також він може бути промісом або промісоподібним об'єктом.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Об'єкт {{jsxref("Promise")}}, вирішений з наданим значенням, або проміс, переданий в якості значення, якщо значення було промісом.</p> + +<h2 id="Опис">Опис</h2> + +<p>Статична функція <code>Promise.resolve</code> повертає вирішений об'єкт <code>Promise</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_статичного_методу_Promise.resolve">Використання статичного методу <code>Promise.resolve</code></h3> + +<pre class="brush: js">Promise.resolve('Success').then(function(value) { + console.log(value); // "Успіх" +}, function(value) { + // не викликається +}); +</pre> + +<h3 id="Вирішення_проміса_масивом">Вирішення проміса масивом</h3> + +<pre class="brush: js">var p = Promise.resolve([1,2,3]); +p.then(function(v) { + console.log(v[0]); // 1 +}); +</pre> + +<h3 id="Вирішення_проміса_іншим_промісом">Вирішення проміса іншим промісом</h3> + +<pre class="brush: js">var original = Promise.resolve(33); +var cast = Promise.resolve(original); +cast.then(function(value) { + console.log('значення: ' + value); +}); +console.log('original === cast ? ' + (original === cast)); + +// порядок виведення: +// original === cast ? true +// значення: 33</pre> + +<p>Перевернутий порядок логів спричинений тим фактом, що обробники <code>then</code> викликаються асинхронно. Дивіться, як працює <code>then</code> <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Значення_що_повертається">тут</a>.</p> + +<h3 id="Вирішення_промісоподібних_обєктів_та_викидання_помилок">Вирішення промісоподібних об'єктів та викидання помилок</h3> + +<pre class="brush: js">// Вирішення промісоподібного об'єкта +var p1 = Promise.resolve({ + then: function(onFulfill, onReject) { onFulfill('виконаний!'); } +}); +console.log(p1 instanceof Promise) // true, об'єкт передано у проміс + +p1.then(function(v) { + console.log(v); // "виконаний!" + }, function(e) { + // не викликається +}); + +// Промісоподібний об'єкт викидає помилку перед зворотнім викликом +// Проміс відхиляється +var thenable = { then: function(resolve) { + throw new TypeError('Помилка'); + resolve('Вирішення'); +}}; + +var p2 = Promise.resolve(thenable); +p2.then(function(v) { + // не викликається +}, function(e) { + console.log(e); // TypeError: Помилка +}); + +// Промісоподібний об'єкт викидає помилку після зворотного виклику +// Проміс вирішується +var thenable = { then: function(resolve) { + resolve('Вирішення'); + throw new TypeError('Помилка'); +}}; + +var p3 = Promise.resolve(thenable); +p3.then(function(v) { + console.log(v); // "Вирішення" +}, function(e) { + // не викликається +}); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.resolve")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/then/index.html b/files/uk/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..8cbcc884fc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,297 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>then()</strong></code> вертає об'єкт {{jsxref("Promise")}}. Він приймає два аргументи: функції зворотного виклику для випадків успішного та неуспішного проміса.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<div class="note"> +<p>Якщо один чи обидва аргументи пропущені, або надані не функції, тоді <code>then</code> не матиме обробників, але не згенерує помилок. Якщо <code>Promise</code>, на якому викликається <code>then</code>, приймає стан (<code>виконання</code> або <code>відхилення</code>), для якого <code>then</code> не має обробника, новий <code>Promise</code> створюється без додаткових обробників, просто приймаючи кінцевий стан оригінального проміса, на якому було викликано <code>then</code>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>p.then(onFulfilled[, onRejected])</var>; + +p.then(value => { + // виконання +}, reason => { + // відхилення +}); +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>onFulfilled</code> {{optional_inline}}</dt> + <dd>{{jsxref("Function","Функція")}}, що викликається, якщо <code>Promise</code> виконано. Ця функція має один аргумент, <code>значення виконання</code>. Якщо це не функція, вона внутрішньо замінюється на функцію "Identity" (вона повертає отриманий аргумент).</dd> + <dt><code>onRejected</code> {{optional_inline}}</dt> + <dd>{{jsxref("Function","Функція")}}, що викликається, якщо <code>Promise</code> відхилено. Ця функція має один аргумент, <code>причина відхилення</code>. Якщо це не функція, вона внутрішньо замінюється на функцію "Thrower" (вона викидає помилку, яку отримала в якості аргумента).</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Як тільки {{jsxref("Promise","проміс")}} був виконаний або відхилений, відповідна функція-обробник (<code style="font-style: normal; font-weight: normal;">onFulfilled</code> або <code style="font-style: normal; font-weight: normal;">onRejected</code>) буде викликана <strong>асинхронно</strong> (запланована у активному циклі потоку). Поведінка функції-обробника відповідає спеціальному набору правил. Якщо функція-обробник:</p> + +<ul> + <li>вертає значення, проміс, повернений <code>then</code>, вирішується з поверненим значенням в якості його значення.</li> + <li>не вертає нічого, проміс, повернений <code>then</code>, вирішується зі значенням <code>undefined</code>.</li> + <li>викидає помилку, проміс, повернений <code>then</code>, відхиляється з викинутою помилкою в якості значення.</li> + <li>вертає вже виконаний проміс, то проміс, повернений <code>then</code>, виконується зі значенням цього проміса в якості свого значення.</li> + <li>вертає вже відхилений проміс, то проміс, повернений <code>then</code>, відхиляється зі значенням цього проміса в якості свого значення.</li> + <li>вертає інший проміс <strong>у стані очікування</strong>, вирішення/відхилення проміса, поверненого <code>then</code>, буде результатом вирішення/відхилення проміса, поверненого обробником. Також, вирішене значення проміса, поверненого <code>then</code>, буде тим самим, що й вирішене значення проміса, поверненого обробником.</li> +</ul> + +<p>Наступний приклад демонструє асинхронність методу <code>then</code>.</p> + +<pre class="brush: js">// при використанні вирішеного проміса блок 'then' буде негайно запущений, +// але його обробники запустяться асинхронно, як демонструє console.log +const resolvedProm = Promise.resolve(33); + +let thenProm = resolvedProm.then(value => { + console.log("Це запускається після завершення головного стеку. Отримане й повернене значення: " + value); + return value; +}); +// негайне логування значення thenProm +console.log(thenProm); + +// використовуючи setTimeout, ми можемо відкласти виконання функції, поки стек не стане порожнім +setTimeout(() => { + console.log(thenProm); +}); + + +// порядок логування: +// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} +// "Це запускається після завершення головного стеку. Отримане й повернене значення: 33" +// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оскільки методи <code>then</code> та {{jsxref("Promise.prototype.catch()")}} вертають проміси, їх <a href="/uk/docs/Web/JavaScript/Guide/Using_promises#Chaining">можна поєднувати в ланцюги</a> — ця операція зветься <em>композицією</em>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_метода_then">Використання метода <code>then</code></h3> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + resolve('Успіх!'); + // або + // reject(new Error("Помилка!")); +}); + +p1.then(value => { + console.log(value); // Успіх! +}, reason => { + console.error(reason); // Помилка! +}); +</pre> + +<h3 id="Ланцюгування">Ланцюгування</h3> + +<p>Метод <code>then</code> вертає об'єкт <code>Promise</code>, що дозволяє використовувати ланцюгування.</p> + +<p>Якщо функція, передана у <code>then</code> в якості обробника, вертає об'єкт <code>Promise</code>, аналогічний об'єкт <code>Promise</code> буде переданий у наступний <code>then</code> ланцюга методів. Наведений нижче фрагмент імітує асинхронний код функцією <code>setTimeout</code>. </p> + +<pre class="brush: js">Promise.resolve('ква') + // 1. Отримати "ква", приєднати "драт" та вирішити це для наступного then + .then(function(string) { + return new Promise(function(resolve, reject) { + setTimeout(function() { + string += 'драт'; + resolve(string); + }, 1); + }); + }) + // 2. отримати "квадрат", призначити функцію зворотного виклику для обробки цього рядка + // та вивести його на консоль, але не раніше повернення необробленого рядка + // string у наступний then + .then(function(string) { + setTimeout(function() { + string += 'ура'; + console.log(string); + }, 1) + return string; + }) + // 3. вивести допоміжні повідомлення щодо того, як виконується код в цьому розділі, + // раніше, ніж рядок string буде оброблений імітованим асинхронним кодом у + // попередньому блоці then. + .then(function(string) { + console.log("Останній Then: йой... ми не створили та не повернули екземпляр проміса " + + "у попередньому then, тому послідовність може бути трохи " + + "несподіваною"); + + // Зауважте, що `string` не матиме частини 'ура' в цій точці. Це тому, + // що ми імітували його асинхронне виконання за допомогою функції setTimeout + console.log(string); + }); + +// порядок виведення: +// Останній Then: йой... ми не створили та не повернули екземпляр проміса у попередньому then, тому послідовність може бути трохи несподіваною +// квадрат +// квадратура</pre> + +<p>Коли значення просто повертається з обробника <code>then</code>, він поверне <code>Promise.resolve(<значення, повернене обробником, що викликався>)</code>.</p> + +<pre class="brush: js">var p2 = new Promise(function(resolve, reject) { + resolve(1); +}); + +p2.then(function(value) { + console.log(value); // 1 + return value + 1; +}).then(function(value) { + console.log(value + ' - Синхронне значення працює'); +}); + +p2.then(function(value) { + console.log(value); // 1 +}); +</pre> + +<p>Виклик <code>then</code> поверне відхилений проміс, якщо функція викидає помилку або повертає відхилений проміс.</p> + +<pre class="brush: js">Promise.resolve() + .then(() => { + // Змушує .then() повернути відхилений проміс + throw new Error('О, ні!'); + }) + .then(() => { + console.log('Не викликається.'); + }, error => { + console.error('Викликано функцію onRejected: ' + error.message); + });</pre> + +<p>У всіх інших випадках повертається вирішений об'єкт Promise. У наступному прикладі перший <code>then()</code> поверне значення <code>42</code>, загорнуте у вирішений проміс, незважаючи на те, що попередній проміс ланцюжка був відхилений.</p> + +<pre class="brush: js">Promise.reject() + .then(() => 99, () => 42) // onRejected вертає 42, обгорнуте у вирішений Promise + .then(solution => console.log('Вирішений зі значенням ' + solution)); // Вирішений зі значенням 42</pre> + +<p>На практиці часто бажано перехоплювати відхилені проміси, як продемонстровано нижче, а не використовувати синтаксис <code>then</code> для двох випадків.</p> + +<pre class="brush: js">Promise.resolve() + .then(() => { + // Змушує .then() повернути відхилений проміс + throw new Error('О, ні!'); + }) + .catch(error => { + console.error('Викликано функцію onRejected: ' + error.message); + }) + .then(() => { + console.log("Мене завжди викликають, навіть якщо проміс попереднього then відхилено"); + });</pre> + +<p>Ви також можете використати ланцюгування, щоб реалізувати функцію з API на промісах, на основі іншої такої функції.</p> + +<pre class="brush: js">function fetch_current_data() { + // API <a href="/uk/docs/Web/API/GlobalFetch/fetch">fetch</a>() вертає проміс. Ця функція + // створює схожий API, крім того, що над значенням + // виконанного проміса цієї функції виконується + // більше дій. + return fetch('current-data.json').then(response => { + if (response.headers.get('content-type') != 'application/json') { + throw new TypeError(); + } + var j = response.json(); + // можливо, зробити щось із j + return j; // значення виконання, що надається користувачу + // fetch_current_data().then() + }); +} +</pre> + +<p>Якщо <code>onFulfilled</code> вертає проміс, повернене значення <code>then</code> буде вирішене чи відхилене промісом.</p> + +<pre class="brush: js">function resolveLater(resolve, reject) { + setTimeout(function() { + resolve(10); + }, 1000); +} +function rejectLater(resolve, reject) { + setTimeout(function() { + reject(new Error('Помилка')); + }, 1000); +} + +var p1 = Promise.resolve('ква'); +var p2 = p1.then(function() { + // Повернути тут проміс, який буде вирішений зі значенням 10 через 1 секунду + return new Promise(resolveLater); +}); +p2.then(function(v) { + console.log('вирішений', v); // "вирішений", 10 +}, function(e) { + // не викликається + console.error('відхилений', e); +}); + +var p3 = p1.then(function() { + // Повернути тут проміс, що відхилятиметься з помилкою 'Помилка' через 1 секунду + return new Promise(rejectLater); +}); +p3.then(function(v) { + // не викликається + console.log('вирішений', v); +}, function(e) { + console.error('відхилений', e); // "відхилений", 'Помилка' +}); +</pre> + +<h3 id="Поліфіл_у_стилі_window.setImmediate_на_основі_промісів">Поліфіл у стилі <a href="/uk/docs/Web/API/Window/setImmediate" title="Цей метод використовується для розбиття довгих у виконанні операцій та запуску функції зворотного виклику негайно після того, як переглядач завершив інші операції, такі, як події та оновлення відображення">window.setImmediate</a> на основі промісів</h3> + +<p>Використання методу {{jsxref("Function.prototype.bind()")}} <code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) для створення функції (що не скасовується) у стилі setImmediate.</p> + +<pre class="brush: js">const nextTick = (() => { + const noop = () => {}; // буквально + const nextTickPromise = () => Promise.resolve().then(noop); + + const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args]) + const nextTick = (fn, ...args) => ( + fn !== undefined + ? Promise.resolve(args).then(rfab(null, fn, null)) + : nextTickPromise(), + undefined + ); + nextTick.ntp = nextTickPromise; + + return nextTick; +})(); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.then")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/promise/відхилено/index.html b/files/uk/web/javascript/reference/global_objects/promise/відхилено/index.html new file mode 100644 index 0000000000..406c6e74e2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/promise/відхилено/index.html @@ -0,0 +1,73 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/відхилено +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>Promise.reject()</strong></code> повертає об'єкт <code>Promise</code>, відхилений з наданою причиною.</p> + +<p>{{EmbedInteractiveExample("pages/js/promise-reject.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt>reason</dt> + <dd>Причина, чому даний проміс був відхилений.</dd> +</dl> + +<h3 id="Значення_яке_повертається">Значення, яке повертається</h3> + +<p>Об'єкт {{jsxref("Promise")}}, відхилений з наданою причиною.</p> + +<h2 id="Опис">Опис</h2> + +<p>Статичний метод <code>Promise.reject</code> повертає відхилений об'єкт <code>Promise</code>. З метою відлагодження, а також вибіркового перехоплення помилок зручно використовувати <code>reason</code> як <code>instanceof</code> {{jsxref("Error")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_статичного_методу_Promise.reject">Використання статичного методу Promise.reject()</h3> + +<pre class="brush: js">Promise.reject(new Error('fail')).then(function(error) { + // не викликається +}, function(error) { + console.error(error); // стек викликів +});</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.reject")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/proxy/index.html b/files/uk/web/javascript/reference/global_objects/proxy/index.html new file mode 100644 index 0000000000..b246c6e047 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/proxy/index.html @@ -0,0 +1,399 @@ +--- +title: Проксі +slug: Web/JavaScript/Reference/Global_Objects/Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +<div> +<div>{{JSRef}}</div> +</div> + +<p><strong>Proxy</strong> об'єкт використовується для визначення власної поведінки для базових операцій (наприклад, доступ до властивостей, присвоєння, обрахунок, виклик функцій та ін.).</p> + +<h2 id="Terminology">Terminology</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt> + <dd>Placeholder object which contains traps.</dd> + <dt>traps</dt> + <dd>The methods that provide property access. This is analogous to the concept of traps in operating systems.</dd> + <dt>target</dt> + <dd>Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.</dd> +</dl> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var p = new Proxy(target, handler); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>target</code></dt> + <dd>A target object (can be any sort of object, including a native array, a function or even another proxy) to wrap with <code>Proxy</code>.</dd> + <dt><code>handler</code></dt> + <dd>An object whose properties are functions which define the behavior of the proxy when an operation is performed on it.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Proxy.revocable()")}}</dt> + <dd>Creates a revocable <code>Proxy</code> object.</dd> +</dl> + +<h2 id="Methods_of_the_handler_object">Methods of the handler object</h2> + +<p>The handler object is a placeholder object which contains traps for <code>Proxy</code>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_example">Basic example</h3> + +<p>In this simple example the number <code>37</code> gets returned as the default value when the property name is not in the object. It is using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get"><code>get</code></a> handler.</p> + +<pre class="brush: js">var handler = { + get: function(target, name) { + return name in target ? + target[name] : + 37; + } +}; + +var p = new Proxy({}, handler); +p.a = 1; +p.b = undefined; + +console.log(p.a, p.b); // 1, undefined +console.log('c' in p, p.c); // false, 37 +</pre> + +<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3> + +<p>In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.</p> + +<pre class="brush: js">var target = {}; +var p = new Proxy(target, {}); + +p.a = 37; // operation forwarded to the target + +console.log(target.a); // 37. The operation has been properly forwarded +</pre> + +<h3 id="Validation">Validation</h3> + +<p>With a <code>Proxy</code>, you can easily validate the passed value for an object. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p> + +<pre class="brush: js">let validator = { + set: function(obj, prop, value) { + if (prop === 'age') { + if (!Number.isInteger(value)) { + throw new TypeError('The age is not an integer'); + } + if (value > 200) { + throw new RangeError('The age seems invalid'); + } + } + + // The default behavior to store the value + obj[prop] = value; + + // Indicate success + return true; + } +}; + +let person = new Proxy({}, validator); + +person.age = 100; +console.log(person.age); // 100 +person.age = 'young'; // Throws an exception +person.age = 300; // Throws an exception</pre> + +<h3 id="Extending_constructor">Extending constructor</h3> + +<p>A function proxy could easily extend a constructor with a new constructor. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> handlers.</p> + +<pre class="brush: js">function extend(sup, base) { + var descriptor = Object.getOwnPropertyDescriptor( + base.prototype, 'constructor' + ); + base.prototype = Object.create(sup.prototype); + var handler = { + construct: function(target, args) { + var obj = Object.create(base.prototype); + this.apply(target, obj, args); + return obj; + }, + apply: function(target, that, args) { + sup.apply(that, args); + base.apply(that, args); + } + }; + var proxy = new Proxy(base, handler); + descriptor.value = proxy; + Object.defineProperty(base.prototype, 'constructor', descriptor); + return proxy; +} + +var Person = function(name) { + this.name = name; +}; + +var Boy = extend(Person, function(name, age) { + this.age = age; +}); + +Boy.prototype.sex = 'M'; + +var Peter = new Boy('Peter', 13); +console.log(Peter.sex); // "M" +console.log(Peter.name); // "Peter" +console.log(Peter.age); // 13</pre> + +<h3 id="Manipulating_DOM_nodes">Manipulating DOM nodes</h3> + +<p>Sometimes you want to toggle the attribute or class name of two different elements. Here's how using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p> + +<pre class="brush: js">let view = new Proxy({ + selected: null +}, +{ + set: function(obj, prop, newval) { + let oldval = obj[prop]; + + if (prop === 'selected') { + if (oldval) { + oldval.setAttribute('aria-selected', 'false'); + } + if (newval) { + newval.setAttribute('aria-selected', 'true'); + } + } + + // The default behavior to store the value + obj[prop] = newval; + + // Indicate success + return true; + } +}); + +let i1 = view.selected = document.getElementById('item-1'); +console.log(i1.getAttribute('aria-selected')); // 'true' + +let i2 = view.selected = document.getElementById('item-2'); +console.log(i1.getAttribute('aria-selected')); // 'false' +console.log(i2.getAttribute('aria-selected')); // 'true'</pre> + +<h3 id="Value_correction_and_an_extra_property">Value correction and an extra property</h3> + +<p>The <code>products</code> proxy object evaluates the passed value and converts it to an array if needed. The object also supports an extra property called <code>latestBrowser</code> both as a getter and a setter.</p> + +<pre class="brush: js">let products = new Proxy({ + browsers: ['Internet Explorer', 'Netscape'] +}, +{ + get: function(obj, prop) { + // An extra property + if (prop === 'latestBrowser') { + return obj.browsers[obj.browsers.length - 1]; + } + + // The default behavior to return the value + return obj[prop]; + }, + set: function(obj, prop, value) { + // An extra property + if (prop === 'latestBrowser') { + obj.browsers.push(value); + return true; + } + + // Convert the value if it is not an array + if (typeof value === 'string') { + value = [value]; + } + + // The default behavior to store the value + obj[prop] = value; + + // Indicate success + return true; + } +}); + +console.log(products.browsers); // ['Internet Explorer', 'Netscape'] +products.browsers = 'Firefox'; // pass a string (by mistake) +console.log(products.browsers); // ['Firefox'] <- no problem, the value is an array + +products.latestBrowser = 'Chrome'; +console.log(products.browsers); // ['Firefox', 'Chrome'] +console.log(products.latestBrowser); // 'Chrome'</pre> + +<h3 id="Finding_an_array_item_object_by_its_property">Finding an array item object by its property</h3> + +<p>This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. This example can be adapted to find a table row by its cell. In that case, the target will be <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p> + +<pre class="brush: js">let products = new Proxy([ + { name: 'Firefox', type: 'browser' }, + { name: 'SeaMonkey', type: 'browser' }, + { name: 'Thunderbird', type: 'mailer' } +], +{ + get: function(obj, prop) { + // The default behavior to return the value; prop is usually an integer + if (prop in obj) { + return obj[prop]; + } + + // Get the number of products; an alias of products.length + if (prop === 'number') { + return obj.length; + } + + let result, types = {}; + + for (let product of obj) { + if (product.name === prop) { + result = product; + } + if (types[product.type]) { + types[product.type].push(product); + } else { + types[product.type] = [product]; + } + } + + // Get a product by name + if (result) { + return result; + } + + // Get products by type + if (prop in types) { + return types[prop]; + } + + // Get product types + if (prop === 'types') { + return Object.keys(types); + } + + return undefined; + } +}); + +console.log(products[0]); // { name: 'Firefox', type: 'browser' } +console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' } +console.log(products['Chrome']); // undefined +console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }] +console.log(products.types); // ['browser', 'mailer'] +console.log(products.number); // 3 +</pre> + +<h3 id="A_complete_traps_list_example">A complete <code>traps</code> list example</h3> + +<p>Now in order to create a complete sample <code>traps</code> list, for didactic purposes, we will try to proxify a <em>non native</em> object that is particularly suited to this type of operation: the <code>docCookies</code> global object created by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a>.</p> + +<pre class="brush: js">/* + var docCookies = ... get the "docCookies" object here: + https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support +*/ + +var docCookies = new Proxy(docCookies, { + get: function (oTarget, sKey) { + return oTarget[sKey] || oTarget.getItem(sKey) || undefined; + }, + set: function (oTarget, sKey, vValue) { + if (sKey in oTarget) { return false; } + return oTarget.setItem(sKey, vValue); + }, + deleteProperty: function (oTarget, sKey) { + if (sKey in oTarget) { return false; } + return oTarget.removeItem(sKey); + }, + enumerate: function (oTarget, sKey) { + return oTarget.keys(); + }, + ownKeys: function (oTarget, sKey) { + return oTarget.keys(); + }, + has: function (oTarget, sKey) { + return sKey in oTarget || oTarget.hasItem(sKey); + }, + defineProperty: function (oTarget, sKey, oDesc) { + if (oDesc && 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); } + return oTarget; + }, + getOwnPropertyDescriptor: function (oTarget, sKey) { + var vValue = oTarget.getItem(sKey); + return vValue ? { + value: vValue, + writable: true, + enumerable: true, + configurable: false + } : undefined; + }, +}); + +/* Cookies test */ + +console.log(docCookies.my_cookie1 = 'First value'); +console.log(docCookies.getItem('my_cookie1')); + +docCookies.setItem('my_cookie1', 'Changed value'); +console.log(docCookies.my_cookie1);</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Proxy", 2)}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li> + <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li> + <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li> + <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li> +</ul> + +<h2 id="Licensing_note">Licensing note</h2> + +<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p> diff --git a/files/uk/web/javascript/reference/global_objects/rangeerror/index.html b/files/uk/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..8ed0df65cb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,141 @@ +--- +title: RangeError +slug: Web/JavaScript/Reference/Global_Objects/RangeError +tags: + - Error + - JavaScript + - Object + - RangeError + - виняток +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <code><strong>RangeError</strong></code> позначає помилку, що виникає, коли значення не входить у множину або діапазон дозволених значень.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd> + <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>Необов'язковий. Ім'я файлу, який містить код, що спричинив виняток.</dd> + <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Виняток <code>RangeError</code> викидається при спробі передати у якості аргумента функції значення, яке не входить у діапазон дозволених цією функцією значень.</p> + +<p>Його можна зустріти, якщо:</p> + +<ul> + <li>передати значення, що не є одним з дозволених рядкових значень, у {{jsxref("String.prototype.normalize()")}}, або</li> + <li>при спробі створити масив з недозволеним значенням довжини за допомогою конструктора {{jsxref("Array")}}, або</li> + <li>при спробі передати неправильні значення до числових методів {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} або {{jsxref("Number.toPrecision()")}}.</li> +</ul> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>RangeError.prototype</code></dt> + <dd>Вможливлює додавання властивостей до об'єктів <code>RangeError</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Сам <code>RangeError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p> + +<h2 id="Екземпляри_RangeError">Екземпляри <code>RangeError</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_RangeError_для_числових_значень">Використання <code>RangeError</code> (для числових значень)</h3> + +<pre class="brush: js">function check(n) +{ + if(!(n >= -500 && n <= 500)) + { + throw new RangeError("Аргумент має бути в діапазоні між -500 та 500.") + } +} + +try +{ + check(2000); +} +catch(error) +{ + if(error instanceof RangeError) + { + // Обробити помилку + } +}</pre> + +<h3 id="Використання_RangeError_для_нечислових_значень">Використання <code>RangeError</code> (для нечислових значень)</h3> + +<pre class="brush: js">function check(value) +{ + if(["яблуко", "банан", "морква"].includes(value) === false) + { + throw new RangeError("Аргумент має дорівнювати \"яблуко\", \"банан\", або \"морква\".") + } +} + +try +{ + check("капуста") +} +catch(error) +{ + if(error instanceof RangeError) + { + // Обробити помилку + } +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RangeError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Number.toExponential()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("Number.toPrecision()")}}</li> + <li>{{jsxref("String.prototype.normalize()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html new file mode 100644 index 0000000000..f0b90c5eab --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html @@ -0,0 +1,89 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +tags: + - Error + - JavaScript + - RangeError + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>RangeError.prototype</strong></code> є прототипом для конструктора {{jsxref("RangeError")}}</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Всі екземпляри {{jsxref("RangeError")}} успадковуються від <code>RangeError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>RangeError.prototype.constructor</code></dt> + <dd>Визначає функцію, яка створила прототип об'єкта.</dd> + <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> + <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("RangeError")}} має надавати власну властивість <code>message</code>, у <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> + <dd>Ім'я помилки. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> + <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> + <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> + <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> + <dd>Трасування стеку. Успаковано від {{jsxref("Error", "Error")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча прототип {{jsxref("RangeError")}} не містить власних методів, екземпляри {{jsxref("RangeError")}} успадковують деякі методи через ланцюжок прототипів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RangeError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/referenceerror/index.html b/files/uk/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..161634f10d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,108 @@ +--- +title: ReferenceError +slug: Web/JavaScript/Reference/Global_Objects/ReferenceError +tags: + - Error + - JavaScript + - ReferenceError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <code><strong>ReferenceError</strong></code> позначає помилку, що виникає при посиланні на змінну, яка не існує.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new ReferenceError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd> + <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd> + <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p><code>ReferenceError</code> викидається при посиланні на змінну, яка не була оголошена.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>ReferenceError.prototype</code></dt> + <dd>Дозволяє додавати властивості до об'єктів <code>ReferenceError</code>.</dd> +</dl> + +<h2 id="Екземпляри_ReferenceError">Екземпляри <code>ReferenceError</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Властивості')}}</div> + +<h3 id="Методи">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перехоплення_ReferenceError">Перехоплення <code>ReferenceError</code></h3> + +<pre class="brush: js">try { + let a = undefinedVariable +} catch (e) { + console.log(e instanceof ReferenceError) // true + console.log(e.message) // "undefinedVariable is not defined" + console.log(e.name) // "ReferenceError" + console.log(e.fileName) // "Scratchpad/1" + console.log(e.lineNumber) // 2 + console.log(e.columnNumber) // 6 + console.log(e.stack) // "@Scratchpad/2:2:7\n" +} +</pre> + +<h3 id="Створення_ReferenceError">Створення <code>ReferenceError</code></h3> + +<pre class="brush: js">try { + throw new ReferenceError('Привіт', 'someFile.js', 10) +} catch (e) { + console.log(e instanceof ReferenceError) // true + console.log(e.message) // "Привіт" + console.log(e.name) // "ReferenceError" + console.log(e.fileName) // "someFile.js" + console.log(e.lineNumber) // 10 + console.log(e.columnNumber) // 0 + console.log(e.stack) // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.ReferenceError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html new file mode 100644 index 0000000000..82bd7af85e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html @@ -0,0 +1,90 @@ +--- +title: ReferenceError.prototype +slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +tags: + - Error + - JavaScript + - ReferenceError + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>ReferenceError.prototype</strong></code> є прототипом для конструктора {{jsxref("ReferenceError")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Всі екземпляри {{jsxref("ReferenceError")}} успадковуються від <code>ReferenceError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>ReferenceError.prototype.constructor</code></dt> + <dd>Визначає функцію, яка створила прототип об'єкта.</dd> + <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> + <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("ReferenceError")}} повинен мати власну властивість <code>message</code>, у <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він успадковує {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> + <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> + <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> + <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> + <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> + <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча прототип {{jsxref("ReferenceError")}} не містить власних методів, екземпляри {{jsxref("ReferenceError")}} успадковують деякі методи через ланцюжок прототипів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.ReferenceError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/reflect/index.html b/files/uk/web/javascript/reference/global_objects/reflect/index.html new file mode 100644 index 0000000000..0e16d2b039 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/reflect/index.html @@ -0,0 +1,82 @@ +--- +title: Reflect +slug: Web/JavaScript/Reference/Global_Objects/Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect +--- +<div>{{JSRef}}</div> + +<div></div> + +<p><strong>Reflect</strong> вбудованний об'єкт, що об'єднує в собі методи для перехоплюючих JavaScript операцій. Ці методи такі ж, як у <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handlers</a>. <code>Reflect</code> є не функціональний об'єкт, тому не може використовуватися, як конструктор.</p> + +<h2 id="Опис">Опис</h2> + +<p>На відміну від більшості глобальних об'єктів, <code>Reflect</code> не є конструктором. Ви не можете використовувати його з <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> оператором</a> або запустити <code>Reflect</code> як функцію. Всі властивості та методи <code>Reflect</code> є статичними (так само як у {{jsxref("Math")}} об'єкта).</p> + +<h2 id="Методи">Методи</h2> + +<p><code>Reflect</code> об'єкт надає статичні функції, які мають такі ж імена як <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handler методи</a>. Деякі з цих методів є також ідентичними до відповідних методів в {{jsxref("Object")}}, хоча існують <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods">деякі тонкі відмінності</a> між ними.</p> + +<dl> + <dt>{{jsxref("Reflect.apply()")}}</dt> + <dd>Виконує цільову функцію з аргументами, які визначені параметром <code>args</code>. Дивись також {{jsxref("Function.prototype.apply()")}}.</dd> + <dt>{{jsxref("Reflect.construct()")}}</dt> + <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> як функція. Еквівалент до виклику <code>new target(...args)</code>. Надає також опційну(не обовязковий) можливість встановити інший прототип.</dd> + <dt>{{jsxref("Reflect.defineProperty()")}}</dt> + <dd>Подібний до {{jsxref("Object.defineProperty()")}}. Повертає {{jsxref("Boolean")}}.</dd> + <dt>{{jsxref("Reflect.deleteProperty()")}}</dt> + <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a> як функція. Еквівалент до виклику <code>delete target[name]</code>.</dd> + <dt>{{jsxref("Reflect.get()")}}</dt> + <dd>Функція, що повертає значення властивості.</dd> + <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt> + <dd>Подібно до {{jsxref("Object.getOwnPropertyDescriptor()")}}. Повертає дескриптор даної властивості, якщо така існує у об'єкті, {{jsxref("undefined")}} в іншому випадку.</dd> + <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt> + <dd>Така як {{jsxref("Object.getPrototypeOf()")}}.</dd> + <dt>{{jsxref("Reflect.has()")}}</dt> + <dd>Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a> як функція. Повертая булеве, що вказую чи існує власна або успадкована властивість.</dd> + <dt>{{jsxref("Reflect.isExtensible()")}}</dt> + <dd>Така як {{jsxref("Object.isExtensible()")}}.</dd> + <dt>{{jsxref("Reflect.ownKeys()")}}</dt> + <dd>Повертає масив власних(не успадкованих) ключів властивостей цільового об'єкту.</dd> + <dt>{{jsxref("Reflect.preventExtensions()")}}</dt> + <dd>Подібно до {{jsxref("Object.preventExtensions()")}}. Повертає {{jsxref("Boolean")}}.</dd> + <dt>{{jsxref("Reflect.set()")}}</dt> + <dd>Функція, яка встановлює значення для властивостей. Повертає {{jsxref("Boolean")}} як <code>true</code> якщо оновлення було успішним.</dd> + <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt> + <dd>Функція, що встановлює прототип об'єкта.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Reflect.enumerate був видаленний.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумістність_браузерів">Сумістність браузерів</h2> + +<div class="hidden">Таблиця сумістностей на цій сторінці згенерована з структурованих даних. Якщо Ви маєте бажання зробити свій внесок у дані, будь-ласка перевірте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і відправте нам запит на оновлення(pull request).</div> + +<p>{{Compat("javascript.builtins.Reflect")}}</p> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li>Глобальний об'єкт {{jsxref("Proxy")}}.</li> + <li>Об'єкт {{jsxref("Proxy.handler", "handler")}}.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html b/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html new file mode 100644 index 0000000000..3a4547d559 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/exec/index.html @@ -0,0 +1,227 @@ +--- +title: RegExp.prototype.exec() +slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>exec()</code></strong> виконує пошук збігів у заданому рядку. Він повертає масив або {{jsxref("null")}}.</p> + +<p>Якщо Ви просто використовуєте регулярний вираз, щоб знайти чи є збіг чи немає використовуйте метод {{jsxref("RegExp.prototype.test()")}} або метод {{jsxref("String.prototype.search()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.exec(<var>str</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>str</code></dt> + <dd>Рядок який буде перевірятися на збіг за регулярним виразом.</dd> +</dl> + +<h3 id="Що_повертає">Що повертає</h3> + +<p>Якщо збіг є, метод <code>exec()</code> повертає масив і оновлює властивості об'єкту регулярного виразу. На першій позиції повернутого цим методом масиву буде підрядок який задовольняє даний регулярний вираз, на наступних позиціях запам'ятовані збіги за допомогою дужок "()"</p> + +<p>Якщо збігів немає, метод <code>exec()</code> повертає {{jsxref("null")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Розглянемо наступний приклад:</p> + +<pre class="brush: js">// Знайти такий збіг: "Швидка руда" після чого йде +// довільна кількість знаків потім слово "стрибає" +// Запам'ятати "руда" і "стрибає" +// Ігнорувати регістр літер (знайде і руда і РуДа) +var re = /швидка\s(руда).+?(стрибає)/ig; +var result = re.exec('Швидка руда лисиця стрибає через ледачого пса'); +</pre> + +<p>Таблиця підсумовує результати виконання скрипта:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Об'єкт</td> + <td class="header">Властивість / Індекс</td> + <td class="header">Пояснення</td> + <td class="header">Приклад</td> + </tr> + <tr> + <td rowspan="4"><code>result</code></td> + <td><code>[0]</code></td> + <td>Рядок символів що співпали.</td> + <td><code>Швидка руда лисиця стрибає</code></td> + </tr> + <tr> + <td><code>[1], ...[<em>n</em> ]</code></td> + <td>Запам'ятовані підрядки, якщо такі є. Їхня кількість не обмежена.</td> + <td><code>[1] = руда<br> + [2] = стрибає</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td>Індекс з якого починається збіг.</td> + <td><font face="Consolas, Liberation Mono, Courier, monospace">0</font></td> + </tr> + <tr> + <td><code>input</code></td> + <td>Оригінальний рядок.</td> + <td><code>Швидка руда лисиця стрибає через ледачого пса</code></td> + </tr> + <tr> + <td rowspan="5"><code>re</code></td> + <td><code>lastIndex</code></td> + <td> + <p>Індекс з якого починати пошук наступного збігу. Коли прапорець "g" непоставлено, lastIndex буде залишатися 0.</p> + </td> + <td><code>26</code></td> + </tr> + <tr> + <td><code>ignoreCase</code></td> + <td>Показує чи був використаний прапорець "<code>i</code>" для ігнорування регістру літер.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>global</code></td> + <td>Показує чи був використаний прапорець "<code>g</code>" для глобального пошуку.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>multiline</code></td> + <td>Показує чи був використаний прапорець "<font face="Consolas, Liberation Mono, Courier, monospace">m</font>" для пошуку.</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td>Сам регулярний вираз.</td> + <td>швидка\s(руда).+?(стрибає)</td> + </tr> + </tbody> +</table> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Пошук_наступних_збігів">Пошук наступних збігів</h3> + +<p>Якщо регулярний вираз використовує прапорець "<code>g</code>", Ви можете використовувати метод <code>exec() багато разів для того, щоб знайти наступні збіги у рядку з яким працюєте.</code> Якщо Ви так зробите, пошук почнеться з індексу який заданий властивістю {{jsxref("RegExp.lastIndex", "lastIndex")}} ( метод {{jsxref("RegExp.prototype.test()", "test()")}} також змінює властивість {{jsxref("RegExp.lastIndex", "lastIndex")}} ). Для прикладу, припустимо Ви маєте такий скрипт:</p> + +<pre class="brush: js">var myRe = /ab*/g; +var str = 'abbcdefabh'; +var myArray; +while ((myArray = myRe.exec(str)) !== null) { + var msg = 'Знайдено ' + myArray[0] + '. '; + msg += 'Наступний пошук почнеться з індексу ' + myRe.lastIndex; + console.log(msg); +} +</pre> + +<p>Це скрипт виведе таке:</p> + +<pre>Знайдено abb. Наступний пошук почнеться з індексу 3 +Знайдено ab. Наступний пошук почнеться з індексу 9 +</pre> + +<p>Увага: Не створюйте об'єкт (через конструктор {{jsxref("RegExp")}}) або літерал регулярного виразу в умові циклу <code>while</code> оскільки це призведе до нескінченного циклу оскільки властивість {{jsxref("RegExp.lastIndex", "lastIndex")}} буде перезаписуватися кожен раз на нуль і метод <code>exec </code>ніколи не поверне <font face="Consolas, Liberation Mono, Courier, monospace">null</font>. Також перевірте чи поставили прапорець "g" оскільки його відсутність також призведе до нескінченного циклу.</p> + +<h3 id="Використання_exec()_RegExp_літералами">Використання <code>exec()</code> <code>RegExp</code> літералами</h3> + +<p>Ви можете використовувати метод <code>exec()</code> без створення об'єкту {{jsxref("RegExp")}}:</p> + +<pre class="brush: js">var matches = /(hello \S+)/.exec('This is a hello world!'); +console.log(matches[1]); +</pre> + +<p>Це виведе в консоль повідомлення 'hello world!'</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Первісне значення. Реалізовано у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Браузер</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> розділ в <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/regexp/index.html b/files/uk/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..8374d65fc6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,699 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Reference + - RegExp + - Regular Expressions + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<div>{{JSRef}}</div> + +<p>Конструктор <strong><code>RegExp </code></strong>створює об'єкт регулярного виразу для знаходження тексту по шаблону.</p> + +<p>Для ознайомлення з регулярними виразами, можете проглянути розділ <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> в <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript Guide</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Можливі позначення літералу та констуктору:</p> + +<pre class="syntaxbox notranslate">/<var>pattern</var>/<var>flags</var> +new RegExp(<var>pattern</var>[, <var>flags</var>]) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>pattern</code></dt> + <dd>Шаблон регулярного виразу.</dd> + <dt><code>flags</code></dt> + <dd> + <p>Якщо об'явлені, можуть сторювати комбінації з цих значень:</p> + + <dl> + <dt><code>g</code></dt> + <dd>глобальне співпадіння</dd> + <dt><code>i</code></dt> + <dd>ігнорування розкладки</dd> + <dt><code>m</code></dt> + <dd>співпадіння по кільком строкам; символи початку та кінця (<code>^</code> й <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">$</span></font>) починають працювати по кільком строкам (тобто відбувається співпадіння с початком або кінцем <em>кожної </em>строки (строки відділяються символами <code>\n</code> й <code>\r</code>), а не тільки з початком та кінцем усієї строки, яку ввели)</dd> + <dt><code>u</code></dt> + <dd>юнікод</dd> + <dt><code>y</code></dt> + <dd>"липкий" пошук; починає шукати співпадіння з індексу, на який вказує властивість <code>lastIndex</code> даного <code>RegExp</code></dd> + </dl> + </dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Існує 2 шляхи створити <code>RegExp</code> об'єкт: за допомогою літерального виразу або конструктора. Аби розрізняти текстовий рядок, параметри літерального виразу не містять лапок, але якщо створювати за допомогою конструктора, то лапки можно використовувати. У наступному прикладі створюються однакові регулярні вирази:</p> + +<pre class="brush: js notranslate">/ab+c/i; +new RegExp('ab+c', 'i'); +new RegExp(/ab+c/, 'i'); +</pre> + +<p>Літеральна нотація виконує компіляцію виразу коли даний вираз обчислений. Викоритсовуйте літерали якщо регулярний вираз відомий до початку роботи програми. Наприклад, якщо використовувати літерал у циклі, регулярний вираз не буде наново компілюватись на кожній ітерації.</p> + +<p>Конструктор об'єкту регулярного виразу, приміром, <code>new RegExp('ab+c')</code>, забезпечує компіляцію регулярного виразу під час виконання програми. Використовуйте функцію конструктора якщо шаблон регулярного виразу буде змінюватися або шаблон не відомий та надходить з іншого джерела, наприклад, від користувача.</p> + +<p>Починаючи з ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> більше не видає {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") якщо перший аргумент <code>RegExp</code> та другий аргумент <code>flags</code> наявний. Натомість створюється новий <code>RegExp</code> з аргументів.</p> + +<p>При використанні функції-конструктора необхідно дотримуватись правил текстових рядків (попередні спеціальні символи з \ якщо вони входять в рядок). Наприклад, наступні вирази еквівалентні:</p> + +<pre class="brush: js notranslate">var re = /\w+/; +var re = new RegExp('\\w+'); +</pre> + +<h2 id="Special_characters_meaning_in_regular_expressions">Special characters meaning in regular expressions</h2> + +<ul> + <li><a href="#character-classes">Character Classes</a></li> + <li><a href="#character-sets">Character Sets</a></li> + <li><a href="#boundaries">Boundaries</a></li> + <li><a href="#grouping-back-references">Grouping and back references</a></li> + <li><a href="#quantifiers">Quantifiers</a></li> +</ul> + +<table class="fullwidth-table"> + <tbody> + <tr id="character-classes"> + <th colspan="2">Character Classes</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>.</code></td> + <td> + <p>(The dot, the decimal point) matches any single character <em>except</em> line terminators: <code>\n</code>, <code>\r</code>, <code>\u2028</code> or <code>\u2029</code>.</p> + + <p>Inside a character class, the dot loses its special meaning and matches a literal dot.</p> + + <p>Note that the <code>m</code> multiline flag doesn't change the dot behavior. So to match a pattern across multiple lines, the character set <code>[^]</code> can be used (if you don't mean an old version of IE, of course), it will match any character including newlines.</p> + + <p>For example, <code>/.y/</code> matches "my" and "ay", but not "yes", in "yes make my day".</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Matches a digit character in the basic Latin alphabet. Equivalent to <code>[0-9]</code>.</p> + + <p>For example, <code>/\d/</code> or <code>/[0-9]/</code> matches "2" in "B2 is the suite number".</p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p>Matches any character that is not a digit in the basic Latin alphabet. Equivalent to <code>[^0-9]</code>.</p> + + <p>For example, <code>/\D/</code> or <code>/[^0-9]/</code> matches "B" in "B2 is the suite number".</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Matches any alphanumeric character from the basic Latin alphabet, including the underscore. Equivalent to <code>[A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\w/</code> matches "a" in "apple", "5" in "$5.28", and "3" in "3D".</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Matches any character that is not a word character from the basic Latin alphabet. Equivalent to <code>[^A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> matches "%" in "50%".</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Matches a single white space character, including space, tab, form feed, line feed and other Unicode spaces. Equivalent to <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>For example, <code>/\s\w*/</code> matches " bar" in "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Matches a single character other than white space. Equivalent to <code>[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>For example, <code>/\S\w*/</code> matches "foo" in "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Matches a horizontal tab.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Matches a carriage return.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Matches a linefeed.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Matches a vertical tab.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Matches a form-feed.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Matches a backspace. (Not to be confused with <code>\b</code>)</td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Matches a NUL character. Do not follow this with another digit.</td> + </tr> + <tr> + <td><code>\c<em>X</em></code></td> + <td> + <p>Where <code><em>X</em></code> is a letter from A - Z. Matches a control character in a string.</p> + + <p>For example, <code>/\cM/</code> matches control-M in a string.</p> + </td> + </tr> + <tr> + <td><code>\x<em>hh</em></code></td> + <td>Matches the character with the code <code><em>hh</em></code> (two hexadecimal digits).</td> + </tr> + <tr> + <td><code>\u<em>hhhh</em></code></td> + <td>Matches a UTF-16 code-unit with the value <code><em>hhhh</em></code> (four hexadecimal digits).</td> + </tr> + <tr> + <td><code>\u<em>{hhhh} </em>or <em>\u{hhhhh}</em></code></td> + <td>(only when u flag is set) Matches the character with the Unicode value U+<code><em>hhhh</em> or </code>U+<code><em>hhhhh</em></code> (hexadecimal digits).</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>For characters that are usually treated literally, indicates that the next character is special and not to be interpreted literally.</p> + + <p>For example, <code>/b/</code> matches the character "b". By placing a backslash in front of "b", that is by using <code>/\b/</code>, the character becomes special to mean match a word boundary.</p> + + <p><em>or</em></p> + + <p>For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally.</p> + + <p>For example, "*" is a special character that means 0 or more occurrences of the preceding character should be matched; for example, <code>/a*/</code> means match 0 or more "a"s. To match <code>*</code> literally, precede it with a backslash; for example, <code>/a\*/</code> matches "a*".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="character-sets"> + <th colspan="2">Character Sets</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>[xyz]<br> + [a-c]</code></td> + <td> + <p>A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.</p> + + <p>For example, <code>[abcd]</code> is the same as <code>[a-d]</code>. They match the "b" in "brisket" and the "c" in "chop".</p> + </td> + </tr> + <tr> + <td> + <p><code>[^xyz]<br> + [^a-c]</code></p> + </td> + <td> + <p>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.</p> + + <p>For example, <code>[^abc]</code> is the same as <code>[^a-c]</code>. They initially match "o" in "bacon" and "h" in "chop".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="alternation"> + <th colspan="2">Alternation</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code><em>x</em>|<em>y</em></code></td> + <td> + <p>Matches either <code><em>x</em></code> or <code><em>y</em></code>.</p> + + <p>For example, <code>/green|red/</code> matches "green" in "green apple" and "red" in "red apple".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="boundaries"> + <th colspan="2">Boundaries</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>^</code></td> + <td> + <p>Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.</p> + + <p>For example, <code>/^A/</code> does not match the "A" in "an A", but does match the first "A" in "An A".</p> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.</p> + + <p>For example, <code>/t$/</code> does not match the "t" in "eater", but does match it in "eat".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Matches a zero-width word boundary, such as between a letter and a space. (Not to be confused with <code>[\b]</code>)</p> + + <p>For example, <code>/\bno/</code> matches the "no" in "at noon"; <code>/ly\b/</code> matches the "ly" in "possibly yesterday".</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Matches a zero-width non-word boundary, such as between two letters or between two spaces.</p> + + <p>For example, <code>/\Bon/</code> matches "on" in "at noon", and <code>/ye\B/</code> matches "ye" in "possibly yesterday".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="grouping-back-references"> + <th colspan="2">Grouping and back references</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> and remembers the match. These are called capturing groups.</p> + + <p>For example, <code>/(foo)/</code> matches and remembers "foo" in "foo bar". </p> + + <p>The capturing groups are numbered according to the order of left parentheses of capturing groups, starting from 1. The matched substring can be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</p> + + <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p> + </td> + </tr> + <tr> + <td><code>\<em>n</em></code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).</p> + + <p>For example, <code>/apple(,)\sorange\1/</code> matches "apple, orange," in "apple, orange, cherry, peach". A more complete example follows this table.</p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td>Matches <code><em>x</em></code> but does not remember the match. These are called non-capturing groups. The matched substring can not be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</td> + </tr> + </tbody> + <tbody> + <tr id="quantifiers"> + <th colspan="2">Quantifiers</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code><em>x</em>*</code></td> + <td> + <p>Matches the preceding item <em>x</em> 0 or more times.</p> + + <p>For example, <code>/bo*/</code> matches "boooo" in "A ghost booooed" and "b" in "A bird warbled", but nothing in "A goat grunted".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>+</code></td> + <td> + <p>Matches the preceding item <em>x</em> 1 or more times. Equivalent to <code>{1,}</code>.</p> + + <p>For example, <code>/a+/</code> matches the "a" in "candy" and all the "a"'s in "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>?</code></td> + <td> + <p>Matches the preceding item <em>x</em> 0 or 1 time.</p> + + <p>For example, <code>/e?le?/</code> matches the "el" in "angel" and the "le" in "angle."</p> + + <p>If used immediately after any of the quantifiers <code>*</code>, <code>+</code>, <code>?</code>, or <code>{}</code>, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>}</code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. Matches exactly <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{2}/</code> doesn't match the "a" in "candy", but it matches all of the "a"'s in "caandy", and the first two "a"'s in "caaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,}</code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. Matches at least <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{2,}/</code> doesn't match the "a" in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td> + <td> + <p>Where <code><em>n</em></code> and <code><em>m</em></code> are positive integers. Matches at least <code><em>n</em></code> and at most <code><em>m</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{1,3}/</code> matches nothing in "cndy", the "a" in "candy", the two "a"'s in "caandy", and the first three "a"'s in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more "a"'s in it.</p> + </td> + </tr> + <tr> + <td> + <p><code><em>x</em>*?</code><br> + <code><em>x</em>+?</code><br> + <code><em>x</em>??</code><br> + <code><em>x</em>{n}?</code><br> + <code><em>x</em>{n,}?</code><br> + <code><em>x</em>{n,m}?</code></p> + </td> + <td> + <p>Matches the preceding item <em>x</em> like <code>*</code>, <code>+</code>, <code>?</code>, and <code>{...}</code> from above, however the match is the smallest possible match.</p> + + <p>For example, <code>/<.*?>/</code> matches "<foo>" in "<foo> <bar>", whereas <code>/<.*>/</code> matches "<foo> <bar>".</p> + + <p>Quantifiers without <code>?</code> are said to be greedy. Those with <code>?</code> are called "non-greedy".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="assertions"> + <th colspan="2">Assertions</th> + </tr> + <tr> + <th>Character</th> + <th>Meaning</th> + </tr> + <tr> + <td><code><em>x</em>(?=<em>y</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> only if <code><em>x</em></code> is followed by <code><em>y</em></code>.</p> + + <p>For example, /<code>Jack(?=Sprat)/</code> matches "Jack" only if it is followed by "Sprat".<br> + <code>/Jack(?=Sprat|Frost)/</code> matches "Jack" only if it is followed by "Sprat" or "Frost". However, neither "Sprat" nor "Frost" is part of the match results.</p> + </td> + </tr> + <tr> + <td><code><em>x</em>(?!<em>y</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> only if <code><em>x</em></code> is not followed by <code><em>y</em></code>.</p> + + <p>For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point.<br> + <code>/\d+(?!\.)/.exec('3.141')</code> matches "141" but not "3.141".</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("RegExp.prototype")}}</dt> + <dd>Allows the addition of properties to all objects.</dd> + <dt><code>RegExp.length</code></dt> + <dd>The value of <code>RegExp.length</code> is 2.</dd> + <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("RegExp.lastIndex")}}</dt> + <dd>The index at which to start the next match.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>The global <code>RegExp</code> object has no methods of its own, however, it does inherit some methods through the prototype chain.</p> + +<h2 id="RegExp_prototype_objects_and_instances"><code>RegExp</code> prototype objects and instances</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_a_regular_expression_to_change_data_format">Using a regular expression to change data format</h3> + +<p>The following script uses the {{jsxref("String.prototype.replace()", "replace()")}} method of the {{jsxref("Global_Objects/String", "String")}} instance to match a name in the format <em>first last</em> and output it in the format <em>last, first</em>. In the replacement text, the script uses <code>$1</code> and <code>$2</code> to indicate the results of the corresponding matching parentheses in the regular expression pattern.</p> + +<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; +var str = 'John Smith'; +var newstr = str.replace(re, '$2, $1'); +console.log(newstr); +</pre> + +<p>This displays "Smith, John".</p> + +<h3 id="Using_regular_expression_to_split_lines_with_different_line_endingsends_of_lineline_breaks">Using regular expression to split lines with different <strong>line endings/ends of line/line breaks</strong></h3> + +<p>The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.</p> + +<pre class="brush: js notranslate">var text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'; +var lines = text.split(/\r\n|\r|\n/); +console.log(lines); // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ] +</pre> + +<p>Note that the order of the patterns in the regular expression matters.</p> + +<h3 id="Using_regular_expression_on_multiple_lines">Using regular expression on multiple lines</h3> + +<pre class="brush: js notranslate">var s = 'Please yes\nmake my day!'; +s.match(/yes.*day/); +// Returns null +s.match(/yes[^]*day/); +// Returns 'yes\nmake my day' +</pre> + +<h3 id="Using_a_regular_expression_with_the_sticky_flag">Using a regular expression with the sticky flag</h3> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">sticky flag</a> indicates that the regular expression performs sticky matching in the target string by attempting to match starting at {{jsxref("RegExp.prototype.lastIndex")}}.</p> + +<pre class="brush: js notranslate">var str = '#foo#'; +var regex = /foo/y; + +regex.lastIndex; // 0 +regex.test(str); // true +regex.lastIndex = 5; +regex.test(str); // false (lastIndex is taken into account with sticky flag) +regex.lastIndex; // 0 (reset after match failure)</pre> + +<h3 id="Regular_expression_and_Unicode_characters">Regular expression and Unicode characters</h3> + +<p>As mentioned above, <code>\w</code> or <code>\W</code> only matches ASCII based characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_". To match characters from other languages such as Cyrillic or Hebrew, use <code>\uhhhh</code>, where "hhhh" is the character's Unicode value in hexadecimal. This example demonstrates how one can separate out Unicode characters from a word.</p> + +<pre class="brush: js notranslate">var text = 'Образец text на русском языке'; +var regex = /[\u0400-\u04FF]+/g; + +var match = regex.exec(text); +console.log(match[0]); // logs 'Образец' +console.log(regex.lastIndex); // logs '7' + +var match2 = regex.exec(text); +console.log(match2[0]); // logs 'на' [did not log 'text'] +console.log(regex.lastIndex); // logs '15' + +// and so on +</pre> + +<p>Here's an external resource for getting the complete Unicode block range for different scripts: <a href="http://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a>.</p> + +<h3 id="Extracting_sub-domain_name_from_URL">Extracting sub-domain name from URL</h3> + +<pre class="brush: js notranslate">var url = 'http://xxx.domain.com'; +console.log(/[^.]+/.exec(url)[0].substr(7)); // logs 'xxx' +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>The <code>RegExp</code> constructor no longer throws when the first argument is a <code>RegExp</code> and the second argument is present. Introduces Unicode and sticky flags.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Sticky flag ("y")</td> + <td>{{CompatChrome("39")}} [1]</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Unicode flag ("u")</td> + <td>{{CompatChrome("50")}}</td> + <td>{{CompatGeckoDesktop("46")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>RegExp(RegExp object, flags)</code> no longer throws</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("39")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Sticky flag ("y")</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Unicode flag ("u")</td> + <td>{{CompatUnknown }}</td> + <td>{{CompatGeckoMobile("46")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>RegExp(RegExp object, flags)</code> no longer throws</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("39")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Behind a flag.</p> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<p>Starting with Gecko 34 {{geckoRelease(34)}}, in the case of a capturing group with quantifiers preventing its exercise, the matched text for a capturing group is now <code>undefined</code> instead of an empty string:</p> + +<pre class="brush: js notranslate">// Firefox 33 or older +'x'.replace(/x(.)?/g, function(m, group) { + console.log("'group:" + group + "'"); +}); // 'group:' + +// Firefox 34 or newer +'x'.replace(/x(.)?/g, function(m, group) { + console.log("'group:" + group + "'"); +}); // 'group:undefined' +</pre> + +<p>Note that due to web compatibility, <code>RegExp.$N</code> will still return an empty string instead of <code>undefined</code> ({{bug(1053944)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("String.prototype.replace()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/regexp/source/index.html b/files/uk/web/javascript/reference/global_objects/regexp/source/index.html new file mode 100644 index 0000000000..d2462b3ac0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/source/index.html @@ -0,0 +1,170 @@ +--- +title: RegExp.prototype.source +slug: Web/JavaScript/Reference/Global_Objects/RegExp/source +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong>sourse</strong> повертає стороку, що містить текст шаблону регулярного виразу, і він немає містити два слеша з обох сторін, а також будь-які прапори регулярного виразу.</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="Використовування_source">Використовування <code>source</code></h3> + +<pre class="brush: js">var regex = /fooBar/ig; + +console.log(regex.source); // "fooBar", не містить /.../ і прапори"ig". +</pre> + +<h3 id="Порожні_регулярні_вирази_і_як_уникнути_проблем">Порожні регулярні вирази і як уникнути проблем</h3> + +<p>Починаючи з ECMAScript 5, властивість джерела більше не повертає порожній рядок для порожніх регулярних виразів. Замість цього, рядок «(? :)» повертається. Крім того, лінія термінатори (such as "\n") врятувалися в даний час.</p> + +<pre class="brush: js">new RegExp().source; // "(?:)" + +new RegExp('\n').source === '\n'; // true до ES5 +new RegExp('\n').source === '\\n'; // true,починаючи з ES5 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікації</th> + <th scope="col">Статус</th> + <th scope="col">Коментарій</th> + </tr> + <tr> + <td>ECMAScript 3 </td> + <td>{{Spec2('Стандарт')}}</td> + <td>Первісне визначення. Реалізовано в JavaScript 1.2. JavaScript 1.5: є властивістю примірника {{jsxref("RegExp")}} а не {{jsxref("RegExp")}} об'єкта.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}</td> + <td>{{Spec2('Стандарт')}}</td> + <td>Властивість source для порожніх регулярних виразів тепер повертає "(?:)" замість порожнього рядка. Визначення для відповідної поведінки було додано.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td> + <td>{{Spec2('Стандарт')}}</td> + <td><code>Source зараз є властивістю доступу, а не власною властивістю даних.</code></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td> + <td>{{Spec2('Кандидат в рекомендації')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особливість</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>"(?:)" для порожніх регулярних виразів</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Запобігання(вирішення)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Прототип оцінювач властивості</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Особливість</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базова підтримка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>"(?:)" для порожніх регулярних виразів</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Запобігання(вирішення)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Прототип оцінювач властивості</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("RegExp.prototype.flags")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/regexp/test/index.html b/files/uk/web/javascript/reference/global_objects/regexp/test/index.html new file mode 100644 index 0000000000..19f6e0ad21 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/regexp/test/index.html @@ -0,0 +1,151 @@ +--- +title: RegExp.prototype.test() +slug: Web/JavaScript/Reference/Global_Objects/RegExp/test +tags: + - Регулярні Вирази + - Рекомендації + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test +--- +<div>{{JSRef}}</div> + +<p><code>Метод</code><strong><code> test()</code></strong> виконує пошук на збіг між регулярним виразом і заданим рядком. Повертає <code>true</code> або <code>false</code>.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.test(<var>str</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>str</code></dt> + <dd>Рядок, що перевіряється регулярним виразом.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p><code>true</code> якщо є збіг між регулярним виразом та вказаним рядком; інакше, <code>false</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Використовуйте <code>test()</code> щоразу коли ви хочете знати чи патерн знайдено у рядку (схоже до методу {{jsxref("String.prototype.search()")}}, різниця в тому, що test() повертає булеве значення, коли search() - індекс (якщо знайдено), інакше -1 (якщо не знайдено); якщо потрібно більше інформації (але виконання буде повільніше) використовуйте метод {{jsxref("RegExp.prototype.exec()", "exec()")}} (схожий до методу {{jsxref("String.prototype.match()")}} ). Як і {{jsxref("RegExp.prototype.exec()", "exec()")}} (або в комбінації з ним), <code>test(), що</code> викликаний декілька разів на одному і тому ж глобальному екземплярі регулярного виразу, буде швидшим ніж попередні виконування.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_test()">Використання <code>test()</code></h3> + +<p>Простий приклад, що перевіряє чи "hello" знаходиться на самому початку рядка , повертає булеве значення.</p> + +<pre class="brush: js">var str = 'hello world!'; +var result = /^hello/.test(str); +console.log(result); // true +</pre> + +<p>Наступний приклад виводить у лог сповіщення результату проходження тесту:</p> + +<pre class="brush: js">function testinput(re, str) { + var midstring; + if (re.test(str)) { + midstring = ' contains '; + } else { + midstring = ' does not contain '; + } + console.log(str + midstring + re.source); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_у_браузерах">Сумісність у браузерах</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Замітки_щодо_Gecko">Замітки щодо Gecko</h2> + +<p>До версії Gecko 8.0 {{geckoRelease("8.0")}}, <code>test()</code> було реалізовано невірно; коли він визивався без параметрів, то звірявся зі значенням попереднього вводу (властивістю <code>RegExp.input</code>), а не з рядком <code>"undefined"</code>. Це виправлено; зараз <code>/undefined/.test()</code> вірно повертає значення <code>true</code>, а не error, як це було раніше.</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>Глава <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> у <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/set/index.html b/files/uk/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..6fdd6fd9b2 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,242 @@ +--- +title: Set +slug: Web/JavaScript/Reference/Global_Objects/Set +tags: + - set + - сет +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +<div>{{JSRef}}</div> + +<div>Об'єкт <strong>Set</strong> дає можливість зберігати значення будь-якого типу, будь то примітивні значення чи посилання на об'єкт.</div> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new Set([<em>iterable</em>]);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Якщо передається<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"> об'єкт, що ітерується</a>, то всі його елементи будуть додані до нового <code>Set</code>. Якщо цей параметр не визначений або має значення null, тоді новий <code>Set</code> буде порожнім.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий об'єкт <code>Set</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкти <code>Set</code> - це колекції унікальних значень. Ви можете перебирати елементи <code>Set</code> у порядку вставки. Одне значення в <code>Set</code> може зустрічатися лише один раз; воно є унікальним в колекції <code>Set</code>.</p> + +<h3 id="Еквівалентність_значення">Еквівалентність значення</h3> + +<p>Через те, що кожне значення в <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Set</span></font> має бути унікальним, еквівалентність значення буде перевірена. У попередній версії специфікації ECMAScript це не було базовано на такому самому алгоритмі, що використовує оператор ===. Конкретніше, для <code>Set</code> <code>+0</code> (що є суворо рівним <code>-0</code> ) та <code>-0</code> є різними значеннями. Проте, це було змінено у специфікації ECMAScript 2015. Дивіться більш детально про "Еквівалентність значень -0 і 0" у таблиці <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#Browser_compatibility">браузерної сумісності</a>.</p> + +<p>До того ж, <code>NaN</code> та <code>undefined</code> також можуть зберігатися в <code>Set</code>. <code>NaN</code> вважається тим самим, що і <code>NaN</code> (хоча, <code>NaN !== NaN</code> ).</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Set.length</code></dt> + <dd>Значення властивості <code>length</code> є 0.</dd> + <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt> + <dd>Функція-конструктор, що використовується для строрення derived об'єктів.</dd> + <dt>{{jsxref("Set.prototype")}}</dt> + <dd>Представляє прототип для конструктора <code>Set</code>. Дозволяє додавання властивостей до всіх <code>Set</code> об'єктів.</dd> +</dl> + +<h2 id="Set_instances"><code>Set</code> instances</h2> + +<p>Усі <code>Set</code> сутності наслідуються від {{jsxref("Set.prototype")}}.</p> + +<h3 id="Властивості_2">Властивості</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p> + +<h3 id="Методи">Методи</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_об'єкта_Set">Використання об'єкта <code>Set</code></h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); // Set { 1 } +mySet.add(5); // Set { 1, 5 } +mySet.add(5); // Set { 1, 5 } +mySet.add('some text'); // Set { 1, 5, 'some text' } +var o = {a: 1, b: 2}; +mySet.add(o); + +mySet.add({a: 1, b: 2}); // o має посилання на інший об'єкт, тому це ок + +mySet.has(1); // true +mySet.has(3); // false, 3 не було додано в Set +mySet.has(5); // true +mySet.has(Math.sqrt(25)); // true +mySet.has('Some Text'.toLowerCase()); // true +mySet.has(o); // true + +mySet.size; // 5 + +mySet.delete(5); // видаляє 5 з set +mySet.has(5); // false, 5 було видалено + +mySet.size; // 4, ми щойно видалили одне значення +console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}</pre> + +<h3 id="Перебирання_Set">Перебирання Set</h3> + +<pre class="brush: js">// перебираємо елементи в set +// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} +for (let item of mySet) console.log(item); + +// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} +for (let item of mySet.keys()) console.log(item); + +// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} +for (let item of mySet.values()) console.log(item); + +// виводить елементи у послідовності: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} +//(key та value тут мають одне й те саме значення) +for (let [key, value] of mySet.entries()) console.log(key); + +// конвертує об'єкт Set в об'єкт Array за допомогою <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a> +var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}] + +// наступне також буде працювати, якщо буде запущено в HTML документі +mySet.add(document.body); +mySet.has(document.querySelector('body')); // true + +// конвертація між Set та Array +mySet2 = new Set([1, 2, 3, 4]); +mySet2.size; // 4 +[...mySet2]; // [1, 2, 3, 4] + +// Перетинання може симулюватися через +var intersection = new Set([...set1].filter(x => set2.has(x))); + +// різниця може бути симульована через +var difference = new Set([...set1].filter(x => !set2.has(x))); + +// Перебирання елементів Set за допомогою forEach +mySet.forEach(function(value) { + console.log(value); +}); + +// 1 +// 2 +// 3 +// 4</pre> + +<h3 id="Імплементація_базових_операцій_set">Імплементація базових операцій set</h3> + +<pre class="brush: js">Set.prototype.isSuperset = function(subset) { + for (var elem of subset) { + if (!this.has(elem)) { + return false; + } + } + return true; +} + +Set.prototype.union = function(setB) { + var union = new Set(this); + for (var elem of setB) { + union.add(elem); + } + return union; +} + +Set.prototype.intersection = function(setB) { + var intersection = new Set(); + for (var elem of setB) { + if (this.has(elem)) { + intersection.add(elem); + } + } + return intersection; +} + +Set.prototype.difference = function(setB) { + var difference = new Set(this); + for (var elem of setB) { + difference.delete(elem); + } + return difference; +} + +//Приклади +var setA = new Set([1, 2, 3, 4]), + setB = new Set([2, 3]), + setC = new Set([3, 4, 5, 6]); + +setA.isSuperset(setB); // => true +setA.union(setC); // => Set [1, 2, 3, 4, 5, 6] +setA.intersection(setC); // => Set [3, 4] +setA.difference(setC); // => Set [1, 2] + +</pre> + +<h3 id="Зв'язок_з_об'єктами_Array">Зв'язок з об'єктами <code>Array</code></h3> + +<pre class="brush: js">var myArray = ['value1', 'value2', 'value3']; + +// Використовуйте звичайний конструктор Set для трансформації Array у Set +var mySet = new Set(myArray); + +mySet.has('value1'); // повертає true + +// Використовуйте оператор spread для трансформації Set у Array. +console.log([...mySet]); // Виведе у точності такий самий Array як і myArray</pre> + +<h3 id="Зв'язок_зі_Strings">Зв'язок зі <code>Strings</code></h3> + +<pre class="brush: js">var text = 'India'; + +var mySet = new Set(text); // Set {'I', 'n', 'd', 'i', 'a'} +mySet.size; // 5 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Set")}}</p> + +<h2 id="Дівіться_також">Дівіться також</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html new file mode 100644 index 0000000000..22399ee081 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html @@ -0,0 +1,78 @@ +--- +title: 'String.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator +tags: + - ECMAScript 2015 + - JavaScript + - String + - Ітератор + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>[@@iterator]()</code></strong> повертає новий об'єкт <code>Iterator</code>, який перебирає коди символів рядкового значення, повертаючи код кожного символа у вигляді рядкового значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-iterator.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>[Symbol.iterator]</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий об'єкт <code>Iterator</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_iterator">Використання <code>[@@iterator]()</code></h3> + +<pre class="brush:js">var str = 'A\uD835\uDC68'; + +var strIter = str[Symbol.iterator](); + +console.log(strIter.next().value); // "A" +console.log(strIter.next().value); // "\uD835\uDC68" +</pre> + +<h3 id="Використання_iterator_з_for..of">Використання <code>[@@iterator]()</code> з <code>for..of</code></h3> + +<pre class="brush:js">var str = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A'; + +for (var v of str) { + console.log(v); +} +// "A" +// "\uD835\uDC68" +// "B" +// "\uD835\uDC69" +// "C" +// "\uD835\uDC6A" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}</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.@@iterator")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/anchor/index.html b/files/uk/web/javascript/reference/global_objects/string/anchor/index.html new file mode 100644 index 0000000000..aa1424790a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/anchor/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.anchor() +slug: Web/JavaScript/Reference/Global_Objects/String/anchor +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>anchor()</code></strong> створює рядок, який складається з початкового тегу <code><a name="..."></code>, далі якийсь текст, а за ним кінцевий тег <code></a></code>.</p> + +<div class="blockIndicator warning"> +<p>Не використовуйте цей метод. Використовуйте замість нього <a href="/uk/docs/Web/API/Document_Object_Model">DOM API</a>. Також специфікація HTML більше не дозволяє елементу <a href="/uk/docs/Web/HTML/Element/a"><code><a></code></a> мати атрибут <code>name</code>, тому цей метод навіть не створює коректну розмітку.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.anchor(<var>name</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Рядок, що відображає атрибут <code>name</code> тега, що буде створений.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що складається з початкового тегу <code><a name="<var>name</var>"></code>, далі текст <var>str</var>, і після нього кінцевий тег <code></a></code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Не використовуйте цей метод. Використовуйте замість нього <a href="/uk/docs/Web/API/Document_Object_Model">DOM API</a>. Також специфікація HTML більше не дозволяє елементу <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code><a></code></a> мати артибут <code>name</code>, тому цей метод навіть не створює коректну розмітку.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_anchor">Використання <code>anchor()</code></h3> + +<pre class="brush: js">var myString = 'Зміст'; + +document.body.innerHTML = myString.anchor('contents_anchor'); +</pre> + +<p>створить наступний HTML:</p> + +<pre class="brush: html"><a name="contents_anchor">Зміст</a> +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: html">if (!String.prototype.anchor) + String.prototype.anchor = function(x){ + return '<a name="' + x + '">' + this + '</a>' + } +</pre> + +<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.anchor")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.link()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/big/index.html b/files/uk/web/javascript/reference/global_objects/string/big/index.html new file mode 100644 index 0000000000..40f46db96d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/big/index.html @@ -0,0 +1,73 @@ +--- +title: String.prototype.big() +slug: Web/JavaScript/Reference/Global_Objects/String/big +tags: + - JavaScript + - String + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/big +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>big()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/big" title="Застарілий HTML-елемент Big (<big>) відображає текст розміром шрифту на один рівень більшим за оточуючий текст (наприклад, medium перетворюється на large)"><code><big></code></a>, який відображає рядок великим шрифтом.</p> + +<div class="note"> +<p><strong>Примітка щодо використання:</strong> Елемент <big> був прибраний у <a href="/uk/docs/Web/Guide/HTML/HTML5">HTML5</a> та не має більше використовуватись. Замість нього веб-розробникам варто використовувати властивості <a href="/uk/docs/Web/CSS">CSS</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.big()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/big" title="Застарілий HTML-елемент Big (<big>) відображає текст розміром шрифту на один рівень більшим за оточуючий текст (наприклад, medium перетворюється на large)"><code><big></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>big()</code> вбудовує рядок у тег <code><big></code>: <code>"<big>str</big>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_big">Використання <code>big()</code></h3> + +<p>Наступний приклад використовує рядкові методи, щоб змінити розмір рядка:</p> + +<pre class="brush: js">var worldString = 'Привіт'; + +console.log(worldString.small()); // <small>Привіт</small> +console.log(worldString.big()); // <big>Привіт</big> +console.log(worldString.fontsize(7)); // <fontsize=7>Привіт</fontsize> +</pre> + +<p>З об'єктом <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a> ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним в загальному стилі, наприклад:</p> + +<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '2em'; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}}</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.big")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.fontsize()")}}</li> + <li>{{jsxref("String.prototype.small()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/blink/index.html b/files/uk/web/javascript/reference/global_objects/string/blink/index.html new file mode 100644 index 0000000000..2c562cc2ca --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/blink/index.html @@ -0,0 +1,70 @@ +--- +title: String.prototype.blink() +slug: Web/JavaScript/Reference/Global_Objects/String/blink +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/blink +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>blink()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/blink" title="HTML-елемент Blink (<blink>) - це нестандартний елемент, який відображає текст таким, що повільно блимає."><code><blink></code></a>, який виводить текст, що блимає.</p> + +<div class="warning"> +<p><strong>Застереження:</strong> Блимаючий текст не схвалюється у кількох стандартах доступності. Сам елемент <code><blink></code> нестандартний та не рекомендований!</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.blink()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/blink" title="HTML-елемент Blink (<blink>) - це нестандартний елемент, який відображає текст таким, що повільно блимає."><code><blink></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>blink()</code> вбудовує рядок у тег <code><blink></code>: <code>"<blink>str</blink>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_blink">Використання <code>blink()</code></h3> + +<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p> + +<pre class="brush: js">var worldString = 'Привіт'; + +console.log(worldString.blink()); // <blink>Привіт</blink> +console.log(worldString.bold()); // <b>Привіт</b> +console.log(worldString.italics()); // <i>Привіт</i> +console.log(worldString.strike()); // <strike>Привіт</strike></pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}}</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.blink")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/bold/index.html b/files/uk/web/javascript/reference/global_objects/string/bold/index.html new file mode 100644 index 0000000000..1f0ddd661d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/bold/index.html @@ -0,0 +1,66 @@ +--- +title: String.prototype.bold() +slug: Web/JavaScript/Reference/Global_Objects/String/bold +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/bold +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>bold()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/b" title="HTML-елемент Bring Attention To (<b>) використовується для привертання уваги читача до вмісту елемента, який в іншому випадку не набуде особливого значення."><code><b></code></a>, який відображає рядок жирним шрифтом.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.bold()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/b" title="HTML-елемент Bring Attention To (<b>) використовується для привертання уваги читача до вмісту елемента, який в іншому випадку не набуде особливого значення."><code><b></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>bold()</code> вбудовує рядок у тег <code><b></code> : <code>"<b>str</b>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_bold">Використання <code>bold()</code></h3> + +<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p> + +<pre class="brush: js">var worldString = 'Привіт'; + +console.log(worldString.blink()); // <blink>Привіт</blink> +console.log(worldString.bold()); // <b>Привіт</b> +console.log(worldString.italics()); // <i>Привіт</i> +console.log(worldString.strike()); // <strike>Привіт</strike></pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}}</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.bold")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/charat/index.html b/files/uk/web/javascript/reference/global_objects/string/charat/index.html new file mode 100644 index 0000000000..004400895c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/charat/index.html @@ -0,0 +1,316 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Reference/Global_Objects/String/charAt +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>charAt()</code></strong> створює і вертає підрядок, що міститиме лише один символ (кодова одиниця UTF-16), розташований у рядку із зазначеним зсувом.</span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>str</em>.charAt(<em>index</em>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>index</code></dt> + <dd>Індекс символа у рядку, ціле число від <code>0</code> до <code>str.length - 1</code>. Якщо не зазначено (метод викликано без аргументів), метод повертає перший символ рядка.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Підрядок з одного символа (одна кодова одиниця UTF-16) отриманого за вказаним індексом, або порожній рядок, якщо <code>index</code> вказує за межі рядка (менше <code>0</code> чи понад <code>str.length - 1</code>).</p> + +<h2 id="Опис">Опис</h2> + +<p>Кожен символ рядка має індекс, що зростає зліва направо. Лік починається від нуля, тож перший символ має індекс <code>0</code>, а останній — <code>str.length - 1</code>. Якщо зазначено індекс, що за ці межі виходить, метод <code>chartAt()</code> вертає порожній рядок.</p> + +<p>Якщо індекс не зазначено для метода <code>charAt()</code>, буде задіяно типове значення <code>0</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Виведення_різних_символів_рядка">Виведення різних символів рядка</h3> + +<p>Цей приклад дістає та виводить до консолі різні символи рядка <code>«Хай йому грець»</code>:</p> + +<pre class="brush: js">var str = 'Хай йому грець'; + +// Індекс не зазначено, буде неявно задіяно значення 0 +console.log(str.charAt()); // виводить "Х" + +console.log(str.charAt(0)); // виводить "Х" +console.log(str.charAt(1)); // виводить "а" +console.log(str.charAt(2)); // виводить "й" + +console.log(str.charAt(-1)); // виводить "" +console.log(str.charAt(99)); // виводить "" +</pre> + +<h3 id="Отримання_цілого_символа">Отримання цілого символа</h3> + +<p>Позаяк деякі символи в UTF-16 подаються двома кодовими одиницями, слід зважати на те, що метод <code>charAt()</code> дістає їх з рядка нарізно, а отже задля отримання цілого символа доведеться їх об'єднати.</p> + +<p>Наведений нижче код призначено для послідовної обробки рядків, що можуть містити такі складені символи (не належать до <abbr title="Basic Multilingual Plane (BMP)">Основної Багатомовної Площини (ОБП)</abbr> Unicode):</p> + +<pre class="brush: js">// Символи поза ОБП можна було б вжити безпосередньо +var str = 'A \uD87E\uDC04 Z'; + +for (var i = 0, chr; i < str.length; i++) { + // Просто додайте цю перевірку на початку кожного циклу з перебору символів + // і завжди матимете складені символи повністю, а не половини складеного + // символа нарізно. + if ((chr = getWholeChar(str, i)) === false) { + continue; + } + + console.log(chr); +} + +function getWholeChar(str, i) { + var code = str.charCodeAt(i); + + // Значення зсуву «i» за межами рядка + if (Number.isNaN(code)) { + return ''; + } + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); + } + + // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити + // «старші половини приватного вжитку» як окремі символи). + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + return str.charAt(i) + str.charAt(i + 1); + } + + // Молодша половина (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; + } + var prev = str.charCodeAt(i - 1); + + // Можна замінити друге значення на 0xDB7F й тлумачити + // «старші половини приватного вжитку» як окремі символи. + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; + } + + // Молодшу половину було оброблено разом із старшою, тож тепер + // ми її пропускаємо. + return false; +} +</pre> + +<p>У середовищі ECMAScript 2016, що підтримує присвоєння {{jsxref("Operators/Деструктуризація", "деструктурованням")}}, можна трохи поліпшити легкочитність коду, повертаючи з функції також оновлене (якщо останній символ був складений) значення зсуву:</p> + +<pre class="brush: js">// Символи поза ОБП можна було б вжити безпосередньо +var str = 'A\uD87E\uDC04Z'; +for (var i = 0, chr; i < str.length; i++) { + [chr, i] = getWholeCharAndI(str, i); + // Просто додайте цей виклик на початку кожного циклу з перебору символів + // і завжди матимете складені символи повністю, а не половини складеного + // символа нарізно. + // Значення «i» буде оновлено, якщо метод натрапить на складений символ. + + console.log(chr); +} + +function getWholeCharAndI(str, i) { + var code = str.charCodeAt(i); + + // Значення зсуву «i» за межами рядка + if (Number.isNaN(code)) { + return ['', i]; + } + if (code < 0xD800 || code > 0xDFFF) { + / / Звичайний символ, просто лишаємо все як є. + return [str.charAt(i), i]; + } + + // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити + // «старші половини приватного вжитку» як окремі символи). + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + + // Зібрати складений символ докупи й повернути збільшений зсув + return [str.charAt(i) + str.charAt(i + 1), i + 1]; + } + + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; + } + var prev = str.charCodeAt(i - 1); + + // Можна замінити друге значення на 0xDB7F й тлумачити + // «старші половини приватного вжитку» як окремі символи. + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; + } + + // Повернути натомість наступний символ й повернути збільшений зсув + return [str.charAt(i + 1), i + 1]; +} +</pre> + +<p>Також можна навести більш витончене рішення, хоча дещо менш гнучке:</p> + +<pre class="brush: js">// Просто перебираємо символи рядка за допомогою forEachChar() +forEachChar('A\uD87E\uDC04Z', function(c) { + console.log(c); +}); + +function forEachChar(string, predicate) { + for (var i = 0; i < string.length; i++) { + var code = string.charCodeAt(i); + var value; + + // Звичайний символ, просто лишаємо як є. + if (code < 0xD800 || code > 0xDFFF) { + value = string.charAt(i); + } else { + // Старша половина (можна замінити друге значення на 0xDB7F й тлумачити + // «старші половини приватного вжитку» як окремі символи). + if (0xD800 <= code && code <= 0xDBFF) { + if (string.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + + var next = string.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + + value = string.charAt(i) + string.charAt(i + 1); + i++; + } else { + // Молодша половина (0xDC00 <= code && code <= 0xDFFF) + throw 'Low surrogate without preceding high surrogate'; + } + } + + // Перебір можна перервати, повернувши з функції-присудка значення false + if (false === predicate.call(string, value)) { + return; + } + } +} +</pre> + +<h3 id="Виправлений_charAt()_з_урахуванням_складених_символів">Виправлений <code>charAt()</code> з урахуванням складених символів</h3> + +<p>Приклад нижче наводить функцію <code>fixedCharAt()</code>, яка не лише злучає половинки складених символів, а ще й змінює індексацію символів таким чином, що <code>index</code> позначає порядковий номер (лік від нуля, як завжди) не кодової одиниці (як для звичайного <code>charAt()</code>), а саме повного символа.</p> + +<p>Втім, слід зважати, що це рішення є вкрай неоптимальним, якщо користувати його для перебору всього рядка:</p> + +<pre class="brush: js">function fixedCharAt(string, index) { + var isExpectingLowSurrogate = false; + var charIndex = 0; + var i = 0; + + // За межами рядка. + if (index < 0 || index >= string.length) { + return ''; + } + + while (i < string.length && charIndex < index) { + if (isHighSurrogateAt(string, i) && isLowSurrogateAt(string, i + 1)) { + i++; + } + + i++; + charIndex++; + } + + if (i < string.length) { + if (isHighSurrogateAt(string, i) && isLowSurrogateAt(string, i + 1)) { + return string.charAt(i) + string.charAt(i + 1); + } else { + return string.charAt(i); + } + } + + return ''; +} + +function isHighSurrogateAt(string, index) { + var code = string.charCodeAt(index); + return 0xD800 <= code && code <= 0xDBFF; +} + +function isLowSurrogateAt(string, index) { + var code = string.charCodeAt(index); + return 0xDC00 <= code && code <= 0xDFFF; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкова виознака.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.String.charAt")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li><a href="https://mathiasbynens.be/notes/javascript-unicode">Негаразди з Unicode у JavaScript — Mathias Bynens</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html new file mode 100644 index 0000000000..3ed3a4c450 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html @@ -0,0 +1,161 @@ +--- +title: String.prototype.charCodeAt() +slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +tags: + - JavaScript + - String + - Unicode + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>charCodeAt()</code></strong> вертає ціле число в діапазоні між <code>0</code> та <code>65535</code>, що відображає кодову одиницю UTF-16 за наданим індексом.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-charcodeat.html", "shorter")}}</div> + + + +<p>Кодова одиниця UTF-16 співпадає з кодом символа Юнікоду для кодів символів, які можуть бути представлені єдиною кодовою одиницею UTF-16. Якщо код символа Юнікоду не може бути представлений єдиною кодовою одиницею UTF-16 (бо його значення більше за <code>0xFFFF</code>), тоді повернена кодова одиниця буде <em>першою частиною сурогатної пари </em>для коду символа. Якщо вам потрібен весь код символа, використовуйте {{jsxref("Global_Objects/String/codePointAt", "codePointAt()")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.charCodeAt(<var>index</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>index</var></code></dt> + <dd>Ціле число, що більше або дорівнює <code>0</code> та менше за довжину рядка. Якщо <code><var>index</var></code> не є числом, він за замовчуванням прирівнюється до <code>0</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Число, що відображає значення кодової одиниці UTF-16 для символа за наданим індексом <code><var>index</var></code>. Якщо <code><var>index</var></code> знаходиться за межами діапазону, <code>charCodeAt()</code> повертає {{jsxref("Global_Objects/NaN", "NaN")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Коди символів Юнікоду знаходяться в діапазоні від <code>0</code> до <code>1114111</code> <code>(0x10FFFF</code>). Перші 128 кодів символів Юнікоду повністю співпадають з кодуванням символів ASCII. (Інформацію щодо Юнікоду дивіться у <a href="/uk/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Посібнику JavaScript</a>.)</p> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> <code>charCodeAt()</code> завжди поверне значення, менше за <code>65536</code>. Тому що більші коди символів відображаються <em>парою</em> (з меншим значенням) "сурогатних" псевдосимволів, що складають реальний символ.</p> + +<p>Тому, щоб дослідити (чи відтворити) повний символ для значень окремих символів від <code>65536</code> та більше, для таких символів необхідно отримувати не лише <code>charCodeAt(<var>i</var>)</code>, але також <code>charCodeAt(<var>i</var>+1)</code> (ніби маніпулюючи рядком з двох літер), або використовувати замість цього <code>codePointAt(<var>i</var>)</code>. Дивіться приклади 2 та 3 (нижче).</p> +</div> + +<p><code>charCodeAt()</code> повертає {{jsxref("Global_Objects/NaN", "NaN")}}, якщо наданий індекс менший за <code>0</code>, або якщо він дорівнює чи перевищує значення довжини рядка.</p> + +<p>Зворотня сумісність: У історичних версіях (наприклад, JavaScript 1.2) метод <code>charCodeAt()</code> вертає число, що вказує значення набору символів ISO-Latin-1 для символа за наданим індексом. Набір символів ISO-Latin-1 знаходиться в діапазоні від <code>0</code> до <code>255</code>. Перші <code>0</code>-<code>127</code> повністю співпадають з набором символів ASCII.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_charCodeAt">Використання <code>charCodeAt()</code></h3> + +<p>Наступний приклад вертає <code>65</code>, значення Юнікоду для A.</p> + +<pre class="brush: js">'ABC'.charCodeAt(0) // вертає 65 +</pre> + +<h3 id="Виправлення_charCodeAt_для_обробки_символів_не_базової_багатомовної_площини_якщо_їхня_наявність_раніше_у_рядку_невідома">Виправлення <code>charCodeAt()</code> для обробки символів не базової багатомовної площини, якщо їхня наявність раніше у рядку невідома</h3> + +<p>Ця версія може використовуватись для циклів та подібного, коли невідомо, чи були присутні символи не з ББП до вказаної позиції.</p> + +<pre class="brush: js">function fixedCharCodeAt(str, idx) { + // напр. fixedCharCodeAt('\uD800\uDC00', 0); // 65536 + // напр. fixedCharCodeAt('\uD800\uDC00', 1); // false + idx = idx || 0; + var code = str.charCodeAt(idx); + var hi, low; + + // Високий сурогат (може міняти останнє шістнадцяткове значення на 0xDB7F + // для обробки високих приватних сурогатів + // як єдиних символів) + if (0xD800 <= code && code <= 0xDBFF) { + hi = code; + low = str.charCodeAt(idx + 1); + if (isNaN(low)) { + throw 'Високий сурогат без наступного ' + + 'низького сурогату у fixedCharCodeAt()'; + } + return ( + (hi - 0xD800) * 0x400) + + (low - 0xDC00) + 0x10000; + } + if (0xDC00 <= code && code <= 0xDFFF) { // Низький сурогат + // Ми вертаємо false, щоб дозволити циклам пропустити + // цю ітерацію, бо мали вже обробити + // високий сурогат вище у попередній ітерації + return false; + // hi = str.charCodeAt(idx - 1); + // low = code; + // return ((hi - 0xD800) * 0x400) + + // (low - 0xDC00) + 0x10000; + } + return code; +} +</pre> + +<h3 id="Виправлення_charCodeAt_для_обробки_символів_не_базової_багатомовної_площини_якщо_їхня_наявність_раніше_у_рядку_відома">Виправлення <code>charCodeAt()</code> для обробки символів не базової багатомовної площини, якщо їхня наявність раніше у рядку відома</h3> + +<pre class="brush: js">function knownCharCodeAt(str, idx) { + str += ''; + var code, + end = str.length; + + var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g; + while ((surrogatePairs.exec(str)) != null) { + var li = surrogatePairs.lastIndex; + if (li - 2 < idx) { + idx++; + } + else { + break; + } + } + + if (idx >= end || idx < 0) { + return NaN; + } + + code = str.charCodeAt(idx); + + var hi, low; + if (0xD800 <= code && code <= 0xDBFF) { + hi = code; + low = str.charCodeAt(idx + 1); + // Пройти на один далі, оскільки один з "символів" + // є частиною сурогатної пари + return ((hi - 0xD800) * 0x400) + + (low - 0xDC00) + 0x10000; + } + return code; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</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.charCodeAt")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html b/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html new file mode 100644 index 0000000000..0a917f5885 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/codepointat/index.html @@ -0,0 +1,142 @@ +--- +title: String.prototype.codePointAt() +slug: Web/JavaScript/Reference/Global_Objects/String/codePointAt +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>codePointAt()</code></strong> вертає невід'ємне ціле число, яке є значенням коду символу Юнікоду.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-codepointat.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.codePointAt(<var>pos</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>pos</var></code></dt> + <dd>Позиція елемента у <code><var>str</var></code><var>,</var> код символа з якої треба повернути.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Число, що відображає значення коду символу з наданої позиції <code><var>pos</var></code>. Якщо на позиції <code>pos</code> немає елемента, вертається {{jsxref("undefined")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо на вказаній позиції немає елемента, повертається {{jsxref("undefined")}}. Якщо на позиції <code><var>pos</var></code> не починається сурогатна пара UTF-16, то повертається кодова одиниця позиції <code><var>pos</var></code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_codePointAt">Використання <code>codePointAt()</code></h3> + +<pre class="brush: js">'ABC'.codePointAt(1) // 66 +'\uD800\uDC00'.codePointAt(0) // 65536 + +'XYZ'.codePointAt(42) // undefined +</pre> + +<h3 id="Цикл_з_codePointAt">Цикл з <code>codePointAt()</code></h3> + +<pre class="brush: js"><code class="md-code md-lang-javascript"><span class="md-code-keyword">for</span> (<span class="md-code-keyword">let</span> codePoint of <span class="md-code-string">'\ud83d\udc0e\ud83d\udc71\u2764'</span>) { + <span class="md-code-built_in">console</span>.log(codePoint<mark class="md-mark md-code-mark">.codePointAt(<span class="md-code-number">0</span>).toString(<span class="md-code-number">16</span>)</mark>) +} +// <span class="md-code-comment">'1f40e', '1f471', '2764</span></code>'<code class="md-code md-lang-javascript"><span class="md-code-comment"> </span></code> +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Наступний код додає у рядки функцію <code>codePointAt()</code> згідно специфікації ECMAScript 2015 для переглядачів без вбудованої підтримки.</p> + +<pre class="brush: js">/*! https://mths.be/codepointat v0.2.0 автор @mathias */ +if (!String.prototype.codePointAt) { + (function() { + 'use strict'; // необхідно для підтримки `apply`/`call` з `undefined`/`null` + var defineProperty = (function() { + // IE 8 підтримує `Object.defineProperty` лише на DOM-елементах + try { + var object = {}; + var $defineProperty = Object.defineProperty; + var result = $defineProperty(object, object, object) && $defineProperty; + } catch(error) {} + return result; + }()); + var codePointAt = function(position) { + if (this == null) { + throw TypeError(); + } + var string = String(this); + var size = string.length; + // `ToInteger` + var index = position ? Number(position) : 0; + if (index != index) { // краще `isNaN` + index = 0; + } + // Врахування індексів за межами існуючих значень: + if (index < 0 || index >= size) { + return undefined; + } + // Отримати першу кодову одиницю + var first = string.charCodeAt(index); + var second; + if ( // перевірити, чи вона є початком сурогатної пари + first >= 0xD800 && first <= 0xDBFF && // високий сурогат + size > index + 1 // існує наступна кодова одиниця + ) { + second = string.charCodeAt(index + 1); + if (second >= 0xDC00 && second <= 0xDFFF) { // низький сурогат + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000; + } + } + return first; + }; + if (defineProperty) { + defineProperty(String.prototype, 'codePointAt', { + 'value': codePointAt, + 'configurable': true, + 'writable': true + }); + } else { + String.prototype.codePointAt = codePointAt; + } + }()); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</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.codePointAt")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/concat/index.html b/files/uk/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..4d3b67b58d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,89 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/String/concat +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>concat()</code></strong> об'єднує рядкові аргументи з рядком, що викликав метод, та повертає новий рядок.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.concat(<var>str2</var> [, ...<var>strN</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>str2</var> [, ...<var>strN</var>]</code></dt> + <dd>Рядки, які треба об'єднати з <code><var>str</var></code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий рядок, що містить поєднаний текст з наданих рядків.</p> + +<h2 id="Опис">Опис</h2> + +<p>Функція <code>concat()</code> об'єднує рядкові аргументи з рядком, що викликав функцію, та повертає новий рядок. Зміни у початковому рядку чи у поверненому рядку не впливають один на одного.</p> + +<p>Якщо аргументи не належать до рядкового типу, вони перетворюються на рядкові значення перед об'єднанням.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_concat">Використання <code>concat()</code></h3> + +<p>Наступний приклад об'єднує рядки у новий рядок.</p> + +<pre class="brush: js">let hello = 'Привіт, ' +console.log(hello.concat('Кевіне', '. Гарного дня.')) +// Привіт, Кевіне. Гарного дня. + +let greetList = ['Привіт', ' ', 'Віка', '!'] +"".concat(...greetList) // "Привіт, Віка!" + +"".concat({}) // [object Object] +"".concat([]) // "" +"".concat(null) // "null" +"".concat(true) // "true" +"".concat(4, 5) // "45" + +</pre> + +<h2 id="Продуктивність">Продуктивність</h2> + +<p>Настійно рекомендується використовувати {{jsxref("Operators/Оператори_присвоєння", "оператори присвоєння", "", 1)}} (<code>+</code>, <code>+=</code>) замість методу <code>concat()</code>. <br> + Згідно з цим <a href="https://jsperf.com/concat-vs-plus-vs-join">тестуванням продуктивності</a>, {{jsxref("Operators/Оператори_присвоєння", "оператори присвоєння", "", 1)}} в декілька раз швидші.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</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.concat")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Operators/Оператори_присвоєння", "Оператори присвоєння", "", 1)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/endswith/index.html b/files/uk/web/javascript/reference/global_objects/string/endswith/index.html new file mode 100644 index 0000000000..e387abf56c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/endswith/index.html @@ -0,0 +1,90 @@ +--- +title: String.prototype.endsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/endsWith +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>endsWith()</code></strong> визначає, чи завершується рядок символами вказаного рядка, повертаючи, відповідно, <code>true</code> чи <code>false</code>.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-endswith.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>searchString</var></code></dt> + <dd>Символи, які шукатимуться в кінці рядка <code><var>str</var></code>.</dd> + <dt><code><var>length</var></code> {{optional_inline}}</dt> + <dd>Якщо наданий, використовується як довжина <code><var>str</var></code>. За замовчуванням дорівнює <code><var>str</var>.length</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><strong><code>true</code></strong>, якщо надані символи знайдені в кінці рядка; інакше, <strong><code>false</code></strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод дозволяє визначити, чи завершується рядок іншим рядком. Цей метод чутливий до регістру.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_endsWith">Використання <code>endsWith()</code></h3> + +<pre class="brush: js">let str = 'Питання в тому: бути чи не бути.' + +console.log(str.endsWith('бути.')) // true +console.log(str.endsWith('Питання')) // false +console.log(str.endsWith('Питання', 7)) // true +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей метод був доданий до специфікації ECMAScript 6 та може поки не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл <code>String.prototype.endsWith()</code> за допомогою наступного коду:</p> + +<pre class="brush: js">if (!String.prototype.endsWith) { + String.prototype.endsWith = function(search, this_len) { + if (this_len === undefined || this_len > this.length) { + this_len = this.length; + } + return this.substring(this_len - search.length, this_len) === search; + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</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.endsWith")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.startsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/fixed/index.html b/files/uk/web/javascript/reference/global_objects/string/fixed/index.html new file mode 100644 index 0000000000..c13fbaa65f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fixed/index.html @@ -0,0 +1,62 @@ +--- +title: String.prototype.fixed() +slug: Web/JavaScript/Reference/Global_Objects/String/fixed +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>fixed()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/tt" title="Застарілий HTML-елемент Teletype Text (<tt>) створює внутрішній текст, який відображається за допомогою моноширинного обличчя шрифта користувацького агента."><code><tt></code></a>, який відображає рядок моноширинним шрифтом.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.fixed()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що відображає HTML-елемент <a href="/uk/docs/Web/HTML/Element/tt" title="Застарілий HTML-елемент Teletype Text (<tt>) створює внутрішній текст, який відображається за допомогою моноширинного обличчя шрифта користувацького агента."><code><tt></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>fixed()</code> вбудовує рядок у тег <code><tt></code>: <code>"<tt>str</tt>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_fixed">Використання <code>fixed()</code></h3> + +<p>Наступний приклад використовує метод <code>fixed</code>, щоб змінити форматування рядка:</p> + +<pre class="brush: js">var worldString = 'Привіт'; +console.log(worldString.fixed()); // "<tt>Привіт</tt>" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}</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.fixed")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html new file mode 100644 index 0000000000..5e1a68492b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html @@ -0,0 +1,81 @@ +--- +title: String.prototype.fontcolor() +slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>fontcolor()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (<font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code><font></code></a>, який відображає рядок вказаним кольором.</p> + +<div class="note"> +<p><strong>Примітка щодо використання:</strong> Елемент <font> був прибраний у <a href="/uk/docs/Web/Guide/HTML/HTML5">HTML5</a> та більше не повинен використовуватись. Замість нього веб-розробникам варто використовувати властивості <a href="/uk/docs/Web/CSS">CSS</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.fontcolor(<var>color</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>color</code></dt> + <dd>Рядок, що відображає колір у вигляді шістнадцяткової RGB-трійці або рядкового літералу. Рядкові літерали для імен кольорів перераховані у <a href="/uk/docs/Web/CSS/color_value">Довіднику кольорів CSS</a>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (<font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code><font></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо ви виражаєте колір шістнадцятковою RGB-трійцею, ви повинні використовувати формат <code>rrggbb</code>. Наприклад, шістнадцяткові RGB-значення для оранжево-рожевого (salmon) такі: red=FA, green=80 та blue=72, отже, RGB-трійця для оранжево-рожевого дорівнює <code>"FA8072"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_fontcolor">Використання <code>fontcolor()</code></h3> + +<p>Наступний приклад використовує метод <code>fontcolor()</code>, щоб змінити колір рядка, створюючи рядок з HTML-тегом <code><font></code>.</p> + +<pre class="brush: js">var worldString = 'Привіт'; + +console.log(worldString.fontcolor('red') + ' червоний у цьому рядку'); +// '<font color="red">Привіт</font> червоний у цьому рядку' + +console.log(worldString.fontcolor('FF00') + ' червоний у шістнадцятковому форматі у цьому рядку'); +// '<font color="FF00">Привіт</font> червоний у шістнадцятковому форматі у цьому рядку' +</pre> + +<p>За допомогою об'єкта <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a> ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним в більш загальному стилі, наприклад:</p> + +<pre class="brush: js">document.getElementById('yourElemId').style.color = 'red'; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</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.fontcolor")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.fontsize()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html b/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html new file mode 100644 index 0000000000..c7cc26f07e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fontsize/index.html @@ -0,0 +1,80 @@ +--- +title: String.prototype.fontsize() +slug: Web/JavaScript/Reference/Global_Objects/String/fontsize +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>fontsize()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (<font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code><font></code></a>, який відображає рядок вказаним розміром шрифта.</p> + +<div class="note"> +<p><strong>Примітка щодо використання:</strong> Елемент <font> був прибраний у <a href="/uk/docs/Web/Guide/HTML/HTML5">HTML5</a> та більше не повинен використовуватись. Замість нього веб-розробникам варто використовувати властивості <a href="/uk/docs/Web/CSS">CSS</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.fontsize(<var>size</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>size</code></dt> + <dd>Ціле число в діапазоні між 1 та 7; рядок, що відображає ціле число зі знаком в діапазоні між 1 та 7.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/font" title="HTML-елемент Font Element (<font>) визначає розмір, колір та обличчя шрифта для свого вмісту."><code><font></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Коли ви вказуєте розмір як ціле число, ви встановлюєте розмір шрифта <code>str</code> одним з 7 визначених розмірів. Коли ви вказуєте значення <code>size</code> у вигляді рядка, наприклад, "-2", ви коригуєте розмір шрифта <code>str</code> відносно розміру, встановленого у тезі <a href="/uk/docs/Web/HTML/Element/basefont" title="Застарілий HTML-елемент Base Font (<basefont>) встановлює обличчя, розмір та колір шрифта за замовчуванням для елементів, які є нащадками батьківського елемента."><code><basefont></code></a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_fontsize">Використання <code>fontsize()</code></h3> + +<p>Наступний приклад використовує рядкові методи, щоб змінити розмір рядка:</p> + +<pre class="brush: js">var worldString = 'Привіт'; + +console.log(worldString.small()); // <small>Привіт</small> +console.log(worldString.big()); // <big>Привіт</big> +console.log(worldString.fontsize(7)); // <font size="7">Привіт</fontsize> +</pre> + +<p>За допомогою об'єкта <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a> ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним у більш загальному стилі, наприклад:</p> + +<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em'; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</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.fontsize")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.big()")}}</li> + <li>{{jsxref("String.prototype.small()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..be8f695a24 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,109 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +tags: + - JavaScript + - Method + - String + - Unicode + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +<div>{{JSRef}}</div> + +<p>Статичний метод <strong><code>String.fromCharCode()</code></strong> повертає рядок, створений з послідовності кодових одиниць Unicode переданих цілими числами.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>Послідовність цілих чисел, кожне з яких подає окрему кодову одиницю Unicode.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок із символів, що відповідають переданій послідовності значень (кодових одиниць) Unicode.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод вертає власне рядок, що належить до {{glossary("Primitive", "простого типу даних")}}, а не об'єкт класу <code>{{jsxref("String")}}</code>.</p> + +<p>Позаяк <code>fromCharCode()</code> є статичним методом класу <code>{{jsxref("String")}}</code>, він зазвичай використовується як <code>String.fromCharCode()</code>, а не як метод створеного об'єкта класу.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_fromCharCode()">Використання <code>fromCharCode()</code></h3> + +<p>Наведений вираз повертає рядок "Віко":</p> + +<pre class="brush: js">// вертає "Віко" +String.fromCharCode(0x412, 0x456, 0x43A, 0x43E);</pre> + +<h2 id="Обробка_значень_понад_0xFFFF">Обробка значень понад 0xFFFF</h2> + +<p>Попри свою назву, метод фактично приймає не коди символів, а саме кодові одиниці. Тобто символи, коди яких перевищують значення 0xFFFF (діапазон UCS-2), доведеться передавати двома кодовими одиницями:</p> + +<p>Наприклад, символ з кодом U+1F341 «MAPLE LEAF» доведеться подавати як послідовність кодових одиниць 0xD83C та 0xDF41:</p> + +<pre class="brush: js">// виводить символ U+1F341 «MAPLE LEAF» +console.log(String.fromCharCode(0xD83C, 0xDF41));</pre> + +<p>Більшість символів Unicode можна передати значеннями одного 16-розрядного числа (як передбачалося на початку стандартизації JavaScript), тож <code>fromCharCode()</code> можна застосовувати для створення рядків із найпоширенішими символами (UCS-2 є підмножиною UTF-8, що містить найбільш вживані символи), проте для потреб передачі всіх можливих символів (кодуються 21 двійковим розрядом) лише методу <code>fromCharCode()</code> недостатньо. Позаяк символи з кодами вищими за 0xFFFF подаються так званими «сурогатними парами» (двома окремими кодовими одиницями), можна використати <code>{{jsxref("String.fromCodePoint()")}}</code> (є частиною стандарту ES2015), що належним чином перетворить вищі коди символів на такі пари:</p> + +<pre class="brush: js">// виводить true +console.log(String.fromCharCode(0xD83C, 0xDF41) === String.fromCodePoint(0x1F341));</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden"> +<p>Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> +</div> + +<p>{{Compat("javascript.builtins.String.fromCharCode")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html new file mode 100644 index 0000000000..2825480bfd --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html @@ -0,0 +1,171 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +tags: + - ECMAScript 2015 + - JavaScript + - Method + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +<div>{{JSRef}}</div> + +<p>Статичний метод <strong><code>String.fromCodePoint()</code></strong> повертає рядок, створений з послідовності кодів символів Unicode переданих цілими числами.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>Послідовність цілих чисел, кожне з яких передає код символа Unicode.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок із символів, що відповідають переданій послідовності кодів символів Unicode.</p> + +<h3 id="Винятки">Винятки</h3> + +<ul> + <li>Викидає виняток <code>{{jsxref("Errors/Not_a_codepoint", "RangeError")}}</code>, якщо вказано непередбачений (відсутній) код символа Unicode (наприклад, "RangeError: Invalid code point NaN).</li> +</ul> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод вертає власне рядок, що належить до {{glossary("Primitive", "простого типу даних")}}, а не об'єкт класу <code>{{jsxref("String")}}</code>.</p> + +<p>Позаяк <code>fromCodePoint()</code> є статичним методом класу <code>{{jsxref("String")}}</code>, він зазвичай використовується як <code>String.fromCodePoint()</code>, а не як метод створеного об'єкта класу.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_fromCodePoint()">Використання <code>fromCodePoint()</code></h3> + +<pre class="brush: js">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404, 0x490); // "ЄҐ" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" + +String.fromCodePoint('_'); // викидає RangeError +String.fromCodePoint(Infinity); // викидає RangeError +String.fromCodePoint(-1); // викидає RangeError +String.fromCodePoint(3.14); // викидає RangeError +String.fromCodePoint(3e-2); // викидає RangeError +String.fromCodePoint(NaN); // викидає RangeError +</pre> + +<pre class="brush: js">// Метод String.fromCharCode() не може створювати символи з такими великими кодами +// Натомість fromCodePoint() може створювати символи, що передаються двома кодовими одиницями (чотири байти), +// так само, як і звичайні двобайтні (тобто може створити рядок, що містить один символ, але має довжину 2 замість 1). +console.log(String.fromCodePoint(0x2F804)); // Значення 194564 в десятковій системі числення +</pre> + +<h2 id="Запасний_варіант_(поліфіл)">Запасний варіант (поліфіл)</h2> + +<p>Цей метод з'явився в ECMAScript 2015, тож, можливо, наявний не у всякій реалізації JavaScript. Проте, ви можете використати наступний код для забезпечення запасного варіанту:</p> + +<pre class="brush: js">/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */ +if (!String.fromCodePoint) { + (function() { + var defineProperty = (function() { + // IE 8 only supports `Object.defineProperty` on DOM elements + try { + var object = {}; + var $defineProperty = Object.defineProperty; + var result = $defineProperty(object, object, object) && $defineProperty; + } catch(error) {} + return result; + }()); + var stringFromCharCode = String.fromCharCode; + var floor = Math.floor; + var fromCodePoint = function() { + var MAX_SIZE = 0x4000; + var codeUnits = []; + var highSurrogate; + var lowSurrogate; + var index = -1; + var length = arguments.length; + if (!length) { + return ''; + } + var result = ''; + while (++index < length) { + var codePoint = Number(arguments[index]); + if ( + !isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity` + codePoint < 0 || // not a valid Unicode code point + codePoint > 0x10FFFF || // not a valid Unicode code point + floor(codePoint) != codePoint // not an integer + ) { + throw RangeError('Invalid code point: ' + codePoint); + } + if (codePoint <= 0xFFFF) { // BMP code point + codeUnits.push(codePoint); + } else { // Astral code point; split in surrogate halves + // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + codePoint -= 0x10000; + highSurrogate = (codePoint >> 10) + 0xD800; + lowSurrogate = (codePoint % 0x400) + 0xDC00; + codeUnits.push(highSurrogate, lowSurrogate); + } + if (index + 1 == length || codeUnits.length > MAX_SIZE) { + result += stringFromCharCode.apply(null, codeUnits); + codeUnits.length = 0; + } + } + return result; + }; + if (defineProperty) { + defineProperty(String, 'fromCodePoint', { + 'value': fromCodePoint, + 'configurable': true, + 'writable': true + }); + } else { + String.fromCodePoint = fromCodePoint; + } + }()); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/includes/index.html b/files/uk/web/javascript/reference/global_objects/string/includes/index.html new file mode 100644 index 0000000000..bcfb01d5aa --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/includes/index.html @@ -0,0 +1,125 @@ +--- +title: String.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/String/includes +tags: + - JavaScript + - Method + - Prototype + - Reference + - String + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/includes +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>includes()</code></strong> визначає чи може один рядок бути знайденим всередині іншого, повертаючи, відповідно, <code>true</code> або <code>false</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-includes.html", "shorter")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>searchString</code></dt> + <dd>Рядок для пошуку всередині <em><code>str</code></em>.</dd> + <dt><code>position</code> {{optional_inline}}</dt> + <dd>Позиція всередині рядка, з якої буде почато пошук рядка <code>searchString</code>. (За замовчуванням 0).</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><strong><code>true</code></strong>, якщо шуканий рядок знайдено де-завгодно всередині наданого рядка; інакше, <strong><code>false</code></strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод дозволяє визначити чи знаходиться один рядок всередині іншого.</p> + +<h3 id="Чутливість_до_регістру">Чутливість до регістру</h3> + +<p>Метод <code>includes()</code> є чутливим до регістру. Для прикладу, наступний вираз поверне <code>false</code>:</p> + +<pre class="brush: js">'Синій кит'.includes('синій'); // вертає false +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_includes">Використання <code>includes()</code></h3> + +<pre class="brush: js">var str = 'Питання в тому: бути чи не бути.'; + +console.log(str.includes('Питання')); // true +console.log(str.includes('бути')); // true +console.log(str.includes('неіснуючий')); // false +console.log(str.includes('Питання', 1)); // false +console.log(str.includes('ПИТАННЯ')); // false +console.log(str.includes('')); // true</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей метод був доданий до специфікації ECMAScript 2015 і може бути недоступним у всіх реалізаціях JavaScript.</p> + +<p>Однак, ви можете легко розробити поліфіл для цього методу:</p> + +<pre class="brush: js">if (!String.prototype.includes) { + String.prototype.includes = function(search, start) { + 'use strict'; + + if (search instanceof RegExp) { + throw TypeError('first argument must not be a RegExp'); + } + if (start === undefined) { start = 0; } + return this.indexOf(search, start) !== -1; + }; +}</pre> + +<p class="brush: js"></p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці, згенерована з структурованих даних. Якщо ви хочете внести свій вклад в дані, будь ласка, ознайомтесь з <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлість нам запит на додавання даних.</p> + +<p>{{Compat("javascript.builtins.String.includes")}}</p> + +<h2 id="String.prototype.contains">String.prototype.contains</h2> + +<p>У Firefox 18-39 назва цього методу була <code>contains()</code>. Він був перейменований на <code>includes()</code> у <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102219">bug 1102219</a> у зв'язку з наступною причиною:</p> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">Повідомлялося</a>, що деякі веб-сайти, які використовують MooTools 1.2 не працюють на Firefox 17. Ця версія MooTools перевіряла чи існує метод <code>String.prototype.contains()</code> та, якщо ні, то MooTools додає власну функцію.</p> + +<p>З введенням цієї функції у Firefox 17, поведінка цієї перевірки змінювалася таким чином, що ставала причиною непрацездатності коду на основі реалізації методу <code>String.prototype.contains()</code> від MooTools. В результаті реалізація була <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8">відключена</a> у Firefox 17, а <code>String.prototype.contains()</code> був доступний на одну версію пізніше, у Firefox 18, коли <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036#c32">налагодження зв'язків з MooTools </a>призвело до <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">випуску MooTools версії 1.2.6</a>.</p> + +<p>MooTools 1.3 примусово запускає власну версію методу <code>String.prototype.contains()</code>, тож, веб-сайти, що покладаються на неї, не повинні ламатися. Однак, зауважте, що сигнатура цього методу відразняється для <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 </a>і ECMAScript 2015 (на місці другого аргумента). Пізніше, <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ змінив сігнатуру у відповідності до стандарту ES2015.</a></p> + +<p>У Firefox 48 метод <code>String.prototype.contains()</code> було видалено. Використовуйте тільки <code>String.prototype.includes()</code>.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.includes()")}}</li> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.startsWith()")}}</li> + <li>{{jsxref("String.prototype.endsWith()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/index.html b/files/uk/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..f28c4fb043 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,374 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - String + - Довідка + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>Глобальний об'єкт <strong><code>String</code></strong> є конструктором для рядків, або послідовностей символів.</p> + +<h2 id="Опис">Опис</h2> + +<p>Рядки корисні для утримання данних, які можуть бути представлені в текстовій формі. Деякі з найбільш виконуваних операцій над рядками: перевірка їхньої {{jsxref("String.length", "довжини")}}, побудова та об'єднання рядків за допомогою <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">рядкових операторів + та +=</a>, перевірка наявності чи розташування підрядків методом {{jsxref("String.prototype.indexOf()", "indexOf()")}} чи копіювання підрядків методом {{jsxref("String.prototype.substring()", "substring()")}}.</p> + +<h3 id="Створення_рядків">Створення рядків</h3> + +<p>Рядки можна створювати як примітиви, з рядкових літералів, або як об'єкти, використовуючи конструктор {{jsxref("String/String")}}:</p> + +<pre class="brush: js notranslate">const string1 = "Рядковий примітив"; +const string2 = 'Теж рядковий примітив'; +const string3 = `І ще один рядковий примітив`; + +const string4 = new String("Об'єкт String");</pre> + +<p>Рядкові примітиви та рядкові об'єкти можна взаємно замінювати у більшості ситуацій. Дивіться нижче "<a href="https://wiki.developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String$edit#String_primitives_and_String_objects">Рядкові примітиви та рядкові об'єкти</a>".</p> + +<p>Рядкові літерали можуть створюватись з використанням одинарних чи подвійних лапок, які працюють ідентично, або за допомогою зворотніх лапок <kbd>`</kbd>. Ця остання форма створює <a href="/uk/docs/Web/JavaScript/Reference/Template_literals">шаблонний літерал</a>: ця форма дозволяє інтерполювати вирази.</p> + +<h3 id="Доступ_до_символів">Доступ до символів</h3> + +<p>Існують два способи доступу до окремих символів рядка. Перший - це метод {{jsxref("String.prototype.charAt()", "charAt()")}}:</p> + +<pre class="brush: js notranslate">return 'кіт'.charAt(1); // вертає "і" +</pre> + +<p>Другий спосіб (запроваджений у ECMAScript 5) працює з рядком як з подібним до масиву об'єктом, де окремі символи відповідають числовому індексу:</p> + +<pre class="brush: js notranslate">return 'кіт'[1]; // вертає "і" +</pre> + +<p>Під час звернення до символу за допомогою дужкової нотації спроби видалити ці властивості чи присвоїти їм значення не матимуть успіху. Ці властивості не є доступними ані для запису, ані для налаштування. (Дивіться більше інформації у {{jsxref("Object.defineProperty()")}}.)</p> + +<h3 id="Порівняння_рядків">Порівняння рядків</h3> + +<p>У мові C для порівняння рядків використовується функція <code>strcmp()</code>. У JavaScript ви просто використовуєте оператори <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">менше ніж та більше ніж</a>:</p> + +<pre class="brush: js notranslate">var a = 'а'; +var b = 'б'; +if (a < b) { // true + console.log(a + ' менше ніж ' + b); +} else if (a > b) { + console.log(a + ' більше ніж ' + b); +} else { + console.log(a + ' та ' + b + ' є рівними.'); +} +</pre> + +<p>Схожий результат можна отримати за допомогою методу {{jsxref("String.prototype.localeCompare()", "localeCompare()")}}, що успадковується екземплярами <code>String</code>.</p> + +<p>Зауважте, що <code>a == b</code> перевіряє рядки у <code><var>a</var></code> та <code><var>b</var></code> на рівність у звичайний чутливий до регістру спосіб. Якщо вам потрібно порівняння літер без врахування регістру, використовуйте функцію, схожу на цю:</p> + +<pre class="brush: js notranslate">function isEqual(str1, str2) +{ + return str1.toUpperCase() === str2.toUpperCase() +} // isEqual</pre> + +<p>Верхній регістр використовується замість нижнього в цій функції через деякі проблеми з перетвореннями символів у UTF-8.</p> + +<h3 id="Рядкові_примітиви_та_рядкові_обєкти">Рядкові примітиви та рядкові об'єкти</h3> + +<p>Зауважте, що JavaScript розрізняє об'єкти <code>String</code> та примітивні рядкові значення. (Те саме стосується типу {{jsxref("Boolean")}} та {{jsxref("Global_Objects/Число", "чисел")}}.)</p> + +<p>Рядкові літерали (позначаються подвійними чи одинарними лапками) та рядки, повернені викликами <code>String</code> не в контексті конструктора (тобто, без використання ключового слова {{jsxref("Operators/new", "new")}}) є примітивними рядками. JavaScript автоматично перетворює примітиви на об'єкти <code>String</code>, тому методи об'єкта <code>String</code> можливо використовувати на примітивних рядках. Там, де на примітивному рядку має бути викликаний метод або зустрічається звернення до властивості, JavaScript автоматично загорне рядковий примітив та викличе метод чи виконає звернення до властивості.</p> + +<pre class="brush: js notranslate">var s_prim = 'няв'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Виведе "string" +console.log(typeof s_obj); // Виведе "object" +</pre> + +<p>Рядкові примітиви та об'єкти <code>String</code> також дають різні результати при використанні {{jsxref("Global_Objects/eval", "eval()")}}. Примітиви, передані у <code>eval</code>, сприймаються як першокод; об'єкти <code>String</code> поводяться як усі об'єкти, повертаючи об'єкт. Наприклад:</p> + +<pre class="brush: js notranslate">var s1 = '2 + 2'; // створює рядковий примітив +var s2 = new String('2 + 2'); // створює об'єкт String +console.log(eval(s1)); // повертає число 4 +console.log(eval(s2)); // повертає рядок "2 + 2" +</pre> + +<p>Через це може статись помилка, якщо код зустрічає об'єкт <code>String</code> там, де очікує рядковий примітив, хоча, загалом, розробникам не потрібно хвилюватись щодо відмінностей.</p> + +<p>Об'єкт <code>String</code> завжди можна перетворити на його примітивний аналог методом {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p> + +<pre class="brush: js notranslate">console.log(eval(s2.valueOf())); // вертає число 4 +</pre> + +<h3 id="Екранування">Екранування</h3> + +<p>Спеціальні символи можна позначати за допомогою екранування:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Код</th> + <th scope="col">Результат</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\<var>XXX</var></code><br> + (де <code><var>XXX</var></code> - це 1–3 вісімкових цифр; діапазон <code>0</code>–<code>377</code>)</td> + <td>Символ ISO-8859-1 / код символа Юнікоду між <code>U+0000</code> та <code>U+00FF</code></td> + </tr> + <tr> + <td><code>\'</code></td> + <td>одинарні лапки</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>подвійні лапки</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>зворотній слеш</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>новий рядок</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>повернення каретки</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>вертикальна табуляція</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>горизонтальна табуляція</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>повернення на крок</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>зміна сторінки</td> + </tr> + <tr> + <td><code>\u<var>XXXX</var></code> (де <code><var>XXXX</var></code> - це 4 шістнадцяткових символа; діапазон <code>0x0000</code>–<code>0xFFFF</code>)</td> + <td>Кодова одиниця UTF-16 / код символа Юнікоду між <code>U+0000</code> та <code>U+FFFF</code></td> + </tr> + <tr> + <td><code>\u{<var>X</var>}</code> ... <code>\u{<var>XXXXXX</var>}</code><br> + (де <code><var>X</var>…<var>XXXXXX</var></code> - це 1–6 шістнадцяткових символів; діапазон <code>0x0</code>–<code>0x10FFFF</code>)</td> + <td>Кодова одиниця UTF-32 / код символа Юнікоду між <code>U+0000</code> та <code>U+10FFFF</code></td> + </tr> + <tr> + <td><code>\x<var>XX</var></code><br> + (де <code><var>XX</var></code> - це 2 шістнадцяткові символи; діапазон <code>0x00</code>–<code>0xFF</code>)</td> + <td>символ ISO-8859-1 / код символа Юнікоду між <code>U+0000</code> та <code>U+00FF</code></td> + </tr> + </tbody> +</table> + +<h3 id="Довгі_рядкові_літерали">Довгі рядкові літерали</h3> + +<p>Іноді ваш код міститиме рядки, які є дуже довгими. Замість того, щоб створювати рядки нескінченно довгі чи перенесені за примхою редактора, ви можете самостійно розбити текст на декілька рядків у коді, не вплинувши на реальний вміст літералу. Існує два способи це зробити.</p> + +<h4 id="Метод_1">Метод 1</h4> + +<p>Ви можете скористатись оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">+</a> для поєднання багатьох рядків, ось так:</p> + +<pre class="brush: js notranslate">let longString = "Це дуже довгий текст, його треба " + + "записати в декілька рядків," + + "інакше мій код буде важко читати."</pre> + +<h4 id="Метод_2">Метод 2</h4> + +<p>Ви можете скористатись символом зворотній слеш (<code>\</code>) в кінці кожного рядка, щоб позначити, що текст продовжується на наступному рядку. Переконайтесь, що після зворотнього слеша немає пробілу чи будь-якого іншого символу (окрім символу розриву рядка), або відступу; інакше, це не спрацює.</p> + +<p>Ця форма виглядає ось так:</p> + +<pre class="brush: js notranslate">let longString = "Це дуже довгий текст, його треба \ +записати в декілька рядків, \ +інакше мій код буде важко читати."</pre> + +<p>Обидва наведені методи виводять ідентичні рядки.</p> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt>{{jsxref("String/String", "String()")}}</dt> + <dd>Створює новий об'єкт <code>String</code>. Він виконує перетворення типів, коли викликається як функція, а не як конструктор, що, зазвичай, більш корисно.</dd> +</dl> + +<h2 id="Статичні_методи">Статичні методи</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()", "String.fromCharCode(<var>num1</var> [, ...[, <var>numN</var>]])")}}</dt> + <dd>Вертає рядок, створений за допомогою вказаної послідовності значень Юнікоду.</dd> + <dt>{{jsxref("String.fromCodePoint()", "String.fromCodePoint(<var>num1</var> [, ...[, <var>numN</var>)")}}</dt> + <dd>Вертає рядок, створений за допомогою вказаної послідовності кодів символів.</dd> + <dt>{{jsxref("String.raw()")}}</dt> + <dd>Вертає рядок, створений з сирого шаблонного рядка.</dd> +</dl> + +<h2 id="Властивості_екземплярів">Властивості екземплярів</h2> + +<dl> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Відображає довжину рядка. Доступна лише для читання.</dd> +</dl> + +<h2 id="Методи_екземплярів">Методи екземплярів</h2> + +<dl> + <dt>{{jsxref("String.prototype.charAt()", "String.prototype.charAt(<var>index</var>)")}}</dt> + <dd>Вертає символ (рівно одну кодову одиницю UTF-16), розташований за вказаним індексом <code><var>index</var></code>.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()", "String.prototype.charCodeAt(<var>index</var>)")}}</dt> + <dd>Вертає число, яке є значенням кодової одиниці UTF-16, розташованої за вказаним індексом <code><var>index</var></code>.</dd> + <dt>{{jsxref("String.prototype.codePointAt()", "String.prototype.codePointAt(<var>pos</var>)")}}</dt> + <dd>Вертає невід'ємне ціле число, яке є значенням коду символу UTF-16, що починається на вказаній позиції <code><var>pos</var></code>.</dd> + <dt>{{jsxref("String.prototype.concat()", "String.prototype.concat(<var>str </var>[, ...<var>strN </var>])")}}</dt> + <dd>Об'єднує текст двох (або більше) рядків та повертає новий рядок.</dd> + <dt>{{jsxref("String.prototype.includes()", "String.prototype.includes(<var>searchString</var> [, <var>position</var>])")}}</dt> + <dd>Визначає, чи містить рядок, що викликав метод, рядок <code><var>searchString</var></code>.</dd> + <dt>{{jsxref("String.prototype.endsWith()", "String.prototype.endsWith(<var>searchString</var> [, <var>length</var>])")}}</dt> + <dd>Визначає, чи завершується рядок символами рядка <code><var>searchString</var></code>.</dd> + <dt>{{jsxref("String.prototype.indexOf()", "String.prototype.indexOf(<var>searchValue</var> [, <var>fromIndex</var>])")}}</dt> + <dd>Вертає індекс всередині об'єкта {{jsxref("String")}}, що викликав метод, першого знайденого значення <code><var>searchValue</var></code>, або <code>-1</code>, якщо воно не знайдене.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()", "String.prototype.lastIndexOf(<var>searchValue</var> [, <var>fromIndex</var>])")}}</dt> + <dd>Вертає індекс всередині об'єкта {{jsxref("String")}}, що викликав метод, останнього знайденого значення <code><var>searchValue</var></code>, або <code>-1</code>, якщо значення не знайдене.</dd> + <dt>{{jsxref("String.prototype.localeCompare()", "String.prototype.localeCompare(<var>compareString</var> [, <var>locales</var> [, <var>options</var>]])")}}</dt> + <dd>Вертає число, що вказує, чи розташований рядок <code><var>compareString</var></code> перед, після, чи однаково, відносно наданого рядка у відсованій послідовності.</dd> + <dt>{{jsxref("String.prototype.match()", "String.prototype.match(<var>regexp</var>)")}}</dt> + <dd>Використовується, щоб зіставити регулярний вираз <code><var>regexp</var></code> з рядком.</dd> + <dt>{{jsxref("String.prototype.matchAll()", "String.prototype.matchAll(<var>regexp</var>)")}}</dt> + <dd>Вертає ітератор усіх збігів з регулярним виразом.</dd> + <dt>{{jsxref("String.prototype.normalize()", "String.prototype.normalize([<var>form</var>])")}}</dt> + <dd>Вертає рядкове значення, на якому викликано метод, у формі нормалізації Юнікоду.</dd> + <dt>{{jsxref("String.prototype.padEnd()", "String.prototype.padEnd(<var>targetLength</var> [, <var>padString</var>])")}}</dt> + <dd>Доповнює поточний рядок наданим рядком з кінця та повертає новий рядок, що має довжину <code><var>targetLength</var></code>.</dd> + <dt>{{jsxref("String.prototype.padStart()", "String.prototype.padStart(<var>targetLength</var> [, <var>padString</var>])")}}</dt> + <dd>Доповнює поточний рядок наданим рядком з початку та повертає новий рядок, що має довжину <code><var>targetLength</var></code>.</dd> + <dt>{{jsxref("String.prototype.repeat()", "String.prototype.repeat(<var>count</var>)")}}</dt> + <dd>Повертає рядок, що складається з елементів об'єкта, повторених <code><var>count</var></code> разів.</dd> + <dt>{{jsxref("String.prototype.replace()" , "String.prototype.replace(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt> + <dd>Використовується, щоб замінити <code><em>searchFor</em></code> заміною <em><code>replaceWith</code></em>. <em><code>searchFor</code></em> може бути рядком або регулярним виразом, а <code><var>replaceWith</var></code> може бути рядком чи функцією.</dd> + <dt>{{jsxref("String.prototype.replaceAll()" , "String.prototype.replaceAll(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt> + <dd>Використовується, щоб замінити усі збіги з шаблоном <em><code>searchFor</code></em> заміною <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> може бути рядком або регулярним виразом, а <code><var>replaceWith</var></code> може бути рядком або функцією.</dd> + <dt>{{jsxref("String.prototype.search()", "String.prototype.search(<var>regexp</var>)")}}</dt> + <dd>Шукає збіг між регулярним виразом <code><var>regexp</var></code> та рядком, що викликав метод.</dd> + <dt>{{jsxref("String.prototype.slice()", "String.prototype.slice(<var>beginIndex</var>[, <var>endIndex</var>])")}}</dt> + <dd>Вирізає частину рядка та повертає новий рядок.</dd> + <dt>{{jsxref("String.prototype.split()", "String.prototype.split([<var>sep</var> [, <var>limit</var>] ])")}}</dt> + <dd>Вертає масив рядків, заповнених розділенням початкового рядка підрядком <code><var>sep</var></code>.</dd> + <dt>{{jsxref("String.prototype.startsWith()", "String.prototype.startsWith(<var>searchString</var> [, <var>length</var>])")}}</dt> + <dd>Визначає, чи починається рядок з символів рядка <code><var>searchString</var></code>.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Повертає вказану кільксть символів на початку рядка з вказаної позиції.</dd> + <dt>{{jsxref("String.prototype.substring()", "String.prototype.substring(<var>indexStart</var> [, <var>indexEnd</var>])")}}</dt> + <dd>Повертає рядок, що містить символи рядка від вказаного індекса, або між вказаними індексами.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()", "String.prototype.toLocaleLowerCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt> + <dd> + <p>Символи рядка переводяться до нижнього регістра відповідно до поточних регіональних налаштувань.</p> + + <p>Для більшості мов результат буде такий самий, як у {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</p> + </dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()", "String.prototype.toLocaleUpperCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt> + <dd> + <p>Символи рядка переводяться до верхнього регістра відповідно до поточних регіональних налаштувань.</p> + + <p>Для більшості мов результат буде такий самий, як у {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</p> + </dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Повертає значення рядка, переведене до нижнього регістра.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Повертає рядкове представлення вказаного об'єкта. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Повертає значення рядка, переведене до верхнього регістра.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Прибирає пробіли з початку та кінця рядка. Частина стандарту ECMAScript 5.</dd> + <dt>{{jsxref("String.prototype.trimStart()")}}</dt> + <dd>Видаляє пробіли з початку рядка.</dd> + <dt>{{jsxref("String.prototype.trimEnd()")}}</dt> + <dd>Видаляє пробіли з кінця рядка.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Повертає просту величину вказаного об'єкта. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("String.prototype.@@iterator()")}}</dt> + <dd>Повертає новий об'єкт <code>Iterator</code>, який перебирає коди символів рядка, повертаючи кожний код символа рядкового значення.</dd> +</dl> + +<h2 id="Методи_HTML-обгортки">Методи HTML-обгортки</h2> + +<p><strong>Застарілі. Уникайте цих методів.</strong></p> + +<p>Вони обмежено використовуються, оскільки надають набір доступних тегів та атрибутів HTML.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (гіпертекстове посилання)</dd> + <dt>{{jsxref("String.prototype.big()")}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (посилання на URL)</dd> + <dt>{{jsxref("String.prototype.small()")}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перетворення_рядка">Перетворення рядка</h3> + +<p>Можливо використовувати <code>String</code> як більш надійну альтернативу {{jsxref("String.prototype.toString()", "toString()")}}, оскільки вона працює при використанні з {{jsxref("null")}}, {{jsxref("undefined")}} та {{jsxref("Symbol", "символами")}}. Наприклад:</p> + +<pre class="brush: js notranslate">var outputStrings = []; +for (let i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</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.String")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting">Форматування тексту у посібнику JavaScript Guide</a></li> + <li>{{jsxref("RegExp")}}</li> + <li>{{domxref("DOMString")}}</li> + <li><a href="/uk/Add-ons/Code_snippets/StringView"><code>StringView</code> — C-подібне відображення рядків на основі типизованих масивів</a></li> + <li><a href="/uk/docs/Web/API/DOMString/Binary">Двійкові рядки</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/indexof/index.html b/files/uk/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..3c0639bad4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,154 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +tags: + - JavaScript + - Prototype + - String + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>indexOf()</code></strong> починає пошук від символа за індексом <code>fromIndex</code> всередині об'єкта <code>{{jsxref("String")}}</code>, з якого здійснюється виклик метода, і вертає індекс першого знайденого збігу із шуканим значенням. Якщо значення не знайдене, повертає <code>-1</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<div class="note"><strong>Заувага:</strong> Клас <code>Array</code> має подібний метод <code>{{jsxref("Array.prototype.indexOf()", "indexOf()")}}</code>.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><em><code>searchValue</code></em></dt> + <dd>Рядок, що є шуканим значенням.</dd> + <dd>Якщо рядок явно не заданий, <a href="https://tc39.github.io/ecma262/#sec-tostring"><var>searchValue</var> буде примусово приведений до <code>"undefined"</code></a>, і пошук цього значення буде здійснюватись у <code><var>str</var></code>.</dd> + <dd>Отже, для прикладу: <code>'undefined'.indexOf()</code> поверне <code>0</code>, оскільки значення undefined знайдене на позиції <code>0</code>, але <code>'undefine'.indexOf()</code> поверне <code>-1</code>, оскільки рядок <code>"undefine"</code> не знайдений.</dd> + <dt><em><code>fromIndex</code> </em>{{optional_inline}}</dt> + <dd>Ціле число, що позначає індекс, з якого має розпочинатися пошук; за замовчуванням дорівнює <code>0</code>.</dd> + <dd>Якщо вказане значення <code>fromIndex</code> менше за <code>0</code> чи більше за <code>str.length</code>, пошук розпочнеться з індексу <code>0</code> та <code>str.length</code>, відповідно.</dd> + <dd>Для прикладу, <code>'всім привіт'.indexOf('м', -5)</code> поверне <code>3</code>, оскільки метод почне пошук з позициї <code>0</code>, а <code>м</code> знайдеться на позиції <code>3</code>. З іншого боку, <code>'всім привіт'.indexOf('м', 11)</code> (і з будь-яким значенням <code>fromIndex</code>, більшим за <code>11</code>) поверне <code>-1</code>, оскільки пошук починається з позиції <code>11</code>, позиції <em>після</em> кінця рідка.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Індекс першого знайденого збігу з <em><code>searchValue</code></em>, або <strong><code>-1</code></strong>, якщо жодного збігу не знайдено.</p> + +<p>Порожній рядок <code><var>searchValue</var></code> призводить до дивних результатів. За відсутності значення <code><var>fromIndex</var></code>, чи будь-якого значення <em><code>fromIndex</code></em>, нижчого за довжину рядка, повернене значення буде таким самим, як значення <code><var>fromIndex</var></code>:</p> + +<pre class="brush: js">'всім привіт'.indexOf('') // вертає 0 +'всім привіт'.indexOf('', 0) // вертає 0 +'всім привіт'.indexOf('', 3) // вертає 3 +'всім привіт'.indexOf('', 8) // вертає 8</pre> + +<p>Однак, якщо значення <code><var>fromIndex</var></code> є рівним або більшим за довжину рядка, повернене значення <em>дорівнює</em> довжині рядка:</p> + +<pre class="brush: js">'всім привіт'.indexOf('', 11) // вертає 11 +'всім привіт'.indexOf('', 13) // вертає 11 +'всім привіт'.indexOf('', 22) // вертає 11</pre> + +<p>В минулій версії JS порожній рядок відшукувався одразу після вказаного значення індексу. У останній версії JS порожній рядок буде знайдений в кінці рядка, в якому здійснюється пошук.</p> + +<h2 id="Опис">Опис</h2> + +<p>Символи рядка індексуються зліва направо. Індекс першого символу дорівнює <code>0</code>, а індекс останнього символу рядка <code><em>stringName</em></code> дорівнює <code><em>stringName</em>.length - 1</code>.</p> + +<pre class="brush: js">'Непозбувна бентега'.indexOf('Непозбувна'); // вертає 0 +'Непозбувна бентега'.indexOf('Непозбувний'); // вертає -1 +'Непозбувна бентега'.indexOf('бентега', 0); // вертає 11 +'Непозбувна бентега'.indexOf('бентега', 5); // вертає 11 +'Непозбувна бентега'.indexOf('бентега', 12); // вертає -1 +'Розкішниця'.indexOf(''); // вертає 0 +'Розкішниця'.indexOf('', 9); // вертає 9 +'Розкішниця'.indexOf('', 10); // вертає 10 +'Розкішниця'.indexOf('', 11); // вертає 10</pre> + +<p>Метод <code>indexOf()</code> є регістрозалежним. Наприклад, вираз нижче повертає <code>-1</code>:</p> + +<pre class="brush: js">'Непозбувна бентега'.indexOf('Бентега'); // вертає -1 +</pre> + +<h3 id="Перевірка_наявності_підрядка">Перевірка наявності підрядка</h3> + +<p>Зважте на те, що <code>0</code> не обчислюється як <code>true</code>, а <code>-1</code> не обчислюється як <code>false</code>. Отже, належить у явний спосіб порівнювати значення, що повертається методом <code>indexOf()</code>, зі значенням <code>-1</code>:</p> + +<pre class="brush: js">'Непозбувна бентега'.indexOf('бентега') !== -1; // true +'Непозбувна бентега'.indexOf('Бентега') !== -1; // false +~('Непозбувна бентега'.indexOf('Непозбувний')) // 0, тобто, хибне значення</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_indexOf">Використання <code>indexOf()</code></h3> + +<p>Наступний приклад використовує <code>indexOf()</code>, щоб знайти значення у рядку <code>"абабагаламага"</code>.</p> + +<pre class="brush: js">const str = '<code>абабагаламага</code>' + +console.log('Індекс першої г з початку дорівнює ' + str.indexOf('г')) // виводить 5 +console.log('Індекс "баба" з початку дорівнює ' + str.indexOf('баба')) // виводить 1</pre> + +<h3 id="Регістрозалежність_метода_indexOf">Регістрозалежність метода <code>indexOf()</code></h3> + +<p>В цьому прикладі наведено два текстових рядки.</p> + +<p>Їх вміст є майже однаковим, але у <code>myCapString</code> слова починаються з великої літери. Перший метод <a href="/uk/docs/Web/API/Console/log" title="The Console method log() outputs a message to the web console."><code>console.log()</code></a> виводить <code>13</code>. Але, через те, що метод <code>indexOf()</code> чутливий до регістру, рядок <code>"камамбер"</code> не знаходиться у <code>myCapString</code>, а отже, другий метод <code>console.log()</code> виводить <code>-1</code>.</p> + +<pre class="brush: js">var myString = 'брі, дорблю, камамбер'; +var myCapString = 'Брі, Дорблю, Камамбер'; + +console.log('myString.indexOf("камамбер") дорівнює ' + myString.indexOf('камамбер')) +// виводить 13 +console.log('myCapString.indexOf("камамбер") дорівнює ' + myCapString.indexOf('камамбер')) +// виводить -1</pre> + +<h3 id="Використання_indexOf_для_підрахунку_кількості_вживань_літери_у_рядку">Використання <code>indexOf()</code> для підрахунку кількості вживань літери у рядку</h3> + +<p>Наступний приклад присвоює змінній <code>count</code> число вживать літери <code>с</code> у рядку <code>str</code>:</p> + +<pre class="brush: js">const str = 'Буває, часом сліпну від краси.' +let count = 0 +let position = str.indexOf('с') + +while (position !== -1) { + count++ + position = str.indexOf('с', position + 1) +} + +console.log(count) // виводить 3</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.String.indexOf")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/italics/index.html b/files/uk/web/javascript/reference/global_objects/string/italics/index.html new file mode 100644 index 0000000000..9d66e85e66 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/italics/index.html @@ -0,0 +1,65 @@ +--- +title: String.prototype.italics() +slug: Web/JavaScript/Reference/Global_Objects/String/italics +tags: + - JavaScript + - String + - метод + - не рекомендований +translation_of: Web/JavaScript/Reference/Global_Objects/String/italics +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>italics()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/i" title="HTML-елемент <i> відображає текст, що з якихось причин виділяється серед звичайного тексту."><code><i></code></a>, який відображає рядок курсивом.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.italics()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/i" title="HTML-елемент <i> відображає текст, що з якихось причин виділяється серед звичайного тексту."><code><i></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>italics()</code> вбудовує рядок у тег <code><i></code>: <code>"<i>str</i>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_italics">Використання <code>italics()</code></h3> + +<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p> + +<pre class="brush: js">var worldString = 'Всім привіт'; +console.log(worldString.blink()); // <blink>Всім привіт</blink> +console.log(worldString.bold()); // <b>Всім привіт</b> +console.log(worldString.italics()); // <i>Всім привіт</i> +console.log(worldString.strike()); // <strike>Всім привіт</strike> +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}}</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.italics")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..e307125881 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +tags: + - JavaScript + - Prototype + - String + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>lastIndexOf()</code></strong> повертає у об'єкті {{jsxref("String")}}, що його викликав, індекс останнього вживання вказаного значення. Пошук здійснюється з кінця рядка, починаючи з індекса <code>fromIndex</code>. Повертає -1, якщо значення не було знайдене.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-lastindexof.html", "shorter")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>searchValue</code></dt> + <dd>Рядок, що є шуканим значенням. Якщо <code>searchValue</code> є порожнім рядком, то повертається <code>fromIndex</code>.</dd> + <dt><code>fromIndex </code>{{optional_inline}}</dt> + <dd>Індекс останнього символу у рядку, який розглядатиметься як початок збігу. Значенням за замовчуванням є <code>+Infinity</code>. Якщо <code>fromIndex >= str.length</code>, пошук здійснюється по всьому рядку. Якщо <code>fromIndex < 0</code>, то результат буде той самий, що і за <code>fromIndex = 0</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Індекс останнього знайденого збігу (першого з кінця); якщо збігу не знайдено, вертає значення <strong>-1</strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Символи рядка мають індекси зліва направо. Індексом першого символу є <code>0</code>, а індексом останнього <code>str.length - 1</code>.</p> + +<pre class="brush: js">'морок'.lastIndexOf('о'); // вертає 3 +'морок'.lastIndexOf('о', 2); // вертає 1 +'морок'.lastIndexOf('о', 0); // вертає -1 +'морок'.lastIndexOf('ф'); // вертає -1 +'морок'.lastIndexOf('м', -5); // вертає 0 +'морок'.lastIndexOf('м', 0); // вертає 0 +'морок'.lastIndexOf(''); // вертає 5 +'морок'.lastIndexOf('', 2); // вертає 2 +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> <code>'баба'.lastIndexOf('ба', 2)</code> поверне 2, а не 0, оскільки fromIndex обмежує лише початок збігу.</p> +</div> + +<h3 id="Регістрозалежність_метода_lastIndexOf">Регістрозалежність метода <code>lastIndexOf()</code></h3> + +<p>Метод <code>lastIndexOf()</code> чутливий до регістру. Наприклад, наступний вираз вертає -1:</p> + +<pre class="brush: js">'Брі, Дорблю, Камамбер'.lastIndexOf('дорблю'); // вертає -1</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_indexOf_та_lastIndexOf">Використання <code>indexOf()</code> та <code>lastIndexOf()</code></h3> + +<p>Наступний приклад використовує {{jsxref("String.prototype.indexOf()", "indexOf()")}} та <code>lastIndexOf()</code>, щоб знайти значення у рядку <code>"абабагаламага</code><code>"</code>.</p> + +<pre class="brush: js">var anyString = 'абабагаламага'; + +console.log('Індекс першого "га" з початку дорівнює ' + anyString.indexOf('га')); +// виводить 5 +console.log('Індекс першого "га" з кінця дорівнює ' + anyString.lastIndexOf('га')); +// виводить 11 +console.log('Індекс "баба" з початку дорівнює ' + anyString.indexOf('баба')); +// виводить 1 +console.log('Індекс "баба" з кінця дорівнює ' + anyString.lastIndexOf('баба')); +// виводить 1</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.lastIndexOf")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/length/index.html b/files/uk/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..b52a468f96 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,105 @@ +--- +title: string.length +slug: Web/JavaScript/Reference/Global_Objects/String/length +tags: + - JavaScript + - Property + - Prototype + - String + - Властивість + - Довідка + - довжина + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>length</code></strong> об'єкта {{jsxref("String")}} містить довжину рядка у кодових одиницях UTF-16. Це властивість-значення рядкових екземплярів, доступна лише для читання.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-length.html", "shorter")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.length</code></pre> + +<h2 id="Опис">Опис</h2> + +<p>Ця властивість повертає кількість кодових одиниць (англ. code unit), які утворюють рядок. У JavaScript для рядків використовується кодування {{interwiki("wikipedia", "UTF-16")}}, яке вживає одну 16-бітну (двобайтну) кодову одиницю для передачі більшості загальновживаних символів, але для менш поширених воно потребує двох кодових одиниць. Отже, значення, <code>length</code> та справжня кількість символів рядка не завжди збігаються.</p> + +<p>У ECMAScript 2016 (вер. 7) було встановлено максимальну довжину у <code>2^53 - 1</code> елементів. Попередньо не було визначено ніякої максимальної довжини. У Firefox рядки мають максимальну довжину <code>2**30 - 2</code> (~1ГБ). У версіях, більш ранніх за Firefox 65, максимальна довжина складала <code>2**28 - 1</code> (~256МБ).</p> + +<p>Для порожнього рядка <code>length</code> дорівнює 0.</p> + +<p>Статична властивість <code>String.length</code> не пов'язана з довжиною рядків, це арність функції <code>String</code> (загалом, це кількість формальних параметрів, що вона має), яка дорівнює 1.</p> + +<h2 id="Юнікод">Юнікод</h2> + +<p>Оскільки `length` рахує кодові одиниці замість символів, якщо вам треба отримати кількість символів, вам знадобиться щось таке:</p> + +<pre class="brush: js">function getCharacterLength (str) { + // Ітератор рядка, що тут використовується, перебирає символи, + // а не просто кодові одиниці + return [...str].length; +} + +console.log(getCharacterLength('A\uD87E\uDC04Z')); // 3 + +// Це не рекомендується, але ви можете додати його до кожного рядка ось так: + +Object.defineProperty(String.prototype, 'charLength', { + get () { + return getCharacterLength(this); + } +}); + +console.log('A\uD87E\uDC04Z'.charLength); // 3</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Типове_використання">Типове використання</h3> + +<pre class="brush: js">var x = 'Вогнелис'; +let empty = ''; + +console.log(x + ' має довжину ' + x.length + ' кодових одиниць'); +/* "Вогнелис має довжину 8 кодових одиниць" */ + +console.log('Порожній рядок має довжину ' + empty.length); +// очікуваний результат: "Порожній рядок має довжину 0" +</pre> + +<h3 id="Присвоювання_довжини">Присвоювання довжини</h3> + +<pre class="brush: js">let myString = "проліски"; + +// Спроба присвоїти значення властивості рядка .length не має видимого ефекту. +myString.length = 4; +console.log(myString); +// очікуваний результат: "проліски" +console.log(myString.length); +// очікуваний результат: 8</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.length")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">String.length у JavaScript та уміжнароднення веб-додатків</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/link/index.html b/files/uk/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..4f20bce4e0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,72 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Reference/Global_Objects/String/link +tags: + - JavaScript + - String + - застарілий + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>link()</code></strong> створює рядок, що відображає код для HTML-елемента <a href="/uk/docs/Web/HTML/Element/a" title="HTML-елемент <a> (або елемент якір), що має атрибут href, створює гиперпосилання на веб-сторінки, файли, електронні адреси, розташування на тій самій сторінці, чи будь-що інше, на що може посилатись URL."><code><a></code></a>, для використання у якості гіпертекстового посилання на інший URL.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.link(<var>url</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>url</code></dt> + <dd>Будь-який рядок, що визначає атрибут <code>href</code> тега <code><a></code>; він має бути коректним локатором ресурсу (відносним чи абсолютним), усі символи <code>&</code> мають бути екрановані як <code>&amp;</code>, а усі символи <code>"</code> - як <code>&quot;</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/a" title="HTML-елемент <a> (або елемент якір), що має атрибут href, створює гиперпосилання на веб-сторінки, файли, електронні адреси, розташування на тій самій сторінці, чи будь-що інше, на що може посилатись URL."><code><a></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Використовуйте метод <code>link()</code>, щоб створити HTML-код для гіпертекстового посилання. Повернений рядок можна додати у document через <a href="/uk/docs/Web/API/Document/write" title="Метод document.write() записує рядок тексту у поток документу, відкритого методом document.open()."><code>document.write()</code></a> або <a href="/uk/docs/Web/API/Element/innerHTML" title="Властивість елемента innerHTML повертає або присвоює розмітку HTML чи XML, що міститься всередині елемента."><code>element.innerHTML</code></a>.</p> + +<p>Посилання, створені методом <code>link()</code>, стають елементами масиву <code>links</code> об'єкта <code>document</code>. Дивіться <a href="/uk/docs/Web/API/Document/links" title="Властивість лише для читання links інтерфейсу Document повертає колекцію усіх елементів <area> та <a> у документі зі значеннями атрибута href."><code>document.links</code></a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_link">Використання <code>link()</code></h3> + +<p>Наступний приклад відображаєє слово "MDN" як гіпертекстове посилання, яке повертає користувача на сайт Mozilla Developer Network.</p> + +<pre class="brush: js">var hotText = 'MDN'; +var URL = 'https://developer.mozilla.org/'; + +console.log('Натисніть, щоб повернутись на ' + hotText.link(URL)); +// Натисніть, щоб повернутись на <a href="https://developer.mozilla.org/">MDN</a> +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}</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.link")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.anchor()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html b/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html new file mode 100644 index 0000000000..9fe8fac165 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/localecompare/index.html @@ -0,0 +1,173 @@ +--- +title: String.prototype.localeCompare() +slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка + - Уміжнароднення + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>localeCompare()</code></strong> повертає число, яке вказує, як має розташуватись рядок відносно вказаного (того, що передано як параметр) у відсортованій за зростанням послідовності: перед, після, чи вони однакові.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<p>Нові арґументи <code>locales</code> та <code>options</code> дають можливість вказати мову, абетковий порядок сортування якої має бути застосовано, та налаштувати механізм порівняння рядків. Раніше, коли цих арґументів ще не було, механізм порівняння рядків та порядок їх сортування цілковито залежав від реалізації.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>referenceStr</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<p>Перевіряйте в <a href="#Підтримка_веб-переглядачами">таблиці сумісності</a> наявність підтримки арґументів <code>locales</code> та <code>options</code>, а також подивіться на <a href="#Перевірка_наявності_підтримки_додаткових_арґументів">код для перевірки</a> наявності такої підтримки.</p> + +<dl> + <dt><code>compareString</code></dt> + <dd>Рядок, з яким буде здійснено порівняння.</dd> +</dl> + +<div> +<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам визначати мову, конвенції якої щодо форматування мають використовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локаль, що використовується, та форма поверненого рядка повністю залежать від реалізації.</p> + +<p>Деталі цих параметрів та як їх використовувати дивіться у статті <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Collator/Collator">Конструктор <code>Intl.Collator()</code></a>.</p> +</div> + +<h3 id="Вертає">Вертає</h3> + +<ul> + <li><strong>Від'ємне</strong> число, якщо рядок має розташуватись <em>перед</em> <strong><code>compareString</code></strong>;</li> + <li><strong>Додатне</strong> число, якщо рядок має розташуватись <em>після</em> <strong><code>compareString</code></strong>;</li> + <li><strong>Нуль</strong>, якщо рядки <em>тотожні</em>.</li> +</ul> + +<h2 id="Опис">Опис</h2> + +<p>Вертає ціле число, що вказує, чи рядок <strong>referenceStr</strong> розташований перед <strong>compareStr</strong>, після <strong>compareStr</strong>, чи є еквівалентним <strong>compareStr</strong>.</p> + +<ul> + <li>Від'ємне, коли <strong>referenceStr</strong> розташований перед <strong>compareStr</strong></li> + <li>Додатне, коли <strong>referenceStr</strong> розташований після <strong>compareStr</strong></li> + <li>Вертає 0, якщо вони еквівалентні</li> +</ul> + +<p><strong>НЕ ПОКЛАДАЙТЕСЬ на точні повернені значення -1 чи 1. </strong>Від'ємні та додатні цілочисельні результати різняться між переглядачами (а також між версіями переглядачів), тому що специфікація W3C вимагає лише від'ємних та додатних значень. Деякі переглядачі можуть повернути -2 чи 2, чи навіть деякі інші від'ємні та додатні значення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_localeCompare">Використання <code>localeCompare()</code></h3> + +<pre class="brush: js">// Вертає від'ємне значення, позаяк літера «a» розташована раніше за «b» +'a'.localeCompare('c'); // -2 чи -1 (або інше від'ємне значення) + +// Вертає додатне значення, позаяк за абеткою слово "check" слід розташувати після "against" +'check'.localeCompare('against'); // 2 чи 1 (або інше додатне значення) + +// Вертає нуль, позаяк рядки однакові +'a'.localeCompare('a'); // 0 +</pre> + +<h3 id="Сортування_масиву">Сортування масиву</h3> + +<p>Метод <code>localeCompare()</code> надає можливість регістронезалежного сортування масивів:</p> + +<pre class="brush: js">var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu']; +items.sort((a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true})); // ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']</pre> + +<h3 id="Перевірка_наявності_підтримки_додаткових_арґументів_веб-переглядачем">Перевірка наявності підтримки додаткових арґументів веб-переглядачем</h3> + +<p>Арґументи <code>locales</code> та <code>options</code> досі не підтримуються всіма переглядачами. Тож, з метою з'ясування наявності підтримки можна скористатися тим, що метод викидає (лише за наявності такої підтримки згаданих арґументів) виняток {{jsxref("Global_Objects/RangeError", "RangeError")}}, якщо параметр <code>locales</code> не вказує належного мовного коду. Наприклад, вкажемо напевне відсутній код "i":</p> + +<pre class="brush: js">function checkLocaleCompareSupportsLocales() { + try { + 'foo'.localeCompare('bar', 'i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<h3 id="Використання_locales">Використання <code>locales</code></h3> + +<p>Порівняння рядків за допомогою <code>localeCompare()</code> узалежнено від мови. Для застосування належного для вживаної мови (наприклад, для мови користувацького інтерфейсу вашого застосунку) порядку сортування, не забудьте вказати відповідний мовний код (або й запасні мовні коди) через параметр <code>locales</code>:</p> + +<pre class="brush: js">// виводить від'ємне значення (у німецькій абетці літера «ä» розташована раніше «z») +console.log('ä'.localeCompare('z', 'de')); + +// виводить додатне значення (у шведській абетці літера «ä» розташована пізніше «z») +console.log('ä'.localeCompare('z', 'sv')); +</pre> + +<h3 id="Використання_options">Використання <code>options</code></h3> + +<p>Арґумент <code>options</code> надає можливість додаткового налаштування способу порівняння рядків методом <code>localeCompare()</code>:</p> + +<pre class="brush: js">// У німецькій мові літера «ä» є похідною від базової літери «a» +// виводить 0 +console.log('ä'.localeCompare('a', 'de', {sensitivity: 'base'})); + +// У шведській мові «ä» та «a» є окремими базовими літерами +// виводить додатне значення +console.log('ä'.localeCompare('a', 'sv', {sensitivity: 'base'})); +</pre> + +<h3 id="Сортування_чисел">Сортування чисел</h3> + +<pre class="brush: js">// за замовчуванням, "2" > "10" +console.log("2".localeCompare("10")); // 1 + +// сортування за допомогою options: +console.log("2".localeCompare("10", undefined, {numeric: true})); // -1 + +// сортування за допомогою тега locales: +console.log("2".localeCompare("10", "en-u-kn-true")); // -1</pre> + +<h2 id="Швидкодія">Швидкодія</h2> + +<p>З огляду на швидкодію, для порівняння величезної кількості рядків (наприклад, під час сортування великих масивів) ліпше створювати об'єкт <code>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</code> та використовувати функцію, надану його властивістю <code>{{jsxref("Collator.prototype.compare", "compare")}}</code>:</p> + +<pre class="brush: js">function sortLargeStringArray(array, locale) { + var collator = new Intl.Collator(locale); + array.sort(collator.compare); +} + +// sortLargeStringArray([ … ], 'uk'); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.localeCompare")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/match/index.html b/files/uk/web/javascript/reference/global_objects/string/match/index.html new file mode 100644 index 0000000000..dfc6bf5f6b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/match/index.html @@ -0,0 +1,194 @@ +--- +title: String.prototype.match() +slug: Web/JavaScript/Reference/Global_Objects/String/match +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка + - Регулярний вираз + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/match +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>match()</code></strong> шукає та повертає (якщо є) збіги <em>рядка</em> із зазначеним <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">регулярним виразом</a>.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-match.html", "shorter")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>regexp</code></dt> + <dd>Об'єкт регулярного виразу.</dd> + <dd>Якщо передати значення іншого типу, воно буде неявно перетворене на {{jsxref("RegExp")}} за допомогою оператора <code>new RegExp(<em>regexp</em>).</code></dd> + <dd>Якщо жодного параметра не вказано, метод поверне {{jsxref("Array","масив")}} з одним елементом — порожнім рядком: <code>[""]</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>{{jsxref("Array","Масив")}}, чий вміст залежить від наявності чи відсутності глобального (<code>g</code>) прапора, або {{jsxref("null")}}, якщо жодних збігів не знайдено.</p> + +<ul> + <li>Якщо використовується прапор <code>g</code>, метод поверне усі результати, що збігаються з повним регулярним виразом, але не поверне захоплені групи.</li> + <li>Якщо прапор <code>g</code> не використовується, метод поверне лише перший повний збіг та захоплені групи, які він містить. У цьому випадку повернений елемент матиме додаткові властивості, описані нижче.</li> +</ul> + +<h4 id="Додаткові_властивості">Додаткові властивості</h4> + +<p>Як пояснювалось вище, деякі результати містять наступні додаткові властивості:</p> + +<dl> + <dt><code>groups</code></dt> + <dd>Масив іменованих захоплених груп або {{jsxref("undefined")}}, якщо іменовані групи не були визначені. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Групи та діапазони</a>, щоб дізнатись більше.</dd> + <dt><code>index</code></dt> + <dd>Індекс пошуку, за яким був знайдений результат.</dd> + <dt><code>input</code> </dt> + <dd>Копія рядка, в якому здійснювався пошук.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Якщо регулярний вираз не позначено прапорцем <code>g</code>, виклик <code>str.match()</code> повертає такий самий результат, що й {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.</p> + +<h3 id="Інші_методи">Інші методи</h3> + +<ul> + <li>Якщо вам треба з'ясувати, чи відповідає рядок регулярному виразові {{jsxref("RegExp")}}, скористайтеся методом {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.</li> + <li>Якщо вас цікавить лише перший збіг, можете натомість використати {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.</li> + <li>Якщо ви хочете отримати захоплені групи, а прапорець <code>g</code> встановлено, вам потрібен метод {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} або {{jsxref("String.prototype.matchAll()")}}.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_match">Використання <code>match()</code></h3> + +<p>У прикладі нижче метод <code>match()</code> задіяно, щоб знайти слово <code>«розділ»</code>, за ним одну чи кілька цифр, далі десяткова крапка та 0 чи більше числових символів.</p> + +<p>Регулярний вираз позначено прапорцем <code>i</code>, що означає відсутність розрізнювання великих та малих літер.</p> + +<pre class="brush: js">var str = 'Докладніше див. розділ 3.4.5.1'; +var re = /див\. (розділ \d+(\.\d)*)/i; +var found = str.match(re); + +console.log(found); + +// Виводить: +// [ +// 0: "див. розділ 3.4.5.1" +// 1: "розділ 3.4.5.1" +// 2: ".1" +// index: 11 +// input: "Докладніше див. розділ 3.4.5.1" +// ] + +// Рядок "див. розділ 3.4.5.1" є повним збігом. +// Рядок "розділ 3.4.5.1" — це підрядок, захоплений підвиразом '(розділ \d+(\.\d)*)' +// Рядок ".1" — це останній підрядок, захоплений підвиразом '(\.\d)' +// Властивість 'index' (11) — це зсув підрядка, що відповідає регулярному виразові +// Властивість 'input' — це повна копія досліджуваного рядка str +</pre> + +<h3 id="Вживання_прапорців_i_та_g_із_методом_match">Вживання прапорців <code>i</code> та <code>g</code> із методом <code>match()</code></h3> + +<p>Приклад нижче засвідчує дію прапорців <code>i</code> (ignore case — регістронезалежний режим) та <code>g</code> (global — пошук усіх збігів, а не тільки першого) при використанні метода <code>match()</code>. Будуть повернені усі літери від <code>A</code> до <code>E</code> та від <code>a</code> до <code>e</code>, кожна як окремий елемент масиву.</p> + +<pre class="brush: js">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; +var regexp = /[A-E]/gi; +var matches_array = str.match(regexp); + +console.log(matches_array); +// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e'] +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Дивіться також метод {{jsxref("String.prototype.matchAll()")}} та <a href="https://wiki.developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/g/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">Складний пошук за допомогою прапорів</a>.</p> +</div> + +<h3 id="Використання_іменованих_груп">Використання іменованих груп</h3> + +<p>У переглядачах, які підтримують іменовані захоплені групи, наступний код захопить <code>"їжак"</code> чи <code>"кіт"</code> у групу на ім'я <code>"тварина"</code>:</p> + +<pre class="brush: js">let paragraph = 'Єхидна, ґава, їжак ще й шиплячі плазуни бігцем форсують Янцзи.'; + +let capturingRegex = /(?<тварина>їжак|кіт) ще й/; +found = paragraph.match(capturingRegex); +console.log(found.groups); // {тварина: "їжак"}</pre> + +<h3 id="Використання_match_без_параметрів">Використання <code>match()</code> без параметрів</h3> + +<pre class="brush: js">var str = "Я — Дух одвічної стихії"; + +// вертає ["", index: 0, input: "Я — Дух одвічної стихії"] +str.match();</pre> + +<h3 id="Параметр_відмінного_від_RegExp_типу">Параметр відмінного від <code>RegExp</code> типу</h3> + +<p>Якщо переданий параметр являє собою рядок або число, його буде перетворено на об'єкт {{jsxref("RegExp")}} шляхом неявного виклику <code>new RegExp(obj)</code>.</p> + +<p>Якщо це додатнє число, його знаком <code>+</code> буде знехтувано, проте для від'ємного числа знак <code>-</code> стане частиною регулярного виразу:</p> + +<pre class="brush: js">var str1 = "NaN означає «не число». Нескінченність у JavaScript має дві форми: -Infinity та +Infinity.", + str2 = "Моїй бабці 65 років, а дідусеві — 63.", + str3 = "Незмінна величина null позначає відсутність очікуваного значення."; + +str1.match("число"); // "число" є рядком; вертає ["число"] +str1.match(NaN); // величина NaN є числом; вертає ["NaN"] +str1.match(Infinity); // величина Infinity також є числом; вертає ["Infinity"] +str1.match(+Infinity); // вертає ["Infinity"] +str1.match(-Infinity); // вертає ["-Infinity"] +str2.match(65); // вертає ["65"] +str2.match(+65); // додатнє число; вертає ["65"] +str3.match(null); // вертає ["null"]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<h3 id="Базова_підтримка_методу_match">Базова підтримка методу <samp>match()</samp></h3> + +<div class="hidden"> +<p>Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> +</div> + +<p>{{Compat("javascript.builtins.String.match")}}</p> + +<h3 id="Підтримка_іменованих_груп">Підтримка іменованих груп</h3> + +<p>{{Compat("javascript.builtins.RegExp.named_capture_groups")}}</p> + +<h2 id="Зауваги_щодо_Firefox">Зауваги щодо Firefox</h2> + +<ul> + <li>Аргумент <code>flags</code> був нестандартним другим аргументом, доступним лише у Firefox: <code><var>str</var>.match(<var>regexp, flags</var>)</code>. Він був прибраний, починаючи з Firefox 49.</li> + <li>У Firefox 27 цей метод було узгоджено зі специфікацією ECMAScript. Коли <code>match()</code> викликано із глобальним регулярним виразом, властивість {{jsxref("RegExp.lastIndex")}} (якщо зазначено) скидається до <code>0</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501739">bug 501739</a>).</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.matchAll()")}}</li> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/matchall/index.html b/files/uk/web/javascript/reference/global_objects/string/matchall/index.html new file mode 100644 index 0000000000..396fb3b2bc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/matchall/index.html @@ -0,0 +1,143 @@ +--- +title: String.prototype.matchAll() +slug: Web/JavaScript/Reference/Global_Objects/String/matchAll +tags: + - JavaScript + - String + - Регулярні Вирази + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>matchAll()</code></strong> повертає ітератор з усіма збігами <em>рядка</em> з <em><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">регулярним виразом</a></em>, а також <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">захоплені групи</a>.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>str</var>.matchAll(<var>regexp</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>regexp</var></code></dt> + <dd> + <p>Об'єкт регулярного виразу.</p> + + <p>Якщо передано об'єкт <code>obj</code>, який не є регулярним виразом, він неявно перетворюється на {{jsxref("RegExp")}} за допомогою <code>new RegExp(<var>obj</var>)</code>.</p> + + <p>Об'єкт <code>RegExp</code> повинен мати прапор <code>/g</code>, інакше буде викинуто помилку <code>TypeError</code>.</p> + </dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератор</a> (ітерабельний об'єкт, який не можна повторно запустити).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Regexp.exec_та_matchAll">Regexp.exec() та matchAll()</h3> + +<p>До появи у JavaScript методу <code>matchAll</code> можна було використовувати виклики <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (а також регулярні вирази з прапором <code>/g</code>) у циклі, щоб отримати усі збіги:</p> + +<pre class="brush: js notranslate">const regexp = RegExp('фу[а-я]*','g'); +const str = 'настільний футбол, фусбол'; +let match; + +while ((match = regexp.exec(str)) !== null) { + console.log(`Знайдено ${match[0]} початок=${match.index} кінець=${regexp.lastIndex}.`); + // виведе: "Знайдено футбол початок=11 кінець=17." + // виведе: "Знайдено фусбол початок=19 кінець=25." +}</pre> + +<p>З методом <code>matchAll</code> можна уникнути використання циклу {{jsxref("Statements/while", "while")}} та методу <code>exec</code> з <code>g</code>.</p> + +<p>Замість цього, використовуючи <code>matchAll</code>, ви отримуєте ітератор, який можна використовувати з більш зручними конструкціями {{jsxref("Statements/for...of", "for...of")}}, {{jsxref("Operators/Spread_syntax", "розкладанням масиву")}} чи {{jsxref("Array.from()")}}:</p> + +<pre class="brush: js notranslate">const regexp = RegExp('фу[а-я]*','g'); +const str = 'настільний футбол, фусбол'; +const matches = str.matchAll(regexp); + +for (const match of matches) { + console.log(`Знайдено ${match[0]} початок=${match.index} кінець=${match.index + match[0].length}.`); +} +// виведе: "Знайдено футбол початок=11 кінцець=17." +// виведе: "Знайдень фусбол початок=19 кінець=25." + +// Ітератор matches є вичерпаним після перебору for..of +// Викличте matchAll ще раз, щоб створити новий ітератор +Array.from(str.matchAll(regexp), m => m[0]); +// Array [ "футбол", "фусбол" ]</pre> + +<p>Метод <code>matchAll</code> викине виняток, якщо прапор <code>g</code> відсутній.</p> + +<pre class="brush: js notranslate">const regexp = RegExp('[а-в]',''); +const str = 'абв'; +str.matchAll(regexp); +// TypeError +</pre> + +<p><code>matchAll</code> робить внутрішній клон <code><var>regexp</var></code><var>,</var> тому, на відміну від {{jsxref("Global_Objects/RegExp/exec", "regexp.exec()")}}, <code>lastIndex</code> не змінюється під час пошуку.</p> + +<pre class="brush: js notranslate">const regexp = RegExp('[а-в]','g'); +regexp.lastIndex = 1; +const str = 'абв'; +Array.from(str.matchAll(regexp), m => `${regexp.lastIndex} ${m[0]}`); +// Array [ "1 б", "1 в" ]</pre> + +<h3 id="Кращий_доступ_до_захоплених_груп_ніж_у_String.prototype.match">Кращий доступ до захоплених груп (ніж у String.prototype.match())</h3> + +<p>Ще одна приваблива причина використовувати <code>matchAll</code> - покращений доступ до захоплених груп.</p> + +<p>Захоплені групи ігноруються при використанні {{jsxref("Global_Objects/String/match", "match()")}} з глобальним прапором <code>/g</code>:</p> + +<pre class="brush: js notranslate">let regexp = /т(е)(ст(\d?))/g; +let str = 'тест1тест2'; + +str.match(regexp); +// Array ['тест1', 'тест2']</pre> + +<p>Використовуючи <code>matchAll</code>, ви можете легко звертатись до захоплених груп:</p> + +<pre class="brush: js notranslate">let array = [...str.matchAll(regexp)]; + +array[0]; +// ['тест1', 'е', 'ст1', '1', index: 0, input: 'тест1тест2', length: 4] +array[1]; +// ['тест2', 'е', 'ст2', '2', index: 5, input: 'тест1тест2', length: 4] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">The compatibility table on 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.matchAll")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.match()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Використання регулярних виразів у JavaScript</a></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Захоплені групи</a></li> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/normalize/index.html b/files/uk/web/javascript/reference/global_objects/string/normalize/index.html new file mode 100644 index 0000000000..15b56e2bad --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/normalize/index.html @@ -0,0 +1,226 @@ +--- +title: String.prototype.normalize() +slug: Web/JavaScript/Reference/Global_Objects/String/normalize +tags: + - ECMAScript 2015 + - JavaScript + - String + - Unicode + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>normalize()</code></strong> повертає рядок у формі нормалізації Юнікоду.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-normalize.html", "taller")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.normalize([<var>form</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>form</var></code> {{optional_inline}}</dt> + <dd> + <p>Одне зі значень <code>"NFC"</code>, <code>"NFD"</code>, <code>"NFKC"</code> або <code>"NFKD"</code>, що вказують форму нормалізації Юнікоду. Якщо не вказана, або дорівнює {{jsxref("undefined")}}, використовується <code>"NFC"</code>.</p> + + <p>Ці значення означають наступне:</p> + + <dl> + <dt><code>"NFC"</code></dt> + <dd>Канонічна декомпозиція, з подальшою канонічною композицією.</dd> + <dt><code>"NFD"</code></dt> + <dd>Канонічна декомпозиція.</dd> + <dt><code>"NFKC"</code></dt> + <dd>Сумісна декомпозиція, з подальшою <em>канонічною</em> композицією.</dd> + <dt><code>"NFKD"</code></dt> + <dd>Сумісна декомпозиція.</dd> + </dl> + </dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить форму нормалізації Юнікоду для наданого рядка.</p> + +<h3 id="Помилки">Помилки</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Помилка {{jsxref("RangeError")}} викидається, якщо <code>form</code> не є одним з наведених вище значень.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Юнікод присвоює унікальне числове значення, яке називається <em>кодом символа</em>, кожному символу. Наприклад, кодом символа <code>"A"</code> є U+0041. Однак, іноді більше, ніж один код символа, або послідовність кодів, можуть представляти один і той самий абстрактний символ — наприклад, символ <code>"ñ"</code> може бути представлений:</p> + +<ul> + <li>Єдиним кодом символа U+00F1.</li> + <li>Кодом символа <code>"n"</code> (U+006E) з наступним кодом символа для об'єднуючої тильди (U+0303).</li> +</ul> + +<pre class="brush: js">let string1 = '\u00F1'; +let string2 = '\u006E\u0303'; + +console.log(string1); // ñ +console.log(string2); // ñ +</pre> + +<p>Однак, оскільки коди символів відрізняються, порівняння рядків не вважатиме їх рівними. А оскільки кількість кодів символів у цих варіантах різна, то вони навіть мають різні довжини.</p> + +<pre class="brush: js">let string1 = '\u00F1'; // ñ +let string2 = '\u006E\u0303'; // ñ + +console.log(string1 === string2); // false +console.log(string1.length); // 1 +console.log(string2.length); // 2 +</pre> + +<p>Метод <code>normalize()</code> допомагає вирішити цю проблему, перетворюючи рядок у нормалізовану форму, спільну для усіх послідовностей кодів символів, які представляють однакові символи. Існують дві основні форми нормалізації, одна базується на <strong>канонічній еквівалентності</strong>, а інша на <strong>сумісності</strong>.</p> + +<h3 id="Нормалізація_на_основі_канонічної_еквівалентності">Нормалізація на основі канонічної еквівалентності</h3> + +<p>В Юнікоді дві послідовності кодів символів канонічно еквівалентні, якщо вони відображають однакові абстрактні символи, і повинні завжди мати однакове візуальне відображення та поведінку (для прикладу, вони завжди повинні сортуватися однаковим чином).</p> + +<p>Ви можете скористатись методом <code>normalize()</code>, використовуючи аргументи <code>"NFD"</code> або <code>"NFC"</code>, щоб створити форму рядка, що буде однаковою для усіх канонічно еквівалентних рядків. У наведеному нижче прикладі ми нормалізуємо два відображення символу <code>"ñ"</code>:</p> + +<pre class="brush: js">let string1 = '\u00F1'; // ñ +let string2 = '\u006E\u0303'; // ñ + +string1 = string1.normalize('NFD'); +string2 = string2.normalize('NFD'); + +console.log(string1 === string2); // true +console.log(string1.length); // 2 +console.log(string2.length); // 2 +</pre> + +<h4 id="Зєднана_та_розкладена_форми">З'єднана та розкладена форми</h4> + +<p>Зауважте, що довжина нормалізованої форми при використанні <code>"NFD"</code> дорівнює <code>2</code>. Це тому, що <code>"NFD"</code> дає вам <strong>розкладену</strong> версію канонічної форми, в якій один код символа розбивається на множину складових. Розкладеною канонічною формою для <code>"ñ"</code> є <code>"\u006E\u0303"</code>.</p> + +<p>Ви можете вказати <code>"NFC"</code>, щоб отримати <strong>з'єднану</strong> канонічну форму, в якій множина кодів символів замінюється єдиним кодом символу, де це можливо. З'єднаною канонічною формою для <code>"ñ"</code> є <code>"\u00F1"</code>:</p> + +<pre class="brush: js">let string1 = '\u00F1'; // ñ +let string2 = '\u006E\u0303'; // ñ + +string1 = string1.normalize('NFC'); +string2 = string2.normalize('NFC'); + +console.log(string1 === string2); // true +console.log(string1.length); // 1 +console.log(string2.length); // 1 +console.log(string2.codePointAt(0).toString(16)); // f1</pre> + +<h3 id="Нормалізація_на_основі_сумісності">Нормалізація на основі сумісності</h3> + +<p>В Юнікоді дві послідовності кодів символів є сумісними, якщо вони представляють однакові абстрактні символи, і мають сприйматися однаково у деяких — але не обов'язково в усіх — застосуваннях.</p> + +<p>Усі канонічно еквівалентні послідовності також є сумісними, але не навпаки.</p> + +<p>Наприклад:</p> + +<ul> + <li>код символа U+FB00 відображає <a href="/uk/docs/Glossary/Ligature">лігатуру</a> <code>"ff"</code>. Він сумісний з двома послідовними кодами символів U+0066 (<code>"ff"</code>).</li> + <li>код символа U+24B9 відображає символ <code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-string">"Ⓓ"</span></span></span></span></code>. Він сумісний з кодом символа U+0044 (<code>"D"</code>).</li> +</ul> + +<p>У деяких ситуаціях (таких, як сортування) вони мають сприйматися як еквівалентні, а у деяких (таких, як візуальне відображення) — ні, отже, вони не є канонічно еквівалентними.</p> + +<p>Ви можете скористатись методом <code>normalize()</code>, використовуючи аргументи <code>"NFKD"</code> або <code>"NFKC"</code>, щоб створити форму рядка, яка буде однаковою для усіх сумісних рядків:</p> + +<pre class="brush: js">let string1 = '\uFB00'; +let string2 = '\u0066\u0066'; + +console.log(string1); // ff +console.log(string2); // ff +console.log(string1 === string2); // false +console.log(string1.length); // 1 +console.log(string2.length); // 2 + +string1 = string1.normalize('NFKD'); +string2 = string2.normalize('NFKD'); + +console.log(string1); // ff <- візуальне відображення змінилось +console.log(string2); // ff +console.log(string1 === string2); // true +console.log(string1.length); // 2 +console.log(string2.length); // 2 +</pre> + +<p>Застосовуючи сумісну нормалізацію, важливо враховувати, що саме ви намагаєтесь зробити з рядками, оскільки нормалізована форма може не підходити для усіх застосувань. У наведеному вище прикладі нормалізація підходить для пошуку, бо дозволяє користувачу знайти рядок пошуком <code>"f"</code>. Але вона може не підходити для відображення, бо зовнішній вигляд символа відрізняється.</p> + +<p>Як і у випадку з канонічною нормалізацією, ви можете застосовувати розкладену або з'єднану форми, передаючи, відповідно, <code>"NFKD"</code> або <code>"NFKC"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_normalize">Використання <code>normalize()</code></h3> + +<pre class="brush: js">// Початковий рядок + +// U+1E9B: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S З КРАПКОЮ ЗГОРИ +// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ +let str = '\u1E9B\u0323'; + + +// Канонічно-з'єднана форма (NFC) + +// U+1E9B: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S З КРАПКОЮ ЗГОРИ +// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ +str.normalize('NFC'); // '\u1E9B\u0323' +str.normalize(); // такий самий + + +// Канонічно-розкладена форма (NFD) + +// U+017F: ЛАТИНСЬКА МАЛА ЛІТЕРА ДОВГА S +// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ +// U+0307: ОБ'ЄДНУЮЧА КРАПКА ЗГОРИ +str.normalize('NFD'); // '\u017F\u0323\u0307' + + +// Сумісно-з'єднана (NFKC) + +// U+1E69: ЛАТИНСЬКА МАЛА ЛІТЕРА S З КРАПКОЮ ВНИЗУ ТА КРАПКОЮ ЗГОРИ +str.normalize('NFKC'); // '\u1E69' + + +// Сумісно-розкладена (NFKD) + +// U+0073: ЛАТИНСЬКА МАЛА ЛІТЕРА S +// U+0323: ОБ'ЄДНУЮЧА КРАПКА ВНИЗУ +// U+0307: ОБ'ЄДНУЮЧА КРАПКА ЗГОРИ +str.normalize('NFKD'); // '\u0073\u0323\u0307' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</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.normalize")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="http://www.unicode.org/reports/tr15/">Unicode Standard Annex #15, Unicode Normalization Forms</a></li> + <li><a href="http://en.wikipedia.org/wiki/Unicode_equivalence">Unicode equivalence</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/padend/index.html b/files/uk/web/javascript/reference/global_objects/string/padend/index.html new file mode 100644 index 0000000000..8f9fbd2e63 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/padend/index.html @@ -0,0 +1,66 @@ +--- +title: String.prototype.padEnd() +slug: Web/JavaScript/Reference/Global_Objects/String/padEnd +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>padEnd()</code></strong> доповнює поточний рядок наданим рядком (повторюючи його, якщо треба), так, щоб отриманий в результаті рядок досяг заданої довжини. Доповнення застосовується з кінця поточного рядка.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-padend.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.padEnd(<var>targetLength</var> [, <var>padString</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>targetLength</code></dt> + <dd>Довжина результуючого рядка після доповнення поточного рядка. Якщо значення є меншим за довжину поточного рядка, поточний рядок буде повернений без змін.</dd> + <dt><code>padString</code> {{optional_inline}}</dt> + <dd>Рядок, яким потрібно доповнити поточний рядок. Якщо цей рядок надто довгий для отримання заданої довжини, він буде обрізаний: для мов з письмом зліва направо буде застосована ліва частина, а для мов з письмом справа наліво - права частина. Значенням за замовчуванням для цього параметра є " " (U+0020).</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("String", "Рядок")}} вказаної довжини з доповненням, застосованим в кінці поточного рядка.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">'абв'.padEnd(10); // "абв " +'абв'.padEnd(10, "ква"); // "абвкваквак" +'абв'.padEnd(6, "123456"); // "абв123" +'абв'.padEnd(1); // "абв"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</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.padEnd")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.padStart()")}}</li> + <li><a>A polyfill for this method</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/padstart/index.html b/files/uk/web/javascript/reference/global_objects/string/padstart/index.html new file mode 100644 index 0000000000..4f7e48a94f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/padstart/index.html @@ -0,0 +1,84 @@ +--- +title: String.prototype.padStart() +slug: Web/JavaScript/Reference/Global_Objects/String/padStart +tags: + - JavaScript + - String + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>padStart()</code></strong> доповнює поточний рядок іншим рядком (кілька раз, якщо треба), доки отриманий рядок не досягне заданої довжини.</span> Доповнення застосовується з початку поточного рядка.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-padstart.html")}}</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>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>targetLength</var></code></dt> + <dd>Довжина результуючого рядка після доповнення поточного рядка <code><var>str</var></code>. Якщо значення є меншим за його довжину <code><var>str.</var>length</code>, то <em><code>str</code></em> повертається без змін.</dd> + <dt><code><var>padString</var></code> {{optional_inline}}</dt> + <dd>Рядок, яким потрібно доповнити поточний рядок <code><var>str</var></code>. Якщо <code><var>padString</var></code> надто довгий для отримання заданої довжини <code><var>targetLength</var></code>, він буде обрізаний з кінця. Значенням за замовчуванням є <code>" "</code> (<code>U+0020 'ПРОБІЛ'</code>).</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>{{jsxref("String", "Рядок")}} заданої довжини <code><var>targetLength</var></code> з доповненням <code><var>padString</var></code>, застосованим на початку.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базові_приклади">Базові приклади</h3> + +<pre class="brush: js">'абв'.padStart(10); // " абв" +'абв'.padStart(10, "ква"); // "кваквакабв" +'абв'.padStart(6,"123465"); // "123абв" +'абв'.padStart(8, "0"); // "00000абв" +'абв'.padStart(1); // "абв"</pre> + +<h3 id="Перетворення_числа_на_рядок_фіксованої_ширини">Перетворення числа на рядок фіксованої ширини</h3> + +<pre class="brush: js">// Версія Javascript для: (unsigned) +// printf "%0*d" width num +function leftFillNum(num, targetLength) { + return num.toString().padStart(targetLength, 0); +} + +const num = 123; +console.log(leftFillNum(num, 5)); +// очікуваний результат: "00123" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.String.padStart")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.padEnd()")}}</li> + <li><a href="https://github.com/uxitten/polyfill/blob/master/string.polyfill.js">Поліфіл</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/quote/index.html b/files/uk/web/javascript/reference/global_objects/string/quote/index.html new file mode 100644 index 0000000000..95ee484e6d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/quote/index.html @@ -0,0 +1,77 @@ +--- +title: String.prototype.quote() +slug: Web/JavaScript/Reference/Global_Objects/String/quote +tags: + - JavaScript + - String + - застарілий + - метод +translation_of: Archive/Web/JavaScript/String.quote +--- +<div>{{JSRef}} {{obsolete_header("37")}} {{non-standard_header}}</div> + +<p>Нестандартний метод <strong><code>quote()</code></strong> повертає копію рядка, замінюючи різноманітні спеціальні символи їхнім екрануванням та загортає результат у подвійні лапки (<code>"</code>).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.quote()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий рядок, що відображає початковий рядок у подвійних лапках, з екрануванням будь-яких спеціальних символів.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>У наведеній нижче таблиці метод <code>quote()</code> замінює будь-які спеціальні символи та загортає рядки у подвійні лапки. Також зверніть увагу на третю колонку, де загорнутий метод {{jsxref("Global_Objects/eval", "eval()")}} знову обчислює екрановані символи.</p> + +<table class="fullwidth-table"> + <thead> + <tr> + <th class="header" scope="col"><code>str</code></th> + <th class="header" scope="col"><code>str.quote()</code></th> + <th class="header" scope="col"><code>eval(str.quote())</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Hello world!</code></td> + <td><code>"Hello world!"</code></td> + <td><code>Hello world!</code></td> + </tr> + <tr> + <td><code style="white-space: pre;">Hello<br> + world!</code></td> + <td><code>"Hello\n\tworld!"</code></td> + <td><code style="white-space: pre;">Hello<br> + world!</code></td> + </tr> + <tr> + <td><code>" \ — '</code></td> + <td><code>"\" \\ \u2014 '"</code></td> + <td><code>" \ — '</code></td> + </tr> + </tbody> +</table> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="syntaxbox"><code>if (!String.prototype.quote) + String.prototype.quote = function(){ + return JSON.stringify( this ); // починаючи з IE8 +</code> }</pre> + +<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.quote")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/raw/index.html b/files/uk/web/javascript/reference/global_objects/string/raw/index.html new file mode 100644 index 0000000000..6383506ec5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/raw/index.html @@ -0,0 +1,117 @@ +--- +title: String.raw() +slug: Web/JavaScript/Reference/Global_Objects/String/raw +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/raw +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Статичний метод <strong><code>String.raw()</code></strong> є функцією-тегом <a href="/uk/docs/Web/JavaScript/Reference/template_strings">шаблонних літералів</a>. Він <em>схожий</em> на префікс <code>r</code> у мові Python, або на префікс <code>@</code> у мові C# для рядкових літералів. (Але вони не <em>ідентичні</em>; дивіться пояснення у <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">цій проблемі</a>.) Він використовується для отримання сирої рядкової форми шаблонних рядків, тобто, підстановки (наприклад, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">${foo}</span></font>) обробляються, а екранування (наприклад, <code>\n</code>) ні.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-raw.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>String.raw(<var>callSite</var>, <var>...substitutions</var>) + +String.raw`<var>templateString</var>` +</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>callSite</var></code></dt> + <dd>Добре сформований об'єкт-шаблон точки виклику, наприклад <code>{ raw: ['раз', 'два', 'три'] }</code>.</dd> + <dt><code><var>...substitutions</var></code></dt> + <dd>Містить значення підстановок.</dd> + <dt><code><var>templateString</var></code></dt> + <dd>{{jsxref("template_strings", "Шаблонний рядок")}}, може містити підстановки (<code>${...}</code>).</dd> +</dl> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Сира рядкова форма наданого шаблонного рядка.</p> + +<h3 id="Винятки">Винятки</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Помилка {{jsxref("TypeError")}} викидається, якщо перший аргумент не є добре сформованим об'єктом.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>У більшості випадків <code>String.raw()</code> використовується з шаблонними рядками. Перший синтаксис, наведений вище, використовується лише зрідка, тому що рушій JavaScript викличе його для вас з правильними аргументами (як і інші <a href="/uk/docs/Web/JavaScript/Reference/template_strings#Tagged_template_literals">функції-теги</a>).</p> + +<p><code>String.raw()</code> - єдина вбудована функція-тег шаблонних рядків. Вона працює як звичайна шаблонна функція та виконує об'єднання. Ви навіть можете перевизначити її звичайним кодом JavaScript.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_String.raw">Використання <code>String.raw()</code></h3> + +<pre class="brush: js">String.raw`Привіт\n${2+3}!`; +// 'Привіт\n5!', символ після 'Привіт' - +// це не символ нового рядка, +// '\' та 'n' є двома символами. + +String.raw`Привіт\u000A!`; +// 'Привіт\u000A!', те саме тут, цього разу ми отримуємо +// 6 символів, \, u, 0, 0, 0, A. +// Усі символи екранування будут неефективні, +// а зворотні слеши будуть присутні у отриманому рядку. +// Ви можете підтвертиди це, перевіривши властивість рядка .length. + +let name = 'Боб'; +String.raw`Привіт,\nце ${name}!`; +// 'Привіт,\nце Боб!', підстановки обробляються. + +// Зазвичай, ви б не викликали String.raw() як функцію, +// але, щоб симулювати `раз${2 + 3}два${'Java' + 'Script'}три`, можна зробити: +String.raw({ + raw: ['раз', 'два', 'три'] +}, 2 + 3, 'Java' + 'Script'); // 'раз5дваJavaScriptтри' +// Зауважте, що перший аргумент - об'єкт з властивістю 'raw', +// чиїм значенням є ітерабельний об'єкт, що представляє відокремлені рядки +// у шаблонному літералі. +// Решта аргументів - це підстановки. + +// Значенням 'raw' першого аргументу може бути будь-який ітерабельний об'єкт, +// навіть рядок! Наприклад, 'тест' сприймається як ['т', 'е', 'с', 'т']. +// Наступний код еквівалентний цьому +// `т${0}е${1}с${2}т`: +String.raw({ raw: 'тест' }, 0, 1, 2); // 'т0е1с2т' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</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.raw")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/template_strings">Шаблонні літерали</a></li> + <li>{{jsxref("String")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">Лексична граматика</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/repeat/index.html b/files/uk/web/javascript/reference/global_objects/string/repeat/index.html new file mode 100644 index 0000000000..101776ad15 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/repeat/index.html @@ -0,0 +1,119 @@ +--- +title: String.prototype.repeat() +slug: Web/JavaScript/Reference/Global_Objects/String/repeat +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>repeat()</code></strong> створює та повертає новий рядок, що містить вказану кількість об'єднаних разом копій рядка, на якому він був викликаний.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-repeat.html","shorter")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.repeat(<var>count</var>)</code> +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>count</var></code></dt> + <dd>Ціле число в діапазоні між <code>0</code> та {{jsxref("Global_Objects/Number/POSITIVE_INFINITY", "+Infinity")}}, що вказує кількість повторів рядка.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий рядок, що містить вказану кількість копій наданого рядка.</p> + +<h3 id="Винятки">Винятки</h3> + +<ul> + <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: число повторів має бути невід'ємним.</li> + <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: число повторів має бути меншим за нескінченість та не перевищувати максимальний розмір рядка.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">'абв'.repeat(-1) // RangeError +'абв'.repeat(0) // '' +'абв'.repeat(1) // 'абв' +'абв'.repeat(2) // 'абвабв' +'абв'.repeat(3.5) // 'абвабвабв' (count буде перетворений на ціле число) +'абв'.repeat(1/0) // RangeError + +({ toString: () => 'абв', repeat: String.prototype.repeat }).repeat(2) +// 'абвабв' (repeat() є загальним методом) +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей метод був доданий у специфікацію ECMAScript 2015 та може поки не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл <code>String.prototype.repeat()</code> за допомогою наступного коду:</p> + +<pre class="brush: js" dir="rtl">if (!String.prototype.repeat) { + String.prototype.repeat = function(count) { + 'use strict'; + if (this == null) + throw new TypeError('неможливо перетворити ' + this + ' на об\'єкт'); + + var str = '' + this; + // Щоб перетворити рядок на ціле число. + count = +count; + // Перевірка на NaN + if (count != count) + count = 0; + + if (count < 0) + throw new RangeError('repeat count must be non-negative'); + + if (count == Infinity) + throw new RangeError('repeat count must be less than infinity'); + + count = Math.floor(count); + if (str.length == 0 || count == 0) + return ''; + + // Гарантія того, що count є цілим 31-бітним числом, дозволяє значно оптимізувати + // головну частину. Але, все ж, найновіші (серпень 2014) переглядачі не можуть + // впоратись з рядками з 1 << 28 символів чи довше, а отже: + if (str.length * count >= 1 << 28) + throw new RangeError('repeat count must not overflow maximum string size'); + + var maxCount = str.length * count; + count = Math.floor(Math.log(count) / Math.log(2)); + while (count) { + str += str; + count--; + } + str += str.substring(0, maxCount - str.length); + return str; + } +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</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.repeat")}}</p> diff --git a/files/uk/web/javascript/reference/global_objects/string/replace/index.html b/files/uk/web/javascript/reference/global_objects/string/replace/index.html new file mode 100644 index 0000000000..35f4a5ab54 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/replace/index.html @@ -0,0 +1,240 @@ +--- +title: String.prototype.replace() +slug: Web/JavaScript/Reference/Global_Objects/String/replace +tags: + - JavaScript + - String + - вирази + - метод + - регулярний + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/replace +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>replace()</code></strong> повертає новий рядок, в якому деякі або усі збіги з шаблоном замінені параметром заміни.</span> Шаблон може бути рядком або {{jsxref("RegExp","регулярним виразом")}}, а заміна може бути рядком або функцією, що викликатиметься для кожного збігу. Якщо шаблон є рядком, буде замінений лише перший збіг.</p> + +<p>Початковий рядок лишається незміненим.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>regexp</var></code> (шаблон)</dt> + <dd>Об'єкт або літерал {{jsxref("RegExp")}}. Збіг чи збіги замінюються рядком <code><var>newSubstr</var></code> або значенням, яке вертає вказана функція <em><code>function</code></em>.</dd> + <dt><code><var>substr</var></code></dt> + <dd>{{jsxref("String","Рядок")}}, який потрібно замінити на <code><var>newSubstr</var></code>. Він сприймається як рядковий літерал та <em>не</em> інтерпретується як регулярний вираз. Замінюється лише перше співпадіння.</dd> + <dt><code><var>newSubstr</var></code> (заміна)</dt> + <dd>{{jsxref("String","Рядок")}}, який замінює підрядок, вказаний параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Підтримується можливість задавати декілька спеціальних шаблонів заміни; дивіться розділ "<a href="#Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</a>" нижче.</dd> + <dt><code><var>function</var></code> (заміна)</dt> + <dd>Функція, що викликатиметься для створення нового підрядка, який буде використовуватись для заміни збігів з наданим параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Аргументи, що передаються в цю функцію, описані у розділі "<a href="#Використання_функції_в_якості_параметра">Використання функції в якості параметра</a>" нижче.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий рядок, в якому деякі або усі збіги з шаблоном замінені наданим значенням.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод не змінює об'єкт {{jsxref("String")}}, що його викликав. Він просто повертає новий рядок.</p> + +<p>Щоб виконати глобальний пошук та заміну, використовуйте перемикач <code>g</code> у регулярному виразі.</p> + +<h3 id="Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</h3> + +<p>Рядок заміни може містити наступні спеціальні шаблони заміни:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Шаблон</th> + <th class="header" scope="col">Вставляє</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>$$</code></td> + <td>Вставляє <code>"$"</code>.</td> + </tr> + <tr> + <td><code>$&</code></td> + <td>Вставляє знайдений підрядок.</td> + </tr> + <tr> + <td><code>$`</code></td> + <td>Вставляє частину рядка, що передує знайденому підрядку.</td> + </tr> + <tr> + <td><code>$'</code></td> + <td>Вставляє частину рядка, що розташована за знайденим підрядком.</td> + </tr> + <tr> + <td><code>$<var>n</var></code></td> + <td>Де <code><var>n</var></code> є додатним цілим числом, меншим за 100, вставляє <code><var>n</var></code>-й підрядок збігів у дужках, за умови, що першим аргументом був об'єкт {{jsxref("RegExp")}}. Зауважте, що вони індексуються з <code>1</code>.</td> + </tr> + </tbody> +</table> + +<h3 id="Використання_функції_в_якості_параметра">Використання функції в якості параметра</h3> + +<p>Ви можете вказати функцію в якості другого параметра. У цьому випадку функція буде викликана після знайдення збігу. Результат функції (повернене значення) буде використаний в якості рядка заміни. (<strong>Заувага:</strong> Вищезазначені спеціальні шаблони заміни <em>не</em> застосовуються у цьому випадку.)</p> + +<p>Зауважте, що функція буде викликатись багаторазово, для кожного повного збігу, що буде замінений, якщо регулярний вираз у першому параметрі є глобальним.</p> + +<p>Функція має наступні аргументи:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Можливе ім'я</th> + <th class="header" scope="col">Надане значення</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>match</code></td> + <td>Знайдений підрядок. (Відповідає вищенаведеному <code>$&</code>)</td> + </tr> + <tr> + <td><code>p1, p2, ...</code></td> + <td><var>n</var>-й рядок, знайдений захопленою групою у дужках, за умови, що першим аргументом методу <code>replace()</code> був об'єкт {{jsxref("RegExp")}}. (Відповідає вищенаведеним <code>$1</code>, <code>$2</code>, і т.д.) Наприклад, якщо був наданий аргумент <code>/(\a+)(\b+)/</code>, то <code>p1</code> є збігом з <code>\a+</code>, а <code>p2</code> - збігом з <code>\b+</code>.</td> + </tr> + <tr> + <td><code>offset</code></td> + <td>Зсув знайденого підрядка всередині рядка, що перевіряється. (Наприклад, якби цілим рядком був <code>'абвг'</code>, а знайденим підрядком <code>'бв'</code>, то цей аргумент дорівнював би <code>1</code>.)</td> + </tr> + <tr> + <td><code>string</code></td> + <td>Весь рядок, що перевіряється.</td> + </tr> + </tbody> +</table> + +<p>(Точна кількість аргументів залежить від того, чи є перший аргумент об'єктом {{jsxref("RegExp")}} — і, якщо є, то скільки збігів, заключених у дужки, він визначає.)</p> + +<p>Наступний приклад присвоїть <code>newString</code> значення <code>'абв - 12345 - #$*%'</code>:</p> + +<pre class="brush: js notranslate">function replacer(match, p1, p2, p3, offset, string) { + // p1 - не цифри, p2 - цифри, а p3 - не літерно-цифрові символи + return [p1, p2, p3].join(' - '); +} +let newString = 'абв12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); +console.log(newString); // абв - 12345 - #$*% +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Визначення_регулярного_виразу_у_replace">Визначення регулярного виразу у replace()</h3> + +<p>У наступному прикладі регулярний вираз визначається у методі <code>replace()</code> та містить прапор ігнорування регістру.</p> + +<pre class="brush: js notranslate">let str = 'Наближається Різдво у чарівній Миші...'; +let newstr = str.replace(/миші/i, 'тиші'); +console.log(newstr); // Наближається Різдво у чарівній тиші... +</pre> + +<p>Цей код виводить <code>'Наближається Різдво у чарівній тиші</code><code>...'</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Більше пояснень щодо регулярних виразів дивіться у <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">цьому посібнику</a>.</p> +</div> + +<h3 id="Використання_глобального_пошуку_та_ігнорування_регістру_з_replace">Використання глобального пошуку та ігнорування регістру з replace()</h3> + +<p>Глобальну заміну можна зробити лише з використанням регулярного виразу. У наступному прикладі регулярний вираз містить <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">прапори глобального пошуку та ігнорування регістру</a>, які дозволяють методу <code>replace()</code> замінити кожний знайдений підрядок <code>'яблука'</code> на <code>'апельсини'</code>.</p> + +<pre class="brush: js notranslate">let re = /яблука/gi; +let str = 'Яблука круглі, і яблука сочні.'; +let newstr = str.replace(re, 'апельсини'); +console.log(newstr); // апельсини круглі, і апельсини сочні. +</pre> + +<p>Цей код виводить <code>'апельсини круглі, і апельсини сочні.'</code>.</p> + +<h3 id="Код_що_міняє_слова_місцями">Код, що міняє слова місцями</h3> + +<p>Наступний скрипт міняє місцями слова у рядку. В якості тексту заміни скрипт використовує <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">захоплені групи</a> та шаблони заміни <code>$1</code> та <code>$2</code>.</p> + +<pre class="brush: js notranslate">let re = /(\w+)\s(\w+)/; +let str = 'John Smith'; +let newstr = str.replace(re, '$2, $1'); +console.log(newstr); // Smith, John +</pre> + +<p>Цей код виводить <code>'Smith, John'</code>.</p> + +<h3 id="Використання_внутрішньої_функції_яка_модифікує_знайдені_символи">Використання внутрішньої функції, яка модифікує знайдені символи</h3> + +<p>У цьому прикладі усі великі літери перетворюються на малі, а перед розташуванням збігу вставляється дефіс. Важливим тут є те, що необхідно виконати додаткові операції над збігом перед тим, як він буде повернений в якості заміни.</p> + +<p>Функція заміни приймає фрагмент збігу в якості параметра і використовує його для перетворення регістру та приєднання дефісу перед поверненням.</p> + +<pre class="brush: js notranslate">function styleHyphenFormat(propertyName) { + function upperToHyphenLower(match, offset, string) { + return (offset > 0 ? '-' : '') + match.toLowerCase(); + } + return propertyName.replace(/[A-Z]/g, upperToHyphenLower); +} +</pre> + +<p>Наступний код <code>styleHyphenFormat('borderTop')</code> поверне <code>'border-top'</code>.</p> + +<p>Оскільки ми хочемо далі трансформувати <em>результат</em> збігу перед останочною заміною, нам потрібно використовувати функцію. Це запускає обчислення збігу пред викликом методу {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}. Якби ми спробували зробити це, використовуючи збіг без функії, метод {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} не мав би жодного ефекту.</p> + +<pre class="brush: js example-bad notranslate">let newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // не спрацює +</pre> + +<p>Все тому, що <code>'$&'.toLowerCase()</code> спочатку був би обчислений як рядковий літерал (і в результаті повернув би той самий рядок <code>'$&'</code>) перед використанням його символів в якості шаблону.</p> + +<h3 id="Заміна_градусів_Фаренгейта_на_еквівалент_у_градусах_Цельсія">Заміна градусів Фаренгейта на еквівалент у градусах Цельсія</h3> + +<p>Наступний приклад замінює значення градусів за Фаренгейтом на його еквівалент у градусах Цельсія. Значення градусів Фаренгейта має бути числом, що закінчується літерою <code>"F"</code>. Функція повертає число за Цельсієм, що закінчується літерою <code>"C"</code>. Наприклад, якщо вхідне число дорівнює <code>"212F"</code>, функція повертає <code>"100C"</code>. Якщо число дорівнює <code>"0F"</code>, функція вертає <code>"-17.77777777777778C"</code>.</p> + +<p>Регулярний вираз <code>test</code> перевіряє будь-яке число, що закінчується літерою <code>F</code>. Значення градусів Фаренгейта доступне функції через її другий параметр <code>p1</code>. Функція присвоює значення за Цельсієм, базуючись на градусах Фаренгейта, переданих у рядку до функції <code>f2c()</code>. Далі <code>f2c()</code> повертає значення за Цельсієм. Ця функція схожа на прапор мови Perl <code>s///e</code>.</p> + +<pre class="brush: js notranslate">function f2c(x) { + function convert(str, p1, offset, s) { + return ((p1 - 32) * 5/9) + 'C'; + } + let s = String(x); + let test = /(-?\d+(?:\.\d*)?)F\b/g; + return s.replace(test, convert); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</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.replace")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.replaceAll", "String.prototype.replaceAll()")}}</li> + <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html b/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html new file mode 100644 index 0000000000..ac59dbc1af --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/replaceall/index.html @@ -0,0 +1,169 @@ +--- +title: String.prototype.replaceAll() +slug: Web/JavaScript/Reference/Global_Objects/String/replaceAll +tags: + - JavaScript + - String + - regex + - Регулярний вираз + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>replaceAll()</code></strong> повертає новий рядок, в якому усі збіги з шаблоном замінені вказаним параметром заміни.</span> Шаблон може бути рядком або {{jsxref("RegExp","регулярним виразом")}}, а заміна може бути рядком або функцією, що викликатиметься для кожного збігу.</p> + +<p>Початковий рядок лишається незміненим.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>regexp</var></code> (шаблон)</dt> + <dd>Об'єкт або літерал {{jsxref("RegExp","регулярного виразу")}} з глобальним прапором. Збіги замінюються на <code><var>newSubstr</var></code> або значення, яке повертає вказана функція <code><var>function</var></code>. Регулярний вираз без глобального ("g") прапора викине помилку <code>TypeError</code>: "replaceAll must be called with a global RegExp".</dd> + <dt><code><var>substr</var></code></dt> + <dd>{{jsxref("String", "Рядок")}}, який потрібно замінити на <code><var>newSubstr</var></code>. Він вважається звичайним рядком та <em>не</em> інтерпретується як регулярний вираз.</dd> + <dt><code><var>newSubstr</var></code> (заміна)</dt> + <dd>{{jsxref("String","Рядок")}}, який замінює підрядок, вказаний параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Підтримується ряд спеціальних шаблонів заміни; дивіться нижче розділ "<a href="#Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</a>".</dd> + <dt><code><var>function</var></code> (заміна)</dt> + <dd>Функція, що буде викликана для створення нового підрядка, який замінить збіги з наданим параметром <code><var>regexp</var></code> або <code><var>substr</var></code>. Аргументи, що передаються в цю функцію, описані нижче в розділі "<a href="#Використання_функції_в_якості_параметра">Використання функції в якості параметра</a>".</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий рядок, в якому усі збіги з шаблоном замінені.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод не змінює об'єкт {{jsxref("String")}}, що його викликав. Він просто повертає новий рядок.</p> + +<h3 id="Використання_рядка_в_якості_параметра">Використання рядка в якості параметра</h3> + +<p>Рядок заміни може містити наступні спеціальні шаблони заміни:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Шаблон</th> + <th class="header" scope="col">Вставляє</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>$$</code></td> + <td>Вставляє <code>"$"</code>.</td> + </tr> + <tr> + <td><code>$&</code></td> + <td>Вставляє знайдений підрядок.</td> + </tr> + <tr> + <td><code>$`</code></td> + <td>Вставляє частину рядка, що передує знайденому підрядку.</td> + </tr> + <tr> + <td><code>$'</code></td> + <td>Вставляє частину рядка, що розташована за знайденим підрядком.</td> + </tr> + <tr> + <td><code>$<var>n</var></code></td> + <td>Де <code><var>n</var></code> є додатним цілим числом, меншим за 100, вставляє <code><var>n</var></code>-й підрядок збігів у дужках, за умови, що першим аргументом був об'єкт {{jsxref("RegExp")}}. Зауважте, що вони індексуються з <code>1</code>.</td> + </tr> + </tbody> +</table> + +<h3 id="Використання_функції_в_якості_параметра">Використання функції в якості параметра</h3> + +<p>Ви можете вказати функцію в якості другого параметра. У цьому випадку функція буде викликана після знайдення збігу. Результат функції (повернене значення) буде використаний в якості рядка заміни. (<strong>Заувага:</strong> Вищезазначені спеціальні шаблони заміни <em>не</em> застосовуються у цьому випадку.)</p> + +<p>Зауважте, що функція буде викликатись багаторазово, для кожного повного збігу, що буде замінений, якщо регулярний вираз у першому параметрі є глобальним.</p> + +<p>Функція має наступні аргументи:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Можливе ім'я</th> + <th class="header" scope="col">Надане значення</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>match</code></td> + <td>Знайдений підрядок. (Відповідає вищенаведеному <code>$&</code>)</td> + </tr> + <tr> + <td><code>p1, p2, ...</code></td> + <td><var>n</var>-й рядок, знайдений захопленою групою у дужках, за умови, що першим аргументом методу <code>replace()</code> був об'єкт {{jsxref("RegExp")}}. (Відповідає вищенаведеним <code>$1</code>, <code>$2</code> і т.д.) Наприклад, якщо був наданий аргумент <code>/(\a+)(\b+)/</code>, то <code>p1</code> є збігом з <code>\a+</code>, а <code>p2</code> - збігом з <code>\b+</code>.</td> + </tr> + <tr> + <td><code>offset</code></td> + <td>Зсув знайденого підрядка всередині рядка, що перевіряється. (Наприклад, якби цілим рядком був <code>'абвг'</code>, а знайденим підрядком <code>'бв'</code>, то цей аргумент дорівнював би <code>1</code>.)</td> + </tr> + <tr> + <td><code>string</code></td> + <td>Весь рядок, що перевіряється.</td> + </tr> + </tbody> +</table> + +<p>(Точна кількість аргументів залежить від того, чи є перший аргумент об'єктом {{jsxref("RegExp")}} і, якщо є, то скільки збігів, заключених у дужки, він визначає.)</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_replaceAll">Використання replaceAll</h3> + +<pre class="brush: js notranslate">'ааббвв'.replaceAll('б', '.'); +// 'аа..вв'</pre> + +<h3 id="Неглобальний_регулярний_вираз_викидає_виняток">Неглобальний регулярний вираз викидає виняток</h3> + +<p>Якщо використовується регулярний вираз в якості значення пошуку, він повинен бути глобальним. Це не працюватиме:</p> + +<pre class="brush: js; example-bad notranslate">'ааббвв'.replaceAll(/б/, '.'); +TypeError: replaceAll must be called with a global RegExp +</pre> + +<p>Так працюватиме:</p> + +<pre class="brush: js; example-good notranslate">'ааббвв'.replaceAll(/б/g, '.'); +"аа..вв" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}</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.replaceAll")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.replace", "String.prototype.replace()")}}</li> + <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/search/index.html b/files/uk/web/javascript/reference/global_objects/string/search/index.html new file mode 100644 index 0000000000..7d81b5d0a3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/search/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.search() +slug: Web/JavaScript/Reference/Global_Objects/String/search +tags: + - JavaScript + - Prototype + - String + - Довідка + - Регулярний вираз +translation_of: Web/JavaScript/Reference/Global_Objects/String/search +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>search()</code></strong> здійснює пошук у рядку за вказаним регулярним виразом.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>regexp</code></dt> + <dd>Об'єкт регулярного виразу. Якщо передати значення <code>value</code> іншого типу, його буде зведено до {{jsxref("RegExp")}} за допомогою оператора <code>new RegExp(value)</code>.</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Індекс початку першого збігу між рядком та переданим регулярним виразом; якщо збігу не знайдено, вертає значення <code>-1</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>search()</code> використовується тоді, коли треба не лише знати, чи містить рядок відповідну послідовність, а й з'ясувати, в якому саме місці вона починається. Натомість можно скористатися методом <code>{{jsxref("RegExp.prototype.test()")}}</code>, що вертає <code>boolean</code>, якщо треба з'ясувати лише наявність такої послідовності.<br> + Ще детальнішу інформацію про результат пошуку (коштом нижчої швидкодії) можна отримати за допомогою метода <code>{{jsxref("String.prototype.match()", "match()")}}</code> або <code>{{jsxref("RegExp.prototype.exec()")}}</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_search()">Використання <code>search()</code></h3> + +<p>В цьому прикладі наведено успішний пошук (метод вертає невід'ємне значення):</p> + +<pre class="brush: js">var str = "Красно дякую, панове!"; + +// Шукаємо послідовність із шести рядкових (маленьких) літер. +var pattern = /[а-я]{6}/g; +console.log(str.search(pattern)); // вертає 14, що є індексом літери «п»</pre> + +<p>Натомість в уьому прикладі знайти шукане неможливо (рядок не містить жодної крапки), тож метод вертає значення <code>-1</code>:</p> + +<pre class="brush: js">var str = "Щиро вітаю, друже мій!"; +var pattern = /[.]/g; +console.log(str.search(pattern)); // вертає -1 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкова виознака, запроваджено у JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.String.search")}}</p> + +<h2 id="Зауваги_щодо_Gecko">Зауваги щодо Gecko</h2> + +<ul> + <li>Реалізація <code>search()</code> до {{Gecko("8.0")}} містила помилку; коли виклик здійснювався без параметрів, або зі значенням {{jsxref("undefined")}}, метод шукав рядок 'undefined', замість порожнього рядка (себто послідовності нульової довжини). В новіших версіях це виправлено: виклики <code>'a'.search()</code> та <code>'a'.search(undefined)</code> тепер вертають <code>0</code>, як і належить.</li> + <li>З версії Gecko 39 {{geckoRelease(39)}}, нестандартний аргумент з прапорцями визнано застарілим, тож виклик метода з таким аргументом друкує відповідне попередження в консолі ({{bug(1142351)}}).</li> + <li>З версії Gecko 47 {{geckoRelease(47)}}, нестандартний аргумент з прапорцями не підтримується в проміжних збірках й невдовзі буде цілком видалений ({{bug(1245801)}}).</li> + <li>З версії Gecko 49 {{geckoRelease(49)}}, нестандартний аргумент з прапорцями не підтримується ({{bug(1108382)}}).</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/slice/index.html b/files/uk/web/javascript/reference/global_objects/string/slice/index.html new file mode 100644 index 0000000000..944e757382 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/slice/index.html @@ -0,0 +1,116 @@ +--- +title: String.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/String/slice +tags: + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/slice +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>slice()</code></strong> вирізає частину рядка та повертає її як новий рядок, не змінюючи початковий.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-slice.html", "taller")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>beginIndex</var></code></dt> + <dd> + <p>Індекс на основі нуля, з якого починається копіювання. Якщо індекс від'ємний, він сприймається як <code><var>str</var>.length + <var>beginIndex</var></code>. (Наприклад, якщо <code><var>beginIndex</var></code> дорівнює <code>-3</code>, він сприймається як <code><var>str</var>.length - 3</code>.)</p> + + <p>Якщо значення <em><code>beginIndex</code></em> більше за довжину рядка <code><em>str</em>.length</code> або дорівнює їй, <code>slice()</code> повертає порожній рядок.</p> + </dd> + <dt><code><var>endIndex</var></code> {{optional_inline}}</dt> + <dd> + <p>Індекс на основі нуля, <em>до</em> якого треба виконувати копіювання. Символ за цим індексом не буде включений.</p> + + <p>Якщо <code><var>endIndex</var></code> відсутній, <code>slice()</code> копіює до кінця рядка. Якщо його значення від'ємне, він сприймається як <code><var>str</var>.length + <var>endIndex</var></code>. (Наприклад, якщо <code><var>endIndex</var></code> дорівнює <code>-3</code>, він сприймається як <code><var>str</var>.length - 3</code>.)</p> + </dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий рядок, що містить вказану частину рядка.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>slice()</code> дістає текст з одного рядка та повертає новий рядок. Зміни у тексті одного з рядків не впливають на інший рядок.</p> + +<p><code>slice()</code> скопіює текст по індекс <code><var>endIndex</var></code><var> </var>(але не включно). <code>str.slice(1,4)</code> копіює з другого по четвертий символ (символи за індексами <code>1</code>, <code>2</code>, та <code>3</code>).</p> + +<p>Наприклад, <code><var>str</var>.slice(2, -1)</code> копіює частину від третього до другого з кінця символу рядка.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_slice_для_створення_нового_рядка">Використання <code>slice()</code> для створення нового рядка</h3> + +<p>Наступний приклад використовує <code>slice()</code>, щоб створити новий рядок.</p> + +<pre class="brush: js">let str1 = "П'ять мавпенят стрибали на столі", // довжина str1 дорівнює 32. + str2 = str1.slice(1, 8), + str3 = str1.slice(6, -2), + str4 = str1.slice(15), + str5 = str1.slice(32); +console.log(str2) // РЕЗУЛЬТАТ: 'ять ма +console.log(str3) // РЕЗУЛЬТАТ: мавпенят стрибали на сто +console.log(str4) // РЕЗУЛЬТАТ: стрибали на столі +console.log(str5) // РЕЗУЛЬТАТ: ""</pre> + +<h3 id="Використання_slice_з_відємними_індексами">Використання <code>slice()</code> з від'ємними індексами</h3> + +<p>Наступний приклад використовує <code>slice()</code> з від'ємними індексами.</p> + +<pre class="brush: js">let str = "П'ять мавпенят стрибали на столі." +str.slice(-6) // вертає "столі." +str.slice(-6, -1) // вертає "столі" +str.slice(0, -1) // вертає "П'ять мавпенят стрибали на столі"</pre> + +<p>Цей приклад відраховує у зворотньому напрямку, від кінця рядка, <code>12</code>, щоб знайти початковий індекс, та вперед з початку рядка <code>25</code>, щоб знайти кінцевий індекс.</p> + +<pre class="brush: js">console.log(str.slice(-12, 25)) // => "ли н"</pre> + +<p>Тут він рахує вперед від початку <code>21</code>, щоб знайти початковий індекс, і у зворотньому напрямку з кінця <code>8</code>, щоб знайти кінцевий індекс.</p> + +<pre class="brush: js">console.log(str.slice(21, -8)) // => "ли н"</pre> + +<p>Ці аргументи відраховують у зворотньому напрямку з кінця <code>5</code>, щоб знайти початковий індекс, та у зворотньому напрямку з кінця <code>1</code>, щоб знайти кінцевий індекс.</p> + +<pre class="brush: js">console.log(str.slice(-5, -1)) // => "толі"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.String.slice")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.substr()")}}</li> + <li>{{jsxref("String.prototype.substring()")}}</li> + <li>{{jsxref("Array.prototype.slice()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/small/index.html b/files/uk/web/javascript/reference/global_objects/string/small/index.html new file mode 100644 index 0000000000..b7cf6d34e6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/small/index.html @@ -0,0 +1,70 @@ +--- +title: String.prototype.small() +slug: Web/JavaScript/Reference/Global_Objects/String/small +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/small +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>small()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/small" title="HTML-елемент <small> відображає супутні коментарі та дрібні надписи, такі як позначка авторського права та юридичний текст, незалежно від свого стильового відображення. За замовчуванням, він зменшує свій текст на один розмір, наприклад small до x-small."><code><small></code></a>, який відображає рядок зменшеним шрифтом.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.small()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/small" title="HTML-елемент <small> відображає супутні коментарі та дрібні надписи, такі як позначка авторського права та юридичний текст, незалежно від свого стильового відображення. За замовчуванням, він зменшує свій текст на один розмір, наприклад small до x-small."><code><small></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>small()</code> вбудовує рядок у тег <code><small></code>: <code>"<small>str</small>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_small">Використання <code>small()</code></h3> + +<p>Наступний приклад використовує рядкові методи, щоб змінювати розмір рядка:</p> + +<pre class="brush: js">var worldString = 'Привіт'; + +console.log(worldString.small()); // <small>Привіт</small> +console.log(worldString.big()); // <big>Привіт</big> +console.log(worldString.fontsize(7)); // <font size="7">Привіт</fontsize> +</pre> + +<p>Використовуючи об'єкт <a href="/uk/docs/Web/API/HTMLElement/style" title="Властивість HTMLElement.style використовується для отримання, а також присвоєння внутрішнього стилю елемента. При отриманні вона вертає об'єкт CSSStyleDeclaration, який містить список усіх властивостей стилів для цього елемента, а також значення, присвоєні атрибутам, які визначені у внутрішньому атрибуті елемента style."><code>element.style</code></a>, ви можете отримати атрибут елемента <code>style</code> та маніпулювати ним у більш загальному стилі, наприклад:</p> + +<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em'; +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}}</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.small")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.fontsize()")}}</li> + <li>{{jsxref("String.prototype.big()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/split/index.html b/files/uk/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..6aa3a2c251 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,220 @@ +--- +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('') +// => "́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> diff --git a/files/uk/web/javascript/reference/global_objects/string/startswith/index.html b/files/uk/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..a1850169e5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,96 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/startsWith +tags: + - ECMAScript 2015 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>startsWith()</code></strong> визначає, чи починається рядок з символів заданого рядка, повертаючи, відповідно, <code>true</code> чи <code>false</code>.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-startswith.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>searchString</var></code></dt> + <dd>Символи, які шукатимуться на початку рядка.</dd> + <dt><code><var>position</var></code> {{optional_inline}}</dt> + <dd>Позиція у цьому рядку, з якої починатиметься пошук рядка <code><var>searchString</var></code>. За замовчуванням <code>0</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><strong><code>true</code></strong>, якщо надані символи знайдені на початку рядка; інакше, <strong><code>false</code></strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод дозволяє визначити, починається чи ні рядок з символів іншого рядка. Цей метод чутливий до регістру.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_startsWith">Використання <code>startsWith()</code></h3> + +<pre class="brush: js">let str = 'Питання в тому: бути чи не бути.' + +console.log(str.startsWith('Питання')) // true +console.log(str.startsWith('бути')) // false +console.log(str.startsWith('бути', 16)) // true +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Цей метод був доданий у специфікації ECMAScript 2015 і може не бути доступним в усіх реалізаціях JavaScript. Однак, ви можете створити поліфіл <code>String.prototype.startsWith()</code> за допомогою наступного коду:</p> + +<pre class="brush: js">if (!String.prototype.startsWith) { + Object.defineProperty(String.prototype, 'startsWith', { + value: function(search, rawPos) { + var pos = rawPos > 0 ? rawPos|0 : 0; + return this.substring(pos, pos + search.length) === search; + } + }); +} +</pre> + +<p>Більш надійний (у повній відповідності до специфікації ES2015), але менш швидкий та компактний поліфіл доступний <a href="https://github.com/mathiasbynens/String.prototype.startsWith">на GitHub за авторством Mathias Bynens</a>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.String.startsWith")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.endsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/strike/index.html b/files/uk/web/javascript/reference/global_objects/string/strike/index.html new file mode 100644 index 0000000000..55ab07f635 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/strike/index.html @@ -0,0 +1,67 @@ +--- +title: String.prototype.strike() +slug: Web/JavaScript/Reference/Global_Objects/String/strike +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/strike +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>strike()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/strike" title="HTML-елемент <strike> (або Strikethrough) малює на тексті перекреслення (горизонтальну лінію)."><code><strike></code></a>, який відображає рядок з перекресленим текстом.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.strike()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/strike" title="HTML-елемент <strike> (або Strikethrough) малює на тексті перекреслення (горизонтальну лінію)."><code><strike></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>strike()</code> вбудовує рядок у тег <code><strike></code>: <code>"<strike>str</strike>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_strike">Використання <code>strike()</code></h3> + +<p>Наступний приклад використовує рядкові методи, щоб змінити форматування рядка:</p> + +<pre class="brush: js">var worldString = 'Всім привіт'; + +console.log(worldString.blink()); // <blink>Всім привіт</blink> +console.log(worldString.bold()); // <b>Всім привіт</b> +console.log(worldString.italics()); // <i>Всім привіт</i> +console.log(worldString.strike()); // <strike>Всім привіт</strike> +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}}</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.strike")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/string/index.html b/files/uk/web/javascript/reference/global_objects/string/string/index.html new file mode 100644 index 0000000000..65f85d4d0a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/string/index.html @@ -0,0 +1,64 @@ +--- +title: Конструктор String() +slug: Web/JavaScript/Reference/Global_Objects/String/String +tags: + - JavaScript + - String + - Конструктор + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/String +--- +<div>{{JSRef}}</div> + +<p>Конструктор <strong><code>String</code></strong> використовується для створення нового об'єкта {{jsxref("String")}}. Він виконує перетворення типів, коли викликається як функція, а не як конструктор, що, зазвичай, більш корисно.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new String(<var>thing</var>) +String(<var>thing</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>thing</var></code></dt> + <dd>Будь-що, що перетвориться на рядок.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Конструктор_String_та_функція_String">Конструктор String та функція String</h3> + +<p>Функція String та конструктор String повертають різні результати:</p> + +<pre class="brush: js">typeof String('Всім привіт'); // string +typeof new String('Всім привіт'); // object +</pre> + +<p>Тут функція, як і обіцяно, повертає рядок (<a href="/uk/docs/Glossary/primitive">простий</a> тип даних). Однак, конструктор повертає екземпляр типу String (об'єкт-обгортку), саме тому вам нечасто захочеться взагалі використовувати конструктор String.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-constructor', 'String constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.String.String")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting">Форматування тексту у посібнику JavaScript</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/sub/index.html b/files/uk/web/javascript/reference/global_objects/string/sub/index.html new file mode 100644 index 0000000000..5aa09a91ce --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/sub/index.html @@ -0,0 +1,68 @@ +--- +title: String.prototype.sub() +slug: Web/JavaScript/Reference/Global_Objects/String/sub +tags: + - HTML + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/sub +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>sub()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/sub" title="HTML-елемент нижнього індексу (<sub>) вказує вбудований текст, який необхідно відобразити нижнім індексом суто для друкарського використання."><code><sub></code></a>, який відображає рядок у вигляді нижнього індексу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.sub()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/sub" title="HTML-елемент нижнього індексу (<sub>) вказує вбудований текст, який необхідно відобразити нижнім індексом суто для друкарського використання."><code><sub></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>sub()</code> вбудовує рядок у тег <code><sub></code>: <code>"<sub>str</sub>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_методів_sub_та_sup">Використання методів <code>sub()</code> та <code>sup()</code></h3> + +<p>Наступний приклад використовує методи <code>sub()</code> та {{jsxref("String.prototype.sup()", "sup()")}} для форматування рядка:</p> + +<pre class="brush: js">var superText = 'верхній індекс'; +var subText = 'нижній індекс'; + +console.log('Так виглядає ' + superText.sup() + '.'); +// Так виглядає <sup>верхній індекс</sup>. + +console.log('Так виглядає ' + subText.sub() + '.'); +// Так виглядає <sub>нижній індекс</sub>. +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}}</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.sub")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.sup()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/substr/index.html b/files/uk/web/javascript/reference/global_objects/string/substr/index.html new file mode 100644 index 0000000000..265ef1552d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/substr/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Reference/Global_Objects/String/substr +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +<p>{{JSRef}}</p> + +<div class="warning"><strong>Застереження</strong>: Хоча метод <code>String.prototype.substr(…)</code> не є строго не рекомендованим (як "прибраний з веб-стандартів"), він вважається <strong>застарілим</strong> та не бажаний для використання, коли це можливо. Він не є частиною ядра мови JavaScript та може бути прибраний в майбутньому. За можливості, використовуйте замість нього метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String/substring">substring()</a></code>.</div> + +<p class="seoSummary">Метод <strong><code>substr()</code></strong> повертає частину рядка, що починається з вказаного індекса та продовжується вказану кількість символів.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-substr.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.substr(<var>start</var>[, <var>length]</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Індекс першого символу, який треба включити у повернений рядок.</dd> + <dt><code>length</code></dt> + <dd>Необов'язковий. Кількість символів, яку треба повернути.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Новий рядок, що містить вказану частину наданого рядка.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>substr()</code> вирізає <code>length</code> символів з рядка <code>string</code>, рахуючи з початкового індексу <code>start</code>.</p> + +<p>Якщо <code>start</code> є додатним числом, індекс рахується з початку рядка. Його значення обмежується значенням <code>str.length</code>.<br> + Якщо <code>start</code> є від'ємним числом, індекс рахується з кінця рядка. Його значення обмежується значенням <code>-str.length</code>.<br> + Заувага: У Microsoft JScript від'ємне значення аргументу <code>start</code> не вважається посиланням на кінець рядка.</p> + +<p>Якщо аргумент <code>length</code> пропущений, <code>substr()</code> повертає символи до кінця рядка.<br> + Якщо <code>length</code> дорівнює {{jsxref("undefined")}}, <code>substr()</code> повертає символи до кінця рядка.<br> + Якщо <code>length</code> є від'ємним числом, він вважається рівним 0.</p> + +<p>Для обох, <code>start</code> та <code>length</code>, NaN вважається рівним 0.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_substr">Використання <code>substr()</code></h3> + +<pre class="brush: js">var aString = 'Mozilla'; + +console.log(aString.substr(0, 1)); // 'M' +console.log(aString.substr(1, 0)); // '' +console.log(aString.substr(-1, 1)); // 'a' +console.log(aString.substr(1, -1)); // '' +console.log(aString.substr(-3)); // 'lla' +console.log(aString.substr(1)); // 'ozilla' +console.log(aString.substr(-20, 2)); // 'Mo' +console.log(aString.substr(20, 2)); // '' +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>JScript у Microsoft не підтримує від'ємні значення початкового індекса. Щоб використовувати цю функціональність у JScript, ви можете скористатись наступним кодом:</p> + +<pre class="brush: js">// запускайте тільки якщо функція substr() не працює +if ('ab'.substr(-1) != 'b') { + /** + * Отримати підрядок з рядка + * @param {integer} start де почати підрядок + * @param {integer} length скільки символів повертати + * @return {string} + */ + String.prototype.substr = function(substr) { + return function(start, length) { + // викликаємо початковий метод + return substr.call(this, + // якщо ми отримали від'ємний start, порахувати, скільки це від початку рядка + // відкоригувати параметр start для від'ємного значення + start < 0 ? this.length + start : start, + length) + } + }(String.prototype.substr); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</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.substr")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.slice()")}}</li> + <li>{{jsxref("String.prototype.substring()")}}</li> +</ul> 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> diff --git a/files/uk/web/javascript/reference/global_objects/string/sup/index.html b/files/uk/web/javascript/reference/global_objects/string/sup/index.html new file mode 100644 index 0000000000..5fcc97cdee --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/sup/index.html @@ -0,0 +1,66 @@ +--- +title: String.prototype.sup() +slug: Web/JavaScript/Reference/Global_Objects/String/sup +tags: + - JavaScript + - String + - метод + - не рекомендований + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/sup +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Метод <strong><code>sup()</code></strong> створює HTML-елемент <a href="/uk/docs/Web/HTML/Element/sup" title="HTML-елемент верхнього індексу (<sup>) вказує вбудований текст, який необхідно відобразити верхнім індексом суто для друкарського використання."><code><sup></code></a>, який відображає рядок у вигляді верхнього індексу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.sup()</code></pre> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що містить HTML-елемент <a href="/uk/docs/Web/HTML/Element/sup" title="HTML-елемент верхнього індексу (<sup>) вказує вбудований текст, який необхідно відобразити верхнім індексом суто для друкарського використання."><code><sup></code></a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>sup()</code> вбудовує рядок у тег <code><sup></code>: <code>"<sup>str</sup>"</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_методів_sub_та_sup">Використання методів <code>sub()</code> та <code>sup()</code></h3> + +<p>Наступний приклад використовує методи {{jsxref("String.prototype.sub()", "sub()")}} та <code>sup()</code> для форматування рядка:</p> + +<pre class="brush: js">var superText = 'верхній індекс'; +var subText = 'нижній індекс'; + +console.log('Так виглядає ' + superText.sup() + '.'); +// Так виглядає <sup>верхній індекс</sup>. + +console.log('Так виглядає ' + subText.sub() + '.'); +// Так виглядає <sub>нижній індекс</sub>.</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}}</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.sup")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.sub()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html new file mode 100644 index 0000000000..2e595bc9a0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html @@ -0,0 +1,106 @@ +--- +title: String.prototype.toLocaleLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +tags: + - Internationalization + - JavaScript + - Method + - Prototype + - String + - Довідка + - Уміжнароднення +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toLocaleLowerCase()</strong></code> повертає той самий рядок, але з літерами переведеними до нижнього регістра відповідно до правил певної мови (місцевості).</p> + +<p>{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.toLocaleLowerCase() +<var>str</var>.toLocaleLowerCase(locale) +<var>str</var>.toLocaleLowerCase([locale, locale, ...]) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>locale</code> {{optional_inline}}</dt> + <dd>Цей параметр вказує мовний код (або перелік мовних кодів), відповідно до якого має здійснюватися перетворення регістра. Якщо вказано кілька мовних кодів (передано масив рядків), обирається <a href="https://tc39.github.io/ecma402/#sec-bestavailablelocale">найліпший з наявних</a>. Якщо параметр не вказано, буде використано системне значення (з налаштувань оточення).</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий рядок із тим самим вмістом, але літерами переведеними до нижнього регістра відповідно до правил певної мови (місцевості).</p> + +<h3 id="Винятки">Винятки</h3> + +<ul> + <li>Викидає виняток <code>{{jsxref("RangeError")}}</code> ("Invalid language tag: xx_yy"), якщо параметр <code>locale</code> не є належним мовним кодом (кодом місцевості).</li> + <li>Викидає виняток <code>{{jsxref("TypeError")}}</code> ("Language ID should be string or object."), якщо елемент масиву <code>locale</code> не є рядком.</li> +</ul> + +<h2 id="Опис">Опис</h2> + +<p>Всі великі літери перетворюються на малі відповідно до правил певної мови (місцевості), а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toLocaleLowerCase()</code> створює новий рядок, лишаючи оригінал без змін.</p> + +<p>Зазвичай метод <code>toLocaleLowerCase()</code> вертає той самий результат, що й <code>{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}</code>. Втім для деяких мов, як-от турецька, правила перетворення регістра дещо відрізняються від того, що передбачено у Unicode, тож результат буде іншим.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLocaleLowerCase">Використання <code>toLocaleLowerCase()</code></h3> + +<p>Якщо мовний код не зазначено, використовується поточне системне значення:</p> + +<pre class="brush: js">// виводить 'абетка' +console.log('Абетка'.toLocaleLowerCase()); +</pre> + +<p>Можна вказати лише один код чи декілька одночасно:</p> + +<pre class="brush: js">// виводить true +console.log('\u0130'.toLocaleLowerCase('tr') === 'i'); +// виводить fales +console.log('\u0130'.toLocaleLowerCase('en-US') === 'i'); + +let locales = ['tr', 'TR', 'tr-TR', 'tr-u-co-search', 'tr-x-turkish']; + +// виводить true +console.log('\u0130'.toLocaleLowerCase(locales) === 'i'); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.toLocaleLowerCase")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html new file mode 100644 index 0000000000..d8d2346ec8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.toLocaleUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +tags: + - Internationalization + - JavaScript + - Method + - Prototype + - String + - Довідка + - Уміжнароднення +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toLocaleUpperCase()</strong></code> повертає той самий рядок, але з літерами переведеними до верхнього регістра відповідно до правил певної мови (місцевості).</p> + +<p>{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.toLocaleUpperCase() +<var>str</var>.toLocaleUpperCase(locale) +<var>str</var>.toLocaleUpperCase([locale, locale, ...]) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>locale</code> {{optional_inline}}</dt> + <dd>Цей параметр вказує мовний код (або перелік мовних кодів), відповідно до якого має здійснюватися перетворення регістра. Якщо вказано кілька мовних кодів (передано масив рядків), обирається <a href="https://tc39.github.io/ecma402/#sec-bestavailablelocale">найліпший з наявних</a>. Якщо параметр не вказано, буде використано системне значення (з налаштувань оточення).</dd> +</dl> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий рядок із тим самим вмістом, але літерами переведеними до верхнього регістра відповідно до правил певної мови (місцевості).</p> + +<h3 id="Винятки">Винятки</h3> + +<ul> + <li>Викидає виняток <code>{{jsxref("RangeError")}}</code> ("Invalid language tag: xx_yy"), якщо параметр <code>locale</code> не є належним мовним кодом (кодом місцевості).</li> + <li>Викидає виняток <code>{{jsxref("TypeError")}}</code> ("Language ID should be string or object."), якщо елемент масиву <code>locale</code> не є рядком.</li> +</ul> + +<h2 id="Опис">Опис</h2> + +<p>Всі малі літери перетворюються на великі відповідно до правил певної мови (місцевості), а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toLocaleUpperCase()</code> створює новий рядок, лишаючи оригінал без змін. </p> + +<p>Зазвичай метод <code>toLocaleUpperCase()</code> вертає той самий результат, що й <code>{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}</code>. Втім для деяких мов, як-от турецька, правила перетворення регістра дещо відрізняються від того, що передбачено у Unicode, тож результат буде іншим.</p> + +<p>Також зауважте, що перетворення не обов'язково є перетворенням символів 1:1, оскільки деякі символи можуть перетворитись на два (або навіть більше) символів при переведенні у верхній регістр. Таким чином, довжина отриманого рядка може відрізнятись від довжини вхідного рядка. Це також означає, що перетворення не є стабільним, а отже, наприклад, наступне може повернути <code>false</code>:<br> + <code>x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase()</code></p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLocaleUpperCase">Використання <code>toLocaleUpperCase()</code></h3> + +<p>Якщо мовний код не зазначено, використовується поточне системне значення:</p> + +<pre class="brush: js">// виводить 'АБЕТКА' +console.log('Абетка'.toLocaleUpperCase()); +</pre> + +<p>Можна вказати лише один код чи декілька одночасно:</p> + +<pre class="brush: js">// виводить 'I' +console.log('i\u0307'.toLocaleUpperCase('lt-LT')); + +let locales = ['lt', 'LT', 'lt-LT', 'lt-u-co-phonebk', 'lt-x-lietuva']; + +// виводить 'I' +console.log('i\u0307'.toLocaleUpperCase(locales)); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.toLocaleUpperCase")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..ba6068d86a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,74 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toLowerCase()</strong></code> повертає той самий рядок, але з літерами переведеними до нижнього регістра.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-tolowercase.html","shorter")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий рядок із тим самим вмістом, але літерами переведеними до нижнього регістра.</p> + +<h2 id="Опис">Опис</h2> + +<p>Всі великі літери перетворюються на малі, а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toLowerCase()</code> створює новий рядок, лишаючи оригінал без змін.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLowerCase">Використання <code>toLowerCase()</code></h3> + +<p>Кожна велика літера замінюється малою, а решта лишається без змін:</p> + +<pre class="brush: js">// виводить 'абетка' +console.log('Абетка'.toLowerCase()); +</pre> + +<p>Якщо рядок не містить жодної великої літери, то жодних змін не відбувається:</p> + +<pre class="brush: js">// виводить 'дідькова гра' +console.log('дідькова гра'.toLowerCase());</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/tosource/index.html b/files/uk/web/javascript/reference/global_objects/string/tosource/index.html new file mode 100644 index 0000000000..22d5a2e49e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tosource/index.html @@ -0,0 +1,56 @@ +--- +title: String.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/String/toSource +tags: + - JavaScript + - String + - Довідка + - метод + - нестандартний + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>toSource()</code></strong> вертає рядкове представлення першокоду об'єкта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>String.toSource() +<var>str</var>.toSource() +</code></pre> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Рядкове представлення першокоду об'єкта, який викликав метод.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>toSource()</code> вертає наступні значення:</p> + +<p>Для вбудованого об'єкта {{jsxref("String")}} <code>toSource()</code> вертає наступний рядок, який вказує, що першокод недоступний:</p> + +<pre class="brush: js">function String() { + [native code] +} +</pre> + +<p>Для екземплярів {{jsxref("String")}} або рядкових літералів <code>toSource()</code> вертає рядок, що відображає першокод.</p> + +<p>Цей метод зазвичай JavaScript викликає внутрішньо, а не явно у коді.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту. Реалізований у JavaScript 1.3.</p> + +<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.toSource")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/tostring/index.html b/files/uk/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..927d694e18 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,65 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toString()</code></strong> повертає рядкове представлення вказаного об'єкта.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-tostring.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядкове представлення об'єкта, який викликав метод.</p> + +<h2 id="Опис">Опис</h2> + +<p>Клас <code>{{jsxref("String")}}</code> має власну реалізацію метода <code>toString()</code>, а не успадковану <code>{{jsxref("Object.prototype.toString()")}}</code>. Для об'єктів класу <code>{{jsxref("String")}}</code>, цей метод повертає значення, що має рядковий тип даних, для якого клас <code>{{jsxref("String")}}</code> є обгорткою. Тобто те саме, що вертає метод <code>{{jsxref("String.prototype.valueOf()", "valueOf()")}}</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toString">Використання <code>toString()</code></h3> + +<p>Наступний приклад виводить до консолі рядкове значення об'єкта <code>{{jsxref("String")}}</code>:</p> + +<pre class="brush: js">var x = new String('Hello world'); + +console.log(x.toString()); // виводить 'Hello world' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.toString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("String.prototype.valueOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html b/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..8b766dc42d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,88 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +<div>{{JSRef}}</div> + +<p>Метод <code><strong>toUpperCase()</strong></code> повертає той самий рядок, але з літерами переведеними до верхнього регістра (значення буде перетворене на рядок, якщо воно не є рядком).</p> + +<p>{{EmbedInteractiveExample("pages/js/string-touppercase.html","shorter")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Новий рядок із тим самим вмістом, але літерами переведеними до верхнього регістра.</p> + +<h3 id="Винятки">Винятки</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Якщо викликається для {{jsxref("null")}} або {{jsxref("undefined")}}, наприклад, <code>String.prototype.toUpperCase.call(undefined)</code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Всі малі літери перетворюються на великі, а все решта лишається без змін. Позаяк клас <code>{{jsxref("String")}}</code> належить до незмінних типів даних, виклик <code>toUpperCase()</code> створює новий рядок, лишаючи оригінал без змін.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базове_використання">Базове використання</h3> + +<pre class="brush: js">console.log('Абетка'.toUpperCase()); // 'АБЕТКА' +</pre> + +<h3 id="Перетворення_нерядкових_значень_this_на_рядки">Перетворення нерядкових значень <code>this</code> на рядки</h3> + +<p>Цей метод перетворить будь-яке нерядкове значення на рядок, коли ви присвоюєте його <code>this</code> значення, що не є рядком:</p> + +<pre class="brush: js">const a = String.prototype.toUpperCase.call({ + toString: function toString() { + return 'абвгґд'; + } +}); + +const b = String.prototype.toUpperCase.call(true); + +// виводить 'АБВГҐД TRUE'. +console.log(a, b);</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.toUpperCase")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/trim/index.html b/files/uk/web/javascript/reference/global_objects/string/trim/index.html new file mode 100644 index 0000000000..2f31660a29 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/trim/index.html @@ -0,0 +1,84 @@ +--- +title: String.prototype.trim() +slug: Web/JavaScript/Reference/Global_Objects/String/Trim +tags: + - ECMAScript 5 + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>trim()</code></strong> прибирає пробіли з обох кінців рядка. Пробілами в даному контексті є усі пробільні символи (пробіл, табуляція, нерозривний пробіл та ін.) та усі символи закінчення рядка (LF, CR, та ін.).</p> + +<div>{{EmbedInteractiveExample("pages/js/string-trim.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.trim()</code></pre> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Новий рядок, що є рядком <code><var>str</var></code> без пробілів з обох кінців.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>trim()</code> повертає рядок з прибраними пробілами з обох кінців. <code>trim()</code> не змінює значення самого рядка <code><var>str</var></code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_trim">Використання <code>trim()</code></h3> + +<p>Наступний приклад виводить рядок з малих літер <code>'ква'</code>:</p> + +<pre class="brush: js">var orig = ' ква '; +console.log(orig.trim()); // 'ква' + +// Ще приклад, коли .trim() прибирає пробіли лише з одного боку. + +var orig = 'ква '; +console.log(orig.trim()); // 'ква' +</pre> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Виконання наступного коду перед будь-яким іншим кодом створить метод <code>trim()</code>, якщо він недоступний початково.</p> + +<pre class="brush: js">if (!String.prototype.trim) { + String.prototype.trim = function () { + return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); + }; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</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.trim")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.trimStart()")}}</li> + <li>{{jsxref("String.prototype.trimEnd()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/trimend/index.html b/files/uk/web/javascript/reference/global_objects/string/trimend/index.html new file mode 100644 index 0000000000..2344e2e7bb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/trimend/index.html @@ -0,0 +1,80 @@ +--- +title: String.prototype.trimEnd() +slug: Web/JavaScript/Reference/Global_Objects/String/trimEnd +tags: + - JavaScript + - String + - Довідка + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>trimEnd()</code></strong> прибирає пробіли з кінця рядка. <code>trimRight()</code> є псевдонімом цього методу.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-trimend.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.trimEnd(); +<var>str</var>.trimRight();</code></pre> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Новий рядок, який відображає початковий рядок без пробілів з (правого) кінця.</p> + +<h2 id="Опис">Опис</h2> + +<p>Методи <code>trimEnd()</code> / <code>trimRight()</code> повертають рядок з прибраними пробілами з правого кінця. <code>trimEnd()</code> чи <code>trimRight()</code> не змінюють значення самого рядка.</p> + +<h3 id="Псевдонім">Псевдонім</h3> + +<p>Для сумісності з такими функціями як {{jsxref("String.prototype.padEnd")}}, стандартним ім'ям методу є <code>trimEnd</code>. Однак, з причин веб-сумісності <code>trimRight</code> залишається в якості псевдоніму <code>trimEnd</code>. В деяких рушіях це означає:</p> + +<pre class="brush: js">String.prototype.trimRight.name === "trimEnd";</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_trimEnd">Використання <code>trimEnd()</code></h3> + +<p>Наступний приклад виводить рядок з малих літер <code>' ква'</code>:</p> + +<pre class="brush: js; highlight: [5]">var str = ' ква '; + +console.log(str.length); // 8 + +str = str.trimEnd(); +console.log(str.length); // 6 +console.log(str); // ' ква' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.trimend', 'String.prototype.trimEnd')}}</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.trimEnd")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.trim()")}}</li> + <li>{{jsxref("String.prototype.trimStart()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html b/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html new file mode 100644 index 0000000000..03a3dc0ffc --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/trimstart/index.html @@ -0,0 +1,115 @@ +--- +title: String.prototype.trimStart() +slug: Web/JavaScript/Reference/Global_Objects/String/trimStart +tags: + - JavaScript + - String + - метод + - рядок +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>trimStart()</code></strong> видаляє пробіли з початку рядка. <code>trimLeft()</code> є псевдонімом цього методу.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>str</var>.trimStart(); +<var>str</var>.trimLeft();</pre> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Новий рядок, який відображає початковий рядок без пробілів на початку (з лівого кінця).</p> + +<h2 id="Опис">Опис</h2> + +<p>Методи <code>trimStart()</code> / <code>trimLeft()</code> повертають рядок з прибраними пробілами з лівого кінця. <code>trimLeft()</code> чи <code>trimStart()</code> не змінюють значення самого рядка.</p> + +<h3 id="Псевдонім">Псевдонім</h3> + +<p>Для сумісності з такими функціями, як {{jsxref("String.prototype.padStart")}}, стандартним ім'ям методу є <code>trimStart</code>. Однак, з причин веб-сумісності <code>trimLeft</code> залишається в якості псевдоніму <code>trimStart</code>. В деяких рушіях це означає:</p> + +<pre class="brush: js">String.prototype.trimLeft.name === "trimStart";</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_trimStart">Використання <code>trimStart()</code></h3> + +<p>Наступний приклад виводить рядок з малих літер <code>'ква '</code>:</p> + +<pre class="brush: js; highlight: [5]">var str = ' ква '; + +console.log(str.length); // 8 + +str = str.trimStart(); +console.log(str.length); // 5 +console.log(str); // 'ква ' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.trimstart', ' String.prototype.trimStart')}}</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.trimStart")}}</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js; highlight: [5]">//https://github.com/FabioVergani/js-Polyfill_String-trimStart + +(function(w){ + var String=w.String, Proto=String.prototype; + + (function(o,p){ + if(p in o?o[p]?false:true:true){ + var r=/^\s+/; + o[p]=o.trimLeft||function(){ + return this.replace(r,'') + } + } + })(Proto,'trimStart'); + +})(window); + + +/* +ES6: +(w=>{ + const String=w.String, Proto=String.prototype; + + ((o,p)=>{ + if(p in o?o[p]?false:true:true){ + const r=/^\s+/; + o[p]=o.trimLeft||function(){ + return this.replace(r,'') + } + } + })(Proto,'trimStart'); + +})(window); +*/</pre> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.trim()")}}</li> + <li>{{jsxref("String.prototype.trimEnd()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/string/valueof/index.html b/files/uk/web/javascript/reference/global_objects/string/valueof/index.html new file mode 100644 index 0000000000..a4956328d0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/string/valueof/index.html @@ -0,0 +1,64 @@ +--- +title: String.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/String/valueOf +tags: + - JavaScript + - Method + - Prototype + - String + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>valueOf()</code></strong> повертає {{glossary("Primitive", "просту величину")}}, що є значенням об'єкта <code>{{jsxref("String")}}</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/string-valueof.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code><var>str</var>.valueOf()</code></pre> + +<h3 id="Вертає">Вертає</h3> + +<p>Рядок (величину, яка належить до простого типу даних {{jsxref("string")}}), що є значенням цього об'єкта <code>{{jsxref("String")}}</code>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Метод <code>valueOf()</code> класу <code>{{jsxref("String")}}</code> повертає значення, що має рядковий тип даних, для якого клас <code>{{jsxref("String")}}</code> є обгорткою. Це значення тотожне до <code>{{jsxref("String.prototype.toString()")}}</code>.</p> + +<p>Цей метод зазвичай викликається всередині рушія JavaScript, а не в явний спосіб у коді.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_valueOf">Використання <code>valueOf()</code></h3> + +<pre class="brush: js">var str = new String('Hello, world'); +console.log(str.valueOf()); // виводить 'Hello, world' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.valueOf")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.toString()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html b/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html new file mode 100644 index 0000000000..69b6b4c5d1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html @@ -0,0 +1,86 @@ +--- +title: Symbol.asyncIterator +slug: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator +tags: + - ECMAScript 2018 + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ + - асинхронний +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.asyncIterator</strong></code> вказує для об'єкта AsyncIterator за замовчуванням. Якщо ця властивість присутня в об'єкті, то він є асинхронним ітерабельним об'єктом і може використовуватись у циклі <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for-await...of">for await...of</a></code>.</p> + + + +<h2 id="Опис">Опис</h2> + +<p>Символ <code>Symbol.asyncIterator</code> є вбудованим символом, який використовується для доступу до метода <code>@@asyncIterator</code> у об'єкта. Для того, щоб об'єкт був асинхронним ітерабельним об'єктом, він повинен мати ключ <code>Symbol.asyncIterator</code>.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Асинхронні_ітерабельні_обєкти_створені_користувачем">Асинхронні ітерабельні об'єкти, створені користувачем</h3> + +<p>Ви можете визначити власний асинхронний ітерабельний об'єкт, встановивши на об'єкті властивість <code>[Symbol.asyncIterator]</code>. </p> + +<pre class="brush: js notranslate">const myAsyncIterable = new Object(); +myAsyncIterable[Symbol.asyncIterator] = async function*() { + yield "привіт"; + yield "асинхронний"; + yield "перебір!"; +}; + +(async () => { + for await (const x of myAsyncIterable) { + console.log(x); + // очікуваний результат: + // "привіт" + // "асинхронний" + // "перебір!" + } +})(); +</pre> + +<p>Створюючи API, пам'ятайте, що асинхронні ітерабельні об'єкти створені для того, щоб відображати щось <em>ітерабельне</em>, наприклад, потік даних чи список, а не для того, щоб повністю замінити зворотні виклики та події у більшості ситуацій.</p> + +<h3 id="Вбудовані_асинхронні_ітерабельні_обєкти">Вбудовані асинхронні ітерабельні об'єкти</h3> + +<p>У JavaScript наразі не існує вбудованих об'єктів, що мають ключ <code>[Symbol.asyncIterator]</code> за замовчуванням. Однак, WHATWG Streams можуть стати першим вбудованим асинхронним ітерабельним об'єктом, з нещодавно доданим у специфікацію символом <code>[Symbol.asyncIterator]</code>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{compat("javascript.builtins.Symbol.asyncIterator")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/for-await...of">for await... of</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/description/index.html b/files/uk/web/javascript/reference/global_objects/symbol/description/index.html new file mode 100644 index 0000000000..039755bd5e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/description/index.html @@ -0,0 +1,67 @@ +--- +title: Symbol.prototype.description +slug: Web/JavaScript/Reference/Global_Objects/Symbol/description +tags: + - JavaScript + - Symbol + - Властивість + - Символ + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description +--- +<div>{{JSRef}}</div> + +<p>Властивість лише для читання <code><strong>description</strong></code> - це рядок, що повертає необов'язковий опис об'єктів {{JSxRef("Symbol")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>{{JSxRef("Symbol","Символьні")}} об'єкти можуть бути створені з необов'язковим описом, який можна використовувати для відлагодження, але не для доступу до самого символа. Властивість <code>Symbol.prototype.description</code> можна використати, щоб прочитати цей опис. Вона відрізняється від <code>Symbol.prototype.toString()</code>, оскільки не містить рядка "<code>Symbol()</code>" навколо. Дивіться приклади.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_опису">Використання опису</h3> + +<pre class="brush: js notranslate">Symbol('desc').toString(); // "Symbol(desc)" +Symbol('desc').description; // "desc" +Symbol('').description; // "" +Symbol().description; // undefined + +// добревідомі символи +Symbol.iterator.toString(); // "Symbol(Symbol.iterator)" +Symbol.iterator.description; // "Symbol.iterator" + +// глобальні символи +Symbol.for('foo').toString(); // "Symbol(foo)" +Symbol.for('foo').description; // "foo" + +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-symbol.prototype.description", "get Symbol.prototype.description")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.description")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Symbol.prototype.toString()")}}</li> + <li>Поліфіл: <a href="https://npmjs.com/symbol.prototype.description">https://npmjs.com/symbol.prototype.description</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html new file mode 100644 index 0000000000..78a1246aa5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html @@ -0,0 +1,81 @@ +--- +title: Symbol.hasInstance +slug: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Добревідомий символ <strong><code>Symbol.hasInstance</code></strong> використовують, щоб визначити, чи конструктор розпізнає об'єкт як свій екземпляр. Цим символом можна налаштовувати поведінку оператора {{jsxref("Operators/instanceof", "instanceof")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}</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> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Змінена_поведінка_instanceof">Змінена поведінка instanceof</h3> + +<p>Ви можете реалізувати свою власну поведінку <code>instanceof</code>, наприклад, так:</p> + +<pre class="brush: js notranslate">class MyArray { + static [Symbol.hasInstance](instance) { + return Array.isArray(instance) + } +} +console.log([] instanceof MyArray); // true +</pre> + +<pre class="brush: js notranslate">function MyArray() { } +Object.defineProperty(MyArray, Symbol.hasInstance, { + value: function(instance) { return Array.isArray(instance); } +}); +console.log([] instanceof MyArray); // true</pre> + +<h3 id="Перевіряємо_екземпляр_обєкта">Перевіряємо екземпляр об'єкта</h3> + +<p>Таким самим чином, як ви перевіряєте, чи є об'єкт екземпляром класу, за допомогою ключового слова <code>instanceof</code>, можна використати <code>Symbol.hasInstance</code> для таких перевірок.</p> + +<pre class="brush: js notranslate">class Animal { + constructor() {} +} + +const cat = new Animal(); + +console.log(Animal[Symbol.hasInstance](cat)); // true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.hasInstance")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/index.html b/files/uk/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..eb4625fdb6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,466 @@ +--- +title: Symbol +slug: Web/JavaScript/Reference/Global_Objects/Symbol +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Symbol + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +<div>{{JSRef}}</div> + +<p><strong>Символ</strong> є {{Glossary("Primitive", "простим типом даних")}}. Функція <code>Symbol()</code> вертає значення типу <strong>символ</strong>, має статичні властивості, що відкривають декілька членів вбудованих об'єктів, має статичні методи, що відкривають глобальний реєстр символів, та нагадує вбудований клас об'єкта, але не є повноцінним конструктором, оскільки не підтримує синтаксис "<code>new Symbol()</code>".</p> + +<p>Кожне символьне значення, що його вертає <code>Symbol()</code>, є унікальним. Символьне значення може використовуватись в якості ідентифікатора властивостей об'єкта; це єдина мета цього типу даних. Більше пояснень щодо мети та використання можна знайти у <a href="/uk/docs/Glossary/Символ">статті словника щодо символів</a>.</p> + +<p>{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Symbol(<em>[description]</em>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>description</code> {{optional_inline}}</dt> + <dd>Необов'язковий, рядок. Опис символу, який можна використовувати для відлагодження, але не для доступу для самого символу.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Для створення примітивного символа ви пишете <code>Symbol()</code> з необов'язковим рядком в ролі його опису:</p> + +<pre class="brush: js">var sym1 = Symbol(); +var sym2 = Symbol('foo'); +var sym3 = Symbol('foo'); +</pre> + +<p>Наведений код створює три нові символи. Зауважте, що <code>Symbol("foo")</code> не приводить рядок "foo" до символу. Він кожен раз створює новий символ:</p> + +<pre class="brush: js">Symbol('foo') === Symbol('foo'); // false</pre> + +<p>Наступний синтаксис з оператором {{jsxref("Operators/new", "new")}} викине помилку {{jsxref("TypeError")}}:</p> + +<pre class="brush: js">var sym = new Symbol(); // TypeError</pre> + +<p>Це запобігає створенню явного об'єкта-обгортки <code>Symbol</code> замість нового символьного значення та може дивувати, оскільки створення явного об'єкта-обгортки для примітивних типів даних загалом можливе (для прикладу, <code>new Boolean</code>, <code>new String</code> та <code>new Number</code>).</p> + +<p>Якщо вам дуже потрібно створити об'єкт обгортку <code>Symbol</code>, ви можете скористатись функцією <code>Object()</code>:</p> + +<pre class="brush: js">var sym = Symbol('foo'); +typeof sym; // "symbol" +var symObj = Object(sym); +typeof symObj; // "object" +</pre> + +<h3 id="Спільні_символи_у_глобальному_реєстрі_символів">Спільні символи у глобальному реєстрі символів</h3> + +<p>Наведений синтаксис використання функції <code>Symbol()</code> не створить глобальний символ, доступний з усієї вашої кодової бази. Щоб створити символи, доступні в усіх файлах і навіть у різних сферах (кожна з яких має свою глобальну область видимості), використовуйте методи {{jsxref("Symbol.for()")}} та {{jsxref("Symbol.keyFor()")}}, щоб записувати та читати символи у глобальному реєстрі символів.</p> + +<h3 id="Пошук_символьних_властивостей_обєктів">Пошук символьних властивостей об'єктів</h3> + +<p>Метод {{jsxref("Object.getOwnPropertySymbols()")}} повертає масив символів та дозволяє знайти символьні властивості наданого об'єкта. Зауважте, що жоден об'єкт не ініціалізується з особистими символьними властивостями, отже, цей масив буде порожнім, якщо тільки ви не задали символьні властивості об'єкта.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Symbol.length</code></dt> + <dd>Length property whose value is 0.</dd> + <dt>{{jsxref("Symbol.prototype")}}</dt> + <dd>Represents the prototype for the <code>Symbol</code> constructor.</dd> +</dl> + +<h3 id="Well-known_symbols">Well-known symbols</h3> + +<p>In addition to your own symbols, JavaScript has some built-in symbols which represent internal language behaviors which were not exposed to developers in ECMAScript 5 and before. These symbols can be accessed using the following properties:</p> + +<h4 id="Iteration_symbols">Iteration symbols</h4> + +<dl> + <dt>{{jsxref("Symbol.iterator")}}</dt> + <dd>A method returning the default iterator for an object. Used by <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd> +</dl> + +<h4 id="Regular_expression_symbols">Regular expression symbols</h4> + +<dl> + <dt>{{jsxref("Symbol.match")}}</dt> + <dd>A method that matches against a string, also used to determine if an object may be used as a regular expression. Used by {{jsxref("String.prototype.match()")}}.</dd> + <dt>{{jsxref("Symbol.replace")}}</dt> + <dd>A method that replaces matched substrings of a string. Used by {{jsxref("String.prototype.replace()")}}.</dd> + <dt>{{jsxref("Symbol.search")}}</dt> + <dd>A method that returns the index within a string that matches the regular expression. Used by {{jsxref("String.prototype.search()")}}.</dd> + <dt>{{jsxref("Symbol.split")}}</dt> + <dd>A method that splits a string at the indices that match a regular expression. Used by {{jsxref("String.prototype.split()")}}.</dd> +</dl> + +<h4 id="Other_symbols">Other symbols</h4> + +<dl> + <dt>{{jsxref("Symbol.hasInstance")}}</dt> + <dd>A method determining if a constructor object recognizes an object as its instance. Used by {{jsxref("Operators/instanceof", "instanceof")}}.</dd> + <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt> + <dd>A Boolean value indicating if an object should be flattened to its array elements. Used by {{jsxref("Array.prototype.concat()")}}.</dd> + <dt>{{jsxref("Symbol.unscopables")}}</dt> + <dd>An object value of whose own and inherited property names are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object.</dd> + <dt>{{jsxref("Symbol.species")}}</dt> + <dd>A constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Symbol.toPrimitive")}}</dt> + <dd>A method converting an object to a primitive value.</dd> + <dt>{{jsxref("Symbol.toStringTag")}}</dt> + <dd>A string value used for the default description of an object. Used by {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> + <dd>Searches for existing symbols with the given key and returns it if found. Otherwise a new symbol gets created in the global symbol registry with this key.</dd> + <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> + <dd>Retrieves a shared symbol key from the global symbol registry for the given symbol.</dd> +</dl> + +<h2 id="Symbol_prototype"><code>Symbol</code> prototype</h2> + +<p>All Symbols inherit from {{jsxref("Symbol.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p> + +<h3 id="Methods_2">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_typeof_operator_with_symbols">Using the <code>typeof</code> operator with symbols</h3> + +<p>The {{jsxref("Operators/typeof", "typeof")}} operator can help you to identify symbols.</p> + +<pre class="brush: js">typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' +</pre> + +<h3 id="Symbol_type_conversions">Symbol type conversions</h3> + +<p>Some things to note when working with type conversion of symbols.</p> + +<ul> + <li>When trying to convert a symbol to a number, a {{jsxref("TypeError")}} will be thrown<br> + (e.g. <code>+sym</code> or <code>sym | 0</code>).</li> + <li>When using loose equality, <code>Object(sym) == sym</code> returns <code>true.</code></li> + <li><code>Symbol("foo") + "bar" </code>throws a {{jsxref("TypeError")}} (can't convert symbol to string). This prevents you from silently creating a new string property name from a symbol, for example.</li> + <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(sym)</code> conversion</a> works like a call to {{jsxref("Symbol.prototype.toString()")}} with symbols, but note that <code>new String(sym)</code> will throw.</li> +</ul> + +<h3 id="Symbols_and_for...in_iteration">Symbols and <code>for...in</code> iteration</h3> + +<p>Symbols are not enumerable in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.</p> + +<pre class="brush: js">var obj = {}; + +obj[Symbol('a')] = 'a'; +obj[Symbol.for('b')] = 'b'; +obj['c'] = 'c'; +obj.d = 'd'; + +for (var i in obj) { + console.log(i); // logs "c" and "d" +}</pre> + +<h3 id="Symbols_and_JSON.stringify">Symbols and <code>JSON.stringify()</code></h3> + +<p>Symbol-keyed properties will be completely ignored when using <code>JSON.stringify()</code>:</p> + +<pre class="brush: js">JSON.stringify({[Symbol('foo')]: 'foo'}); +// '{}'</pre> + +<p>For more details, see {{jsxref("JSON.stringify()")}}.</p> + +<h3 id="Symbol_wrapper_objects_as_property_keys">Symbol wrapper objects as property keys</h3> + +<p>When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:</p> + +<pre class="brush: js">var sym = Symbol('foo'); +var obj = {[sym]: 1}; +obj[sym]; // 1 +obj[Object(sym)]; // still 1 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoDesktop(36)}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.iterator (@@iterator)</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoDesktop(36)}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.unscopables (@@unscopables)</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.match (@@match)</td> + <td>{{CompatChrome(50)}}</td> + <td>{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.species (@@species)</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.toPrimitive (@@toPrimitive)</td> + <td>{{CompatChrome(48)}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.replace (@@replace)</td> + <td>{{CompatChrome(50)}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.search (@@search)</td> + <td>{{CompatChrome(50)}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.split (@@split)</td> + <td>{{CompatChrome(50)}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.isConcatSpreadable (@@isconcatspreadable)</td> + <td>{{CompatChrome(48)}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.hasInstance (@@hasInstance)</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatGeckoDesktop(50)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.toStringTag (@@toStringTag)</td> + <td>{{CompatChrome(49)}}</td> + <td>{{CompatGeckoDesktop(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoMobile(36)}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.iterator (@@iterator)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoMobile(36)}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.unscopables (@@unscopables)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.match (@@match)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.species (@@species)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.toPrimitive (@@toPrimitive)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.replace (@@replace)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.search (@@search)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.split (@@split)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.isConcatSpreadable (@@isconcatspreadable)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.hasInstance (@@hasInstance)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(50)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Symbol.toStringTag (@@toStringTag)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html b/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html new file mode 100644 index 0000000000..2c6541ad4d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html @@ -0,0 +1,99 @@ +--- +title: Symbol.isConcatSpreadable +slug: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <strong><code>Symbol.isConcatSpreadable</code></strong> використовують, щоб налаштувати вирівнювання об'єкта до масиву його елементів при використанні методу {{jsxref("Array.prototype.concat()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>Символ <code>@@isConcatSpreadable</code> (<code>Symbol.isConcatSpreadable</code>) може бути визначений як особиста чи успадкована властивість, а його значення є булевою величиною. Він може контролювати поведінку масивів та подібних до масивів об'єктів:</p> + +<ul> + <li>Для масивів поведінкою за замовчуванням є розкладання (вирівнювання) елементів. <code>Symbol.isConcatSpreadable</code> може запобігти вирівнюванню у цих випадках.</li> + <li>Подібні до масивів об'єкти за замовчуванням не виконують розкладання чи вирівнювання. <code>Symbol.isConcatSpreadable</code> може виконати примусове вирівнювання у цих випадках.</li> +</ul> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Масиви">Масиви</h3> + +<p>За замовчуванням {{jsxref("Array.prototype.concat()")}} розкладає (вирівнює) масиви:</p> + +<pre class="brush: js notranslate">let alpha = ['а', 'б', 'в'], +let numeric = [1, 2, 3] + +let alphaNumeric = alpha.concat(numeric) + +console.log(alphaNumeric) // Результат: ['а', 'б', 'в', 1, 2, 3] +</pre> + +<p>Присвоївши <code>Symbol.isConcatSpreadable</code> значення <code>false</code>, ви можете відключити цю поведінку:</p> + +<pre class="brush: js notranslate">let alpha = ['а', 'б', 'в'], +let numeric = [1, 2, 3] + +numeric[Symbol.isConcatSpreadable] = false +let alphaNumeric = alpha.concat(numeric) + +console.log(alphaNumeric) // Результат: ['а', 'б', 'в', [1, 2, 3] ] +</pre> + +<h3 id="Подібні_до_масивів_обєкти">Подібні до масивів об'єкти</h3> + +<p>Подібні до масивів об'єкти за замовчуванням не розкладаються. <code>Symbol.isConcatSpreadable</code> необхідно присвоїти <code>true</code>, щоб отримати вирівняний масив:</p> + +<pre class="brush: js notranslate">let x = [1, 2, 3] + +let fakeArray = { + [Symbol.isConcatSpreadable]: true, + length: 2, + 0: 'всім', + 1: 'привіт' +} + +x.concat(fakeArray) // [1, 2, 3, "всім", "привіт"] +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Властивість <code>length</code> використовується, щоб контролювати кількість властивостей об'єкта, що будуть додані. У наведеному вище прикладі <code>length:2</code> вказує, що треба додати дві властивості.</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html new file mode 100644 index 0000000000..a41c7e413c --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html @@ -0,0 +1,116 @@ +--- +title: Symbol.iterator +slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.iterator</strong></code> визначає для об'єкта ітератор за замовчуванням. Використовується циклом <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</p> + +<p>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Опис">Опис</h2> + +<p>Коли виникає необхідність перебрати об'єкт (наприклад, на початку циклу <code>for..of</code>), його метод <code>@@iterator</code> викликається без аргументів, а <strong>ітератор</strong>, який він повертає, використовується для отримання значень, що перебираються.</p> + +<p>Деякі вбудовані типи мають визначену за замовчуванням поведінку під час перебору, в той час, як інші типи (такі як {{jsxref("Object")}}) її не мають. Вбудовані типи, що мають метод <code>@@iterator</code>, наступні:</p> + +<ul> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> + +<p>Дивіться більше інформації у статті<a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору"> Протоколи перебору</a>.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створені_користувачем_ітерабельні_обєкти">Створені користувачем ітерабельні об'єкти</h3> + +<p>Ми можемо створювати власні ітерабельні об'єкти наступним чином:</p> + +<pre class="brush: js notranslate">var myIterable = {} +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; +[...myIterable] // [1, 2, 3] +</pre> + +<p>Або ітерабельні об'єкти можна визначити безпосередньо всередині класу чи об'єкта, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів#Обчислювані_імена_властивостей">обчислювані властивості</a>:</p> + +<pre class="brush: js notranslate">class Foo { + *[Symbol.iterator] () { + yield 1; + yield 2; + yield 3; + } +} + +const someObj = { + *[Symbol.iterator] () { + yield 'а'; + yield 'б'; + } +} + +[...new Foo] // [ 1, 2, 3 ] +[...someObj] // [ 'а', 'б' ]</pre> + +<h3 id="Погано_сформовані_ітерабельні_обєкти">Погано сформовані ітерабельні об'єкти</h3> + +<p>Якщо метод ітерабельного об'єкта <code>@@iterator</code> не повертає об'єкт ітератора, то це погано сформований ітерабельний об'єкт. Використання його в такому вигляді ймовірно призведе до викидання винятків під час виконання або помилкової поведінки:</p> + +<pre class="brush: js notranslate">var nonWellFormedIterable = {} +nonWellFormedIterable[Symbol.iterator] = () => 1 +[...nonWellFormedIterable] // TypeError: [] is not a function +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on 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> +</div> + +<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/match/index.html b/files/uk/web/javascript/reference/global_objects/symbol/match/index.html new file mode 100644 index 0000000000..fd076f301f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/match/index.html @@ -0,0 +1,71 @@ +--- +title: Symbol.match +slug: Web/JavaScript/Reference/Global_Objects/Symbol/match +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.match</strong></code> визначає збіг регулярного виразу з рядком. Ця функція викликається методом {{jsxref("String.prototype.match()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-match.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>Ця функція також використовується, щоб з'ясувати, чи об'єкти поводяться як регулярні вирази. Наприклад, методи {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} та {{jsxref("String.prototype.includes()")}} перевіряють, чи є перший аргумент регулярним виразом, та викидають {{jsxref("TypeError")}}, якщо це так. Отже, якщо символ <code>match</code> має значення <code>false</code> (або <a href="/uk/docs/Glossary/Falsy">хибне</a> значення), він вказує, що об'єкт не призначений для використання в якості регулярного виразу.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Відключення_перевірки_isRegExp">Відключення перевірки <code>isRegExp</code></h3> + +<p>Наступний код викине помилку {{jsxref("TypeError")}}:</p> + +<pre class="brush: js notranslate">'/bar/'.startsWith(/bar/); + +// Викидає TypeError, оскільки /bar/ є регулярним виразом, +// а Symbol.match не змінений.</pre> + +<p>Однак, якщо ви присвоїте <code>Symbol.match</code> значення <code>false</code>, перевірка <code>isRegExp</code> (яка використовує властивість <code>match</code>) вкаже, що об'єкт не є об'єктом регулярного виразу. Як наслідок, методи <code>startsWith</code> та <code>endsWith</code> не викидатимуть <code>TypeError</code>.</p> + +<pre class="brush: js notranslate">var re = /foo/; +re[Symbol.match] = false; +'/foo/'.startsWith(re); // true +'/baz/'.endsWith(re); // false +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.match")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.replace")}}</li> + <li>{{jsxref("Symbol.search")}}</li> + <li>{{jsxref("Symbol.split")}}</li> + <li>{{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html b/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html new file mode 100644 index 0000000000..af531d4376 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html @@ -0,0 +1,78 @@ +--- +title: Symbol.matchAll +slug: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll +tags: + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.matchAll</strong></code> повертає ітератор, який видає збіги регулярного виразу з рядком. Ця функція викликається методом {{jsxref("String.prototype.matchAll()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-matchall.html","shorter")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<div> +<p>Цей символ використовується для {{jsxref("String.prototype.matchAll()")}} та зокрема у {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Наступні два приклади повертають однаковий результат:</p> + +<pre class="brush: js notranslate">'абв'.matchAll(/а/); + +/а/[Symbol.matchAll]('абв');</pre> + +<p>Цей метод існує для налаштування поведінки пошуку збігів всередині підкласів {{jsxref("RegExp")}}.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Symbol.matchAll">Використання Symbol.matchAll</h3> + +<pre class="brush: js notranslate">let re = /[0-9]+/g; +let str = '2016-01-02|2019-03-07'; + +const numbers = { + *[Symbol.matchAll] (str) { + for (const n of str.matchAll(/[0-9]+/g)) + yield n[0]; + } +}; + +console.log(Array.from(str.matchAll(numbers))); +// Array ["2016", "01", "02", "2019", "03", "07"] +</pre> + +<p>Дивіться більше прикладів у {{jsxref("String.prototype.matchAll()")}} та {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.matchAll")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("String.prototype.matchAll()")}}</li> + <li>{{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html b/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html new file mode 100644 index 0000000000..0f37a4a289 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/replace/index.html @@ -0,0 +1,66 @@ +--- +title: Symbol.replace +slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.replace</strong></code> визначає метод, який замінює збіги у рядку. Ця функція викликається методом {{jsxref("String.prototype.replace()")}}.</p> + +<p>Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} та {{jsxref("String.prototype.replace()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}</div> + + + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_Symbol.replace">Використання Symbol.replace</h3> + +<pre class="brush: js notranslate">class CustomReplacer { + constructor(value) { + this.value = value; + } + [Symbol.replace](string) { + return string.replace(this.value, '#!@?'); + } +} + +console.log('football'.replace(new CustomReplacer('foo'))); +// очікуваний результат: "#!@?tball"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.replace")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.match")}}</li> + <li>{{jsxref("Symbol.search")}}</li> + <li>{{jsxref("Symbol.split")}}</li> + <li>{{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/search/index.html b/files/uk/web/javascript/reference/global_objects/symbol/search/index.html new file mode 100644 index 0000000000..36aad26385 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/search/index.html @@ -0,0 +1,66 @@ +--- +title: Symbol.search +slug: Web/JavaScript/Reference/Global_Objects/Symbol/search +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.search</strong></code> визначає метод, який повертає індекс у рядку, що збігається з регулярним виразом. Ця функція викликається методом {{jsxref("String.prototype.search()")}}.</p> + +<p>Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} та {{jsxref("String.prototype.search()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-search.html")}}</div> + + + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Користувацький_пошук_у_рядку">Користувацький пошук у рядку</h3> + +<pre class="brush: js notranslate">class caseInsensitiveSearch { + constructor(value) { + this.value = value.toLowerCase(); + } + [Symbol.search](string) { + return string.toLowerCase().indexOf(this.value); + } +} + +console.log('foobar'.search(new caseInsensitiveSearch('BaR'))); +// очікуваний результат: 3</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.search")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.match")}}</li> + <li>{{jsxref("Symbol.replace")}}</li> + <li>{{jsxref("Symbol.split")}}</li> + <li>{{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/species/index.html b/files/uk/web/javascript/reference/global_objects/symbol/species/index.html new file mode 100644 index 0000000000..0698c840d5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/species/index.html @@ -0,0 +1,69 @@ +--- +title: Symbol.species +slug: Web/JavaScript/Reference/Global_Objects/Symbol/species +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.species</strong></code> визначає властивість, значенням якої є функція, яку використовує конструктор для створення похідних об'єктів.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-species.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>Властивість-аксесор species дозволяє підкласам перевизначати конструктор для об'єктів.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_species">Використання species</h3> + +<p>Можливо, ви захочете повертати об'єкти {{jsxref("Array")}} у вашому похідному класі масивів <code>MyArray</code>. Наприклад, при використанні методів, таких як {{jsxref("Array.map", "map()")}}, які повертають конструктор за замовчуванням, ви бажаєте, щоб вони повертали батьківський об'єкт <code>Array</code> замість об'єкта <code>MyArray</code>. Символ species дозволяє це зробити:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Перевизначаємо species на батьківський конструктор Array + static get [Symbol.species]() { return Array; } +} +let a = new MyArray(1,2,3); +let mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.species")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Map.@@species", "Map[@@species]")}}</li> + <li>{{jsxref("Set.@@species", "Set[@@species]")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/split/index.html b/files/uk/web/javascript/reference/global_objects/symbol/split/index.html new file mode 100644 index 0000000000..baabe4748f --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/split/index.html @@ -0,0 +1,66 @@ +--- +title: Symbol.split +slug: Web/JavaScript/Reference/Global_Objects/Symbol/split +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <code><strong>Symbol.split</strong></code> визначає метод, що розбиває рядок за індексами, які збігаються з регулярним виразом. Ця функція викликається методом {{jsxref("String.prototype.split()")}}.</p> + +<p>Щоб дізнатись більше, дивіться {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} та {{jsxref("String.prototype.split()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-split.html")}}</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> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Користувацьке_розбиття_з_переверненням">Користувацьке розбиття з переверненням</h3> + +<pre class="brush: js notranslate">class ReverseSplit { + [Symbol.split](string) { + const array = string.split(' '); + return array.reverse(); + } +} + +console.log('Another one bites the dust'.split(new ReverseSplit())); +// очікуваний результат: [ "dust", "the", "bites", "one", "Another" ]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.split")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Symbol.match")}}</li> + <li>{{jsxref("Symbol.replace")}}</li> + <li>{{jsxref("Symbol.search")}}</li> + <li>{{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html b/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html new file mode 100644 index 0000000000..8ed616cee6 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html @@ -0,0 +1,83 @@ +--- +title: Конструктор Symbol() +slug: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/Symbol +--- +<div>{{JSRef}}</div> + +<p>Конструктор <code>Symbol()</code> повертає значення типу <strong>symbol</strong>, але він не є повноцінним конструктором, оскільки не підтримує синтаксис "<code>new Symbol()</code>", а також не призначений для створення підкласів. Його можна використовувати як значення блоку <code><a href="/uk/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> у визначенні класу, але виклик його через <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">super</a></code> спричинить виняток.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-constructor.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 notranslate">Symbol([<var>description</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>description</var></code> {{optional_inline}}</dt> + <dd>Рядок. Опис символа, який може використовуватись для відлагодження, але не для доступу до самого символа.</dd> +</dl> + +<h2 id="Прилади">Прилади</h2> + +<h3 id="Створення_символів">Створення символів</h3> + +<p>Щоб створити новий примітивний символ, напишіть <code>Symbol()</code> з необов'язковим рядком опису:</p> + +<pre class="brush: js notranslate">let sym1 = Symbol() +let sym2 = Symbol('foo') +let sym3 = Symbol('foo') +</pre> + +<p>Наведений вище код створює три нові символи. Зауважте, що <code>Symbol("foo")</code> не приводить рядок <code>"foo"</code> до символа. Він кожен раз створює новий символ:</p> + +<pre class="brush: js notranslate">Symbol('foo') === Symbol('foo') // false +</pre> + +<h3 id="new_Symbol...">new Symbol(...)</h3> + +<p>Наступний синтаксис з оператором {{jsxref("Operators/new", "new")}} викине помилку {{jsxref("TypeError")}}:</p> + +<pre class="brush: js notranslate">let sym = new Symbol() // TypeError +</pre> + +<p>Це запобігає створенню явного об'єкта-обгортки <code>Symbol</code> замість нового символьного значення та може здивувати, оскільки створення таких об'єктів-обгорток навколо примітивних типів даних загалом можливе (наприклад, <code>new Boolean</code>, <code>new String</code> та <code>new Number</code>).</p> + +<p>Якщо вам дійсно потрібно створити об'єкт-обгортку <code>Symbol</code>, ви можете скористатись фукнцією <code>Object()</code>:</p> + +<pre class="brush: js notranslate">let sym = Symbol('foo'); +let symObj = Object(sym); +typeof sym // => "symbol" +typeof symObj // => "object" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol-constructor', 'Symbol constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.Symbol")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Glossary/Символ">Словник: символьний тип даних</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html new file mode 100644 index 0000000000..0f9567a8bb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html @@ -0,0 +1,75 @@ +--- +title: Symbol.toPrimitive +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +--- +<div>{{JSRef}}</div> + +<p><code><strong>Symbol.toPrimitive</strong></code> - це символ, який визначає властивість зі значенням-функцією, що викликається для перетворення об'єкта на відповідне просте значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>За допомогою властивості <strong><code>Symbol.toPrimitive</code></strong> (що використовується в якості функції) об'єкт може перетворюватись на прості значення. Функція викликається з рядковим аргументом <strong><code>hint</code></strong>, який вказує бажаний тип отриманого примітиву. Аргумент <strong><code>hint</code></strong> може мати значення <code>"<em>number</em>"</code>, <code>"<em>string</em>"</code> або <code>"<em>default</em>"</code>.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Модифікація_простих_значень_отриманих_перетворенням_обєкта">Модифікація простих значень, отриманих перетворенням об'єкта</h3> + +<p>Наступний приклад описує, як властивість <strong><code>Symbol.toPrimitive</code></strong> може змінювати прості значення, отримані з об'єкта.</p> + +<pre class="brush: js notranslate">// Об'єкт без властивості Symbol.toPrimitive. +var obj1 = {}; +console.log(+obj1); // NaN +console.log(`${obj1}`); // "[object Object]" +console.log(obj1 + ''); // "[object Object]" + +// Об'єкт з властивістю Symbol.toPrimitive. +var obj2 = { + [Symbol.toPrimitive](hint) { + if (hint == 'number') { + return 10; + } + if (hint == 'string') { + return 'привіт'; + } + return true; + } +}; +console.log(+obj2); // 10 -- hint дорівнює "number" +console.log(`${obj2}`); // "привіт" -- hint дорівнює "string" +console.log(obj2 + ''); // "true" -- hint дорівнює "default" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.toPrimitive")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}</li> + <li>{{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}</li> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html b/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html new file mode 100644 index 0000000000..9faa5645ca --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html @@ -0,0 +1,99 @@ +--- +title: Symbol.toStringTag +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Довідка + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <strong><code>Symbol.toStringTag</code></strong> - це властивість з рядковим значенням, що використовується для створення заданого рядкового опису об'єкта. До неї звертається метод {{jsxref("Object.prototype.toString()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}</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> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Теги_за_замовчуванням">Теги за замовчуванням</h3> + +<pre class="brush: js notranslate">Object.prototype.toString.call('foo'); // "[object String]" +Object.prototype.toString.call([1, 2]); // "[object Array]" +Object.prototype.toString.call(3); // "[object Number]" +Object.prototype.toString.call(true); // "[object Boolean]" +Object.prototype.toString.call(undefined); // "[object Undefined]" +Object.prototype.toString.call(null); // "[object Null]" +// ... та інші +</pre> + +<h3 id="Вбудовані_символи_toStringTag">Вбудовані символи toStringTag</h3> + +<pre class="brush: js notranslate">Object.prototype.toString.call(new Map()); // "[object Map]" +Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]" +Object.prototype.toString.call(Promise.resolve()); // "[object Promise]" +// ... та інші +</pre> + +<h3 id="Користувацькі_класи_з_тегом_за_замовчуванням">Користувацькі класи з тегом за замовчуванням</h3> + +<p>При створенні власного класу, JavaScript за замовчуванням виставляє тег "Object":</p> + +<pre class="brush: js notranslate">class ValidatorClass {} + +Object.prototype.toString.call(new ValidatorClass()); // "[object Object]" +</pre> + +<h3 id="Користувацький_тег_з_toStringTag">Користувацький тег з toStringTag</h3> + +<p>Отже, за допомогою <code>toStringTag</code> ви можете налаштувати свій власний тег:</p> + +<pre class="brush: js notranslate">class ValidatorClass { + get [Symbol.toStringTag]() { + return 'Validator'; + } +} + +Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]" +</pre> + +<h3 id="toStringTag_доступний_на_усіх_DOM-обєктах">toStringTag доступний на усіх DOM-об'єктах</h3> + +<p>Завдяки <a href="https://github.com/heycam/webidl/pull/357">змінам у специфікації WebIDL</a> в середині 2020, переглядачі додають властивість <code>Symbol.toStringTag</code> до усіх DOM-об'єктів. Наприклад, для звернення до властивості <code>Symbol.toStringTag</code> у {{domxref("HTMLButtonElement")}}:</p> + +<pre class="brush: js notranslate">let test = document.createElement('button'); +test.toString(); // Вертає [object HTMLButtonElement] +test[Symbol.toStringTag]; // Вертає HTMLButtonElement</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.toStringTag")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html new file mode 100644 index 0000000000..5b90c252d4 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html @@ -0,0 +1,89 @@ +--- +title: Symbol.unscopables +slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +tags: + - ECMAScript 2015 + - JavaScript + - Symbol + - Властивість + - Символ +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +--- +<div>{{JSRef}}</div> + +<p>Добревідомий символ <strong><code>Symbol.unscopables</code></strong> використовується, щоб визначити об'єкт, чиї імена особистих та успадкованих властивостей виключаються з прив'язок оточення <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code> для асоційованого об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>Символ <code>@@unscopables</code> (<code>Symbol.unscopables</code>) можна визначити на будь-якому об'єкті, щоб запобігти розкриттю імен властивостей в якості лексичних змінних у прив'язках оточення <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code>. Зауважте, що при використанні <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгого режиму</a> інструкції <code>with</code> недоступні та, відповідно, не потребують цього символа.</p> + +<p>Присвоєння властивості значення <code>true</code> у об'єкті <code>unscopables</code> зробить її невидимою (<em>unscopable</em>), і, таким чином, вона не з'явиться у змінних лексичної області видимості. Присвоєння властивості значення <code>false</code> зробить її видимою (<code>scopable</code>), відповідно, вона з'явиться у змінних лексичної області видимості.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Видимість_у_інструкціях_with">Видимість у інструкціях with</h3> + +<p>Наступний код добре працює у версіях ES5 та нижче. Однак, у ECMAScript 2015 та пізніших версіях був запроваджений метод {{jsxref("Array.prototype.keys()")}}. Це означає, що всередині оточення <code>with</code> "keys" тепер буде методом, а не змінною. Саме тоді був доданий символ <code>unscopables</code>. Вбудоване налаштування <code>unscopables</code> реалізоване у вигляді {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}, щоб запобігти потраплянню деяких методів масиву у область видимості <code>with</code>.</p> + +<pre class="brush: js notranslate">var keys = []; + +with (Array.prototype) { + keys.push('something'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"] +</pre> + +<h3 id="Unscopables_у_обєктах">Unscopables у об'єктах</h3> + +<p>Ви також можете налаштувати <code>unscopables</code> для своїх власних об'єктів.</p> + +<pre class="brush: js notranslate">var obj = { + foo: 1, + bar: 2 +}; + +obj[Symbol.unscopables] = { + foo: false, + bar: true +}; + +with (obj) { + console.log(foo); // 1 + console.log(bar); // ReferenceError: bar is not defined +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.unscopables")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> + <li>оператор <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code> (недоступний у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>)</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html b/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..1ab5c9b5c7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,115 @@ +--- +title: SyntaxError +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError +tags: + - Error + - JavaScript + - SyntaxError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +<div>{{JSRef}}</div> + +<p>Об'єкт класу <code><strong>SyntaxError</strong></code> позначає помилку, що виникає внаслідок спроби виконання коду з порушеннями синтаксису.</p> + +<h2 id="Опис">Опис</h2> + +<p>Виняток <code>SyntaxError</code> викидається тоді, коли рушій JavaScript під час спроби виконати код виявляє символи чи їх послідовність, що суперечить чинному синтаксу мови.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>Зрозумілий людині опис помилки.</dd> + <dt><code>fileName</code> {{non-standard_inline}} {{optional_inline}}</dt> + <dd>Ім'я файлу, код з якого спричинив помилку.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}} {{optional_inline}}</dt> + <dd>Номер рядка в коді, що спричинив помилку.</dd> +</dl> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>SyntaxError.prototype</code></dt> + <dd>Вможливлює додавання властивостей до об'єктів класу <code>SyntaxError</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Сам <code>SyntaxError</code> власних методів не має, але деякі він успадковує через ланцюжок прототипів.</p> + +<h2 id="Примірники_SyntaxError">Примірники <code>SyntaxError</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перехоплення_SyntaxError">Перехоплення <code>SyntaxError</code></h3> + +<pre class="brush: js">try { + eval('казна-що'); +} catch (e) { + console.error(e instanceof SyntaxError); + console.error(e.message); + console.error(e.name); + console.error(e.fileName); + console.error(e.lineNumber); + console.error(e.columnNumber); + console.error(e.stack); +} +</pre> + +<h3 id="Створення_SyntaxError">Створення <code>SyntaxError</code></h3> + +<pre class="brush: js">try { + throw new SyntaxError('Отакої!', 'someFile.js', 10); +} catch (e) { + console.error(e instanceof SyntaxError); // true + console.error(e.message); // Отакої! + console.error(e.name); // SyntaxError + console.error(e.fileName); // someFile.js + console.error(e.lineNumber); // 10 + console.error(e.columnNumber); // 0 + console.error(e.stack); // @debugger eval code:3:9 +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.SyntaxError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li><a href="https://gist.github.com/ramsunvtech/7b10137ea1526b7b25ddcf2ad8582fbf">Venkat.R - Various Syntax Error for var variables</a></li> + <li><a href="https://gist.github.com/ramsunvtech/879e8b5800f319be432b48753eedf6c8">Venkat.R - Various Syntax Error for let variables</a></li> + <li><a href="https://gist.github.com/ramsunvtech/80e75ee317653895a33be69883233bd2">Venkat.R - Various Syntax Error for const variables</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html new file mode 100644 index 0000000000..c2d5f46901 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html @@ -0,0 +1,88 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +tags: + - Error + - JavaScript + - Prototype + - SyntaxError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>SyntaxError.prototype</strong></code> є прототипом для конструктора {{jsxref("SyntaxError")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Всі примірники {{jsxref("SyntaxError")}} успадковуються від <code>SyntaxError.prototype</code>, тож ви можете скористатися прототипом задля додавання властивостей чи методів до всіх примірників.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>SyntaxError.prototype.constructor</code></dt> + <dd>Функція, що створює прототип об'єкта.</dd> + <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> + <dd>Повідомлення помилки. Попри те, що в ECMA-262 зазначено, що {{jsxref("SyntaxError")}} мусить мати свою властивість <code>message</code>, у <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> він насправді успадковує {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> + <dd>Ім'я помилки. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> + <dd>Шлях до файла, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> + <dd>Номер рядка у файлі, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> + <dd>Номер символа у рядку, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> + <dd>Стек викликів. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча прототип {{jsxref("SyntaxError")}} не містить власних методів, примірники {{jsxref("SyntaxError")}} успадковують деякі методи від ланцюжка прототипів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Первинне визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.SyntaxError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/typeerror/index.html b/files/uk/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..155aafc5bb --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,118 @@ +--- +title: TypeError +slug: Web/JavaScript/Reference/Global_Objects/TypeError +tags: + - Error + - JavaScript + - TypeError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <code><strong>TypeError</strong></code> позначає помилку, що виникає при використанні значення невідповідного типу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p><code>TypeError</code> викидається, коли:</p> + +<ul> + <li>операнд або аргумент, що передається у функцію, несумісний з типом, який очікується цим оператором чи функцією, або</li> + <li>при спробі змінити значення, яке не можна змінювати, або</li> + <li>при спробі використати значення невідповідним чином.</li> +</ul> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>TypeError.prototype</code></dt> + <dd>Дозволяє додавати властивості до об'єктів <code>TypeError</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Сам <code>TypeError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p> + +<h2 id="Екземпляри_TypeError">Екземпляри <code>TypeError</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перехоплення_TypeError">Перехоплення <code>TypeError</code></h3> + +<pre class="brush: js">try { + null.f(); +} catch (e) { + console.log(e instanceof TypeError) // true + console.log(e.message) // "null has no properties" + console.log(e.name) // "TypeError" + console.log(e.fileName) // "Scratchpad/1" + console.log(e.lineNumber) // 2 + console.log(e.columnNumber) // 2 + console.log(e.stack) // "@Scratchpad/2:2:3\n" +} +</pre> + +<h3 id="Створення_TypeError">Створення <code>TypeError</code></h3> + +<pre class="brush: js">try { + throw new TypeError('Привіт', "someFile.js", 10); +} catch (e) { + console.log(e instanceof TypeError) // true + console.log(e.message) // "Привіт" + console.log(e.name) // "TypeError" + console.log(e.fileName) // "someFile.js" + console.log(e.lineNumber) // 10 + console.log(e.columnNumber) // 0 + console.log(e.stack) // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.TypeError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html new file mode 100644 index 0000000000..6e6cef6483 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html @@ -0,0 +1,87 @@ +--- +title: TypeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +tags: + - Error + - JavaScript + - TypeError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>TypeError.prototype</strong></code> є прототипом для конструктора {{jsxref("TypeError")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Всі екземпляри {{jsxref("TypeError")}} успадковуються від <code>TypeError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>TypeError.prototype.constructor</code></dt> + <dd>Визначає функцію, яка створила прототип об'єкта.</dd> + <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> + <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("TypeError")}} повинен мати власну властивість <code>message</code>, у <a href="https://developer.mozilla.org/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> + <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> + <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> + <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> + <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> + <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча прототип {{jsxref("TypeError")}} не містить власних методів, екземпляри {{jsxref("TypeError")}} успадковують деякі методи через ланцюжок прототипів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.TypeError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/undefined/index.html b/files/uk/web/javascript/reference/global_objects/undefined/index.html new file mode 100644 index 0000000000..66028e114d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/undefined/index.html @@ -0,0 +1,140 @@ +--- +title: undefined +slug: Web/JavaScript/Reference/Global_Objects/undefined +tags: + - JavaScript + - Проста величина +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><span class="seoSummary">Глобальна властивість <code><strong>undefined</strong></code> представляє просте значення <code>{{Glossary("Undefined", "undefined")}}</code>. Це один з {{Glossary("Primitive", "простих типів")}} JavaScript.</span></p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<p>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>undefined</code></pre> + +<h2 id="Опис">Опис</h2> + +<p><code>undefined</code> is a property of the <em>global object</em>; i.e., it is a variable in global scope. The initial value of <code>undefined</code> is the primitive value <code>{{Glossary("Undefined", "undefined")}}</code>.</p> + +<p>In modern browsers (JavaScript 1.8.5 / Firefox 4+), <code>undefined</code> is a non-configurable, non-writable property per the ECMAScript 5 specification. Even when this is not the case, avoid overriding it.</p> + +<p>A variable that has not been assigned a value is of type undefined. A method or statement also returns <code>undefined</code> if the variable that is being evaluated does not have an assigned value. A function returns <code>undefined</code> if a value was not {{jsxref("Statements/return", "returned")}}.</p> + +<div class="warning"> +<p>While it is possible to use it as an {{Glossary("Identifier", "identifier")}} (variable name) in any scope other than the global scope (because <code>undefined</code> is not a {{jsxref("Reserved_Words", "reserved word")}}), doing so is a very bad idea that will make your code difficult to maintain and debug.</p> + +<pre class="brush: js">//DON'T DO THIS + +// logs "foo string" +(function() { var undefined = 'foo'; console.log(undefined, typeof undefined); })(); + +// logs "foo string" +(function(undefined) { console.log(undefined, typeof undefined); })('foo'); +</pre> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Сувора_рівність_та_undefined">Сувора рівність та <code>undefined</code></h3> + +<p>Виконавши строге порівняння змінної із значенням <code>undefined</code> можна перевірити, чи змінна має значення. У прикладі нижче змінна <code>x</code> не ініціалізована, тому умовний оператор<code>if</code> буде оцінено як істина (true)</p> + +<pre class="brush: js">var x; +if (x === undefined) { + // код у цьому блоці буде виконано +} +else { + // код у цьому блоку не буде виконано +} +</pre> + +<div class="note"> +<p>Note: The strict equality operator rather than the standard equality operator must be used here, because <code>x == undefined</code> also checks whether <code>x</code> is <code>null</code>, while strict equality doesn't. <code>null</code> is not equivalent to <code>undefined</code>. See {{jsxref("Operators/Comparison_Operators", "comparison operators")}} for details.</p> +</div> + +<h3 id="Typeof_operator_and_undefined"><code>Typeof</code> operator and <code>undefined</code></h3> + +<p>Alternatively, {{jsxref("Operators/typeof", "typeof")}} can be used:</p> + +<pre class="brush: js">var x; +if (typeof x === 'undefined') { + // these statements execute +} +</pre> + +<p>One reason to use {{jsxref("Operators/typeof", "typeof")}} is that it does not throw an error if the variable has not been declared.</p> + +<pre class="brush: js">// x has not been declared before +if (typeof x === 'undefined') { // evaluates to true without errors + // these statements execute +} + +if (x === undefined) { // throws a ReferenceError + +} +</pre> + +<p>However, this kind of technique should be avoided. JavaScript is a statically scoped language, so knowing if a variable is declared can be read by seeing whether it is declared in an enclosing context. The only exception is the global scope, but the global scope is bound to the global object, so checking the existence of a variable in the global context can be done by checking the existence of a property on the <em>global object</em> (using the {{jsxref("Operators/in", "in")}} operator, for instance).</p> + +<h3 id="Void_operator_and_undefined"><code>Void</code> operator and <code>undefined</code></h3> + +<p>The {{jsxref("Operators/void", "void")}} operator is a third alternative.</p> + +<pre class="brush: js">var x; +if (x === void 0) { + // these statements execute +} + +// y has not been declared before +if (y === void 0) { + // throws a - Uncaught ReferenceError: y is not defined +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.undefined")}}</p> diff --git a/files/uk/web/javascript/reference/global_objects/uneval/index.html b/files/uk/web/javascript/reference/global_objects/uneval/index.html new file mode 100644 index 0000000000..a5f930230b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/uneval/index.html @@ -0,0 +1,68 @@ +--- +title: uneval() +slug: Web/JavaScript/Reference/Global_Objects/uneval +tags: + - JavaScript + - Функція + - нестандартна +translation_of: Web/JavaScript/Reference/Global_Objects/uneval +--- +<p>{{JSSidebar("Objects")}}{{Non-standard_Header}}</p> + +<p>Функція <code><strong>uneval()</strong></code> створює рядкове представлення першокоду об'єкта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">uneval(<var>object</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Вираз чи інструкція JavaScript.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, у якому представлено першокод наданого об'єкта.</p> + +<div class="note"><strong>Заувага:</strong> Ви не зможете отримати коректне JSON-представлення вашого об'єкта.</div> + +<h2 id="Опис">Опис</h2> + +<p><code>uneval()</code> - глобальна функція, вона не пов'язана з жодним об'єктом.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush:js">var a = 1; +uneval(a); // повертає рядок, що містить 1 + +var b = '1'; +uneval(b); // повертає рядок, що містить "1" + +uneval(function foo() {}); // повертає "(function foo(){})" + + +var a = uneval(function foo() { return 'привіт'; }); +var foo = eval(a); +foo(); // повертає "привіт" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодних специфікацій.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.uneval")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li> + <li>{{JSxRef("JSON.stringify()")}}</li> + <li>{{JSxRef("JSON.parse()")}}</li> + <li>{{JSxRef("Object.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/urierror/index.html b/files/uk/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..bae1aaa8f5 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,116 @@ +--- +title: URIError +slug: Web/JavaScript/Reference/Global_Objects/URIError +tags: + - Error + - JavaScript + - URIError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +--- +<div>{{JSRef}}</div> + +<p>Об'єкт <code><strong>URIError</strong></code> позначає помилку, що виникає при хибному використанні глобальної функції, що працює з URI.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dd>Необов'язковий. Зрозумілий людині опис помилки.</dd> + <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>Необов'язковий. Ім'я файлу, код з якого спричинив виняток.</dd> + <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt> + <dd>Необов'язковий. Номер рядка в коді, що спричинив виняток.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p><code>URIError</code> викидається, коли глобальним функціям, що працюють з URI, передається неправильно сформований URI.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>URIError.prototype</code></dt> + <dd>Дозволяє додавати властивості до об'єктів <code>URIError</code>.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Сам <code>URIError</code> не має власних методів, але успадковує деякі методи через ланцюжок прототипів.</p> + +<h2 id="Екземпляри_URIError">Екземпляри <code>URIError</code></h2> + +<h3 id="Властивості_2">Властивості</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Властивості')}}</div> + +<h3 id="Методи_2">Методи</h3> + +<div>{{page('/uk/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Методи')}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перехоплення_URIError">Перехоплення <code>URIError</code></h3> + +<pre class="brush: js">try { + decodeURIComponent('%'); +} catch (e) { + console.log(e instanceof URIError) // true + console.log(e.message) // "malformed URI sequence" + console.log(e.name) // "URIError" + console.log(e.fileName) // "Scratchpad/1" + console.log(e.lineNumber) // 2 + console.log(e.columnNumber) // 2 + console.log(e.stack) // "@Scratchpad/2:2:3\n" +} +</pre> + +<h3 id="Створення_URIError">Створення <code>URIError</code></h3> + +<pre class="brush: js">try { + throw new URIError('Привіт', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof URIError) // true + console.log(e.message) // "Привіт" + console.log(e.name) // "URIError" + console.log(e.fileName) // "someFile.js" + console.log(e.lineNumber) // 10 + console.log(e.columnNumber) // 0 + console.log(e.stack) // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.URIError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html b/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html new file mode 100644 index 0000000000..4dd9c5113e --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html @@ -0,0 +1,88 @@ +--- +title: URIError.prototype +slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype +tags: + - Error + - JavaScript + - URIError + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +--- +<div>{{JSRef}}</div> + +<p>Властивість <code><strong>URIError.prototype</strong></code> є прототипом для конструктора {{jsxref("URIError")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Всі екземпляри {{jsxref("URIError")}} успадковуються від <code>URIError.prototype</code>. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>URIError.prototype.constructor</code></dt> + <dd>Визначає функцію, яка створила прототип об'єкта.</dd> + <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt> + <dd>Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("URIError")}} повинен мати власну властивість <code>message</code>, у <a href="https://developer.mozilla.org/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, він успадковує {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt> + <dd>Ім'я помилки. Успадковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt> + <dd>Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt> + <dd>Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt> + <dd>Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt> + <dd>Трасування стеку. Успаковано від {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<p>Хоча прототип {{jsxref("URIError")}} не містить власних методів, екземпляри {{jsxref("URIError")}} успадковують деякі методи через ланцюжок прототипів.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Визначено як <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.builtins.URIError")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/epsilon/index.html b/files/uk/web/javascript/reference/global_objects/число/epsilon/index.html new file mode 100644 index 0000000000..18655cd15d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/epsilon/index.html @@ -0,0 +1,67 @@ +--- +title: Number.EPSILON +slug: Web/JavaScript/Reference/Global_Objects/Число/EPSILON +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Властивість + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>Number.EPSILON</code></strong> відображає різницю між 1 та найменшим числом із рухомою крапкою, що більше за 1.</p> + +<p>Для доступу до цієї статичної властивості не потрібно створювати об'єкт {{jsxref("Число","Number")}} (використовуйте <code>Number.EPSILON</code>).</p> + +<div>{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Властивість <code>EPSILON</code> має значення, близьке до <code>2.2204460492503130808472633361816E-16</code>, або ж <code>2<sup>-52</sup></code>.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js notranslate">if (Number.EPSILON === undefined) { + Number.EPSILON = Math.pow(2, -52); +}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевірка_рівності">Перевірка рівності</h3> + +<pre class="brush: js notranslate">x = 0.2; +y = 0.3; +z = 0.1; +equal = (Math.abs(x - y + z) < Number.EPSILON); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>Об'єкт {{jsxref("Число","Number")}}, якому належить ця властивість.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/index.html b/files/uk/web/javascript/reference/global_objects/число/index.html new file mode 100644 index 0000000000..44ee101d87 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/index.html @@ -0,0 +1,186 @@ +--- +title: Number +slug: Web/JavaScript/Reference/Global_Objects/Число +tags: + - JavaScript + - Number + - Довідка + - Клас +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Об'єкт <strong><code>Number</code></strong> у JavaScript — це <a href="/uk/docs/Glossary/Primitive#Об'єкти-обгортки_в_JavaScript">об'єкт-обгортка</a>, що дозволяє працювати з числовими значеннями, такими як <code>37</code> чи <code>-9.25</code>. </span></p> + +<p>Конструктор <code><strong>Number</strong></code> містить константи та методи для роботи з числами. Значення інших типів можуть бути перетворені на числа за допомогою <strong>функції <code>Number()</code></strong>.</p> + +<p>Тип <strong>Number</strong> у JavaScript є <a href="https://uk.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D0%B7_%D1%80%D1%83%D1%85%D0%BE%D0%BC%D0%BE%D1%8E_%D0%BA%D0%BE%D0%BC%D0%BE%D1%8E">64-бітним значенням подвійної точності формату IEEE 754</a>, як <code>double</code> у Java чи у C#. Це означає, що воно може відображати дробові значення, але існують певні обмеження на те, що воно може зберігати. Тип Number зберігає лише близько 17 десяткових знаків точності; числа підлягають <a href="https://en.wikipedia.org/wiki/Floating-point_arithmetic#Representable_numbers,_conversion_and_rounding">округленню</a>. Найбільше значення, яке може зберігати Number, дорівнює приблизно 1.8×10<sup>308</sup>. Числа за межами цього значення замінюються на спеціальну числову константу {{jsxref("Infinity")}}.</p> + +<p>Числові літерали, такі як <code>37</code>, у коді JavaScript є числами з рухомою крапкою, а не цілими числами. Не існує окремого цілочисельного типу у звичайному повсякденному використанні. (JavaScript нині має тип {{jsxref("BigInt")}}, але він був створений не того, щоб замінити Number у повсякденному використанні. <code>37</code> досі належить до типу Number, а не до BigInt.)</p> + +<p>Числа також можна виразити у таких літеральних формах, як <code>0b101</code>, <code>0o13</code>, <code>0x0A</code>. Дізнайтесь більше щодо <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Числові_літерали">лексичної граматики чисел тут</a>.</p> + +<h2 id="Опис">Опис</h2> + +<p>При використанні в якості функції, <code>Number(value)</code> перетворює рядок чи інше значення на тип Number. Якщо значення не можна перетворити, повертається {{jsxref("NaN")}}.</p> + +<h3 id="Літеральний_синтаксис">Літеральний синтаксис</h3> + +<pre class="brush: js notranslate">123 // сто двадцять три +123.0 // те саме +123 === 123.0 // true</pre> + +<h3 id="Синтаксис_функції">Синтаксис функції</h3> + +<pre class="brush: js notranslate">Number('123') // вертає число 123 +Number('123') === 123 // true + +Number("коник") // NaN +Number(undefined) // NaN</pre> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число/Number"><code>Number()</code></a></dt> + <dd>Створює нове значення <code>Number</code>.</dd> +</dl> + +<h2 id="Статичні_властивості">Статичні властивості</h2> + +<dl> + <dt>{{jsxref("Число.EPSILON", "Number.EPSILON")}}</dt> + <dd>Найменша можлива різниця між двома числами.</dd> + <dt>{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}</dt> + <dd>Найбільше безпечне ціле число у JavaScript (<code>2<sup>53</sup> - 1</code>).</dd> + <dt>{{jsxref("Число.MAX_VALUE", "Number.MAX_VALUE")}}</dt> + <dd>Найбільше додатне число, доступне для відображення.</dd> + <dt>{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}</dt> + <dd>Найменше безпечне ціле число у JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd> + <dt>{{jsxref("Число.MIN_VALUE", "Number.MIN_VALUE")}}</dt> + <dd>Найменше додатне число, доступне для відображення, — найближче до нуля (за винятком самого нуля) додатне число.</dd> + <dt>{{jsxref("Число.NaN", "Number.NaN")}}</dt> + <dd>Спеціальне значення "{{glossary("NaN", "не число")}}".</dd> + <dt>{{jsxref("Число.NEGATIVE_INFINITY", "Number.NEGATIVE_INFINITY")}}</dt> + <dd>Спеціальне значення, що відображає від'ємну нескінченність. Повертається при переповненні.</dd> + <dt>{{jsxref("Число.POSITIVE_INFINITY", "Number.POSITIVE_INFINITY")}}</dt> + <dd>Спеціальне значення, що відображає нескінченність. Повертається при переповненні.</dd> + <dt>{{jsxref("Число.prototype", "Number.prototype")}}</dt> + <dd>Дозволяє додавати властивості до об'єкта <code>Number</code>.</dd> +</dl> + +<h2 id="Статичні_методи">Статичні методи</h2> + +<dl> + <dt>{{jsxref("Число.isNaN()", "Number.isNaN()")}}</dt> + <dd>Визначає, чи є передане значення <code>NaN</code>.</dd> + <dt>{{jsxref("Число.isFinite()", "Number.isFinite()")}}</dt> + <dd>Визначає, чи є передане значення скінченним числом.</dd> + <dt>{{jsxref("Число.isInteger()", "Number.isInteger()")}}</dt> + <dd>Визначає, чи є передане значення цілим числом.</dd> + <dt>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</dt> + <dd>Визначає, чи є передане значення безпечним цілим числом (число між <code>-(2<sup>53</sup> - 1)</code> та <code>2<sup>53</sup> - 1</code>).</dd> + <dt>{{jsxref("Число.parseFloat()", "Number.parseFloat()")}}</dt> + <dd>Те саме, що й глобальна функція {{jsxref("parseFloat", "parseFloat()")}}.</dd> + <dt>{{jsxref("Число.parseInt()", "Number.parseInt()")}}</dt> + <dd>Те саме, що й глобальна функція {{jsxref("parseInt", "parseInt()")}}.</dd> +</dl> + +<h2 id="Методи_екземплярів">Методи екземплярів</h2> + +<dl> + <dt>{{jsxref("Число.prototype.toExponential()", "Number.prototype.toExponential(<var>дробовіЦифри</var>)")}}</dt> + <dd>Повертає рядок, що містить експоненціальний запис числа.</dd> + <dt>{{jsxref("Число.prototype.toFixed()", "Number.prototype.toFixed(<var>цифри</var>)")}}</dt> + <dd>Повертає рядок, що містить запис числа у форматі з нерухомою крапкою.</dd> + <dt>{{jsxref("Число.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>мови</var> [, <var>параметри</var>]])")}}</dt> + <dd>Повертає рядок, що містить узалежнений від мови запис числа. Заміщує метод {{jsxref("Object.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("Число.prototype.toPrecision()", "Number.prototype.toPrecision(<var>точність</var>)")}}</dt> + <dd>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою крапкою або у експоненціальному форматі.</dd> + <dt>{{jsxref("Число.prototype.toString()", "Number.prototype.toString([<var>основа</var>])")}}</dt> + <dd>Повертає рядкове представлення наданого об'єкта у вказаній системі числення. Заміщує метод {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Число.prototype.valueOf()", "Number.prototype.valueOf()")}}</dt> + <dd>Повертає просте числове значення об'єкта. Заміщує метод {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<div></div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_обєкта_Number_для_присвоєння_змінним_числових_значень">Використання об'єкта <code>Number</code> для присвоєння змінним числових значень</h3> + +<p>Наведений приклад використовує властивості об'єкта <code>Number</code>, щоб присвоїти кільком змінним числові значення:</p> + +<pre class="brush: js notranslate">const biggestNum = Number.MAX_VALUE +const smallestNum = Number.MIN_VALUE +const infiniteNum = Number.POSITIVE_INFINITY +const negInfiniteNum = Number.NEGATIVE_INFINITY +const notANum = Number.NaN +</pre> + +<h3 id="Діапазон_цілих_чисел_для_Number">Діапазон цілих чисел для <code>Number</code></h3> + +<p>У наступному прикладі наведено мінімальне та максимальне цілочисельне значення, які можуть бути відображені об'єктом <code>Number</code> (за детальною інформацією звертайтесь до стандарту ECMAScript, розділ <em><a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">6.1.6 Тип Number</a></em>):</p> + +<pre class="brush: js notranslate">const biggestInt = Number.MAX_SAFE_INTEGER // (2<sup>53</sup> - 1) => 9007199254740991 +const smallestInt = Number.MIN_SAFE_INTEGER // -(2<sup>53</sup> - 1) => -9007199254740991</pre> + +<p>При розборі даних, поданих у форматі JSON, цілі числа, що виходять за межі цього діапазону, можуть виявитися пошкодженими, коли аналізатор JSON примусово перетворює їх у тип <code>Number</code>.</p> + +<p>Цьому можна запобігти використанням ({{jsxref("String","рядків")}}).</p> + +<p>Більші числа можуть бути відображені за допомогою типу {{jsxref("BigInt")}}.</p> + +<h3 id="Використання_Number_для_перетворення_обєкта_Date">Використання <code>Number</code> для перетворення об'єкта <code>Date</code></h3> + +<p>У наведеному прикладі об'єкт класу {{jsxref ("Date")}} перетворюється на числове значення за допомогою функції <code>Number</code>:</p> + +<pre class="brush: js notranslate">let d = new Date('December 17, 1995 03:24:00') +console.log(Number(d)) +</pre> + +<p>Це виведе <code>819199440000</code>.</p> + +<h3 id="Перетворення_числових_рядків_та_null_на_числа">Перетворення числових рядків та null на числа</h3> + +<pre class="brush: js notranslate">Number('123') // 123 +Number('123') === 123 /// true +Number('12.3') // 12.3 +Number('12.00') // 12 +Number('123e-1') // 12.3 +Number('') // 0 +Number(null) // 0 +Number('0x11') // 17 +Number('0b11') // 3 +Number('0o11') // 9 +Number('foo') // NaN +Number('100a') // NaN +Number('-Infinity') //-Infinity +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Number.Number")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Operators/Arithmetic_Operators", "Арифметичні оператори")}}</li> + <li>Глобальний об'єкт {{jsxref("Math")}}</li> + <li>Цілі числа з довільною точністю: {{jsxref("BigInt")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/isfinite/index.html b/files/uk/web/javascript/reference/global_objects/число/isfinite/index.html new file mode 100644 index 0000000000..8379f3d5c3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/isfinite/index.html @@ -0,0 +1,86 @@ +--- +title: Number.isFinite() +slug: Web/JavaScript/Reference/Global_Objects/Число/isFinite +tags: + - JavaScript + - Number + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Number.isFinite()</code></strong> визначає, чи є передане значення скінченним числом.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Number.isFinite(v<var>alue</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Значення, яке треба перевірити на скінченність.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Значення {{jsxref("Boolean")}}, що вказує, чи є надане значення скінченним числом.</p> + +<h2 id="Опис">Опис</h2> + +<p>У порівнянні з глобальною функцією {{jsxref("isFinite", "isFinite()")}}, цей метод не перетворює примусово значення параметра на число. Це означає, що тільки значення числового типу, які є скінченними, повернуть <code>true</code>.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js notranslate">if (Number.isFinite === undefined) Number.isFinite = function(value) { + return typeof value === 'number' && isFinite(value); +} +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_isFinite">Використання isFinite</h3> + +<pre class="brush: js notranslate">Number.isFinite(Infinity); // false +Number.isFinite(NaN); // false +Number.isFinite(-Infinity); // false + +Number.isFinite(0); // true +Number.isFinite(2e64); // true + +Number.isFinite('0'); // false, дорівнювало б true з + // глобальною функцією isFinite('0') +Number.isFinite(null); // false, дорівнювало б true з + // глобальною функцією isFinite(null) +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</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.Number.isFinite")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Об'єкт {{jsxref("Число", "Number")}}, до якого належить метод.</li> + <li>Глобальна функція {{jsxref("isFinite")}}.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/isinteger/index.html b/files/uk/web/javascript/reference/global_objects/число/isinteger/index.html new file mode 100644 index 0000000000..3cd4988a2b --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/isinteger/index.html @@ -0,0 +1,94 @@ +--- +title: Number.isInteger() +slug: Web/JavaScript/Reference/Global_Objects/Число/isInteger +tags: + - JavaScript + - Number + - Довідка + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Number.isInteger()</code></strong> визначає, чи є передане значення цілим числом.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Number.isInteger(v<var>alue</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Значення для перевірки.</dd> +</dl> + +<h3 id="Повертає">Повертає</h3> + +<p>Значення типу {{jsxref("Boolean")}}, що вказує, чи є надане значення цілим числом.</p> + +<h2 id="Опис">Опис</h2> + +<p>Якщо параметр є цілим числом, повертає <code>true</code>, інакше вертає <code>false</code>. Якщо значення дорівнює {{jsxref("NaN")}} або {{jsxref("Infinity")}}, повертає <code>false</code>. Цей метод також повертає <code>true</code> для чисел з плаваючою крапкою, які можуть бути представлені як цілі.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js notranslate">Number.isInteger = Number.isInteger || function(value) { + return typeof value === 'number' && + isFinite(value) && + Math.floor(value) === value; +};</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_isInteger">Використання isInteger</h3> + +<pre class="brush: js notranslate">Number.isInteger(0); // true +Number.isInteger(1); // true +Number.isInteger(-100000); // true +Number.isInteger(99999999999999999999999); // true + +Number.isInteger(0.1); // false +Number.isInteger(Math.PI); // false + +Number.isInteger(NaN); // false +Number.isInteger(Infinity); // false +Number.isInteger(-Infinity); // false +Number.isInteger('10'); // false +Number.isInteger(true); // false +Number.isInteger(false); // false +Number.isInteger([1]); // false + +Number.isInteger(5.0); // true +Number.isInteger(5.000000000000001); // false +Number.isInteger(5.0000000000000001); // true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</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.Number.isInteger")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Об'єкт {{jsxref("Число", "Number")}}, до якого належить цей метод.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/isnan/index.html b/files/uk/web/javascript/reference/global_objects/число/isnan/index.html new file mode 100644 index 0000000000..c9c38ad05d --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/isnan/index.html @@ -0,0 +1,100 @@ +--- +title: Number.isNaN() +slug: Web/JavaScript/Reference/Global_Objects/Число/isNaN +tags: + - ECMAScript 2015 + - JavaScript + - Number + - isNaN + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Number.isNaN()</code></strong> визначає, чи є передане значення {{jsxref("NaN")}}, а його типом - {{jsxref("Число", "Number")}}. Це більш надійна версія оригіналу, глобального методу {{jsxref("isNaN", "isNaN()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isnan.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 notranslate"><code>Number.isNaN(<var>value</var>)</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>value</var></code></dt> + <dd>Значення, що перевірятиметься на {{jsxref("NaN")}}.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p><strong>true</strong>, якщо надане значення є {{jsxref("NaN")}}, а його типом - {{jsxref("Число", "Number")}}; інакше, <strong>false</strong>.</p> + +<h2 id="Опис">Опис</h2> + +<p>Через те, що обидва оператори рівності, {{jsxref("Operators/Equality", "==")}} та {{jsxref("Operators/Strict_equality", "===")}}, повертають <code>false</code> при перевірці, чи {{jsxref("NaN")}} <em>дорівнює</em> {{jsxref("NaN")}}, виникла необхідність у функції <code>Number.isNaN()</code>. Ця ситуація відрізняється від усіх інших можливих порівнянь у JavaScript.</p> + +<p>У порівнянні з глобальною функцією {{jsxref("isNaN", "isNaN()")}}, <code>Number.isNaN()</code> не має проблеми з примусовим приведенням параметра до числа. Це означає, що тепер стало безпечно передавати значення, які були б перетворені на {{jsxref("NaN")}}, але, насправді, не є значеннями {{jsxref("NaN")}}. Це також означає, що лише значення числового типу, які також є {{jsxref("NaN")}}, вертають <code>true</code>.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<p>Наступний код працює, тому що NaN є єдиним значенням у JavaScript, яке не дорівнює самому собі.</p> + +<pre class="brush: js notranslate">Number.isNaN = Number.isNaN || function isNaN(input) { + return typeof input === 'number' && input !== input; +} +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_isNaN">Використання isNaN</h3> + +<pre class="brush: js notranslate">Number.isNaN(NaN); // true +Number.isNaN(Number.NaN); // true +Number.isNaN(0 / 0); // true + +// наприклад, це дорівнювало б true у глобальному методі isNaN() +Number.isNaN('NaN'); // false +Number.isNaN(undefined); // false +Number.isNaN({}); // false +Number.isNaN('ляля'); // false + +// Це все вертає false +Number.isNaN(true); +Number.isNaN(null); +Number.isNaN(37); +Number.isNaN('37'); +Number.isNaN('37.37'); +Number.isNaN(''); +Number.isNaN(' '); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<div>{{Compat("javascript.builtins.Number.isNaN")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Число", "Number")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/issafeinteger/index.html b/files/uk/web/javascript/reference/global_objects/число/issafeinteger/index.html new file mode 100644 index 0000000000..8ff3f1fa81 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/issafeinteger/index.html @@ -0,0 +1,95 @@ +--- +title: Number.isSafeInteger() +slug: Web/JavaScript/Reference/Global_Objects/Число/isSafeInteger +tags: + - ECMAScript 2015 + - JavaScript + - Number + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Number.isSafeInteger()</code></strong> визначає, чи є надане значення безпечним цілим числом.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div> + + + +<p>Безпечним цілим числом вважається ціле число, яке</p> + +<ul> + <li>може бути точно відображене як число IEEE-754 подвійної точності, і</li> + <li>чиє відображення IEEE-754 не може бути результатом округлення іншого цілого числа для відповідності відображенню IEEE-754.</li> +</ul> + +<p>Наприклад, <code>2<sup>53</sup> - 1</code> є безпечним цілим числом: воно може бути точно відображене, і жодне інше ціле число не округлюється до нього в будь-якому режимі округлення IEEE-754. Для контрасту, <code>2<sup>53</sup></code> <em>не є</em> безпечним цілим числом: воно може бути точно відображене у IEEE-754, але ціле число <code>2<sup>53</sup> + 1</code> не може бути безпосередньо відображене у IEEE-754, а, натомість, округлюється до <code>2<sup>53</sup></code> під час округлення до найближчого цілого та округлення до меншого за модулем. Безпечні цілі числа включають усі цілі числа від <code>-(2<sup>53</sup> - 1)</code> включно до <code>2<sup>53</sup> - 1</code> включно (± <code>9007199254740991</code> або ± 9,007,199,254,740,991). </p> + +<p>Робота зі значеннями, більшими чи меншими за ~9 квадрільйонів, з повною точністю вимагає використання <a href="https://uk.wikipedia.org/wiki/%D0%94%D0%BE%D0%B2%D0%B3%D0%B0_%D0%B0%D1%80%D0%B8%D1%84%D0%BC%D0%B5%D1%82%D0%B8%D0%BA%D0%B0">бібліотеки для арифметики довільної точності</a>. Дивіться <a href="http://floating-point-gui.de/">Що необхідно знати кожному програмісту про арифметику чисел з рухомою крапкою</a>, щоб дізнатись більше щодо відображення чисел з рухомою крапкою.</p> + +<p>Для більших чисел розгляньте використання типу {{jsxref("BigInt")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code>Number.isSafeInteger(<var>testValue</var>)</code> +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>testValue</code></dt> + <dd>Значення, що перевірятиметься на відповідність безпечному цілому числу.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Значення {{jsxref("Boolean")}}, яке вказує, чи є надане значення безпечним цілим числом.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js notranslate">Number.isSafeInteger = Number.isSafeInteger || function (value) { + return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER; +}; +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_isSafeInteger">Використання isSafeInteger</h3> + +<pre class="brush: js notranslate">Number.isSafeInteger(3); // true +Number.isSafeInteger(Math.pow(2, 53)); // false +Number.isSafeInteger(Math.pow(2, 53) - 1); // true +Number.isSafeInteger(NaN); // false +Number.isSafeInteger(Infinity); // false +Number.isSafeInteger('3'); // false +Number.isSafeInteger(3.1); // false +Number.isSafeInteger(3.0); // true +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</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.Number.isSafeInteger")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Об'єкт {{jsxref("Число", "Number")}}, якому належить цей метод.</li> + <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li> + <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li> + <li>{{jsxref("BigInt")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/max_safe_integer/index.html b/files/uk/web/javascript/reference/global_objects/число/max_safe_integer/index.html new file mode 100644 index 0000000000..c104719e79 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/max_safe_integer/index.html @@ -0,0 +1,78 @@ +--- +title: Number.MAX_SAFE_INTEGER +slug: Web/JavaScript/Reference/Global_Objects/Число/MAX_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Властивість + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +--- +<div>{{JSRef}}</div> + +<p>Стала <strong><code>Number.MAX_SAFE_INTEGER</code></strong> відображає найбільше безпечне ціле числове значення у JavaScript (<code>2<sup>53</sup> - 1</code>).</p> + +<p>Для більших цілих значень використовуйте {{jsxref("BigInt")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div> + +<p class="hidden">Джерело цих інтерактивних прикладів зберігається у репозиторії на GitHub. Якщо ви маєте бажання зробити свій внесок у проект інтерактивних прикладів - будь ласка, зклонуйте репозиторій <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> та пришліть нам pull request.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Стала <code>MAX_SAFE_INTEGER</code> має значення <code>9007199254740991</code> (9,007,199,254,740,991 або ~9 квадриліонів). Причина в тому, що JavaScript використовує <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">формат чисел з рухомою крапкою подвійної точності</a>, як зазначено у <a href="https://uk.wikipedia.org/wiki/IEEE_754">IEEE 754</a>, та може безпечно відображати числа лише в діапазоні між <code>-(2<sup>53</sup> - 1)</code> та <code>2<sup>53</sup> - 1</code>.</p> + +<p>"Безпечний" в даному контексті означає можливість точно відображати та коректно порівнювати цілі числа. Наприклад, <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code> поверне true, що, з математичної точки зору, неправильно. Дивіться більше на сторінці {{jsxref("Number.isSafeInteger()")}}.</p> + +<p>Це поле не існує у старих переглядачах. Його використання без перевірки його наявності, як ось <code>Math.max(Number.MAX_SAFE_INTEGER, 2)</code>, видасть небажаний результат, такий як NaN.</p> + +<p>У зв'язку з тим, що <code>MAX_SAFE_INTEGER</code> є статичною властивістю {{jsxref("Число","Number")}}, слід завжди викликати її як <code>Number.MAX_SAFE_INTEGER</code>, аніж як метод створеного вами об'єкта {{jsxref("Число","Number")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js notranslate">if (!Number.MAX_SAFE_INTEGER) { + Number.MAX_SAFE_INTEGER = 9007199254740991; // Math.pow(2, 53) - 1; +}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Значення_яке_вертає_MAX_SAFE_INTEGER">Значення, яке вертає MAX_SAFE_INTEGER</h3> + +<pre class="brush: js notranslate">Number.MAX_SAFE_INTEGER // 9007199254740991 +</pre> + +<h3 id="Числа_більші_за_безпечне_ціле_значення">Числа, більші за безпечне ціле значення</h3> + +<p>Цей код поверне 2, тому що у числах з плаваючою крапкою значенням є кінцева десяткова "1", за винятком випадків денормалізованих чисел, таких як нуль.</p> + +<pre class="brush: js notranslate">Number.MAX_SAFE_INTEGER * Number.EPSILON; // 2</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</p> + +<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}</li> + <li>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</li> + <li>{{jsxref("BigInt")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/max_value/index.html b/files/uk/web/javascript/reference/global_objects/число/max_value/index.html new file mode 100644 index 0000000000..3280fa0cd8 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/max_value/index.html @@ -0,0 +1,64 @@ +--- +title: Number.MAX_VALUE +slug: Web/JavaScript/Reference/Global_Objects/Число/MAX_VALUE +tags: + - JavaScript + - Number + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>Number.MAX_VALUE</code></strong> відображає максимальне числове значення, доступне для відображення у JavaScript.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Значення властивості <code>MAX_VALUE</code> приблизно дорівнює <code>1.79E+308</code>, або 2<sup>1024</sup>. Значення більші за <code>MAX_VALUE</code>, відображаються як {{jsxref("Infinity")}}.</p> + +<p>Оскільки <code>MAX_VALUE</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.MAX_VALUE</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. </p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_MAX_VALUE">Використання <code>MAX_VALUE</code></h3> + +<p>Наступний код перемножує два числових значення. Якщо результат менший чи дорівнює <code>MAX_VALUE</code>, викликається функція <code>func1</code>; інакше, викликається функція <code>func2</code>.</p> + +<pre class="brush: js notranslate">if (num1 * num2 <= Number.MAX_VALUE) { + func1(); +} else { + func2(); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Number.MAX_VALUE")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.MIN_VALUE")}}</li> + <li>Об'єкт {{jsxref("Число", "Number")}}, до якого належить ця властивість</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/min_safe_integer/index.html b/files/uk/web/javascript/reference/global_objects/число/min_safe_integer/index.html new file mode 100644 index 0000000000..a8e0553753 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/min_safe_integer/index.html @@ -0,0 +1,62 @@ +--- +title: Number.MIN_SAFE_INTEGER +slug: Web/JavaScript/Reference/Global_Objects/Число/MIN_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER +--- +<div>{{JSRef}}</div> + +<p>Константа <strong><code>Number.MIN_SAFE_INTEGER</code></strong> відображає мінімальне безпечне ціле числове значення у JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</p> + +<p>Для відображення менших чисел, використовуйте {{jsxref("BigInt")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Константа <code>MIN_SAFE_INTEGER</code> має значення <code>-9007199254740991</code> (-9,007,199,254,740,991 або близько -9 квадрильйонів). Причина в тому, що JavaScript використовує <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">формат чисел з рухомою крапкою подвійної точності</a>, як зазначено у <a href="https://uk.wikipedia.org/wiki/IEEE_754">IEEE 754</a>, та може безпечно відображати числа лише в діапазоні між <code>-(2<sup>53</sup> - 1)</code> та <code>2<sup>53</sup> - 1</code>. Дивіться більше інформації у {{jsxref("Number.isSafeInteger()")}}.</p> + +<p>Оскільки <code>MIN_SAFE_INTEGER</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.MIN_SAFE_INTEGER</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_MIN_SAFE_INTEGER">Використання MIN_SAFE_INTEGER</h3> + +<pre class="brush: js notranslate">Number.MIN_SAFE_INTEGER // -9007199254740991 +-(Math.pow(2, 53) - 1) // -9007199254740991 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</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.Number.MIN_SAFE_INTEGER")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}</li> + <li>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</li> + <li>{{jsxref("BigInt")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/min_value/index.html b/files/uk/web/javascript/reference/global_objects/число/min_value/index.html new file mode 100644 index 0000000000..83ded3444a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/min_value/index.html @@ -0,0 +1,66 @@ +--- +title: Number.MIN_VALUE +slug: Web/JavaScript/Reference/Global_Objects/Число/MIN_VALUE +tags: + - JavaScript + - Number + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>Number.MIN_VALUE</code></strong> відображає найменше числове значення, доступне для відображення у JavaScript.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-min-value.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Властивість <code>MIN_VALUE</code> - це число, максимально близьке до 0, а не найменше від'ємне значення, яке може відобразити JavaScript.</p> + +<p><code>MIN_VALUE</code> має значення, що приблизно дорівнює <code>5e-324</code>. Значення, менші за <code>MIN_VALUE</code> приводяться до 0 ("зникнення порядку").</p> + +<p>Оскільки <code>MIN_VALUE</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.MIN_VALUE</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_MIN_VALUE">Використання <code>MIN_VALUE</code></h3> + +<p>Наступний код ділить одне числове значення на інше. Якщо результат більший чи дорівнює <code>MIN_VALUE</code>, викликається функція <code>func1</code>; інакше, викликається функція <code>func2</code>.</p> + +<pre class="brush: js notranslate">if (num1 / num2 >= Number.MIN_VALUE) { + func1(); +} else { + func2(); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Number.MIN_VALUE")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.MAX_VALUE")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/nan/index.html b/files/uk/web/javascript/reference/global_objects/число/nan/index.html new file mode 100644 index 0000000000..10ad96c00a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/nan/index.html @@ -0,0 +1,59 @@ +--- +title: Number.NaN +slug: Web/JavaScript/Reference/Global_Objects/Число/NaN +tags: + - JavaScript + - Number + - Властивість +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>Number.NaN</code></strong> відображає "не число" (Not-A-Number). Є еквівалентом {{jsxref("NaN")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-nan.html")}}</div> + +<p>Вам не потрібно створювати об'єкт {{jsxref("Число", "Number")}}, щоб звертатись до статичної властивості (використовуйте <code>Number.NaN</code>).</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перевірка_на_числове_значення">Перевірка на числове значення</h3> + +<pre class="brush: js notranslate">function sanitise(x) { + if (isNaN(x)) { + return Number.NaN; + } + return x; +}</pre> + +<h3 id="Перевірка_на_NaN">Перевірка на NaN</h3> + +<p>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN#Первірка_на_NaN">Перевірку на NaN</a> на сторінці <code>NaN</code>.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</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.Number.NaN")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Глобальна властивість {{jsxref("NaN")}}.</li> + <li>Об'єкт {{jsxref("Число", "Number")}}, якому належить властивість.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/negative_infinity/index.html b/files/uk/web/javascript/reference/global_objects/число/negative_infinity/index.html new file mode 100644 index 0000000000..aeab7dfa10 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/negative_infinity/index.html @@ -0,0 +1,82 @@ +--- +title: Number.NEGATIVE_INFINITY +slug: Web/JavaScript/Reference/Global_Objects/Число/NEGATIVE_INFINITY +tags: + - JavaScript + - Number + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>Number.NEGATIVE_INFINITY</code></strong> відображає значення від'ємної нескінченності.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Значення <code>Number.NEGATIVE_INFINITY</code> є таким самим, як від'ємне значення властивості {{jsxref("Infinity")}} глобального об'єкта.</p> + +<p>Це значення поводиться дещо інакше, ніж математична нескінченність:</p> + +<ul> + <li>Будь-яке позитивне значення, в тому числі {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}} (позитивна нескінченність), помножене на <code>NEGATIVE_INFINITY</code> (від'ємну нескінченність) дорівнює <code>NEGATIVE_INFINITY</code>.</li> + <li>Будь-яке від'ємне значення, в тому числі <code>NEGATIVE_INFINITY</code>, помножене на <code>NEGATIVE_INFINITY</code>, дорівнює {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li> + <li>Будь-яке позитивне значення, розділене на <code>NEGATIVE_INFINITY</code>, дорівнює від'ємному нулю.</li> + <li>Будь-яке від'ємне значення, розділене на <code>NEGATIVE_INFINITY</code>, дорівнює позитивному нулю.</li> + <li>Нуль, помножений на <code>NEGATIVE_INFINITY</code>, дорівнює {{jsxref("NaN")}}.</li> + <li>Значення {{jsxref("NaN")}}, помножене на <code>NEGATIVE_INFINITY</code>, дорівнює {{jsxref("NaN")}}.</li> + <li>Значення <code>NEGATIVE_INFINITY</code>, розділене на будь-яке від'ємне значення, за винятком <code>NEGATIVE_INFINITY</code>, дорівнює {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li> + <li>Значення <code>NEGATIVE_INFINITY</code>, розділене на будь-яке позитивне значення, за винятком {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, дорівнює <code>NEGATIVE_INFINITY</code>.</li> + <li>Значення <code>NEGATIVE_INFINITY</code>, розділене на <code>NEGATIVE_INFINITY</code> чи {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, дорівнює {{jsxref("NaN")}}.</li> +</ul> + +<p>Ви можете скористатись властивістю <code>Number.NEGATIVE_INFINITY</code>, щоб позначити помилку в умові, яка повертає скінченне число у випадку успіху. Зауважте, однак, що метод {{jsxref("isFinite")}} в цьому випадку був би більш доречним.</p> + +<p>Оскільки <code>NEGATIVE_INFINITY</code> є статичною властивістю {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.NEGATIVE_INFINITY</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. </p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_NEGATIVE_INFINITY">Використання <code>NEGATIVE_INFINITY</code></h3> + +<p>У наступному прикладі змінній <code>smallNumber</code> присвоюється значення, яке є меншим за мінімальне. Коли виконується інструкція {{jsxref("Statements/if...else", "if")}}, <code>smallNumber</code> має значення <code>-Infinity</code>, отже <code>smallNumber</code> присвоюється більш кероване значення для продовження.</p> + +<pre class="brush: js notranslate">var smallNumber = (-Number.MAX_VALUE) * 2; + +if (smallNumber === Number.NEGATIVE_INFINITY) { + smallNumber = returnFinite(); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</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.Number.NEGATIVE_INFINITY")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Global_Objects/Infinity", "Infinity")}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/number/index.html b/files/uk/web/javascript/reference/global_objects/число/number/index.html new file mode 100644 index 0000000000..c1dd069e56 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/number/index.html @@ -0,0 +1,63 @@ +--- +title: Number() constructor +slug: Web/JavaScript/Reference/Global_Objects/Число/Number +tags: + - JavaScript + - Number + - Довідка + - Конструктор +translation_of: Web/JavaScript/Reference/Global_Objects/Number/Number +--- +<div>{{JSRef}}</div> + +<p>Конструктор <strong><code>Number()</code> </strong>створює об'єкт {{jsxref("Число", "Number")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js notranslate">new Number(<var>value</var>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>value</var></code></dt> + <dd>Числове значення об'єкта, що створюється.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_обєктів_Number">Створення об'єктів Number</h3> + +<pre class="brush: js notranslate">const a = new Number('123'); // a === 123 дорівнює false +const b = Number('123'); // b === 123 дорівнює true +a instanceof Number; // дорівнює true +b instanceof Number; // дорівнює false</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number-constructor', 'Number constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Number.Number")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>Глобальний об'єкт {{jsxref("Math")}}</li> + <li>Цілі числа з довільною точністю: {{jsxref("BigInt")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/parsefloat/index.html b/files/uk/web/javascript/reference/global_objects/число/parsefloat/index.html new file mode 100644 index 0000000000..81d55dcfc1 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/parsefloat/index.html @@ -0,0 +1,88 @@ +--- +title: Number.parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/Число/parseFloat +tags: + - ECMAScript 2015 + - JavaScript + - Number + - метод + - число +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Метод <strong><code>Number.parseFloat()</code></strong> розбирає аргумент та повертає число з плаваючою крапкою. Якщо число неможливо розібрати з аргумента, повертає {{jsxref("NaN")}}.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</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="notranslate">Number.parseFloat(<var>string</var>)</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>string</var></code></dt> + <dd>Значення, яке треба розібрати. Якщо цей аргумент не є рядком, то він приводиться до рядка за допомогою абстрактної операції <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. {{glossary("whitespace", "Пробільний символ")}} на початку цього аргументу ігнорується.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Число з плаваючою крапкою з наданого рядка <code><var>string</var></code>.</p> + +<p>Або {{jsxref("NaN")}}, коли перший непробільний символ не може бути перетворений на число.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js notranslate">if (Number.parseFloat === undefined) { + Number.parseFloat = parseFloat; +} +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Number.parseFloat_проти_parseFloat">Number.parseFloat проти parseFloat</h3> + +<p>Цей метод має таку саму функціональність, як і глобальна функція {{jsxref("parseFloat", "parseFloat()")}}:</p> + +<pre class="brush: js notranslate">Number.parseFloat === parseFloat; // true +</pre> + +<p>Цей метод також є частиною ECMAScript 2015. (Його метою є модуляризація глобальних елементів.)</p> + +<p>Дивіться більше подробиць та приклади у {{jsxref("parseFloat", "parseFloat()")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікації</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Number.parseFloat")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li> + <dl> + <dt>{{jsxref("Число", "Number")}}</dt> + <dd>Об'єкт, якому належить цей метод.</dd> + </dl> + </li> + <li>Глобальний метод {{jsxref("parseFloat", "parseFloat()")}}.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/parseint/index.html b/files/uk/web/javascript/reference/global_objects/число/parseint/index.html new file mode 100644 index 0000000000..8bb6c28c80 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/parseint/index.html @@ -0,0 +1,83 @@ +--- +title: Number.parseInt() +slug: Web/JavaScript/Reference/Global_Objects/Число/parseInt +tags: + - ECMAScript 2015 + - JavaScript + - Number + - метод +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>Number.parseInt()</code></strong> розбирає рядковий аргумент та повертає ціле число з вказаною основою системи числення.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">Number.parseInt(<var>string,</var>[ <var>radix</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<div> +<dl> + <dt><code><var>string</var></code></dt> + <dd>Значення, яке розбиратиметься. Якщо цей аргумент не є рядком, то він приводиться до рядка за допомогою абстрактної операції <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code>. Пробільний символ на початку цього аргументу ігнорується.</dd> + <dt><code><var>radix</var></code><var> {{optional_inline}}</var></dt> + <dd>Ціле число між <code>2</code> та <code>36</code>, яке вказує <em>основу</em> (в математичних системах числення) значення <code><var>string</var></code>. Будьте обережні — вона <strong><em>не</em></strong> дорівнює за замовчуванням <code>10</code>!</dd> +</dl> +</div> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Ціле число, отримане з наданого рядка <code><var>string</var></code>.</p> + +<p>Якщо значення <code><var>radix</var></code> менше за <code>2</code> чи більше за <code>36</code>, а перший непробільний символ не може бути перетворений на число, повертається {{jsxref("NaN")}}.</p> + +<h2 id="Поліфіл">Поліфіл</h2> + +<pre class="brush: js notranslate">if (Number.parseInt === undefined) { + Number.parseInt = window.parseInt +} +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Number.parseInt_проти_parseInt">Number.parseInt проти parseInt</h3> + +<p>Цей метод має таку саму функціональність, як і глобальна функція {{jsxref("parseInt", "parseInt()")}}:</p> + +<pre class="brush: js notranslate">Number.parseInt === parseInt // true</pre> + +<p>і є частиною ECMAScript 2015 (його метою є модуляризація глобальних елементів). Будь ласка, дивіться більше подробиць та прикладів у {{jsxref("parseInt", "parseInt()")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.builtins.Number.parseInt")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Об'єкт {{jsxref("Число", "Number")}}, якому належить цей метод.</li> + <li>Глобальний метод {{jsxref("parseInt", "parseInt()")}}.</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/positive_infinity/index.html b/files/uk/web/javascript/reference/global_objects/число/positive_infinity/index.html new file mode 100644 index 0000000000..5c22467fb7 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/positive_infinity/index.html @@ -0,0 +1,82 @@ +--- +title: Number.POSITIVE_INFINITY +slug: Web/JavaScript/Reference/Global_Objects/Число/POSITIVE_INFINITY +tags: + - JavaScript + - Number + - Властивість + - Довідка +translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>Number.POSITIVE_INFINITY</code></strong> відображає значення позитивної нескінченності.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Значення <code>Number.POSITIVE_INFINITY</code> є таким самим, як і значення властивості глобального об'єкта {{jsxref("Infinity")}}.</p> + +<p>Це значення поводиться дещо інакше, ніж математична нескінченність:</p> + +<ul> + <li>Будь-яке позитивне значення, в тому числі <code>POSITIVE_INFINITY</code>, помножене на <code>POSITIVE_INFINITY</code> вертає <code>POSITIVE_INFINITY</code>.</li> + <li>Будь-яке від'ємне значення, в тому числі {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, помножене на <code>POSITIVE_INFINITY</code>, вертає {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li> + <li>Будь-яке позитивне число, розділене на <code>POSITIVE_INFINITY</code>, вертає нуль.</li> + <li>Будь-яке від'ємне число, розділене на <code>POSITIVE_INFINITY</code>, вертає від'ємний нуль.</li> + <li>Нуль, помножений на <code>POSITIVE_INFINITY</code>, вертає {{jsxref("NaN")}}.</li> + <li>Значення {{jsxref("Global_Objects/NaN", "NaN")}}, помножене на <code>POSITIVE_INFINITY</code>, вертає {{jsxref("NaN")}}.</li> + <li>Значення <code>POSITIVE_INFINITY</code>, розділене на будь-яке від'ємне значення, окрім {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, вертає {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li> + <li>Значення <code>POSITIVE_INFINITY</code>, розділене на будь-яке позитивне значення, окрім <code>POSITIVE_INFINITY</code>, вертає <code>POSITIVE_INFINITY</code>.</li> + <li>Значення <code>POSITIVE_INFINITY</code>, розділене на {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} чи <code>POSITIVE_INFINITY</code>, вертає {{jsxref("NaN")}}.</li> +</ul> + +<p>Ви можете скористатись властивістю <code>Number.POSITIVE_INFINITY</code>, щоб позначити помилку в умові, яка вертає скінченне число у випадку успіху. Зауважте, однак, що метод {{jsxref("isFinite")}} в цьому випадку більш доречний.</p> + +<p>Оскільки <code>POSITIVE_INFINITY</code> є статичною властивістю об'єкта {{jsxref("Число", "Number")}}, її завжди слід використовувати як <code>Number.POSITIVE_INFINITY</code>, а не як властивість створеного вами об'єкта {{jsxref("Число", "Number")}}. </p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_POSITIVE_INFINITY">Використання <code>POSITIVE_INFINITY</code></h3> + +<p>У наступному прикладі змінній <code>bigNumber</code> присвоюється значення, яке є більшим за максимальне. Коли виконується інструкція {{jsxref("Statements/if...else", "if")}}, <code>bigNumber</code> має значення <code>Infinity</code>, а отже, <code>bigNumber</code> присвоюється більш кероване значення для продовження.</p> + +<pre class="brush: js notranslate">var bigNumber = Number.MAX_VALUE * 2; + +if (bigNumber == Number.POSITIVE_INFINITY) { + bigNumber = returnFinite(); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</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.Number.POSITIVE_INFINITY")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("isFinite", "isFinite()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/prototype/index.html b/files/uk/web/javascript/reference/global_objects/число/prototype/index.html new file mode 100644 index 0000000000..82c904e1ea --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/prototype/index.html @@ -0,0 +1,89 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Число/prototype +tags: + - JavaScript + - Number + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<div>{{JSRef}}</div> + +<p>Властивість <strong><code>Number.prototype</code></strong> являє собою прототип для конструктора класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code>.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Опис">Опис</h2> + +<p>Кожен примірник класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code> успадковує властивості й методи з <code>Number.prototype</code>. Зміни, внесені до прототипа, позначаться на всіх об'єктах, що є примірниками класу <code>{{jsxref("Global_Objects/Number", "Number")}}</code>.</p> + +<h2 id="Властивості">Властивості</h2> + +<dl> + <dt><code>Number.prototype.constructor</code></dt> + <dd>Повертає функцію, що створила цей примірник об'єкта. Типово це об'єкт <code>{{jsxref("Global_Objects/Number", "Number")}}</code>, який водночас є і функцією.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> + <dd>Повертає рядок, що містить експоненціальний запис числа.</dd> + <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> + <dd>Повертає рядок, що містить запис числа у форматі з нерухомою комою.</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> + <dd>Повертає рядок, що містить узалежнений від мови запис числа. Перекриває метод <code>{{jsxref("Object.prototype.toLocaleString()")}}</code>.</dd> + <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> + <dd>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою комою чи експоненціальний.</dd> + <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Повертає рядок, що містить код мовою JavaScript, який створює об'єкт класу {{jsxref("Global_Objects/Number", "Number")}} з відповідним значенням. Цей код можна використати для створення нового об'єкта. Перекриває метод <code>{{jsxref("Object.prototype.toSource()")}}</code>.</dd> + <dt>{{jsxref("Number.prototype.toString()")}}</dt> + <dd>Повертає рядок, що містить числовий запис значення об'єкта в зазначеній системі числення. Перекриває метод <code>{{jsxref("Object.prototype.toString()")}}</code>.</dd> + <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> + <dd>Повертає {{Glossary("Primitive", "просте числове значення")}} об'єкта. Перекриває метод <code>{{jsxref("Object.prototype.valueOf()")}}</code>.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первинне визначення. Реалізовано у JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<p class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Number.prototype")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/Number", "Number")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/toexponential/index.html b/files/uk/web/javascript/reference/global_objects/число/toexponential/index.html new file mode 100644 index 0000000000..9896ee2c95 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/toexponential/index.html @@ -0,0 +1,89 @@ +--- +title: Number.prototype.toExponential() +slug: Web/JavaScript/Reference/Global_Objects/Число/toExponential +tags: + - JavaScript + - Number + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toExponential()</code></strong> повертає рядок, що відображає об'єкт Number в експоненціальному позначенні.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>fractionDigits</code></dt> + <dd>Необов'язковий параметр. Ціле число, яке визначає кількість цифр після десяткової крапки. За замовчуванням використовується стільки цифр, скільки необхідно для відображення числа.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що відображає об'єкт {{jsxref("Число", "Number")}} в експоненційному позначенні, з однією цифрою перед десятковою крапкою, округлене до <code>fractionDigits</code> цифр після крапки. </p> + +<h3 id="Винятки">Винятки</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Якщо значення <code>fractionDigits</code> занадто маленьке або занадто велике. Значення між 0 і 20, включно, не спричинять {{jsxref("RangeError")}}. Також реалізації можуть підтримувати більші та менші значення.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Якщо цей метод викликається на об'єкті, який не є об'єктом {{jsxref("Число", "Number")}}.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Якщо аргумент <code>fractionDigits</code> не вказаний, кількість цифр після десяткової крапки за замовчуванням дорівнює кількості цифр, необхідній для унікального відображення значення.</p> + +<p>Якщо ви використовуєте метод <code>toExponential()</code> на числовому літералі, і цей літерал не має експоненціального показника та десяткової крапки, залиште пробіл(и) перед крапкою, що передує виклику методу, щоб запобігти її інтерпретації як десяткової крапки.</p> + +<p>Якщо число має більше цифр, ніж вимагає параметр <code>fractionDigits</code>, число округлюється до найближчого числа, представленого цифрами <code>fractionDigits</code>. Дивіться приклад округлення в описі методу {{jsxref("Number.prototype.toFixed", "toFixed()")}}, який також застосовується у <code>toExponential()</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toExponential">Використання <code>toExponential</code></h3> + +<pre class="brush: js notranslate">var numObj = 77.1234; + +console.log(numObj.toExponential()); // виводить 7.71234e+1 +console.log(numObj.toExponential(4)); // виводить 7.7123e+1 +console.log(numObj.toExponential(2)); // виводить 7.71e+1 +console.log(77.1234.toExponential()); // виводить 7.71234e+1 +console.log(77 .toExponential()); // виводить 7.7e+1 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</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.Number.toExponential")}}</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/tofixed/index.html b/files/uk/web/javascript/reference/global_objects/число/tofixed/index.html new file mode 100644 index 0000000000..a36e157a44 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/tofixed/index.html @@ -0,0 +1,95 @@ +--- +title: Number.prototype.toFixed() +slug: Web/JavaScript/Reference/Global_Objects/Число/toFixed +tags: + - JavaScript + - Number + - Довідка + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toFixed()</code></strong> форматує число, використовуючи позначення з нерухомою крапкою.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>numObj</var>.toFixed([<var>digits</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>digits</code> {{optional_inline}}</dt> + <dd>Кількість цифр після десяткової крапки; це має бути значення між <code>0</code> та <code>20</code>, включно, а реалізації можуть за бажанням підтримувати ширший діапазон значень. Якщо цей аргумент пропущений, він вважається рівним <code>0</code>.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що відображає надане число у форматі числа з нерухомою крапкою.</p> + +<h3 id="Винятки">Винятки</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Якщо значення <code>digits</code> надто маленьке чи надто велике. Значення між <code>0</code> та <code>100</code>, включно, не спричинять {{jsxref("RangeError")}}. Реалізаціям дозвонено підтримувати більші та менші значення, за вибором.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Якщо цей метод вкликається на об'єкті, який не є об'єктом {{jsxref("Число", "Number")}}.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p><strong><code>toFixed()</code></strong> вертає рядкове представлення об'єкта <code>numObj</code>, яке не використовує експоненціальне позначення і має рівно <code>digits</code> цифр після десяткової позиції. Число округлюється за необхідності, а дробова частина заповнюється нулями, якщо це необхідно для досягнення необхідної довжини. Якщо абсолютне значення <code>numObj</code> більше або дорівнює <code>1e+21</code>, цей метод просто викликає {{jsxref("Number.prototype.toString()")}} та повертає рядок у експоненціальному позначенні.</p> + +<div class="warning"> +<p><strong>Застереження:</strong> Числа з рухомою крапкою не здатні точно відображати усі десяткові числа у двійковому представленні. Це може призвести до неочікуваних результатів, наприклад <code>0.1 + 0.2 === 0.3</code>, що вертає <code>false</code> .</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toFixed">Використання <code>toFixed</code></h3> + +<pre class="brush: js notranslate">let numObj = 12345.6789 + +numObj.toFixed() // Вертає '12346': зверніть увагу на округлення, немає дробової частини +numObj.toFixed(1) // Вертає '12345.7': зверніть увагу на округлення +numObj.toFixed(6) // Вертає '12345.678900': зверніть увагу на додані нулі +(1.23e+20).toFixed(2) // Вертає '123000000000000000000.00' +(1.23e-10).toFixed(2) // Вертає '0.00' +2.34.toFixed(1) // Вертає '2.3' +2.35.toFixed(1) // Вертає '2.4'. Зауважте, округлюється вгору +2.55.toFixed(1) // Вертає '2.5'. Зауважте, округлюється вниз - дивіться застереження вище +-2.34.toFixed(1) // Вертає -2.3 (через пріоритет операторів, від'ємні числові літерали не повертають рядок...) +(-2.34).toFixed(1) // Вертає '-2.3' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</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.Number.toFixed")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/tolocalestring/index.html b/files/uk/web/javascript/reference/global_objects/число/tolocalestring/index.html new file mode 100644 index 0000000000..a65659d7de --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/tolocalestring/index.html @@ -0,0 +1,154 @@ +--- +title: Number.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Число/toLocaleString +tags: + - JavaScript + - Number + - Інтернаціоналізація + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toLocaleString()</code></strong> повертає рядок, що відображає число у відповідності до налаштувань мови.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><em>numObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<p>Аргументи <code>locales</code> та <code>options</code> налаштовують поведінку функції та дозволяють застосункам вказувати мову, чиї правила форматування мають застосовуватись. У тих реалізаціях, які ігнорують аргументи <code>locales</code> та <code>options</code>, локальні налаштування та форма поверненого рядка повністю залежать від реалізації.</p> + +<div>Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/NumberFormat">конструктор <code>Intl.NumberFormat()</code></a>, щоб дізнатись подробиці щодо цих параметрів та їхнього використання.</div> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що відображає число у відповідності до налаштувань мови.</p> + +<h2 id="Швидкодія">Швидкодія</h2> + +<p>При форматуванні великої кількості чисел краще створити об'єкт {{jsxref("NumberFormat")}} та використовувати функцію, надану його властивістю {{jsxref("NumberFormat.format")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toLocaleString">Використання <code>toLocaleString</code></h3> + +<p>При загальному використанні, без зазначення локалі, повертається рядок у мовному форматі, що стоїть за замовчуванням та з початковими параметрами.</p> + +<pre class="brush: js notranslate">var number = 3500; + +console.log(number.toLocaleString()); // Відображає "3,500" у форматі U.S. English +</pre> + +<h3 id="Перевірка_підтримки_аргументів_locales_та_options">Перевірка підтримки аргументів <code>locales</code> та <code>options</code></h3> + +<p>Аргументи <code>locales</code> та <code>options</code> ще не підтримуються в усіх переглядачах. Для перевірки їхньої підтримки у ES5.1 та новіших реалізаціях можна скористатись вимогою, згідно якої недозволені мовні позначення відхиляються з винятком {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p> + +<pre class="brush: js notranslate">function toLocaleStringSupportsLocales() { + var number = 0; + try { + number.toLocaleString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<p>До ES5.1, реалізації не були зобов'язані викидати виняток з помилкою діапазону, якщо <code>toLocaleString</code> викликався з аргументами.</p> + +<p>Перевірка, яка працює в усіх хостах, в тому числі тих, що підтримують ECMA-262 до версії 5.1, полягає в безпосередньому тестуванні функцій, визначених у ECMA-402 як такі, що зобов'язані підтримувати регіональні налаштування для <code>Number.prototype.toLocaleString</code>:</p> + +<pre class="brush: js notranslate">function toLocaleStringSupportsOptions() { + return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function'); +} +</pre> + +<p>Цей код перевіряє наявність глобального об'єкта <code>Intl</code>, перевіряє, що він не дорівнює <code>null</code> та що він має властивість <code>NumberFormat</code>, яка є функцією.</p> + +<h3 id="Використання_locales">Використання <code>locales</code></h3> + +<p>Цей приклад демонструє деякі варіації локалізованих форматів чисел. Щоб отримати формат мови, задіяної в інтерфейсі вашого застосутку, переконайтесь, що вказали цю мову (та, можливо, кілька запасних мов) за допомогою аргументу <code>locales</code>:</p> + +<pre class="brush: js notranslate">var number = 123456.789; + +// В німецькій десятковим роздільником є кома, а крапка розділяє тисячі +console.log(number.toLocaleString('de-DE')); +// → 123.456,789 + +// Арабська у більшості арабськомовних країн використовує <a href="https://uk.wikipedia.org/wiki/%D0%86%D0%BD%D0%B4%D0%BE-%D0%B0%D1%80%D0%B0%D0%B1%D1%81%D1%8C%D0%BA%D0%B0_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F">Індо-арабські</a> цифри +console.log(number.toLocaleString('ar-EG')); +// → ١٢٣٤٥٦٫٧٨٩ + +// Індія використовує роздільники тисячі/лакх/крор +console.log(number.toLocaleString('en-IN')); +// → 1,23,456.789 + +// ключ розширення nu налаштовує систему нумерації, наприклад, китайську десяткову +console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec')); +// → 一二三,四五六.七八九 + +// при запиті мови, яка, можливо, не підтримується, наприклад, +// балійської, додайте запасні мови, в даному випадку це індонезійська +console.log(number.toLocaleString(['ban', 'id'])); +// → 123.456,789</pre> + +<h3 id="Використання_options">Використання <code>options</code></h3> + +<p>Результат методу <code>toLocaleString</code> можна налаштувати за допомогою аргументу <code>options</code>:</p> + +<pre class="brush: js notranslate">var number = 123456.789; + +// налаштування формату валюти +console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); +// → 123.456,79 € + +// японська єна не використовує дробові розряди +console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) +// → ￥123,457 + +// обмежити трьома значущими цифрами +console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); +// → 1,23,000 + +// Використовувати мову системи з параметрами для форматування чисел +var num = 30000.65; +console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})); +// → "30,000.65" де мова системи англійська, або +// → "30.000,65" де мова системи німецька, або +// → "30 000,65" де мова системи французька +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</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.Number.toLocaleString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/toprecision/index.html b/files/uk/web/javascript/reference/global_objects/число/toprecision/index.html new file mode 100644 index 0000000000..3c0ecefc4a --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/toprecision/index.html @@ -0,0 +1,88 @@ +--- +title: Number.prototype.toPrecision() +slug: Web/JavaScript/Reference/Global_Objects/Число/toPrecision +tags: + - JavaScript + - Number + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toPrecision()</code></strong> вертає рядкове відображення об'єкта {{jsxref("Число", "Number")}} з вказаною точністю.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>numObj</var>.toPrecision([<var>precision</var>])</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>precision</code> {{optional_inline}}</dt> + <dd>Ціле число, що вказує кількість значущих цифр.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Рядок, що відображає об'єкт {{jsxref("Число", "Number")}} у форматі з нерухомою крапкою або експоненціальному форматі, округлений до кількості значущих цифр <code>precision</code>. Дивіться обговорення округлення у описі методу {{jsxref("Number.prototype.toFixed()")}}, яке також застосовується в методі <code>toPrecision()</code>.</p> + +<p>Якщо аргумент <code>precision</code> не вказаний, метод поводиться як {{jsxref("Number.prototype.toString()")}}. Якщо аргумент <code>precision</code> не є цілочисельним значенням, воно округлюється до найближчого цілого числа.</p> + +<h3 id="Винятки">Винятки</h3> + +<dl> + <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt> + <dd>Якщо значення <code>precision</code> не знаходиться в діапазоні між <code>1</code> та <code>100</code> (включно), викидається {{jsxref("RangeError")}}. Реалізаціям дозволено підтримувати також більші та менші значення. ECMA-262 лише вимагає точності до 21 значущої цифри.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toPrecision">Використання <code>toPrecision</code></h3> + +<pre class="brush: js notranslate">let numObj = 5.123456 + +console.log(numObj.toPrecision()) // виводить '5.123456' +console.log(numObj.toPrecision(5)) // виводить '5.1235' +console.log(numObj.toPrecision(2)) // виводить '5.1' +console.log(numObj.toPrecision(1)) // виводить '5' + +numObj = 0.000123 + +console.log(numObj.toPrecision()) // виводить '0.000123' +console.log(numObj.toPrecision(5)) // виводить '0.00012300' +console.log(numObj.toPrecision(2)) // виводить '0.00012' +console.log(numObj.toPrecision(1)) // виводить '0.0001' + +// зауважте, що в деяких обставинах може повернутись експоненціальний запис +console.log((1234.5).toPrecision(2)) // виводить '1.2e+3' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</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.Number.toPrecision")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/tosource/index.html b/files/uk/web/javascript/reference/global_objects/число/tosource/index.html new file mode 100644 index 0000000000..55a86a9972 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/tosource/index.html @@ -0,0 +1,54 @@ +--- +title: Number.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Число/toSource +tags: + - JavaScript + - Number + - застарілий + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>Метод <strong><code>toSource()</code></strong> вертає рядкове представлення першокоду об'єкта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>numObj</var>.toSource() +Number.toSource()</pre> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Рядкове представлення першокоду об'єкта.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вбудована_функція">Вбудована функція</h3> + +<p>Для вбудованого об'єкта {{jsxref("Число", "Number")}}, <code>toSource()</code> вертає наступний рядок, який вказує, що першокод недоступний:</p> + +<pre class="brush: js notranslate">function Number() { + [native code] +} +</pre> + +<p>Для екземплярів {{jsxref("Число", "Number")}}, <code>toSource()</code> вертає рядкове представлення першокоду.</p> + +<p>Цей метод зазвичай викликається внутрішньо у JavaScript, а не явно у коді.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Не є частиною жодного стандарту.</p> + +<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.Number.toSource")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/tostring/index.html b/files/uk/web/javascript/reference/global_objects/число/tostring/index.html new file mode 100644 index 0000000000..dcd4d82bb0 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/tostring/index.html @@ -0,0 +1,97 @@ +--- +title: Number.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Число/toString +tags: + - JavaScript + - Number + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>toString()</code></strong> вертає рядкове представлення вказаного об'єкта {{jsxref("Число", "Number")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-tostring.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>radix</code></dt> + <dd>Необов'язковий. Ціле число в діапазоні від <code>2</code> до <code>36</code>, яке вказує основу системи числення для відображення чисел.</dd> +</dl> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Рядкове представлення вказаного об'єкта {{jsxref("Число", "Number")}}.</p> + +<h3 id="Винятки">Винятки</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Якщо методу <code>toString()</code> надано основу, меншу за <code>2</code> чи більшу за <code>36</code>, викидається {{jsxref("RangeError")}}.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Об'єкт {{jsxref("Число", "Number")}} заміщує метод <code>toString()</code> об'єкта {{jsxref("Object")}}. (Він <em>не</em> успадковує {{jsxref("Object.prototype.toString()")}}). Для об'єктів {{jsxref("Число", "Number")}}, метод <code>toString()</code> вертає рядкове представлення об'єкта у вказаній системі числення.</p> + +<p>Метод <code>toString()</code> розбирає перший аргумент та намагається повернути рядкове представлення числа з вказаною основою <em>radix</em>. Для основ, більших за <code>10</code>, літери алфавіту вказують числа, більші за 9. Наприклад, для шістнадцяткових чисел (основа 16) використовуються літери від <code>a</code> до <code>f</code>.</p> + +<p>Якщо аргумент <code>radix</code> не вказаний, основа вважається рівною <code>10</code>.</p> + +<p>Якщо значення <code>numObj</code> від'ємне, знак зберігається. Це відбувається, навіть якщо основа дорівнює <code>2</code>; повернений рядок - це додатне двійкове представлення числа <code>numObj</code> зі знаком <code>-</code> попереду, а <strong>не</strong> <code>numObj</code> у форматі доповняльного коду.</p> + +<p>Якщо <code>numObj</code> не є цілим числом, знак 'крапка' використовується для відділення десяткових знаків.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_toString">Використання <code>toString</code></h3> + +<pre class="brush: js notranslate">let count = 10 + +console.log(count.toString()) // виводить '10' +console.log((17).toString()) // виводить '17' +console.log((17.2).toString()) // виводить '17.2' + +let x = 6 + +console.log(x.toString(2)) // виводить '110' +console.log((254).toString(16)) // виводить 'fe' + +console.log((-10).toString(2)) // виводить '-1010' +console.log((-0xff).toString(2)) // виводить '-11111111' +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</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.Number.toString")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/global_objects/число/valueof/index.html b/files/uk/web/javascript/reference/global_objects/число/valueof/index.html new file mode 100644 index 0000000000..9ec495bfa3 --- /dev/null +++ b/files/uk/web/javascript/reference/global_objects/число/valueof/index.html @@ -0,0 +1,67 @@ +--- +title: Number.prototype.valueOf() +slug: Web/JavaScript/Reference/Global_Objects/Число/valueOf +tags: + - JavaScript + - Number + - Довідка + - метод + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf +--- +<div>{{JSRef}}</div> + +<p>Метод <strong><code>valueOf()</code></strong> вертає загорнуте примітивне значення об'єкта {{jsxref("Число", "Number")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>numObj</var>.valueOf()</pre> + +<h3 id="Значення_що_вертається">Значення, що вертається</h3> + +<p>Число, яке відображає примітивне значення вказаного об'єкта {{jsxref("Число", "Number")}}.</p> + +<h2 id="Опис">Опис</h2> + +<p>Цей метод, зазвичай, викликається внутрішньо у JavaScript, а не явно у коді.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_valueOf">Використання <code>valueOf</code></h3> + +<pre class="brush: js notranslate">let numObj = new Number(10) +console.log(typeof numObj) // object + +let num = numObj.valueOf() +console.log(num) // 10 +console.log(typeof num) // number +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</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.Number.valueOf")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Number.prototype.toSource()")}}</li> +</ul> |