Creazione di stringhe multilinea in JavaScript

Question

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

Answer 1

Aggiornamento:

ECMAScript 6 (ES6) introduce un nuovo tipo di letterale, ovvero modelli letterali . 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 per il browser è OK , ma puoi usare transpilers per essere più compatibile.

---

Risposta ES5 originale:

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

"foo \
bar"

Answer 2

Aggiornamento ES6:

Come menzionato nella 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 ES5 originale:

  

Guida allo stile JavaScript di Google consiglia invece di utilizzare la concatenazione di stringhe di escape 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.';

     

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.

     

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

Answer 3

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 multilinea complesse o lunghe, a volte uso un modello di matrice:

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 utilizzando il modello stringhe :

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 tuo codice

Answer 4

puoi avere stringhe multilinea in puro JavaScript.

Questo metodo si basa sulla serializzazione delle funzioni, che è definito come dipendente dall'implementazione . Funziona con la 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

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

Penso che una soluzione reale sarebbe usare CoffeeScript .

Answer 5

Puoi farlo ...

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

Answer 6

Mi è venuta in mente questa tecnica molto rigida di una corda a più righe. 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)

Answer 7

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 in cui c'è HTML ma non funziona?

Answer 8

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

per es.

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

Answer 9

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 join

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

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

Consulta questo test case per maggiori dettagli sulla performance

Aggiornamento:

Con il ES2015 , possiamo sfruttare la sua funzione di stringhe modello. Con esso, dobbiamo solo usare i segni di spunta indietro 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>
  `

Answer 10

Uso dei tag script:

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

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

Answer 11

Mi piace questa sintassi e rientro:

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

(ma in realtà non può essere considerato come una stringa a più righe)

Answer 12

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

Answer 13

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

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
• ha funzionato abbastanza bene, ho anche capito come farlo apparire bene nella vista sorgente di Notepad ++: Creazione di stringhe multilinea in JavaScript

Quindi raccomando l'approccio operativo 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.

Answer 15

Aggiornato per il 2015 : sono trascorsi 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 i modelli dovrebbero generalmente essere comunque esclusi da JS .

require.js: 'request text'.

Utilizzo di plugin 'text' require.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 in bundle.

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

Facile.

Answer 16

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

Answer 17

Funziona in 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>

Answer 18

La mia estensione a https://stackoverflow.com/a/15558082/80404 . Si aspetta un commento in una forma /*! any multiline comment */ dove 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();

Answer 19

L'equivalente in javascript è:

var text = `
This
Is
A
Multiline
String
`;

Ecco la specifica . Consulta il supporto del browser in fondo a questa . Ecco alcuni anche esempi .

Answer 20

Puoi usare TypeScript (JavaScript SuperSet), supporta stringhe multilinea e traspone di nuovo fino a puro JavaScript senza spese generali:

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 più righe 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

Answer 21

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

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

Answer 22

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 con ${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 Mozilla qui

Answer 23

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 ' t usa 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.

Answer 24

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

Answer 25

Si noti inoltre che, quando si estende la stringa su più righe utilizzando la barra rovesciata in avanti alla fine di ogni riga, eventuali caratteri extra (principalmente spazi, tabulazioni e commenti aggiunti per errore) dopo la barra rovesciata in avanti causeranno un errore di carattere imprevisto, che ho preso un ora per scoprirlo

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

Answer 26

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

Answer 27

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 \n il tuo codice sorgente sarà simile a

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

Usando <br> l'output del tuo browser sarà simile a

This
is
multiline
string.

Answer 28

Il modo ES6 di farlo sarebbe usando letterali template:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Ulteriori riferimenti qui

Answer 29

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

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

Answer 30

Ho appena provato la risposta anonima e ho scoperto che c'è un piccolo trucco qui, 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 !!