Como usar os literais do modelo ES6 em JavaScript
Na programação, o termo “literal” refere-se a notação de valores em código. Por exemplo, notamos um valor de string com um literal de string que são caracteres entre aspas duplas ou simples ("foo", 'Barra', "Esta é uma string!").
Literais de modelo foram introduzidos em ECMAScript 6. Eles funcionam de forma bastante semelhante aos literais de string; eles produzem valores de modelo e valores de modelo brutos, ambos são cordas.
No entanto, ao contrário dos literais de string, os literais de modelo podem produzir valores cordas multi-alinhadas, algo que você pode conseguir em uma string literal apenas por adicionando novos caracteres de linha (\ n) para isso.
Literais de modelo também podem criar strings com outros valores (derivado de expressões) para o qual você teria que usar o mais operador em uma string literal ("seu id é:" + idNo; Onde idNo é uma expressão variável com um valor numérico).
Todos esses recursos tornam os modelos literais mais preferíveis criar valores de string.
Sintaxe de literais de modelo
O delimitador de um literal de modelo é o backtick ' personagem (também conhecido como caractere de backquote ou símbolo de sotaque grave). Uma expressão dentro do literal (cujo valor é avaliado durante o tempo de execução e incluído no valor final produzido pelo literal) é incluído em chaves com um precedendo sinal de dólar $.
'string $ someExpression mais string'
Aqui estão alguns exemplos de literais de modelo produzindo inalterado, substituído (expressões substituídas por seus valores avaliados), e multi-alinhado cordas.
console.log ('olá'); // hello var name = "Joan"; console.log ('olá $ nome'); // olá Joan console.log ('Querida Joan, Bem vinda.'); // Caro Joan, // Bem-vindo. Escape e valores de modelo brutos
Em um literal de modelo, o ' (backtick), \ (barra invertida) e $ (cifrão) caracteres deve ser escapado usando o personagem de fuga \ se eles devem ser incluídos no valor do modelo.
Por padrão, todas as seqüências de escape em um literal de modelo são ignorado. Se você quiser incluí-lo na saída, você precisa usar seu valor do modelo bruto.
console.log ('código embutido na marcação: \' código \ "); // código embutido na marcação: 'código' var name =" Joan "; console.log ('ola \ $ nome.'); / ola $ name. console.log (String.raw'hello \ $ name. '); // hello \ $ name. o String.raw método gera valores de modelo brutos (a forma de string bruta de um literal de modelo). No código acima, a chamada de função do cru método é referido como “modelo marcado”.
Modelos marcados
Um modelo marcado é um chamada de função Onde, no lugar dos parênteses habituais (com parâmetros opcionais) além do nome da função, há um literal de modelo a partir do qual a função recebe seus argumentos.
Então, ao invés de chamar uma função como esta:
foo (ArgumentsForFoo);
É assim chamado:
foo'ATemplateStringProvidingArgumentsForFoo ';
A função foo é chamado de função de tag. Seu primeiro argumento recebido do modelo literal é um matriz Chamou o objeto de modelo.
O objeto de modelo (uma matriz) contém todos os valores da string interpretado a partir do modelo literal e tem um cru propriedade (outro array) que contém todos os valores da sequência bruta (não-escapada) interpretado a partir do mesmo literal.
Após o objeto modelo, os argumentos da função tag incluem todos avaliado valores externos presente nesse literal (aqueles entre as chaves $ ).
No código abaixo, o foo função é criada para produzir seus argumentos. A função é então chamada na moda modelo marcado, com um modelo literal carregando duas expressões (nome e identidade).
nome do var = "John"; var id = 478; foo'hello $ name. seu id é: $ id. '; função foo () console.log (argumentos [0]); // Array ["olá", ". Seu id é:", "." ] console.log (argumentos [1]); // John console.log (argumentos [2]); // 478
O primeiro argumento produzido é o objeto de modelo carregando todas as strings interpretadas a partir do modelo literal, o segundo e terceiro argumentos são os valores avaliados das expressões, nome e identidade.
o cru propriedade
Como mencionado anteriormente, o objeto de modelo tem um propriedade chamada cru que é uma matriz contendo todos os valores da sequência bruta (não-escapada) interpretado a partir do literal do modelo. É assim que você pode acessar o cru propriedade:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, como você está? '; função foo () console.log (argumentos [0]); // Array ["hello $ name1,", ", como estão os dois?"] Console.log (arguments [0] .raw); // Array ["hello \ $ name1,", ", como estão os dois?"] Console.log (arguments [1]); // Joan
Use casos de modelos marcados
Os modelos marcados são úteis quando você precisa quebrar uma corda em partes separadas, como é frequentemente o caso em um URL, ou ao analisar um idioma. Você encontrará uma coleção de exemplos de modelos com tags aqui.
Diferente do IE, os literais de modelo são suportado em todos os principais navegadores.
Abaixo, você pode encontrar alguns exemplos de funções de tag com assinaturas diferentes que representam os argumentos:
nome do var = "John"; foo'hello $ name, como vocês estão? '; bar'hello $ name, como estão os dois? '; function foo (… args) console.log (args); // Array [Array ["hello", "how are you?"], "John"] barra de funções (strVals,… exprVals) console.log (strVals); // Array ["olá", "como você está?" ] console.log (exprVals); // Array ["John"]
No Barra função, o primeiro parâmetro (strVals) é o objeto de modelo e o segundo (que usa a sintaxe de propagação) é uma matriz que reuniu todos os valores de expressão avaliados a partir do literal do modelo passado para a função.
Coloque a corda juntos
Se você quiser obter a sentença inteira (derivado do literal) dentro da função tag, concatenar todos os valores das matrizes que transportam as cadeias de gabarito e os valores de expressão avaliados. Como isso:
function foo (strs,… exprs) // se houver alguma expressão incluída no literal if (exprs.length! == 0) var n = strs.length - 1, resultado = "; for (var i = 0 ; Eu < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
o strs array mantém todas as cordas encontrado no literal e exprs segura todos os valores de expressão avaliados do literal.
Se mesmo um valor de expressão existir, concatene cada valor de matriz de strs (exceto o último) com o mesmo valor de índice de exprs. Então, no final, adicione o último valor do strs array para a string concatenada, formando uma frase completa deste jeito.
