Autor: Andy Chen
Traductor: Front-end Xiaozhi
Fuente: medio
Si tiene sueños y productos secos, puede buscar [Great Move to the World] en WeChat y prestar atención a este Shawanzhi que todavía está lavando platos en las primeras horas de la mañana.
Se ha incluido este artículo GitHub https://github.com/qq449245884/xiaozhi , hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.
No sé si ha utilizado un componente muy útil llamado componentes de estilo al desarrollar páginas web con React.js.Es styled-componentsun componente utilizado para generar estilos de elementos, lo que le permite escribir CSS en JSX para lograr ** CSS- El Las habilidades de IN-JS ** se han dicho tanto porque el documento oficial de componente de estilo ha dicho esta oración:
Esta sintaxis inusual de acento grave es una nueva característica de JavaScript llamada literal de plantilla etiquetada.
Este literal de plantilla etiquetada me dio un poco de curiosidad, porque cuando lo usé antes styled-components, descubrí que era obvio que el elemento methodse iba a generar function, styled-compoentspero no vi ninguna call functionhabilidad "normal" en el resultado. un nuevo enfoque de ES6, y no lo conocía hasta ahora, solo puedo decir que conozco muy poco de ES6.
Cadenas de plantilla
Cuando empiezo a tagged template literalhablar , primero debo hablar de eso template strings, creo que todos los que usan ES6 saben que template stringses un método muy útil, que resuelve la necesidad de usar signos más largos para empalmar las cadenas combinadas anteriores.
// ES5
var myName = '前端小智'
console.log("Hello " + myName + '!')
// 'Hello 前端小智!'
// ES6
const myName = '前端小智'
console.log(`Hello ${
myName}`)
// 'Hello 前端小智!'
Incluso las cadenas de plantillas pueden aprovechar el efecto de varias líneas para lograr líneas nuevas.
// ES5
console.log('Hello\n' + '前端小智')
// Hello
// 前端小智
// Es6
console.log(`
Hello
前端小智
`)
// Hello
// 前端小智
Cuando ve la multi-lineescritura de arriba, ¿siente instantáneamente que es styled-componentsmuy similar a la escritura?
De hecho, la escritura de cadenas de plantilla está estrechamente relacionada con lo que tagged template literalhablaremos , por lo que primero se debe mencionar el literal de plantilla etiquetado.
Literal de plantilla etiquetada
En resumen, la plantilla literal etiquetada le permite hacerlo de otra manera function call, por lo general sabemos que function callse hace usando paréntesis, y functionlos parámetros a usar se pasan entre paréntesis, pero tagged template literalle permite usar la llamada a funcióntemplate , el método de escritura . se puede decir que es exactamente igual que las cadenas de plantilla presentadas anteriormente .
En el ejemplo anterior, puede ver que el formato de salida es un poco extraño. Es una matriz en lugar de una cadena simple. Esto se debe a que JavaScript necesita template stringregistrar para template strinpoder capturar las variables en g. Después de todo, function calllo más importante la cosa es que se pasan los parámetros.
Conociendo esta función, a continuación tratamos de pasarle parámetros functionde , como la siguiente.
Inesperadamente, todavía no hay forma de mostrar la cadena completa. De hecho, al usar tagged template literalel método function callde, el primer parámetro es el conjunto de cadenas en las cadenas de plantilla, es raw stringsdecir , la colección de otras cadenas excepto las variables, que serán una matriz. , y los parámetros restantes se enumerarán uno por uno de acuerdo con las variables que traigan las cadenas de plantilla.
Por ejemplo: si se pasan un total de dos variables en cadenas de plantilla , estas dos variables se incorporarán functioncomo el segundo y tercer parámetro, de la siguiente manera.
Pero esto es muy feo y difícilmente puede predecir cuántas variables se pasarán en este template stringsEn este momento, si desea que esto se functionvea mejor, puede usar rest parameterel método ES6 , que simplemente convierte las variables en matrices. cuando desee utilizar variables, recuerde deconstruirlas. Los ejemplos son los siguientes:
[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leech, se recomienda guardar la imagen y subirla directamente (img-J6KazRo7-1645660636484)(/img/bVcXZBq)]
Resumir
Esta vez, function callse presenta un método y espero que todos puedan recopilarlo.
Soy Shawanzhi. En el nuevo año, cepillémonos juntos.
Los errores que pueden existir después de que se implementa el código no se pueden conocer en tiempo real. Para resolver estos errores después, se dedica mucho tiempo a la depuración de registros. Por cierto, recomiendo una útil herramienta de monitoreo de errores , 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-etiquetado-plantilla-literales-5ca9db71f066
comunicarse con
Si tiene sueños y productos secos, puede buscar [Great Move to the World] en WeChat y prestar atención a este Shawanzhi que todavía está lavando platos en las primeras horas de la mañana.
Este artículo se ha incluido en GitHub https://github.com/qq449245884/xiaozhi, y hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.