diff options
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, 140 insertions, 0 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 new file mode 100644 index 0000000000..e2a11abfa4 --- /dev/null +++ b/files/pt-br/web/javascript/reference/template_strings/index.html @@ -0,0 +1,140 @@ +--- +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> |