¡Un error más en esta serie de artículos sobre errores comunes en Javascript! Esta vez vemos cómo se puede y cómo no se puede dividir una cadena con un salto de línea tanto en el editor de código como en la propia visualización.
En la lección Javascript – #1.04. Sentencias en Javascript vimos recomendaciones para escribir sentencias en Javscript. Y es que, en ocasiones, escribimos cadenas muy largas que nos obligan a hacer scroll horizontal en nuestro editor de código o bien necesitamos introducir un salto de línea en la visualización de la cadena. ¿Cuál es el modo correcto de dividirlas?
En primer lugar, podemos poner un salto de línea justo después del igual de asignación de la cadena. Por ejemplo:
let cadena =
"Hola, caracola";Sin embargo, no podemos dividir la cadena por la mitad, sin más, con un salto de línea.
let cadena = "Esta es una cadena muy larga
que me gustaría dividir en dos";
// Obtendríamos un error de sintaxis: "String literal contains an unescaped line break"
// es decir, "El literal cadena contiene un salto de línea no escapado".Para hacerlo, necesitamos utilizar el operador de escape barra invertida de la siguiente manera:
let cadena = "Esta es una cadena muy larga \
que me gustaría dividir en dos";
console.log (cadena);
//El resultado sería "Esta es una cadena muy larga que me gustaría dividir en dos";¡Ojo! No quiere decir que al mostrar la cadena vayamos a ver un salto de línea, si no que podemos escribirla dividida en nuestro editor de código sin hacer scroll horizontal.
Otra opción más laboriosa es utilizar el operador asignación de adición (+=) tal y como se ve en el ejemplo:
let cadena = "Esta es una cadena muy larga ";
cadena += "que me gustaría dividir en dos";
//El resultado sería igualmente "Esta es una cadena muy larga que me gustaría dividir en dos";En cualquier caso, si lo que necesitas es que en la visualización de la cadena se muestre con un salto de línea dependerá del lugar en el que vayas a mostrarla:
- Si es un diálogo modal (alert, prompt, confirm) o un console.log necesitarás utilizar \n para realizar el salto de línea.
- Si la cadena se va a mostrar diréctamente sobre la página web deberás hacerlo con la etiqueta de HTML <br/>.
console.log ("Hola,\n caracola");
alert ("Hola,\n caracola");
let respuesta1 = confirm ("¿Deseas salir\n de esta página");
let respuesta2 = prompt ("Introduce una opción:\n a) Amarillo \n b) Azul \n c) Rojo
// En todos los casos anteriores se mostraría un salto de línea en el lugar que hay un \n
document.innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";
document.getElementById("miParrafo").innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";
¡Recuerda este error común en Javascript! Para dividir una cadena en el editor de código necesitaremos la barra invertida (\) y para dividirla en la visualización necesitaremos \n o <br/> dependiendo de dónde se muestre.
Tweet
Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?
