diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
commit | 68fc8e96a9629e73469ed457abd955e548ec670c (patch) | |
tree | 8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/web/javascript/reference/template_strings/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-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.html | 140 |
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">`\`` === '`' // --> 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> |