Crear cadenas multilínea en JavaScript

Resuelto Newy asked hace 15 años • 43 respuestas

Tengo el siguiente código en Ruby. Quiero convertir este código a JavaScript. ¿Cuál es el código equivalente en JS?

text = <<"HERE"
This
Is
A
Multiline
String
HERE
Newy avatar Apr 30 '09 09:04 Newy
Aceptado

Actualizar:

ECMAScript 6 (ES6) introduce un nuevo tipo de literal, a saber, literales de plantilla . Tienen muchas características, interpolación variable entre otras, pero lo más importante para esta pregunta es que pueden ser multilínea.

Un literal de plantilla está delimitado por comillas invertidas :

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(Nota: no estoy recomendando el uso de HTML en cadenas)

La compatibilidad con el navegador está bien , pero puedes usar transpiladores para ser más compatible.


Respuesta original de ES5:

Javascript no tiene una sintaxis de documento aquí. Sin embargo, puedes escapar de la nueva línea literal, que se acerca:

"foo \
bar"
Anonymous avatar Apr 30 '2009 02:04 Anonymous

Actualización de ES6:

Como menciona la primera respuesta, con ES6/Babel, ahora puedes crear cadenas de varias líneas simplemente usando comillas invertidas:

const htmlString = `Say hello to 
multi-line
strings!`;

La interpolación de variables es una característica nueva y popular que viene con cadenas delimitadas por comillas invertidas:

const htmlString = `${user.name} liked your post about strings`;

Esto simplemente se traduce en concatenación:

user.name + ' liked your post about strings'

Respuesta original de ES5:

La guía de estilo de JavaScript de Google recomienda utilizar la concatenación de cadenas en lugar de escapar de nuevas líneas:

No hagas esto:

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

El espacio en blanco al principio de cada línea no se puede eliminar de forma segura en tiempo de compilación; los espacios en blanco después de la barra diagonal provocarán errores complicados; y aunque la mayoría de los motores de script lo admiten, no forma parte de ECMAScript.

Utilice la concatenación de cadenas en su lugar:

var myString = 'A rather long string of English text, an error message ' +
               'actually that just keeps going and going -- an error ' +
               'message to make the Energizer bunny blush (right through ' +
               'those Schwarzenegger shades)! Where was I? Oh yes, ' +
               'you\'ve got an error and all the extraneous whitespace is ' +
               'just gravy.  Have a nice day.';
Devin Rhode avatar Jun 06 '2011 02:06 Devin Rhode

el patrón text = <<"HERE" This Is A Multiline String HEREno está disponible en js (recuerdo usarlo mucho en mis viejos tiempos de Perl).

Para mantener la supervisión con cadenas multilínea complejas o largas, a veces uso un patrón de matriz:

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

o el patrón anónimo que ya se mostró (escape de nueva línea), que puede ser un bloque feo en su código:

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

Aquí hay otro 'truco' extraño pero que funciona 1 :

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

edición externa: jsfiddle

ES20xx admite cadenas que abarcan varias líneas utilizando cadenas de plantilla :

let str = `This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.`;
let str = String.raw`This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.`;

1 Nota: esto se perderá después de minimizar/ofuscar su código

KooiInc avatar Apr 30 '2009 07:04 KooiInc

Puede tener cadenas multilínea en JavaScript puro.

Este método se basa en la serialización de funciones, que se define como dependiente de la implementación . Funciona en la mayoría de los navegadores (ver más abajo), pero no hay garantía de que siga funcionando en el futuro, así que no confíe en él.

Usando la siguiente función:

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

Puedes tener aquí documentos como este:

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

El método se ha probado con éxito en los siguientes navegadores (no mencionado = no probado):

  • Es decir, 4 - 10
  • Ópera 9.50 - 12 (no en 9-)
  • Safari 4 - 6 (no en 3-)
  • Cromo 1 - 45
  • Firefox 17-21 ( no en 16- )
  • Rekonq 0.7.0 - 0.8.0
  • No es compatible con Konqueror 4.7.4

Pero ten cuidado con tu minificador. Tiende a eliminar comentarios. Para el compresor YUI , se conservará un comentario que comience con /*!(como el que usé).

Creo que una solución real sería utilizar CoffeeScript .

ACTUALIZACIÓN DE ES6: puede usar una comilla invertida en lugar de crear una función con un comentario y ejecutar toString en el comentario. La expresión regular debería actualizarse para eliminar solo espacios. También podrías tener un método prototipo de cadena para hacer esto:

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

Alguien debería escribir este método de cadena .removeIndentation...;)

Jordão avatar Apr 06 '2011 18:04 Jordão