aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/template_strings/index.html
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
commit68fc8e96a9629e73469ed457abd955e548ec670c (patch)
tree8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/web/javascript/reference/template_strings/index.html
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip
unslug pt-br: move
Diffstat (limited to 'files/pt-br/web/javascript/reference/template_strings/index.html')
-rw-r--r--files/pt-br/web/javascript/reference/template_strings/index.html140
1 files changed, 0 insertions, 140 deletions
diff --git a/files/pt-br/web/javascript/reference/template_strings/index.html b/files/pt-br/web/javascript/reference/template_strings/index.html
deleted file mode 100644
index e2a11abfa4..0000000000
--- a/files/pt-br/web/javascript/reference/template_strings/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: Template strings
-slug: Web/JavaScript/Reference/template_strings
-translation_of: Web/JavaScript/Reference/Template_literals
----
-<div>{{JsSidebar("More")}}</div>
-
-<p><em>Template </em><span style="color: #57606f;">Strings</span> são <em>string</em>s que permitem expressões embutidas. Você pode <em>utilizar string</em> multi-linhas e interpolação de <em>string </em>com elas.</p>
-
-<p>Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.</p>
-
-<h2 id="Syntax" name="Syntax">Sintaxe</h2>
-
-<pre class="syntaxbox notranslate">`corpo de texto`
-
-`texto linha 1
- texto linha 2`
-
-`texto string ${expression} texto string`
-
-tag `texto string ${expression} texto string`
-</pre>
-
-<h2 id="Descrição">Descrição</h2>
-
-<p><em>Template strings</em> são envolvidas por (<a href="https://pt.wikipedia.org/wiki/Acento_grave">acentos graves</a>) (` `) em vez de aspas simples ou duplas. <em>Template strings</em> podem possuir <em>placeholders</em>. Estes são indicados por um cifrão seguido de chaves (<code>${expression}</code>). As expressões nos <em>placeholders</em>, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em uma <em>string</em> única. Se existir uma expressão precedendo a <em>template string</em> (função <code>tag</code> exemplo), a <em>template string </em>é definida como "<em>tagged template string</em>". No caso, a expressão <em>tag</em> (geralmente uma função) é chamada pela <em>template string</em> processada, que você pode manipular antes de produzir o resultado.</p>
-
-<pre class="brush: js notranslate">`\`` === '`' // --&gt; true</pre>
-
-<h3 id="Strings_multi-linhas">Strings multi-linhas</h3>
-
-<p>Qualquer caracter de nova linha inserido no código é parte da <em>template string</em>. Utilizando <em>strings</em> normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:</p>
-
-<pre class="brush: js notranslate">console.log('texto string linha 1\n' +
-'texto string linha 2');
-// "texto string linha 1
-// texto string linha 2"</pre>
-
-<p>Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:</p>
-
-<pre class="brush: js notranslate">console.log(`texto string linha 1
-texto string linha 2`);
-// "texto string linha 1
-// texto string linha 2"</pre>
-
-<h3 id="Interpolação_de_Expressões">Interpolação de Expressões</h3>
-
-<p>Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:</p>
-
-<pre class="brush: js notranslate">var a = 5;
-var b = 10;
-console.log('Quinze é ' + (a + b) + ' e\nnão ' + (2 * a + b) + '.');
-// "Quinze é 15 e
-// não 20."</pre>
-
-<p>Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:</p>
-
-<pre class="brush: js notranslate">var a = 5;
-var b = 10;
-console.log(`Quinze é ${a + b} e
-não ${2 * a + b}.`);
-// "Quinze é 15 e
-// não 20."</pre>
-
-<h3 id="Tagged_template_strings">Tagged template strings</h3>
-
-<p>Uma forma mais avançada dos <em>template string</em> são os <em>template strings</em> com marcações ou tags, ou <em>tagged template strings</em>. Com eles, você tem a possibilidade de modificar a saída dos <em>template strings</em> usando uma função. O primeiro argumento contém um array de literais ("Hello" e "World" neste exemplo). Do segundo em diante e cada argumento subsequente contém valores previamente processados (algumas vezes chamados <em>cooked</em>) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:</p>
-
-<pre class="brush: js notranslate">var a = 5;
-var b = 10;
-
-function tag(strings, ...values) {
- console.log(strings[0]); // "Hello "
- console.log(strings[1]); // " world"
- console.log(values[0]); // 15
- console.log(values[1]); // 50
-
- return "Bazinga!";
-}
-
-tag`Hello ${ a + b } world ${ a * b}`;
-// "Bazinga!"
-</pre>
-
-<h3 id="Strings_Raw">Strings <em>Raw</em></h3>
-
-<p>A propriedade especial <code>raw</code>, disponível no primeiro argumento da função da <em>tagged template string</em> acima, permite o acesso as strings de maneira pura (<em>raw</em>) exatamente como elas foram especificadas:</p>
-
-<pre class="brush: js notranslate">function tag(strings, ...values) {
- return strings.raw[0];
-}
-
-tag`string text line 1 \n string text line 2`;
-// "string text line 1 \\n string text line 2"
-</pre>
-
-<p>Adicionalmente, o método {{jsxref("String.raw()")}} permite a criação de strings cruas, exatamente como as <em>template functions</em> e as concatenações deveram criar.</p>
-
-<pre class="brush: js notranslate">String.raw`Hi\n${2+3}!`; // "Hi\\n5!"</pre>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th scope="col">Especificação</th>
- <th scope="col">Status</th>
- <th scope="col">Comentário</th>
- </tr>
- <tr>
- <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td>
- <td>{{Spec2('ES2015')}}</td>
- <td>Definição inicial. Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
- </tr>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
- <td>{{Spec2('ESDraft')}}</td>
- <td>Definido em várias seções da especificação: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibidade_com_navegadores">Compatibidade com navegadores</h2>
-
-<div>
-<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div>
-
-<p>{{Compat("javascript.grammar.template_literals")}}</p>
-</div>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{jsxref("String")}}</li>
- <li>{{jsxref("String.raw()")}}</li>
- <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar">Gramática léxica</a></li>
- <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li>
- <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in Depth: Template strings" on hacks.mozilla.org</a></li>
- <li><a href="https://styled-components.com/">https://styled-components.com/</a></li>
-</ul>