initial commit

1 files changed, 259 insertions, 0 deletions

diff --git a/files/uk/web/javascript/reference/template_literals/index.html b/files/uk/web/javascript/reference/template_literals/index.html
new file mode 100644
index 0000000000..fcd2c3adab
--- /dev/null
+++ b/files/uk/web/javascript/reference/template_literals/index.html
@@ -0,0 +1,259 @@
+---
+title: Шаблонні літерали (шаблонні рядки)
+slug: Web/JavaScript/Reference/Template_literals
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - String
+  - Посібник
+  - рядок
+  - шаблонні літерали
+  - шаблонні рядки
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p><span class="seoSummary">Шаблонні літерали - це рядкові літерали, які дозволяють використання вбудованих виразів. З ними ви можете використовувати багаторядковий запис та засоби інтерполяції рядків. </span></p>
+
+<p>У попередніх версіях специфікації ES2015 вони називались "шаблонними рядками".</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">`текстовий рядок`
+
+`текстовий рядок 1
+ текстовий рядок 2`
+
+`текст ${<var>вираз</var>} текст`
+
+<var>тег</var>`текст ${<var>вираз</var>} текст`
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Шаблонні літерали заключаються у зворотні лапки (` `) (<a href="https://uk.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D0%B2%D1%96%D1%81_(%D0%B4%D1%96%D0%B0%D0%BA%D1%80%D0%B8%D1%82%D0%B8%D1%87%D0%BD%D0%B8%D0%B9_%D0%B7%D0%BD%D0%B0%D0%BA)">гравіс</a>) замість подвійних чи одинарних лапок.</p>
+
+<p>Шаблонні літерали можуть містити заповнювачі. Вони позначаються знаком долара та фігурними дужками (<code>${вираз}</code>). Вирази у заповнювачах та текст між зворотними лапками (` `) передаються у функцію.</p>
+
+<p>Проста функція просто з'єднує декілька частин у єдиний рядок. Якщо перед шаблоном знаходиться вираз (<code>тег</code>), він називається <dfn><em>тегованим шаблоном</em></dfn>. У цьому випадку вираз тегу (зазвичай, це функція) викликається разом із шаблонним літералом, і ви можете маніпулювати ним перед поверненням.</p>
+
+<p>Щоб екранувати зворотні лапки у шаблонному літералі, поставте зворотній слеш (<code>\</code>)<strong> </strong>перед лапками.</p>
+
+<pre class="brush: js">`\`` === '`' // --&gt; true</pre>
+
+<h3 id="Багаторядковий_запис">Багаторядковий запис</h3>
+
+<p>Будь-які символи нового рядка, вставлені у першокод, є частиною шаблонного літералу.</p>
+
+<p>У звичайних рядках вам довелося б використати наступний синтаксис, щоб отримати багаторядковий запис:</p>
+
+<pre class="brush: js">console.log('текстовий рядок 1\n' +
+'текстовий рядок 2');
+// "текстовий рядок 1
+// текстовий рядок 2"</pre>
+
+<p>У шаблонних літералах ви можете зробити те саме ось так:</p>
+
+<pre class="brush: js">console.log(`текстовий рядок 1
+текстовий рядок 2`);
+// "текстовий рядок 1
+// текстовий рядок 2"</pre>
+
+<h3 id="Інтерполяція_виразів">Інтерполяція виразів</h3>
+
+<p>Для того, щоб вставити вирази у звичайні рядки, ви б використали наступний синтаксис:</p>
+
+<pre class="brush: js">let a = 5;
+let b = 10;
+console.log('П\'ятнадцять - це ' + (a + b) + ', а\nне ' + (2 * a + b) + '.');
+// "П'ятнадцять - це 15, а
+// не 20."</pre>
+
+<p>Тепер, з шаблонними літералами, ви можете скористатись синтаксичним цукром, зробивши підстановки легшими для читання наступним чином:</p>
+
+<pre class="brush: js">let a = 5;
+let b = 10;
+console.log(`П'ятнадцять - це ${a + b}, а
+не ${2 * a + b}.`);
+// "П'ятнадцять - це 15, а
+// не 20."</pre>
+
+<h3 id="Вкладені_шаблони">Вкладені шаблони</h3>
+
+<p>У певних випадках вкладений шаблон - це найкращий (і, мабуть, найлегший для читання) спосіб створювати рядки, що конфігуруються. Всередині шаблона у зворотних лапках легко створити внутрішні зворотні лапки, просто використавши їх всередині заповнювача <code>${ }</code> у шаблоні.</p>
+
+<p>Наприклад, якщо умова a дорівнює <code>true</code>, то повернути цей шаблонований літерал.</p>
+
+<p>У ES5:</p>
+
+<pre class="brush: js">let classes = 'header';
+classes += (isLargeScreen() ?
+  '' : item.isCollapsed ?
+    ' icon-expander' : ' icon-collapser');
+</pre>
+
+<p>У ES2015 з шаблонними літералами та без вкладення:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre>
+
+<p>У ES2015 з вкладеними шаблонними літералами:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</pre>
+
+<h3 id="Теговані_шаблони">Теговані шаблони</h3>
+
+<p>Більш прогресивною формою шаблонних літералів є <em>теговані</em> шаблони.</p>
+
+<p>Теги дозволяють розбирати шаблонні літерали за допомого функцій. Перший аргумент функції-тегу містить масив рядкових значень. Решта аргументів відносяться до виразів.</p>
+
+<p>Далі функція-тег може виконати будь-які операції над цими аргументами та повернути отриманий рядок. (Як варіант, вона може повернути щось зовсім інше, як описано у одному з наступних прикладів.) </p>
+
+<p>Ім'я функції, що використовується для тегу, може бути яким завгодно.</p>
+
+<pre class="brush: js">let person = 'Майк';
+let age = 28;
+
+function myTag(strings, personExp, ageExp) {
+  let str0 = strings[0]; // "Цей "
+  let str1 = strings[1]; // " - "
+
+  // Технічно, існує рядок після
+  // останнього виразу (в нашому прикладі),
+  // але він порожній (""), тому не зважаємо.
+  // let str2 = strings[2];
+
+  let ageStr;
+  if (ageExp &gt; 99){
+    ageStr = 'довгожитель';
+  } else {
+    ageStr = 'юнак';
+  }
+
+  // Ми навіть можемо повернути рядок, побудований шаблонним літералом
+  return `${str0}${personExp}${str1}${ageStr}`;
+}
+
+let output = myTag`Цей ${ person } - ${ age }`;
+
+console.log(output);
+// Цей Майк - юнак</pre>
+
+<p>Функція-тег може навіть не повертати рядок!</p>
+
+<pre class="brush: js">function template(strings, ...keys) {
+  return (function(...values) {
+    let dict = values[values.length - 1] || {};
+    let result = [strings[0]];
+    keys.forEach(function(key, i) {
+      let value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+let t1Closure = template`${0}${1}${0}!`;
+t1Closure('Й', 'О');                      // "ЙОЙ!"
+let t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Всім', {foo: 'привіт'});       // "Всім привіт!"
+</pre>
+
+<h3 id="Сирі_рядки">Сирі рядки</h3>
+
+<p>Спеціальна властивість <code>raw</code>, доступна на першому аргументі функції-тегу, дає доступ до сирих рядків у тому вигляді, як вони були записані, без обробки <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Використання_спеціальних_символів_у_рядках">екранувань</a>.</p>
+
+<pre class="brush: js">function tag(strings) {
+  console.log(strings.raw[0]);
+}
+
+tag`текстовий рядок 1 \n текстовий рядок 2`;
+// виводить "текстовий рядок 1 \n текстовий рядок 2" ,
+// в тому числі два символи, '\' та 'n'
+</pre>
+
+<p>На додачу, існує метод {{jsxref("String.raw()")}} для створення сирих рядків — так само, як їх би створили проста шаблонна функція та об'єднання рядків.</p>
+
+<pre class="brush: js">let str = String.raw`Привіт\n${2+3}!`;
+// "Привіт\n5!"
+
+str.length;
+// 10
+
+Array.from(str).join(',');
+// "П,р,и,в,і,т,\,n,5,!"
+</pre>
+
+<h3 id="Теговані_шаблони_та_екрановані_послідовності">Теговані шаблони та екрановані послідовності</h3>
+
+<h4 id="Поведінка_в_ES2016">Поведінка в ES2016</h4>
+
+<p>У ECMAScript 2016 теговані шаблони відповідають правилам наступних екранованих послідовностей:</p>
+
+<ul>
+ <li>Послідовності Юнікоду починаються з "<code>\u</code>", наприклад, <code>\u00A9</code></li>
+ <li>Екранування кодів символів Юнікоду позначаються через "<code>\u{}</code>", наприклад, <code>\u{2F804}</code></li>
+ <li>Шістнадцяткові послідовності починаються з "<code>\x</code>", наприклад, <code>\xA9</code></li>
+ <li>Вісімкові літеральні послідовності починаються з "<code>\0o</code>", далі йде одна чи більше цифр, наприклад, <code>\0o251</code></li>
+</ul>
+
+<p>Це означає, що тегований шаблон, наведений нижче, є проблематичним, оскільки, згідно з граматикою ECMAScript, синтаксичний аналізатор шукає коректну екрановану послідовність Юнікоду, але знаходить неправильно сформований синтаксис:</p>
+
+<pre class="brush: js">latex`\unicode`
+// Викидає помилку у старших версіях ECMAScript (ES2016 та старші)
+// SyntaxError: malformed Unicode character escape sequence</pre>
+
+<h4 id="Перегляд_недозволених_екранованих_послідовностей_у_ES2018">Перегляд недозволених екранованих послідовностей у ES2018</h4>
+
+<p>Теговані шаблони повинні дозволяти вкладені мови (наприклад, <a href="https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%B5%D0%B4%D0%BC%D0%B5%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D1%96%D1%94%D0%BD%D1%82%D0%BE%D0%B2%D0%B0%D0%BD%D0%B0_%D0%BC%D0%BE%D0%B2%D0%B0_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">DSL</a> чи <a href="https://uk.wikipedia.org/wiki/LaTeX">LaTeX</a>), де існують інші екрановані послідовності. Пропозиція ECMAScript <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> (Стадія 4, має бути інтегрована у стандарт ECMAScript 2018) прибирає обмеження синтаксису екранованих послідовностей ECMAScript з тегованих шаблонів.</p>
+
+<p>Однак, недозволені екрановані послідовності все одно мають бути представлені у “готовому” представленні. Вони з'являться як елемент {{jsxref("undefined")}} у масиві “cooked” (готовий):</p>
+
+<pre class="brush: js">function latex(str) {
+  return { "cooked": str[0], "raw": str.raw[0] }
+}
+
+latex`\unicode`
+
+// { cooked: undefined, raw: "\\unicode" }</pre>
+
+<p>Зауважте, що обмеження екранованих послідовностей прибираються лише з <em>тегованих</em> шаблонів, вони не прибираються з <em>нетегованих</em> шаблонних літералів:</p>
+
+<pre class="brush: js example-bad">let bad = `погана екранована послідовність: \unicode`;</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-tagged-templates', 'Tagged templates Literals')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.grammar.template_literals")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">Лексична граматика</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Подібні до шаблонів рядки у сумісному з ES3 синтаксисі</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 в подробицях: Шаблонні рядки" на hacks.mozilla.org</a></li>
+</ul>