Entendiendo y Corrigiendo Errores en Plantillas de Cadena Literal (Template Literals)
Las plantillas de cadena literal (template literals) son una caracter铆stica de ECMAScript 6 (ES6) que permiten insertar expresiones dentro de cadenas de texto de manera m谩s legible y conveniente. Sin embargo, al trabajar con plantillas de cadena de texto, es com煤n encontrarse con errores si no se manejan las comillas invertidas (`) de una manera correcta. En este art铆culo, vamos a explicar por qu茅 ocurren estos errores y c贸mo solucionarlos.
驴Qu茅 son las Plantillas de Cadena Literal?
Las plantillas de cadena de texto 贸 Template Literals se crean usando comillas invertidas (`) en lugar de comillas simples (') o dobles ("). Esto permite incluir expresiones dentro de la cadena utilizando la sintaxis $ y alguna expresi贸n dentro de los corchetes.
Adem谩s, las plantillas de cadena literal soportan m煤ltiples l铆neas sin necesidad de caracteres especiales para los saltos de l铆nea.
Ejemplo b谩sico
const nombre = "Juan";
const saludo = `Hola, ${nombre}!`;
console.log(saludo); // Salida: Hola, Juan!
El Problema con las Comillas Invertidas
Cuando se necesita incluir comillas invertidas dentro de una plantilla de cadena literal, se puede generar un error de sintaxis porque las comillas invertidas se utilizan tanto para abrir como para cerrar la plantilla. Esto confunde al int茅rprete de JavaScript, que no puede determinar d贸nde termina la cadena.
Ejemplo b谩sico
const ejemploErrorInterno = `
console.log(`Esto causar谩 un error`);
`;
En el ejemplo anterior, el int茅rprete de JavaScript no puede distinguir claramente las comillas invertidas internas de las externas, lo que provoca un error de sintaxis.
驴Por qu茅 ocurre el error?
El error ocurre porque el int茅rprete de JavaScript trata las comillas invertidas internas como el final de la cadena literal, lo cual interrumpe la estructura de la plantilla de cadena literal. Como resultado, el c贸digo se vuelve inv谩lido y el int茅rprete no puede ejecutarlo.
Soluci贸n: "Escapar" las Comillas Invertidas con barra inversa \
Para incluir comillas invertidas dentro de una plantilla de cadena literal sin interrumpir la cadena, se deben "escapar" las comillas invertidas internas utilizando una barra invertida (\). Esto le indica al int茅rprete que las comillas invertidas internas son parte del contenido de la cadena y no el delimitador.
Ejemplo de c贸digo corregido:
const ejemploErrorInterno = \`
console.log(\`Esto causar谩 un error\`);
\`;
\`;
En este ejemplo, cada comilla invertida interna se escapa utilizando \. De esta manera, el int茅rprete de JavaScript puede distinguir claramente entre las comillas invertidas que delimitan la plantilla y las que forman parte del contenido de la cadena.
Y si por alguna raz贸n necesitas agregarlo a una variable para mostrar el c贸digo como en los ejemplos que te doy, necesitar谩s agregar dos barras inversas extras, en total 3.
const ejemploErrorInterno = \\\`
console.log(\\`Esto causar谩 un error\\\`);
\\\`;
\\\`;