Crear cadenas multilínea en JavaScript


2613

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


Mira esto en diferentes formas de lograr lo mismo. También he agregado el rendimiento de cada método stackoverflow.com/a/23867090/848841
Vignesh Subramanian

Respuestas:


3320

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"

231
Tenga cuidado: algunos navegadores insertarán nuevas líneas en la continuación, otros no.
staticsan

35
Visual Studio 2010 también parece estar confundido por esta sintaxis.
jcollum

47
@Nate Se especifica en ECMA-262 5.a edición, sección 7.8.4, y se llama LineContinuation : "Un carácter terminador de línea no puede aparecer en un literal de cadena, excepto como parte de un LineContinuation para producir la secuencia de caracteres vacía. La forma correcta de provocar un el carácter del terminador de línea para formar parte del valor de cadena de un literal de cadena es usar una secuencia de escape como \ n o \ u000A ".
Algunos

16
No veo por qué haría esto cuando los navegadores lo tratan de manera inconsistente. "line1 \ n" + "line2" en varias líneas es lo suficientemente legible y se garantiza un comportamiento coherente.
SamStephens

11
"El soporte del navegador está bien" ... no es compatible con IE11 - no está bien
Tom Andraszek

1318

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

19
No entiendo la recomendación de Google. Todos los navegadores, excepto los extremadamente antiguos, admiten la barra diagonal inversa seguida del enfoque de nueva línea, y continuarán haciéndolo en el futuro por compatibilidad con versiones anteriores. El único momento en que debe evitarlo es si necesita asegurarse de que se haya agregado una y solo una nueva línea (o ninguna nueva) al final de cada línea (consulte también mi comentario sobre la respuesta aceptada).
Matt Browne

66
Tenga en cuenta que las cadenas de plantillas no son compatibles con IE11, Firefox 31, Chrome 35 o Safari 7. Consulte kangax.github.io/compat-table/es6
EricP

29
@MattBrowne La recomendación de Google ya está documentada por ellos, en orden de importancia por razones: (1) El espacio en blanco al comienzo de cada línea [en el ejemplo, no desea ese espacio en blanco en su cadena pero se ve mejor en el código ] (2) el espacio en blanco después de la barra oblicua dará como resultado errores difíciles [si finaliza una línea con en \ lugar de `\` es difícil de notar] y (3) mientras que la mayoría de los motores de script admiten esto, no es parte de ECMAScript [es decir, por qué ¿usa características no estándar?] Recuerde que es una guía de estilo, que trata de hacer que el código sea fácil de leer + mantener + depurar: no solo "funciona" correctamente.
ShreevatsaR

1
Es sorprendente que, después de todos estos años, la concatenación de cadenas siga siendo la mejor / más segura / más compatible forma de hacerlo. los literales de plantilla (respuesta anterior) no funcionan en IE y escapar de las líneas es solo un desastre del que pronto te arrepentirás
Tiago Duarte

1
Descubrí de la manera difícil que las versiones anteriores de Android no son compatibles con los backticks, por lo que si tienes una aplicación de Android que usa webView, ¡tus backticks harán que tu aplicación no se ejecute!
Michael Fever

684

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 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 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.`;

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


34
Por favor no use el patrón de matriz. Será más lento que la concatenación de cadenas simple en la mayoría de los casos.
BMiner

73
El patrón de matriz es más legible y la pérdida de rendimiento para una aplicación a menudo es insignificante. Como muestra esa prueba de rendimiento, incluso IE7 puede realizar decenas de miles de operaciones por segundo.
Benjamin Atkin

19
+1 para una alternativa elegante que no solo funciona de la misma manera en todos los navegadores, sino que también está preparada para el futuro.
Pavel

26
@KooiInc Sus pruebas comienzan con la matriz ya creada, que sesga los resultados. Si agrega la inicialización de la matriz, la concatenación directa es más rápida jsperf.com/string-concat-without-sringbuilder/7 Vea stackoverflow.com/questions/51185/... Como truco para las nuevas líneas, puede estar bien, pero definitivamente haciendo más trabajo del que debería
Juan Mendes

99
@BMiner: 1) "La optimización prematura es la raíz de todo mal" - Donald Knuth, y 2) "la legibilidad" está en el ojo del espectador
Paul Bennett

348

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


232
¿¡Qué!? ¿Crear y descompilar una función para hackear un comentario multilínea y convertirlo en una cadena multilínea? Eso sí que es feo.
fforw

44
jsfiddle.net/fqpwf funciona en Chrome 13 e IE8 / 9, pero no en FF6. Odio decirlo, pero me gusta, y si pudiera ser una característica intencional de cada navegador (para que no desapareciera), lo usaría.
Jason Kleban

2
@ uosɐſ: para que sea intencional, tendría que estar en la especificación; o tan utilizado, que los fabricantes de navegadores no querrían eliminar esta característica "accidental". Sin embargo, gracias por los experimentos ... Prueba un poco de café.
Jordão

1
a.toString (). substring (15, a.toString (). length-4) también funciona, y no necesita escanear toda la cadena (aunque lo más probable es que y el conteo lo convierta en otro escaneo de todos modos. Oh, bueno .)
Lodewijk

