From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../reference/template_literals/index.html | 140 +++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 files/pt-br/web/javascript/reference/template_literals/index.html (limited to 'files/pt-br/web/javascript/reference/template_literals') diff --git a/files/pt-br/web/javascript/reference/template_literals/index.html b/files/pt-br/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..e2a11abfa4 --- /dev/null +++ b/files/pt-br/web/javascript/reference/template_literals/index.html @@ -0,0 +1,140 @@ +--- +title: Template strings +slug: Web/JavaScript/Reference/template_strings +translation_of: Web/JavaScript/Reference/Template_literals +--- +
{{JsSidebar("More")}}
+ +

Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas.

+ +

Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

+ +

Sintaxe

+ +
`corpo de texto`
+
+`texto linha 1
+ texto linha 2`
+
+`texto string ${expression} texto string`
+
+tag `texto string ${expression} texto string`
+
+ +

Descrição

+ +

Template strings são envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves (${expression}). As expressões nos placeholders, 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 string única. Se existir uma expressão precedendo a template string (função tag exemplo), a template string é definida como "tagged template string". No caso, a expressão tag (geralmente uma função) é chamada pela template string processada, que você pode manipular antes de produzir o resultado.

+ +
`\`` === '`' // --> true
+ +

Strings multi-linhas

+ +

Qualquer caracter de nova linha inserido no código é parte da template string. Utilizando strings normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:

+ +
console.log('texto string linha 1\n' +
+'texto string linha 2');
+// "texto string linha 1
+// texto string linha 2"
+ +

Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:

+ +
console.log(`texto string linha 1
+texto string linha 2`);
+// "texto string linha 1
+//  texto string linha 2"
+ +

Interpolação de Expressões

+ +

Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:

+ +
var a = 5;
+var b = 10;
+console.log('Quinze é ' + (a + b) + ' e\nnão ' + (2 * a + b) + '.');
+// "Quinze é 15 e
+// não 20."
+ +

Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:

+ +
var a = 5;
+var b = 10;
+console.log(`Quinze é ${a + b} e
+não ${2 * a + b}.`);
+// "Quinze é 15 e
+// não 20."
+ +

Tagged template strings

+ +

Uma forma mais avançada dos template string são os template strings com marcações ou tags, ou tagged template strings. Com eles, você tem a possibilidade de modificar a saída dos template strings 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 cooked) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:

+ +
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!"
+
+ +

Strings Raw

+ +

A propriedade especial raw, disponível no primeiro argumento da função da tagged template string acima, permite o acesso as strings de maneira pura (raw) exatamente como elas foram especificadas:

+ +
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"
+
+ +

Adicionalmente, o método {{jsxref("String.raw()")}} permite a criação de strings cruas, exatamente como as template functions e as concatenações deveram criar.

+ +
String.raw`Hi\n${2+3}!`; // "Hi\\n5!"
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES2015')}}Definição inicial. Definido em várias seções da especificação: Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Definido em várias seções da especificação: Template Literals, Tagged Templates
+ +

Compatibidade com navegadores

+ +
+ + +

{{Compat("javascript.grammar.template_literals")}}

+
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf