Cómo escapar caracteres en cadenas de JavaScript

En este tutorial vamos a ver cómo puedes escapar caracteres en las cadenas de JavaScript. En ocasiones existen caracteres que interfieren con la sintaxis de JavaScript, por lo que deben ser escapados de algún modo para que las cadenas se representen correctamente.

Un ejemplo de ello son las comillas simples en el interior de las cadenas declaradas con comillas simples o también las comillas dobles en el interior de las cadenas declaradas con comillas dobles. Por ejemplo, el siguiente código provocará un error:

const cadena = 'I'm the king of the hill';

console.log(cadena);

En concreto, se mostrará el error unknown: Unexpected token (1:18) por la consola. Lo mismo ocurriría en al caso de usar comillas dobles en una cadena declarada con este tipo de comillas.

Para evitar estos problemas podemos valernos de diferentes métodos. Una alternativa consiste en declarar las cadenas con un tipo de comillas opuesto al tipo de comillas que exista en el interior de las cadenas. Otro método consiste en escapar los caracteres y finalmente también podrías usar plantillas literales, también conocidas como template literals.

Escapa caracteres con el carácter \

Puedes escapar cualquier carácter usando una barra invertida delante de cualquier carácter. Este carácter no será interpretado por JavaScript salvo que también lo escapes con otra barra invertida.

Por ejemplo, si usas la sintaxis \' o la sintaxis \" podrás mostrar comillas simples o dobles en el interior de cadenas declaradas con comillas simples y dobles respectivamente sin que se rompa la cadena.

En el siguiente ejemplo declaramos una cadena con comillas simples que también incluye comillas simples en su interior:

'Mi película preferida es \'Heat\'.';

En este otro ejemplo declaramos una cadena con comillas dobles que también incluye comillas dobles en su interior:

"Mi película preferida es \"Heat\".";

En caso de que quieras usar una barra invertida en el interior de una cadena, también tendrás que escaparla con otra barra invertida:

"El carácter \\ se usa para escapar cadenas.";

Esta última cadena se representará del siguiente modo:

El carácter \ se usa para escapar cadenas.

Tal y como ves, también debemos escapar el carácter \ aunque lo usemos a solas. Esto es debido a que cuando el carácter \ aparece solo, se creará una nueva línea.

Usa una sintaxis alternativa

Un buen método  mediante el cual podrás escapar las comillas simples o las dobles consisten en usar el tipo de sintaxis opuesta al tipo de comillas que se incluyen en una cadena. Este método es útil en casos muy concretos.

En el siguiente ejemplo declaramos una cadena que contiene comillas simples mediante comillas dobles:

"Mi película preferida es 'Donnie Darko'.";

En este otro ejemplo declaramos una cadena que contiene comillas dobles mediante comillas simples:

'Mi película preferida es "Donnie Darko".';

Usando el tipo de comillas adecuado podremos controlar el modo en el que se mostrará el contenido de una cadena. Por ejemplo, es muy habitual el uso de comillas dobles cuando una cadena contiene apóstrofes.

Sin embargo, en caso de que quieras ser consistente, existen otros métodos, como el uso del carácter \ o el uso de plantillas literales.

Usa plantillas literales

Mediante el uso de plantillas literales, también conocidas como template literals, podrás usar tanto comillas simples como dobles al mismo tiempo en el interior de una cadena sin necesidad de escapar caracteres. Las plantillas literales son un tipo especial de cadena que se declara usando comillas invertidas ` a ambos lados de la cadena:

`I'm Edu and my favourite movie is "Heat".`;

En caso de querer agregar comillas invertidas en el interior de una plantillas literal, tendrás que escaparlas mediante el carácter \.

Para obtener más información acerca de las plantillas literales, consulta el siguiente tutorial en donde explico qué son y cómo se usan las plantillas literales en JavasCript.

Finalizando

Estos han sido los tres principales métodos que se usan a la hora de escapar caracteres en JavaScript. Todos ellos son utilizados a día de hoy, por lo que puedes usar el que más te convenga en cada situación.

Esto ha sido todo.

---