Crear cadenas multilínea en JavaScript

Question

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

Answer 1

Actualización:

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, pueden ser multilínea.

Un literal de plantilla está delimitado por backticks :

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

(Nota: no estoy recomendando utilizar HTML en cadenas)

El soporte del navegador está bien , pero puede usar transpilers para que sea 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"

Answer 2

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 característica nueva y 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 su 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 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.';

Answer 3

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

Para supervisar las cadenas de líneas múltiples 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 extensión sobre varias líneas utilizando la plantilla cadenas :

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

Answer 4

Usted puede tener cadenas multilínea en JavaScript puro.

Este método se basa en la serialización de funciones, que está definido 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-)
• Chrome 1 - 45
• Firefox 17 - 21 ( no en 16- )
• Rekonq 0.7.0 - 0.8.0
• No compatible con Konqueror 4.7.4

Tenga cuidado con su minificador, sin embargo. Tiende a eliminar comentarios. Para el YUI compresor , se mostrará un comentario que comience con /*! (como el que usé) Preservado.

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

Answer 5

Puedes hacer esto ...

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

Answer 6

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

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)

Answer 7

Me sorprende que no haya visto esto, porque funciona en todas partes donde lo he probado y es muy útil, p. 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?

Answer 8

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

por ejemplo

<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();

Que devuelve mi texto en varias líneas. Si llamo

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

Obtengo:

Answer 9

Hay varias formas de lograr esto

1. Concatenación de barras

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

2. concatenación regular

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

3. Matriz Unir concatenación

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

Rendimiento inteligente, Concatenación de barra oblicua (primera) es la más rápida.

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

Update:

Con el ES2015 , podemos aprovechar su característica de Cadenas de plantilla. Con él, solo necesitamos usar ticks de retroceso para crear cadenas de varias líneas

Ejemplo:

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

Answer 10

Uso de etiquetas de script:

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

• 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>
  

Answer 11

Me gusta esta sintaxis e indendación:

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

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

Answer 12

Existe esta biblioteca que la hace hermosa:

https://github.com/sindresorhus/multiline

Antes

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>
*/});

Answer 13

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

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

DEMO

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>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

Answer 14

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

• este no funcionó: Creación de 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

Así que 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ágalo por mí.

Answer 15

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: 'requerir texto'.

Usando require.js 'text' plugin , con una plantilla multilínea en template.html

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

NPM / browserify: el módulo 'brfs'

Browserify usa 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.

Answer 16

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

Answer 17

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>

Answer 18

Mi extensión para https://stackoverflow.com/a/15558082/80404 . Espera un comentario 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();

Answer 19

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.

Answer 20

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

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 con '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 simple de JavaScript, donde coloca las plantillas en otro archivo (que puede combinar en el paquete).

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

Answer 21

ES6 le permite usar una tecla de retroceso para especificar una cadena en varias líneas. Se llama una plantilla literal. Así:

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

Answer 22

La forma más fácil de crear cadenas multilínea en Javascrips es con el uso de backticks (``). Esto le permite crear cadenas de varias líneas 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í

Answer 23

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? Vea esta respuesta relacionada:

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

Después de mirar 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.

Answer 24

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);

Answer 25

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 (en su mayoría espacios, pestañas y comentarios agregados por error) después de la barra diagonal inversa causará un error inesperado de caracteres, que tomé un hora para averiguarlo

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

Answer 26

Por favor, 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";

Answer 27

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 \n su código fuente se verá así:

This 
 <br>is
 <br>multiline
 <br>string.

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

This
is
multiline
string.

Answer 28

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í

Answer 29

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

Uso de 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>

Uso de 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>

¡Saludos!

Answer 30

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 que ayude!