1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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>
|
