Pregunta 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

1920
2018-04-30 02:11


origen


Respuestas:


Actualizar:

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

Un literal de plantilla está delimitado por retrocesos:

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 puedes usar transpilers para ser más compatible.


Respuesta original ES5:

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

"foo \
bar"

2293
2018-04-30 02:15



Actualizar:

Como menciona la primera respuesta, con ES6 / Babel, ahora puede crear cadenas de varias líneas simplemente mediante el uso de palos 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 simplemente se traslada a la concatenación:

user.name + ' liked your post about strings'

Respuesta original ES5:

Guía de estilo de 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.';

Los espacios en blanco al comienzo de cada línea no se pueden eliminar de manera segura en el momento de la compilación; el espacio en blanco después de la barra dará lugar a errores difíciles; y aunque la mayoría de los motores de scripts lo soportan, no es parte de ECMAScript.

Use 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.';

1117
2018-06-06 02:30



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

Para mantener la supervisión con cadenas complejas o largas de líneas múltiples, algunas 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 newline), que puede ser un bloque feo en tu código:

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

Aquí hay otro 'truco' raro pero funcional1:

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

edición externa: jsfiddle

[Además 2015]
ES6 admite cadenas de extensión en múltiples líneas utilizando cadenas de plantillas:

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 minificar / ofuscar su código


634
2018-04-30 07:22



poder tener cadenas multilínea en JavaScript puro.

Este método se basa en la serialización de funciones, que es definido para ser dependiente de la implementación. Funciona en la mayoría de los navegadores (ver a continuación), pero no hay garantía de que funcione en el futuro, así que no confíe 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 admitido en Konqueror 4.7.4

Sin embargo, ten cuidado con tu minificador. Tiende a eliminar comentarios. Para el Compresor YUI, un comentario que comienza con /*!(como el que yo usé) será preservado.

Creo que real solución sería usar CoffeeScript.


327
2018-04-06 18:16



Puedes hacerlo...

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

187
2018-03-21 21:05



Se me ocurrió este método muy trucado de una cuerda con líneas múltiples. Como 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)

107
2018-01-03 19:51



Me sorprende que no haya visto esto, ya que funciona en todos los lugares donde lo he probado y es muy útil, por ejemplo. 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?


82
2017-08-17 14:25



Lo resolví sacando un div, haciéndolo oculto, y llamando al id del 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 la siguiente jQuery:

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

Lo cual devuelve mi texto en múltiples líneas. Si llamo

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

Yo obtengo:

enter image description here


46
2017-08-23 18:30



Usando etiquetas de script:

  • Agrega un <script>...</script> bloque que contiene su texto de líneas múltiples en head etiqueta;
  • obtenga su texto de línea múltiple como está ... (tenga 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>
    

27
2018-05-26 09:34



Hay múltiples 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 Unirse a la concatenación

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

En cuanto al rendimiento, Concatenación con barras (el primero) es el más rápido.

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

Actualizar:

Con el ES2015, podemos aprovechar su característica de cadenas de plantillas. Con él, solo necesitamos usar "back-ticks" para crear cadenas de múltiples 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>
  `

25
2017-12-13 20:09