Los strings 1 - El escape de caracteres y document.write - Curso de JavaScript de cero a máster - Capítulo 8


Tenemos 4 formas de crear strings, las tres primeras ya las sabes por el capítulo anterior. La cuarta es utilizando el constructor de strings String():

Código JavaScript

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:

Código JavaScript

let texto1 = "Esto es un "string".";
console.log(texto1);

Salida en la consola JavaScript

 Uncaught SyntaxError: Unexpected identifier

Este 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.

Código JavaScript

let texto1 = "Esto es un 'string'.";
console.log(texto1);

Salida en la consola JavaScript

Esto es un 'string'.

Código JavaScript

let texto1 = 'Esto es un "string".';
console.log(texto1);

Salida en la consola JavaScript

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);
Escape de caracteres en JavaScript

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 caracter \n se puede hacer un salto de línea directamente sobre código JavaScript.

Código JavaScript

let texto1 = "Esto es un es una línea.\nY esta es otra.";
alert(texto1);
Saltos de línea en JavaScript

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.

Código JavaScript

let texto1 = "Esto es un es una línea.\nY esta es otra.";
document.write(texto1);
document.write JavaScript

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.

Código JavaScript

let texto1 = "Esto es un es una línea.<br>Y esta es otra.";
document.write(texto1);
Salto de línea html desde JavaScript

Indicamos literalmente en el string un salto de línea html donde queramos y desde el documnet.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

  1. 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.
  2. Haz lo mismo pero con unas comillas simples.
  3. Escribe al menos dos líneas de texto con un salto de línea de javascript en un string.
  4. 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í: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


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.