Domanda 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

1920
2018-04-30 02:11


origine


risposte:


Aggiornare:

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

Un modello letterale è delimitato da apici inversi:

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

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

Il supporto del browser è OK, ma puoi usare transpilers per essere più compatibili.


Risposta originale ES5:

Javascript non ha una sintassi di here-document. Puoi sfuggire alla nuova riga letterale, tuttavia, che si avvicina:

"foo \
bar"

2291
2018-04-30 02:15



Aggiornare:

Come la prima risposta cita, con ES6 / Babel, ora puoi creare stringhe multi-linea semplicemente usando i backtick:

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

Le variabili di interpolazione sono una nuova caratteristica popolare che viene fornita con stringhe delimitate back-tick:

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

Questo appena traspone fino alla concatenazione:

user.name + ' liked your post about strings'

Risposta originale ES5:

Guida di stile JavaScript di Google consiglia di utilizzare la concatenazione di stringhe anziché l'escaping di 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.';

Gli spazi bianchi all'inizio di ogni riga non possono essere rimossi in modo sicuro al momento della compilazione; lo spazio bianco dopo la barra si tradurrà in errori ingannevoli; e mentre la maggior parte dei motori di script supporta questo, non fa parte di ECMAScript.

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

1117
2018-06-06 02:30



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

Per mantenere la supervisione con stringhe multiline complesse o lunghe, a volte uso un pattern array:

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

o il pattern anonymous 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 funzionante1:

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

modifica esterna: jsfiddle

[Oltre il 2015]
ES6 supporta lo spanning di stringhe su più linee usando stringhe di modelli:

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


634
2018-04-30 07:22



tu può avere stringhe multilinea in puro JavaScript.

Questo metodo si basa sulla serializzazione delle funzioni, che è definito per essere dipendente dall'implementazione. Funziona nella maggior parte dei browser (vedi sotto), ma non è garantito 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

Stai attento con il minificatore, però. Tende a rimuovere i commenti. Per il Compressore YUI, un commento che inizia con /*!(come quello che ho usato) sarà conservato.

Penso a vero soluzione sarebbe da usare CoffeeScript.


327
2018-04-06 18:16



Puoi farlo...

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

187
2018-03-21 21:05



Mi è venuto in mente questo metodo molto jimmy truccato di una stringa multi-foderato. Poiché la conversione di una funzione in una stringa restituisce anche qualsiasi commento 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)

107
2018-01-03 19:51



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

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

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


82
2017-08-17 14:25



Ho risolto questo problema emettendo un div, rendendolo nascosto e chiamando il div id da 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, io uso solo il seguente jQuery:

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

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

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

Ottengo:

enter image description here


46
2017-08-23 18:30



Utilizzo dei tag di script:

  • aggiungere un <script>...</script> blocco contenente il testo multilinea in head etichetta;
  • ottieni il tuo testo multilinea come è ... (attenzione per la 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>
    

27
2018-05-26 09:34



Ci sono molti modi per ottenere questo

1. Concatenazione di barre

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

2. concatenazione regolare

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

3. Array Join concatenation

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

Prestazioni saggia, Concatenazione di barre (il primo) è il più veloce.

Fare riferimento  questo test case per maggiori dettagli riguardo la performance

Aggiornare:

Con il ES2015, possiamo approfittare della sua funzione di stringhe Template. Con esso, abbiamo solo bisogno di usare back-ticks per creare stringhe multi linea

Esempio:

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