Autor: Andy Chen
Tradutor: Front-end Xiaozhi
Fonte: medium
Se você tem sonhos e produtos secos, pode pesquisar [Great Move to the World] no WeChat e prestar atenção nesse Shawanzhi que ainda está lavando pratos nas primeiras horas da manhã.
Este artigo GitHub https://github.com/qq449245884/xiaozhi foi incluído, existem sites de teste completos, materiais e minha série de artigos para entrevistas com fabricantes de primeira linha.
Não sei se você usou um componente muito útil chamado styled-components ao desenvolver páginas da Web com React.js . É styled-componentsum componente usado para gerar estilos de elementos, permitindo que você escreva CSS em JSX para obter ** CSS- O skills do IN-JS** foram ditas tanto porque o documento oficial do styled-component disse esta frase:
Essa sintaxe incomum de backtick é um novo recurso JavaScript chamado literal de modelo marcado.
Esse literal de template marcado me deixou um pouco curioso, pois quando styled-componentsusei descobri que era óbvio que o elemento methoddeveria ser gerado function, styled-compoentsmas não vi nenhuma call functionhabilidade "normal" no uma nova abordagem para ES6, e eu não sabia disso até agora, só posso dizer que conheço muito pouco ES6.
Strings de modelo
Quando começo a tagged template literalfalar , devo falar sobre isso primeiro template strings. Acredito que todos que usam o ES6 sabem que template stringsé um método muito útil, que resolve a necessidade de usar sinais de mais longos para splicing nas strings combinadas anteriores.
// ES5
var myName = '前端小智'
console.log("Hello " + myName + '!')
// 'Hello 前端小智!'
// ES6
const myName = '前端小智'
console.log(`Hello ${
myName}`)
// 'Hello 前端小智!'
Até mesmo strings de template podem tirar vantagem do efeito multi-line para obter novas linhas.
// ES5
console.log('Hello\n' + '前端小智')
// Hello
// 前端小智
// Es6
console.log(`
Hello
前端小智
`)
// Hello
// 前端小智
Quando você vê a multi-lineescrita acima, você sente instantaneamente que é styled-componentsmuito semelhante à escrita?
Na verdade, a escrita de strings de template está intimamente relacionada com o que tagged template literalfalaremos , e é por isso que o literal de template marcado deve ser mencionado primeiro.
Literal de Modelo Marcado
Resumindo, o literal de template marcado permite que você faça isso de outra maneira function call. Normalmente sabemos que function callisso é feito usando parênteses, e functionos parâmetros a serem usados são passados entre parênteses, mas permite tagged template literalque você use função calltemplate , o método de escrita pode-se dizer que é exatamente o mesmo que as strings de template introduzidas acima .
No exemplo acima, você pode ver que o formato de saída é um pouco estranho. É um array em vez de uma simples string. Isso porque JavaScript precisa template stringgravar para template strinque as variáveis em g possam ser capturadas. Afinal, function callo mais importante coisa é que os parâmetros são passados.
Conhecendo esse recurso, em seguida, tentamos passar parâmetros para ele dessa functionmaneira , como a seguir.
Inesperadamente, ainda não há como exibir a string completa. Na verdade, ao usar tagged template literalo método function callde , o primeiro parâmetro é o conjunto de strings em strings de template, raw stringsou seja, a coleção de outras strings exceto variáveis, que será um array , e os parâmetros restantes são Ele será listado um a um de acordo com as variáveis trazidas pelas strings do modelo.
Por exemplo: se um total de duas variáveis for passado em strings de modelo , essas duas variáveis serão trazidas functioncomo o segundo e o terceiro parâmetros, conforme a seguir.
Mas isso é muito feio, e você dificilmente pode prever quantas variáveis serão passadas neste template strings. Neste momento, se você quiser fazer isso functionparecer melhor, você pode usar rest parametero método ES6 , que apenas transforma as variáveis em arrays. , então quando você quiser usar variáveis, lembre-se de desconstruí-las. Os exemplos são os seguintes:
[Falha na transferência da imagem do link externo, o site de origem pode ter um mecanismo anti-leech, é recomendável salvar a imagem e carregá-la diretamente (img-J6KazRo7-1645660636484)(/img/bVcXZBq)]
Resumir
Desta vez, um function callmétodo diferente é e espero que todos possam coletá-lo.
Eu sou Shawanzhi. No ano novo, vamos escovar juntos.
Os bugs que podem existir após a implantação do código não podem ser conhecidos em tempo real. Para resolver esses bugs posteriormente, muito tempo é gasto na depuração de log. A propósito, recomendo uma ferramenta útil de monitoramento de bugs , o Fundebug .
Original: https://medium.com/onedegree-tech-blog/javascript-%E6%9C%89%E8%B6%A3%E7%A%84%E5%86%B7%E7%9F%A5%E8 %AD%98-tagged-template-literals-5ca9db71f066
comunicar com
Se você tem sonhos e produtos secos, pode pesquisar [Great Move to the World] no WeChat e prestar atenção nesse Shawanzhi que ainda está lavando pratos nas primeiras horas da manhã.
Este artigo foi incluído no GitHub https://github.com/qq449245884/xiaozhi, e há sites de teste completos, materiais e minha série de artigos para entrevistas com fabricantes de primeira linha.