O uso específico de strings de modelo no ES6

Recentemente, usei strings de modelo ES6 em meu projeto, que estão resumidas aqui.

1. Anteriormente, também podíamos usar JavaScript para gerar strings de modelo, geralmente da seguinte maneira:

$("#result").append(
    "Ele é <b>"+person.name+"</b>"+"e desejamos saber sua"+person.age+".Isso é tudo" 
    );

Mas podemos ver que essa abordagem tradicional requer o uso de muitos "" (aspas duplas) e + para juntá-los e obter o modelo que precisamos. Mas isso é muito inconveniente.

Portanto, o ES6 fornece strings de modelo, que são marcadas com ` (crase) e as variáveis ​​são colocadas entre ${}. O exemplo acima pode ser escrito da seguinte forma usando strings de modelo:

$("#result").append(
  `Ele é <b>${person.name}</b>e queremos saber sua${person.age}.isso é tudo`
    );

Essa abordagem é muito mais simples. Não precisamos mais usar muitos "" e + para unir strings e variáveis.

2. É claro que variáveis ​​podem ser introduzidas na string do modelo e também é possível não usar variáveis. Como mostrado abaixo:

` Eu sou um homem.`

` Não importa o que você faça,

eu confio em você.`

3. Também podemos definir as variáveis ​​primeiro e depois incorporar as variáveis ​​na string do modelo:

var name="zzw";
` ${nome}, não importa o que você faça,
 Eu confio em você.`

4. Obviamente, como o crase é o identificador da string do modelo, se precisarmos usar o crase na string, precisaremos escapá-lo, da seguinte forma:

`Não importa` o que você fizer,
Eu confio em você.`

5. Nota: Se você usar strings de modelo para representar strings multilinhas, todos os espaços e recuos serão salvos na saída! !

console.log( `Não importa` o que você faça,
 Eu confio em você.`);

A saída é a seguinte:

6. Você pode colocar qualquer expressão JavaScript entre chaves em ${}, realizar operações e referenciar propriedades de objetos.

var x=88;
var y=100;

console.log

(`x=${++x},y=${x+y}`);

7. Ainda mais poderoso: a string do modelo também pode chamar funções:

function string(){
  return "zzw gosta de es6!";
}
console.log(`O que você quer dizer? Bem, ${string()}`)

;

Além disso, se o resultado da função não for uma string, ele será convertido em uma string de acordo com as regras gerais:

function string(){
    retornar 666;
  }
  console.log(`O que você quer dizer? Bem, ${string()}`)

;

Aqui, o número 666 é realmente convertido na string 666.

8. Se a variável em ${} não for nomeada, um erro será relatado:

console.log(`O que você quer dizer? Bem, ${string( )}`);

No código acima, a função string() não é declarada, então um erro é relatado:

9. Na verdade, também podemos inserir uma string em ${}, e o resultado do conhecimento ainda retornará uma string:

console.log(`O que você quer dizer? Bem, ${"Na verdade, não sou uma variável ~"}`) ;

O resultado é o seguinte:

10. Se você quiser fazer referência à string do modelo em si, você pode escrevê-la assim:

let str="return"+"`Hello! ${name}`";
deixe func=new Function("nome",str);
 console.log(func("zzw"));

Os resultados são os seguintes: