Creazione di stringhe multilinea in JavaScript

Ho il seguente codice in Ruby. Voglio convertire questo codice in JavaScript. qual è il codice equivalente in JS?

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

Aggiornare:

ECMAScript 6 (ES6) introduce un nuovo tipo di letterale, vale a dire letterali template . Hanno molte caratteristiche, interpolazione variabile tra le altre, ma soprattutto per questa domanda, possono essere multilinea.

Un modello letterale è delimitato da backtick :

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

(Nota: non sto sostenendo di usare HTML nelle stringhe)

Il supporto del browser è OK , ma puoi usare i transpiler per essere più compatibile.

Risposta originale ES5:

Javascript non ha una sintassi qui-documento. Puoi sfuggire alla newline letterale, tuttavia, che si avvicina:

"foo \
bar"

Aggiornamento ES6:

Come menziona la prima risposta, con ES6 / Babel, ora puoi creare stringhe multilinea semplicemente usando i backtick:

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

L'interpolazione delle variabili è una nuova funzionalità popolare che viene fornita con stringhe delimitate da back-tick:

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

Questo si riduce alla concatenazione:

user.name + ' liked your post about strings'

Risposta originale ES5:

La guida di stile JavaScript di Google consiglia di utilizzare la concatenazione di stringhe invece di sfuggire a nuove righe:

Non farlo:

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

Lo spazio bianco all'inizio di ogni riga non può essere rimosso in modo sicuro al momento della compilazione; gli spazi bianchi dopo la barra comporteranno errori delicati; e mentre la maggior parte dei motori di script supporta questo, non fa parte di ECMAScript.

Utilizzare invece la concatenazione di stringhe:

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

il modello text = <<"HERE" This Is A Multiline String HEREnon è disponibile in js (ricordo di averlo usato molto nei miei bei vecchi tempi in Perl).

Per tenere sotto controllo le stringhe multiline complesse o lunghe, a volte utilizzo un modello di array:

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

o lo schema anonimo già mostrato (escape newline), che può essere un brutto blocco nel tuo codice:

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

Ecco un altro "trucco" strano ma funzionante ¹ :

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

modifica esterna: jsfiddle

ES20xx supporta lo spanning di stringhe su più righe usando stringhe di template :

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: questo andrà perso dopo aver minimizzato / offuscato il codice

È possibile avere le stringhe multilinea in puro JavaScript.

Questo metodo si basa sulla serializzazione delle funzioni, definita dipendente dall'implementazione . Funziona nella maggior parte dei browser (vedi sotto), ma non c'è garanzia che funzionerà ancora in futuro, quindi non fare affidamento su di esso.

Utilizzando la seguente funzione:

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

Puoi avere qui documenti come questo:

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

Il metodo è stato testato con successo nei seguenti browser (non menzionato = non testato):

• IE 4 - 10
• Opera 9.50 - 12 (non in 9-)
• Safari 4 - 6 (non in 3-)
• Chrome 1 - 45
• Firefox 17-21 ( non in 16- )
• Rekonq 0.7.0 - 0.8.0
• Non supportato in Konqueror 4.7.4

Fai attenzione con il tuo minificatore, però. Tende a rimuovere i commenti. Per il compressore YUI , /*!verrà mantenuto un commento che inizia con (come quello che ho usato).

Penso che una vera soluzione sarebbe usare CoffeeScript .

ES6 AGGIORNAMENTO: è possibile utilizzare il backtick invece di creare una funzione con un commento ed eseguire toString sul commento. Il regex dovrebbe essere aggiornato per eliminare solo gli spazi. Potresti anche avere un metodo prototipo di stringa per fare questo:

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

Quello dovrebbe essere bello. Qualcuno dovrebbe scrivere questo metodo di stringa .removeIndentation ...;)

Puoi farlo...

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

Mi è venuto in mente questo metodo molto stravagante di una corda multi allineata. Poiché la conversione di una funzione in una stringa restituisce anche eventuali commenti all'interno della funzione, è possibile utilizzare i commenti come stringa utilizzando un commento multilinea / ** /. Devi solo tagliare le estremità e hai la tua corda.

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)

Sono sorpreso di non averlo visto, perché funziona ovunque l'ho provato ed è molto utile, ad esempio, per i modelli:

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

Qualcuno sa di un ambiente in cui c'è HTML ma non funziona?

Ho risolto questo problema emettendo un div, rendendolo nascosto e chiamando il div id di jQuery quando ne avevo bisogno.

per esempio

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

Quindi, quando ho bisogno di ottenere la stringa, uso solo il seguente jQuery:

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

Che restituisce il mio testo su più righe. Se chiamo

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

Ottengo:

Esistono diversi modi per raggiungere questo obiettivo

1. Concatenazione della barra

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

2. concatenazione regolare

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

3. Matrice Concatenazione di join

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

Per quanto riguarda le prestazioni, la concatenazione di barra (la prima) è la più veloce.

Fare riferimento a questo caso di prova per maggiori dettagli riguardanti le prestazioni

Aggiornare:

Con ES2015 , possiamo sfruttare la sua funzionalità di stringhe modello. Con esso, dobbiamo solo usare i segni di spunta per creare stringhe a più righe

Esempio:

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

Utilizzando i tag di script:

• aggiungi un <script>...</script>blocco contenente il tuo testo multilinea nel headtag;

• ottieni il tuo testo multilinea così com'è ... (fai attenzione alla codifica del testo: 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>

Mi piace questa sintassi e indendenza:

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

(ma in realtà non può essere considerato come una stringa multilinea)

C'è questa libreria che la rende bellissima:

https://github.com/sindresorhus/multiline

Prima

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

Dopo

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

Downvoter : questo codice è fornito solo a titolo informativo.

Questo è stato testato in Fx 19 e Chrome 24 su 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> 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>

per riassumere, ho provato 2 approcci elencati qui nella programmazione javascript dell'utente (Opera 11.01):

• questo non ha funzionato: creazione di stringhe multilinea in JavaScript
• questo ha funzionato abbastanza bene, ho anche capito come farlo apparire bene nella vista sorgente di Notepad ++: Creare stringhe multilinea in JavaScript

Quindi raccomando l'approccio di lavoro per gli utenti JS degli utenti di Opera. A differenza di ciò che l'autore stava dicendo:

Non funziona su Firefox o Opera; solo su IE, Chrome e Safari.

Funziona in Opera 11. Almeno negli script JS dell'utente. Peccato che non posso commentare le singole risposte o votare la risposta, lo farei immediatamente. Se possibile, qualcuno con privilegi più alti, per favore, fallo per me.

La mia estensione a https://stackoverflow.com/a/15558082/80404 . Si aspetta un commento in una forma in /*! any multiline comment */cui il simbolo! viene utilizzato per impedire la rimozione mediante minificazione (almeno per il compressore 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));
};

Esempio:

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

Aggiornato per il 2015 : sono passati sei anni: la maggior parte delle persone utilizza un caricatore di moduli, e i principali sistemi di moduli hanno ciascuno dei modi per caricare i modelli. Non è in linea, ma il tipo più comune di stringa multilinea sono i modelli e in genere i modelli devono essere comunque esclusi da JS .

require.js: 'request text'.

Utilizzando il plugin 'text' request.js , con un modello multilinea in template.html

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

NPM / browserify: il modulo 'brfs'

Browserify utilizza un modulo 'brfs' per caricare file di testo. Questo effettivamente costruirà il tuo modello nel tuo HTML aggregato.

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

Facile.

Se sei disposto a usare le nuove righe sfuggite, possono essere usate bene . Sembra un documento con un bordo della pagina .

L'equivalente in JavaScript è:

var text = `
This
Is
A
Multiline
String
`;

Ecco le specifiche . Consulta il supporto del browser nella parte inferiore di questa pagina . Ecco anche alcuni esempi .

Funziona con IE, Safari, Chrome e 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>

Puoi usare TypeScript (JavaScript SuperSet), supporta stringhe multilinea e traspila di nuovo in puro JavaScript senza sovraccarico:

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

alert(templates.myString);

Se desideri ottenere lo stesso risultato con JavaScript semplice:

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)

Nota che l'iPad / Safari non supporta 'functionName.toString()'

Se hai un sacco di codice legacy, puoi anche usare la semplice variante JavaScript in TypeScript (per scopi di pulizia):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

e puoi usare l'oggetto a stringa multipla dalla semplice variante JavaScript, dove metti i template in un altro file (che puoi unire nel bundle).

Puoi provare TypeScript su
http://www.typescriptlang.org/Playground

Il modo ES6 per farlo sarebbe usando letterali template:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Più riferimento qui

ES6 consente di utilizzare un backtick per specificare una stringa su più righe. Si chiama modello letterale. Come questo:

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

L'uso del backtick funziona in NodeJS ed è supportato da Chrome, Firefox, Edge, Safari e Opera.

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

Il modo più semplice per creare stringhe multilinea in Javascrips è con l'uso di backtick (``). Ciò consente di creare stringhe multilinea in cui è possibile inserire variabili${variableName} .

Esempio:

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

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

my age is: ${age}
`;

console.log(multilineString);

Compatibilità :

• È stato introdotto in ES6//es2015
• Ora è supportato nativamente da tutti i principali fornitori di browser (tranne Internet Explorer)

Controlla l'esatta compatibilità nei documenti di Mozilla qui

La mia versione di join basato su array per 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'));

Questo ha funzionato bene per me, soprattutto perché inserisco spesso valori nell'html costruito in questo modo. Ma ha molte limitazioni. Il rientro sarebbe carino. Non avere a che fare con le virgolette nidificate sarebbe davvero bello, e solo l'ingombrantezza mi disturba.

Il .push () da aggiungere all'array impiega molto tempo? Vedi questa risposta correlata:

( C'è un motivo per cui gli sviluppatori JavaScript non usano Array.push ()? )

Dopo aver esaminato queste (opposte) prove, sembra che .push () vada bene per gli array di stringhe che probabilmente non supereranno i 100 elementi - lo eviterò a favore di aggiunte indicizzate per array più grandi.

Puoi usare +=per concatenare la tua stringa, sembra che nessuno abbia risposto a ciò, che sarà leggibile, e anche pulito ... qualcosa del genere

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

può anche essere scritto come

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

console.log(hello);

Si noti inoltre che, quando si estende la stringa su più righe utilizzando la barra rovesciata in avanti alla fine di ogni riga, qualsiasi carattere aggiuntivo (principalmente spazi, tabulazioni e commenti aggiunti per errore) dopo la barra rovesciata in avanti causerà un errore di carattere imprevisto, che ho impiegato un'ora per trovare su

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

Per amore di Internet, utilizzare la concatenazione di stringhe e scegliere di non utilizzare le soluzioni ES6 per questo. ES6 NON è supportato su tutta la linea, proprio come CSS3 e alcuni browser sono lenti ad adattarsi al movimento CSS3. Utilizza JavaScript semplice, i tuoi utenti finali ti ringrazieranno.

Esempio:

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

Devi usare l'operatore di concatenazione '+'.

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

Usando il \ntuo codice sorgente apparirà -

Questo 
 <br> è
 <br> multilinea
 <br> stringa.

Utilizzando <br>l'output del browser sarà simile a:

Questo
è
multilinea
corda.

Penso che questa soluzione alternativa dovrebbe funzionare in Internet Explorer, Chrome, Firefox, Safari, Opera -

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

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

Saluti!!

Ho appena provato la risposta anonima e ho scoperto che qui c'è un piccolo trucco, non funziona se c'è uno spazio dopo la barra rovesciata \
Quindi la seguente soluzione non funziona:

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

Ma quando lo spazio viene rimosso funziona -

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

alert(x.test);​

Spero che sia d'aiuto !!