Contenido

Multilíneas en Javascript

5 may

+ 5

Siempre que intentamos escribir un script en Javascript que requiere un string de varias líneas conseguimos un error de que el código está mal formado. Eso es un problema para estos scripts que generar contenido HTML, ya que al tenerlo en una línea perdemos claridad y no vemos exactamente lo que estamos pintado.

Hoy en Snook.ca, nos muestra un sistema para conseguir Strings en Javascript con saltos de línea, lo que nos permite hacer cosas así:

$('#ID').append(
   '<div id="page"> \
      <p class="texto">bla bla bla</p> \
    </div>'
);

La clave está en usa (\) para indicar el salto de línea, esto, misteriosamente, hace que el navegador detecte que se trata de una sola línea, haciendo el trabajo de unirlas por nosotros.

Una curiosidad más de esta lenguaje que nos ayuda a hacer las cosas más fáciles y sobretodo claras.

  • Bueno, no tan misteriosamente…

    Si te paras a pensarlo tiene bastante sentido: la contrabarra es un metacaracter cuyo significado es escapar o cambiar el significado habitual del caracter siguiente, y después de la contrabarra, en ese caso, hay un carácter de salto de linea, con lo que es eso lo que está cambiando su significado habitual.

    Esto no es aceptado por la herramienta jslint, por que puede crear comportamientos imprevistos si después del cambio de linea (pero en la misma linea), se olvida uno de algún espacio involuntario (cosa bastante común en algunos editores que permiten poner el cursor en posiciones más allá del fin de linea natural, y no quiero señalar a ningún visual studio). Con lo que para mejorar el formato de ese tipo de cadena es mejor cerrarle cada linea y concaterarlas:

    
    $('#ID').append(
       '<div id="page">' +
          '<p class="texto">bla bla bla</p> '+
        '</div>'
    );
    

    Que es algo más de tecleo, pero más seguro.

  • Pues según la especificación vigente actualmente ese tipo de strings multilínea propios de C es ilegal.

    Standard ECMA-262

    7.8.4 String Literals

    NOTE
    A ‘LineTerminator’ character cannot appear in a string literal, even if preceded by a backslash \. The correct way to cause a line terminator character to be part of the string value of a string literal is to use an escape sequence such as \n or \u000A.

    En cambio, en el último borrador de la especificación de ECMAScript 5 (Ecma/TC39/2009/025) podemos ver que pasa a ser legal:

    7.8.4 String Literals

    NOTE
    A line terminator character cannot appear in a string literal, except when preceded by a backslash \ as a ‘LineContinuation‘ to produce the empty character sequence. The correct way to cause a line terminator character to be part of the string value of a string literal is to use an escape sequence such as \n or \u000A.

    En fin, me parece que Snook no se merecía tantos “I can’t believe I didn’t know that” :D

  • @joseanpg: No se si es más sorprendente que lo hagan “legal” o que te lo sepas de memoria :D

  • Mmmh, the first paragraph speak about “the correct way to cause a line terminator character to be part of the string”, it doesn’t say that you cannot use that to have the parser to parse multi-line strings!

    Perdonen por no averlo escrito en español, es que es un tema demasiado complicado para mi nivel!

  • @gGus, podemos debatir sobre el tema :D

    ECMAScript 3

    La primera frase del parrafo es contundente:

    A ‘LineTerminator’ character cannot appear in a string literal, even if preceded by a backslash \

    Es decir está prohibido la aparición literal (tecleada) de un terminador de línea.

    La otra parte del parrafo no intenta compensar eso, simplemente aclara que esa prohibición relativa a la aparición literal de un terminador de línea no impone restricciones a la aparición de secuencias de escape de un terminador de línea.

    Por cierto unicamente ese parrafo es sólo una nota aclaratoria, la prohibición viene en realidad en la gramática que se define en el 7.8.4:

    DoubleStringCharacter ::
    SourceCharacter but not double-quote ” or backslash \ or LineTerminator
    \ EscapeSequence

    SingleStringCharacter ::
    SourceCharacter but not single-quote ‘ or backslash \ or LineTerminator
    \ EscapeSequence

    Draft ECMAScript 5

    Veamos la primera frase del parrafo:

    A line terminator character cannot appear in a string literal, except when preceded by a backslash \ as a ‘LineContinuation‘ to produce the empty character sequence

    En este caso la gramática sí permite la aparición de terminadores de línea tecleados si van precedidos por una backslash, y ojo, no produce caracter alguno.

    En cambio podemos observar que la segunda parte del parrafo, copia líteral de la de la versión 3, hace referencia a autenticos caracteres terminadores.

    En fin, a algunos puristas del comite del 99 no les gustarían los string multilínea de C, pero los navegadores lo han implementado por su cuenta convirtiéndolo en un estándar de facto, que ahora recogen en la nueva especificación.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.