Uso do caractere backtick (`) em JavaScript

Em JavaScript, um backtick ^† parece funcionar da mesma forma que uma aspas simples. Por exemplo, eu posso usar um backtick para definir uma string como esta:

var s = `abc`;

Existe uma maneira pela qual o comportamento do backtick realmente difere do de uma única citação?

^{† Observe que entre os programadores, "backtick" é um nome para o que geralmente é chamado de sotaque grave . Às vezes, os programadores também usam os nomes alternativos "backquote" e "backgrave". Além disso, no Stack Overflow e em outros lugares, outras grafias comuns para "backtick" são "back-tick" e "back tick".}

Esse é um recurso chamado literal de modelo .

Eles foram chamados de "cadeias de modelos" em edições anteriores da especificação do ECMAScript 2015.

Os literais de modelo são suportados pelo Firefox 34, Chrome 41 e Edge 12 e superior, mas não pelo Internet Explorer.

• Exemplos: http://tc39wiki.calculist.org/es6/template-strings/
• Especificação oficial: ECMAScript 2015 Language Specification, 12.2.9 Componentes lexicais literais do modelo (um pouco seco)

Literais de modelo podem ser usados ​​para representar cadeias de linhas múltiplas e podem usar "interpolação" para inserir variáveis:

var a = 123, str = `---
   a is: ${a}
---`;
console.log(str);

Resultado:

---
   a is: 123
---

O que é mais importante, eles podem conter não apenas um nome de variável, mas qualquer expressão JavaScript:

var a = 3, b = 3.1415;

console.log(`PI is nearly ${Math.max(a, b)}`);

O ECMAScript 6 apresenta um novo tipo de literal de cadeia de caracteres, usando o backtick como delimitador. Esses literais permitem que expressões básicas de interpolação de cadeia sejam incorporadas, que são então analisadas e avaliadas automaticamente.

let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };

let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
  "<p>I am " + person.age + " old</p>\n" +
  "<strong>\"" + person.greeting + "\" is what I usually say</strong>";

let newHtmlStr =
 `<p>My name is ${person.name},</p>
  <p>I am ${person.age} old</p>
  <p>"${person.greeting}" is what I usually say</strong>`;

console.log(usualHtmlStr);
console.log(newHtmlStr);

Como você pode ver, usamos `uma série de caracteres, que são interpretados como uma cadeia de caracteres literal, mas qualquer expressão do formulário ${..}é analisada e avaliada imediatamente em linha.

Um benefício muito bom dos literais de string interpolados é que eles podem se dividir em várias linhas:

var Actor = {"name": "RajiniKanth"};

var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!

Expressões interpoladas

É permitido que qualquer expressão válida apareça dentro ${..}de um literal de seqüência de caracteres interpolado, incluindo chamadas de função, chamadas de expressão de função em linha e até mesmo outros literais de seqüência de caracteres interpolados!

function upper(s) {
  return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!

Aqui, o `${who}s`literal interno da string interpolada foi uma conveniência um pouco melhor para nós quando combinamos a whovariável com a "s"string, em oposição a who + "s". Além disso, para manter uma nota, uma string interpolada literalmente tem um escopo lexicamente onde aparece, sem um escopo dinâmico de forma alguma:

function foo(str) {
  var name = "foo";
  console.log(str);
}
function bar() {
  var name = "bar";
  foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"

Usar o literal do modelo para o HTML é definitivamente mais legível, reduzindo o aborrecimento.

A maneira antiga e simples:

'<div class="' + className + '">' +
  '<p>' + content + '</p>' +
  '<a href="' + link + '">Let\'s go</a>'
'</div>';

Com o ECMAScript 6:

`<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>`

• Sua string pode abranger várias linhas.
• Você não precisa escapar de caracteres de cotação.
• Você pode evitar agrupamentos como: '">'
• Você não precisa usar o operador mais.

Literais de modelo com a tag

Também podemos marcar uma sequência de modelo, quando uma sequência de modelo é marcada, os literais e substituições são passados ​​para a função que retorna o valor resultante.

function myTaggedLiteral(strings) {
  console.log(strings);
}

myTaggedLiteral`test`; //["test"]

function myTaggedLiteral(strings, value, value2) {
  console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

Podemos usar o operador spread aqui para passar vários valores. O primeiro argumento - que chamamos de strings - é uma matriz de todas as strings simples (o material entre quaisquer expressões interpoladas).

Em seguida, reunir-se todos os argumentos subseqüentes em uma matriz valores chamados usando o ... gather/rest operator, embora você poderia naturalmente ter deixado-los como individuais parâmetros nomeados seguintes as cordas de parâmetros como fizemos acima ( value1, value2, etc.).

function myTaggedLiteral(strings, ...values) {
  console.log(strings);
  console.log(values);
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

Os argumentos reunidos em nossa matriz de valores são os resultados das expressões de interpolação já avaliadas encontradas na cadeia literal. Um literal de sequência marcado é como uma etapa de processamento após a avaliação das interpolações, mas antes da compilação do valor final da sequência, permitindo maior controle sobre a geração da sequência a partir do literal. Vejamos um exemplo de criação de modelos reutilizáveis.

const Actor = {
  name: "RajiniKanth",
  store: "Landmark"
}

const ActorTemplate = templater`<article>
  <h3>${'name'} is a Actor</h3>
  <p>You can find his movies at ${'store'}.</p>

</article>`;

function templater(strings, ...keys) {
  return function(data) {
    let temp = strings.slice();
    keys.forEach((key, i) => {
      temp[i] = temp[i] + data[key];
    });
    return temp.join('');
  }
};

const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);

Raw Strings

Nossas funções de tag recebem um primeiro argumento que chamamos de strings, que é uma matriz. Mas há um bit adicional de dados incluído: as versões não processadas brutas de todas as strings. Você pode acessar esses valores de cadeia bruta usando a .rawpropriedade, assim:

function showraw(strings, ...values) {
  console.log(strings);
  console.log(strings.raw);
}
showraw`Hello\nWorld`;

Como você pode ver, a versão bruta da string preserva a \nsequência de escape , enquanto a versão processada da string a trata como uma nova linha real sem escape. ECMAScript 6 vem com uma função built-in que pode ser usado como um Tag literal string: String.raw(..). Ele simplesmente passa pelas versões brutas das strings:

console.log(`Hello\nWorld`);
/* "Hello
World" */

console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"

Backticks ( `) são usados ​​para definir literais de modelo. Literais de modelo são um novo recurso do ECMAScript 6 para facilitar o trabalho com seqüências de caracteres.

Recursos:

• podemos interpolar qualquer tipo de expressão nos literais do modelo.
• Eles podem ser multilinhas.

Nota: podemos facilmente usar aspas simples ( ') e aspas duplas ( ") dentro dos backticks ( `).

Exemplo:

var nameStr = `I'm "Rohit" Jindal`;

Para interpolar as variáveis ​​ou expressões, podemos usar a ${expression}notação para isso.

var name = 'Rohit Jindal';
var text = `My name is ${name}`;
console.log(text); // My name is Rohit Jindal

Seqüências de linhas múltiplas significam que você não precisa mais usar \npara novas linhas.

Exemplo:

const name = 'Rohit';
console.log(`Hello ${name}!
How are you?`);

Resultado:

Hello Rohit!
How are you?

Os backticks incluem literais de modelo, anteriormente conhecidos como seqüências de caracteres de modelo. Literais de modelo são literais de sequência que permitem expressões incorporadas e recursos de interpolação de sequência.

Literais de modelo têm expressões incorporadas em espaços reservados, denotadas pelo sinal de dólar e colchetes em torno de uma expressão, ou seja ${expression}. O espaço reservado / expressões são passados ​​para uma função. A função padrão apenas concatena a string.

Para escapar de um backtick, coloque uma barra invertida antes dele:

`\`` === '`'; => true

Use backticks para escrever com mais facilidade uma string de várias linhas:

console.log(`string text line 1
string text line 2`);

ou

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

JavaScript vanilla vs.

console.log('string text line 1\n' +
'string text line 2');

ou

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

Sequências de escape:

• Escapes Unicode iniciadas por \u, por exemplo\u00A9
• Escapes de ponto de código Unicode indicados por \u{}, por exemplo\u{2F804}
• Escapadelas hexadecimais iniciadas por \x, por exemplo\xA9
• Escapes literais octais iniciados por \e (a) dígito (s), por exemplo\251

Resumo:

Backticks em JavaScript é um recurso que é introduzido no ECMAScript 6 // ECMAScript 2015 para facilitar cadeias dinâmicas. Esse recurso do ECMAScript 6 também é denominado literal de cadeia de modelo . Oferece as seguintes vantagens quando comparado às seqüências normais:

• Nas seqüências de modelo, são permitidas quebras de linha e, portanto, podem ser multilinhas. Literais de cadeia normal (declarados com ''ou "") não podem ter quebras de linha.
• Podemos facilmente interpolar valores variáveis ​​para a string com a ${myVariable}sintaxe.

Exemplo:

const name = 'Willem';
const age = 26;

const story = `
  My name is: ${name}
  And I'm: ${age} years old
`;

console.log(story);

Compatibilidade do navegador:

O literal da cadeia de modelo é suportado nativamente por todos os principais fornecedores de navegadores (exceto o Internet Explorer). Portanto, é bastante útil usar no seu código de produção. Uma lista mais detalhada das compatibilidade do navegador pode ser encontrada aqui .

Além da interpolação de string, você também pode chamar uma função usando back-tick.

var sayHello = function () {
    console.log('Hello', arguments);
}

// To call this function using ``

sayHello`some args`; // Check console for the output

// Or
sayHello`
    some args
`;

Verifique o componente estilizado . Eles usam muito.

A parte boa é que podemos fazer matemática básica diretamente:

let nuts = 7

more.innerHTML = `

<h2>You collected ${nuts} nuts so far!

<hr>

Double it, get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Tornou-se realmente útil em uma função de fábrica:

function nuts(it){
  return `
    You have ${it} nuts! <br>
    Cosinus of your nuts: ${Math.cos(it)} <br>
    Triple nuts: ${3 * it} <br>
    Your nuts encoded in BASE64:<br> ${btoa(it)}
  `
}

nut.oninput = (function(){
  out.innerHTML = nuts(nut.value)
})

<h3>NUTS CALCULATOR
<input type="number" id="nut">

<div id="out"></div>