2
Extremadamente práctico. Lo estoy usando para pruebas unitarias (Jasmine), pero lo evito para el código de producción.
Jason


139

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)

37
Esto es absolutamente aterrador. Me encanta (aunque es posible que tengas que hacer una coincidencia de expresiones regulares porque no estoy seguro de cuán preciso es el espacio en blanco toString().)
Kevin Cox

Esta solución no parece funcionar en Firefox, ¿tal vez es una característica de seguridad para el navegador? EDITAR: No importa, solo no funciona para Firefox Versión 16.
Bill Software Engineer

45
También tenga cuidado con los minificadores que
eliminan los

3
Por eso no podemos tener cosas buenas.
Danilo M. Oliveira

44
Puedes hacer algunas cosas raras en javascript land. Aunque con toda honestidad, nunca deberías usar esto.
Lucas

88

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?


23
En cualquier lugar que no desee colocar sus cadenas en elementos de script separados y distantes.
Lodewijk

99
¡Una objeción válida! No es perfecto Pero para las plantillas, esa separación no solo está bien, sino que incluso se fomenta.
Peter V. Mørch

1
Prefiero dividir todo en más de 80/120 caracteres en varias líneas, me temo que eso es más que solo plantillas. Ahora prefiero la sintaxis 'line1' + 'line2'. También es el más rápido (aunque esto podría rivalizar con textos realmente grandes). Sin embargo, es un buen truco.
Lodewijk

27
en realidad, esto es HTML, no Javascript: - /
CpILL

55
sin embargo, la tarea de obtener una cadena multilínea en javascript se puede hacer de esta manera
Davi Fiamenghi

52

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:

ingrese la descripción de la imagen aquí


2
¡Gracias por esto! Es la única respuesta que he encontrado que resuelve mi problema, que implica cadenas desconocidas que pueden contener cualquier combinación de comillas simples y dobles que se insertan directamente en el código sin posibilidad de precodificación. (proviene de un lenguaje de plantillas que crea el JS, aún de una fuente confiable y no de un envío de formulario, por lo que no está TOTALMENTE demente).
octern

Este fue el único método que realmente funcionó para mí para crear una variable de cadena de JavaScript de varias líneas a partir de una cadena de Java.
principiante_

44
¿Qué pasa si la cadena es HTML?
Dan Dascalescu

44
$ ('# UniqueID'). Content ()
mplungjan

1
@Pacerier Todo lo que he leído, tanto de Google como de otros sitios, dice que hoy en día Google indexa el display:nonecontenido, probablemente debido a la popularidad de los front-end con estilo JavaScript. (Por ejemplo, una página de preguntas frecuentes con funcionalidad de ocultar / mostrar). Sin embargo, debe tener cuidado, porque Google dice que pueden castigarlo si el contenido oculto parece estar diseñado para inflar artificialmente su clasificación SEO.
Gavin

31

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

11
Creo que acabas de regurgitar lo que ya ha estado en la página durante cinco años, pero de una manera más limpia.
RandomInsano

¿no incluirá la concatenación de barras también el espacio en blanco al comienzo de las líneas?
f.khantsis

29

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>

Creo que esta estrategia es limpia y muy poco utilizada. jsrender usa esto.
xdhmoore

Estoy usando esto con innerText iso innerHTML, pero ¿cómo me aseguro de que se conservan los espacios en blanco?
David Nouls

También consultas ajax en caso de que las esté utilizando. Puede intentar cambiar sus encabezados xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");. No recuerdo haber tenido otros problemas además de escribir mal los comentarios en JS. Espacios donde no hay problemas.
jpfreire

24

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)


3
Lo uso, excepto que pongo el '+' al final de la línea anterior, para dejar en claro que la declaración continúa en la siguiente línea. Sin embargo, su forma alinea las sangrías de manera más uniforme.
Sean

@Sean, yo también uso esto, y todavía prefiero poner el '+' al comienzo de cada nueva línea agregada, y el final ';' en una nueva línea, porque lo encontré más "correcto".
AgelessEssence

77
poner el + al principio le permite a uno comentar esa línea sin tener que editar otras líneas cuando es la primera / última línea de la secuencia.
moliad

3
Prefiero el + en el frente también, ya que visualmente no necesito escanear hasta el final de la línea para saber que el siguiente es una continuación.
Daniel Sokolowski

18

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

1
Este soporte en el nodejsuso en el navegador debe ser provechoso.
Huei Tan

3
Los documentos de @HueiTan Docs también funcionan en el navegador. Lo que tiene sentido, es justo Function.prototype.String().
mikemaccana

sí, pero decía "Si bien funciona bien en el navegador, está destinado principalmente para su uso en Node.js.Use bajo su propio riesgo. Si bien funciona bien en el navegador, está principalmente destinado para su uso en Node.js. Use bajo tu propio riesgo." (Solo por XD)
Huei Tan

@HueiTanYep Leí esa parte. Pero Function.prototype.toString () es bastante estable y bien conocido.
mikemaccana

