aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/javascript/reference/template_literals
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/uk/web/javascript/reference/template_literals
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/uk/web/javascript/reference/template_literals')
-rw-r--r--files/uk/web/javascript/reference/template_literals/index.html259
1 files changed, 0 insertions, 259 deletions
diff --git a/files/uk/web/javascript/reference/template_literals/index.html b/files/uk/web/javascript/reference/template_literals/index.html
deleted file mode 100644
index fcd2c3adab..0000000000
--- a/files/uk/web/javascript/reference/template_literals/index.html
+++ /dev/null
@@ -1,259 +0,0 @@
----
-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>