¿Cómo funciona el escape de caracteres en JavaScript?
Capítulo 8: El escape de caracteres y document.write
Tenemos cuatro formas de crear strings, las tres primeras ya las sabes por el capítulo anterior. La cuarta es utilizando el constructor de strings new String():
let texto1 = "Esto es un string";
let texto2 = 'Esto es un string';
let texto3 = `Esto es un string`;
let texto4 = new String("Esto es un string");Palabra del lenguaje nº 23 encontrada.
String() es un constructor de strings
Escape de caracteres en JavaScript
¿Por qué hay varias formas de crear un string?
La respuesta es el escape de caracteres, si queremos mostrar literalmente un tipo de comillas, estas no pueden ser las mismas que envuelven el string, ya que esto va a generar errores.
El siguiente ejemplo producirá un error:
let texto1 = "Esto es un "string".";
console.log(texto1); Uncaught SyntaxError: Unexpected identifierEste error dice que hay un error de sintaxis, un identificador no identificado, producido por culpa de tener comillas dentro de las comillas. En este caso, podemos hacer dos cosas, utilizar comillas simples dentro de las dobles o cambiar las dobles por simples y dejar dentro las dobles.
let texto1 = "Esto es un 'string'.";
console.log(texto1);Esto es un 'string'.let texto1 = 'Esto es un "string".';
console.log(texto1);Esto es un "string".Si quieres utilizar las mismas comillas para mostrarlas literalmente, tienes otra opción, el escape de comillas.
let texto1 = "Esto es un \"string\".";
console.log(texto1);
Funciona igual con las otras comillas.
Notaciones de escape en strings
Tenemos caracteres especiales para realizar escape de caracteres, como por ejemplo, para los saltos de línea o las tabulaciones.
No las vamos a ver todas en este nivel del curso, ya que hay unas cuantas y algunas más complejas que otras.
Saltos de línea en JavaScript
Con el carácter \n se puede hacer un salto de línea directamente sobre código JavaScript.
let texto1 = "Esto es un es una línea.\nY esta es otra.";
alert(texto1);
Mostrar texto desde JavaScript en una hoja html
Una de las cosas que pronto querrás hacer es poder mostrar texto directamente sobre la página html, en el <body>. Hasta ahora no te he mostrado como, solo he estado mostrando ejemplos en la consola y en "alerts". Ha llegado el momento.
Para conseguir tan maña hazaña lo haremos con document.write().
Palabra del lenguaje nº 24 encontrada.
Con el objeto document es posible manipular las propiedades y contenido de los elementos principales de las páginas web.
Palabra del lenguaje nº 25 encontrada.
Método write perteneciente al objeto document. Escribe datos en el propio documento.
De forma simple de momento, con document, señalamos el documento sobre el que tenemos el script de JavaScript o la hoja externa enlazada. Con una de sus funcionalidades o herramientas, (método write()) conseguimos decirle que escriba en el documento html. Ahora, ya sabes comunicarte un poco con las páginas html desde JavaScript.
let texto1 = "Esto es un es una línea.\nY esta es otra.";
document.write(texto1);
Esto se ha conseguido sin escribir una sola línea en el <body> del documento html.
Puede que te hayas dado cuenta de que hay un fallo. Las líneas no se han separado. El salto de línea (\n) ha sido ignorado. Esto ocurre, porque con el document.write() es como si estuviéramos escribiendo en html. En html no existe este salto de línea. Probemos esta teoría y pongamos una etiqueta html <br>; a ver si funciona.
let texto1 = "Esto es un es una línea.<br>Y esta es otra.";
document.write(texto1);
Indicamos literalmente en el string un salto de línea html donde queramos y desde el document.write() se encargará de interpretarlo correctamente, ya que JavaScript no sabe que es una etiqueta <br>.
Es un detalle que puede frustrar si no lo sabes, así que creo que es importante saberlo.
Ejercicios de JavaScript
- Escribe un string que tenga en su interior unas comillas dobles y englobándolo también. Muéstralo en la consola y que no de error.
- Haz lo mismo pero con unas comillas simples.
- Escribe al menos dos líneas de texto con un salto de línea de javascript en un string.
- Escribe al menos dos líneas de texto con un salto de línea de html en un string y muéstralo en el documento directamente.
La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
