Crear cadenas multilínea en JavaScript

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

text = <<"HERE"
This
Is
A
Multiline
String
HERE

Actualizar:

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

Una plantilla literal está delimitada por comillas invertidas :

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

(Nota: no estoy abogando por usar HTML en cadenas)

El soporte del navegador está bien , pero puede usar transpilers para ser más compatible.

Respuesta original de ES5:

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

"foo \
bar"

Actualización de ES6:

Como se menciona en la primera respuesta, con ES6 / Babel, ahora puede crear cadenas de varias líneas simplemente usando las teclas de retroceso:

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

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

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

Esto solo se transmite a la concatenación:

user.name + ' liked your post about strings'

Respuesta original de ES5:

La guía de estilo JavaScript de Google recomienda utilizar la concatenación de cadenas en lugar de escapar de las 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 comienzo 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 oblicua generarán errores difíciles; y aunque la mayoría de los motores de script admiten esto, no es 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.';

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

Para mantener la supervisión con cadenas multilíneas 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 ya mostrado (escape de nueva línea), que puede ser un bloqueo 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 ¹ :

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 de expansión sobre 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.`;

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

Usted puede tener líneas múltiples 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 seguirá funcionando en el futuro, así que no confíes en él.

Usando la siguiente función:

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

Puede 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):

• IE 4 - 10
• Opera 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

Sin embargo, 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 usar CoffeeScript .

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

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

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

Puedes hacerlo...

var string = 'This is\n' +
'a multiline\n' + 
'string';

Se me ocurrió este método muy manipulado de una cuerda con múltiples líneas. Dado que convertir una función en una cadena también devuelve cualquier comentario dentro de la función, puede usar los comentarios como su cadena usando un comentario multilínea / ** /. Solo tienes que recortar los extremos y tienes tu cuerda.

var myString = function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

alert(myString)

Me sorprende que no haya visto esto, porque funciona en todas partes donde lo he probado y es muy útil, por ejemplo, para plantillas:

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

¿Alguien sabe de un entorno donde hay HTML pero no funciona?

Resolví esto enviando un div, ocultándolo y llamando al id de div por jQuery cuando lo necesitaba.

p.ej

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

Luego, cuando necesito obtener la cadena, solo uso el siguiente jQuery:

$('#UniqueID').html();

Lo que devuelve mi texto en varias líneas. Si llamo

alert($('#UniqueID').html());

Yo obtengo:

Hay varias formas de lograr esto

1. Concatenación de barra

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. concatenación regular

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. Array Unir concatenación

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

Rendimiento sabio, concatenación Slash (primera) es la más rápida.

Consulte este caso de prueba para obtener más detalles sobre el rendimiento

Actualizar:

Con el ES2015 , podemos aprovechar su función de cadenas de plantillas. Con él, solo necesitamos usar ticks de retroceso para crear cadenas de líneas múltiples

Ejemplo:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

Usando etiquetas de script:

• agregue un <script>...</script>bloque que contenga su texto multilínea en la headetiqueta;

• obtenga su texto multilínea como está ... (cuidado con la codificación de texto: UTF-8, ASCII)

  <script>
  
      // pure javascript
      var text = document.getElementById("mySoapMessage").innerHTML ;
  
      // using JQuery's document ready for safety
      $(document).ready(function() {
  
          var text = $("#mySoapMessage").html(); 
  
      });
  
  </script>
  
  <script id="mySoapMessage" type="text/plain">
  
      <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
         <soapenv:Header/>
         <soapenv:Body>
            <typ:getConvocadosElement>
               ...
            </typ:getConvocadosElement>
         </soapenv:Body>
      </soapenv:Envelope>
  
      <!-- this comment will be present on your string -->
      //uh-oh, javascript comments...  SOAP request will fail 
  
  
  </script>

Me gusta esta sintaxis e indendación:

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(pero en realidad no se puede considerar como una cadena multilínea)

Hay esta biblioteca que lo hace hermoso:

https://github.com/sindresorhus/multiline

antes de

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

Después

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

Votantes : este código se proporciona solo con fines informativos.

Esto ha sido probado en Fx 19 y Chrome 24 en Mac

MANIFESTACIÓN

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>:
       </span>
       <span class="comment-text">
          $text
       </span> 
       @<span class="comment-time">
          2d
       </span> ago
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');

<ul></ul>

para resumir, he intentado 2 enfoques enumerados aquí en la programación javascript del usuario (Opera 11.01):

• este no funcionó: crear cadenas multilínea en JavaScript
• esto funcionó bastante bien, también he descubierto cómo hacer que se vea bien en la vista de origen de Notepad ++: Crear cadenas multilínea en JavaScript

Por lo tanto, recomiendo el enfoque de trabajo para los usuarios de Opera JS. A diferencia de lo que decía el autor:

No funciona en Firefox u Opera; solo en IE, cromo y safari.

Funciona en Opera 11. Al menos en las secuencias de comandos JS del usuario. Lástima que no puedo comentar respuestas individuales o votar la respuesta, lo haría de inmediato. Si es posible, alguien con mayores privilegios, háganlo por mí.

Mi extensión a https://stackoverflow.com/a/15558082/80404 . Espera comentar en una forma /*! any multiline comment */donde símbolo! se usa para evitar la extracción por minificación (al menos para el compresor YUI)

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

Ejemplo:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

Actualizado para 2015 : ahora es seis años después: la mayoría de las personas usa un cargador de módulos, y los sistemas de módulos principales tienen formas de cargar plantillas. No está en línea, pero el tipo más común de cadena multilínea son las plantillas, y las plantillas generalmente deben mantenerse fuera de JS de todos modos .

require.js: 'requiere texto'.

Uso del complemento require.js 'text' , con una plantilla multilínea en template.html

var template = require('text!template.html')

NPM / browserify: el módulo 'brfs'

Browserify utiliza un módulo 'brfs' para cargar archivos de texto. Esto realmente construirá su plantilla en su HTML incluido.

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

Fácil.

Si está dispuesto a usar las nuevas líneas escapadas, se pueden usar muy bien . Parece un documento con un borde de página .

El equivalente en javascript es:

var text = `
This
Is
A
Multiline
String
`;

Aquí está la especificación . Consulte el soporte del navegador al final de esta página . Aquí hay algunos ejemplos también.

Esto funciona en IE, Safari, Chrome y Firefox:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

Puede usar TypeScript (JavaScript SuperSet), admite cadenas multilínea y transpila de nuevo a JavaScript puro sin sobrecarga:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

Si desea lograr lo mismo con JavaScript simple:

var templates = 
{
 myString: function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

}
alert(templates.myString)

Tenga en cuenta que el iPad / Safari no es compatible 'functionName.toString()'

Si tiene mucho código heredado, también puede usar la variante simple de JavaScript en TypeScript (para fines de limpieza):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

y puede usar el objeto de cadena multilínea de la variante de JavaScript simple, donde coloca las plantillas en otro archivo (que puede combinar en el paquete).

Puede probar TypeScript en
http://www.typescriptlang.org/Playground

La forma ES6 de hacerlo sería mediante el uso de plantillas literales:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Más referencia aquí

ES6 le permite utilizar una tecla de retroceso para especificar una cadena en varias líneas. Se llama una plantilla literal. Me gusta esto:

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

El uso del backtick funciona en NodeJS, y es compatible con Chrome, Firefox, Edge, Safari y Opera.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

La forma más fácil de crear cadenas multilínea en Javascrips es mediante el uso de backticks (``). Esto le permite crear cadenas multilínea en las que puede insertar variables con${variableName} .

Ejemplo:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

compatibilidad:

• Fue introducido en ES6//es2015
• Ahora es compatible de forma nativa con todos los principales proveedores de navegadores (excepto Internet Explorer)

Verifique la compatibilidad exacta en documentos de Mozilla aquí

Mi versión de combinación basada en matriz para string concat:

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

Esto me ha funcionado bien, especialmente porque a menudo inserto valores en el html construido de esta manera. Pero tiene muchas limitaciones. Sangría sería bueno. No tener que lidiar con comillas anidadas sería realmente agradable, y solo su volumen me molesta.

¿El .push () para agregar a la matriz toma mucho tiempo? Ver esta respuesta relacionada:

( ¿Hay alguna razón por la que los desarrolladores de JavaScript no usen Array.push ()? )

Después de ver estas ejecuciones de prueba (opuestas), parece que .push () está bien para las matrices de cadenas que probablemente no crecerán más de 100 elementos; lo evitaré a favor de las adiciones indexadas para matrices más grandes.

Puede usar +=para concatenar su cadena, parece que nadie respondió eso, lo que será legible y también ordenado ... algo como esto

var hello = 'hello' +
            'world' +
            'blah';

también se puede escribir como

var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);

También tenga en cuenta que, al extender la cadena sobre varias líneas usando la barra diagonal inversa al final de cada línea, cualquier carácter adicional (principalmente espacios, pestañas y comentarios agregados por error) después de la barra diagonal inversa causará un error inesperado de caracteres, que tardé una hora en encontrar fuera

var string = "line1\  // comment, space or tabs here raise error
line2";

Por amor a Internet, use la concatenación de cadenas y opte por no usar soluciones ES6 para esto. ES6 NO es compatible en todos los ámbitos, al igual que CSS3 y algunos navegadores tardan en adaptarse al movimiento CSS3. Utilice JavaScript simple, sus usuarios finales se lo agradecerán.

Ejemplo:

var str = "This world is neither flat nor round. "+ "Once was lost will be found";

Debe usar el operador de concatenación '+'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

Al usar \nsu código fuente se verá así:

Esta 
 <br> es
 <br> multilínea
 <br> cadena.

Al usar <br>la salida de su navegador se verá así:

Esta
es
multilínea
cuerda.

Creo que esta solución debería funcionar en IE, Chrome, Firefox, Safari, Opera -

Usando jQuery :

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

Usando Javascript puro:

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

¡¡Salud!!

Acabo de probar la respuesta anónima y descubrí que hay un pequeño truco aquí, no funciona si hay un espacio después de la barra invertida. \
Entonces, la siguiente solución no funciona:

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

Pero cuando se elimina el espacio, funciona:

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

Espero eso ayude !!