1
La mejor respuesta para mí porque al menos logra multilínea sin toda la basura en el medio (La basura al principio y al final puedo tratar).
Damien Golding

14

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>


13
Eso es horrible +1. Y puede usar document.currentScript en lugar de getElement ...
Orwellophile

1
"You" indefinido en cromo para osx
mplungjan

1
jsfiddle-fixed - Debo haber definido "usted" globalmente en mi consola. Funciona ahora (chrome / osx). Lo bueno de agregar el comentario a una variable es que no estás en un contexto de función, jsfiddle-function-heredoc, aunque la función sería genial para los métodos de clase. podría ser mejor pasarle un objeto replace {this: that} de todos modos. divertido de todos modos llevar algo loco al límite :)
Orwellophile

1
Olvídate de los que odian. Esta es la única barra de respuesta correcta ES6. Todas las otras respuestas requieren concatenación, cálculo de algún tipo o escape. Esto es realmente genial y lo voy a usar como una forma de agregar documentación a un juego en el que estoy trabajando como hobby. Siempre y cuando este truco no se use para algo que pueda invocar un error (puedo ver cómo alguien diría "Semicolon, derp. Vamos a poner el comentario en la siguiente línea" y luego rompe el código). Pero, es eso realmente es un gran problema en mi juego de hobby? No, y puedo usar el truco genial para algo útil. Gran respuesta.
Thomas Dignan

2
Nunca he sido lo suficientemente valiente como para usar esta técnica en el código de producción, pero donde lo uso mucho es en pruebas unitarias, donde a menudo es más fácil volcar el valor de alguna estructura como una cadena (bastante larga) y compararla con lo que 'debería' ser.
Ben McIntyre

10

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

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


Este es mi primer comentario real. Obtuve el privilegio de voto a favor hace 2 días, así que inmediatamente voté a favor la respuesta que mencioné anteriormente. Gracias a cualquiera que haya votado mi débil intento de ayudar.
Tyler

Gracias a todos los que votaron por esta respuesta: ¡ahora tengo suficientes privilegios para publicar comentarios normales! Así que gracias de nuevo.
Tyler

10

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

9

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.


9

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

ingrese la descripción de la imagen aquí


2
¿No agregaría esto espacios en blanco extraños?
tomByrer

1
@tomByrer Sí, buena observación. Solo es bueno para cadenas que no le interesan los espacios en blanco, por ejemplo, HTML.
seo


8

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>

66
Solo piensa en ello. ¿Crees que es válido? ¿No crees que puede causar problemas de visualización?
Sk8erPeter

55
¿Por qué los votos negativos? ¡Esta es una respuesta creativa, si no es muy práctica!
dotancohen

2
no, no es. Uno debería usar plantillas: $ .tmpl () ( api.jquery.com/tmpl ), o EJS ( embeddedjs.com/getting_started.html ), etc. Una razón para los votos negativos es que está muy lejos de ser un código válido y usar Esto puede causar grandes problemas de visualización.
Sk8erPeter

Espero que nadie use esta respuesta en la práctica, pero es una buena idea
DCShannon

7

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


¿Alguna documentación sobre la limitación de iPad / Safari? MDN parece pensar que todo está bien - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Campbeln

@Campbeln: CoWorker me dijo esto (usó el código). No lo he probado yo mismo. También puede depender de la versión de iPad / Safari, por lo que probablemente depende.
Stefan Steiger

6

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í


Esta respuesta no solo es pequeña, está incompleta y tiene un formato incorrecto, sino que tampoco agrega absolutamente nada a las respuestas anteriores. Marcarlo y saltar para ser eliminado.
Victor Schröder


4

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í


¿Es esto ahora compatible con todos los navegadores recientes? ¿O hay algunos navegadores que todavía no admiten esta sintaxis?
cmpreshn

Perdón por mi extremo comentario tardío, edité la respuesta y agregó información de compatibilidad;)
Willem van der Veen

3

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.


3

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

3

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

3

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


3
Si bien estoy de acuerdo con su punto, no llamaría a JavaScript "bueno" ol
user151496

2

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.

1

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


<xmp>es tan obsoleto Puede estar permitido en HTML, pero no debe ser utilizado por ningún autor. Ver stackoverflow.com/questions/8307846/…
Bergi

@Bergi, tienes razón ... y usar <pre>;escapes no ayudará en mi solución ... Me encontré con un problema similar hoy y tratando de encontrar una solución alternativa ... pero en mi caso, encontré una manera muy fácil de solucionar este problema poniendo la salida en comentarios html en lugar de <xmp> o cualquier otra etiqueta. jajaja Sé que no es una forma estándar de hacer esto, pero trabajaré en este tema más mañana por la mañana. ¡Saludos!
Aditya Hajare

Desafortunadamente, incluso con style="display:none"Chrome intenta cargar las <img>imágenes mencionadas en el bloque de ejemplo.
Jesse Glick

0

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


77
obviamente, si tiene un espacio después de una barra invertida, la barra invertida escapa del espacio. Se supone que debe escapar del salto de línea, no del espacio.
Sejanus
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.