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 di 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 = ` 
Some HTML here
`;

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

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


Risposta originale ES5:

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

 "foo \ bar" 

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:

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

the pattern 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 = ['
', 'some content
', 'someRefTxt', '
' ].join('\n');

o il pattern anonymous già mostrato (escape newline), che può essere un brutto blocco nel tuo codice:

  var myString = '
\ some content
\ someRefTxt \
';

Ecco un altro "trucco" strano ma funzionante 1 :

 var myString = (function () {/* 
some content
someRefTxt
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

modifica esterna: jsfiddle

ES20xx supporta lo spanning di stringhe su più righe utilizzando 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.`; 

1 Nota: questo verrà perso dopo aver minimizzato / offuscato il codice

Puoi avere stringhe multilinea in puro JavaScript.

Questo metodo si basa sulla serializzazione delle funzioni, che è definita come 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 che una soluzione reale sarebbe usare CoffeeScript .

Puoi farlo…

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

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, è ansible 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 per esempio nei template:

   

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

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

per esempio

  

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:

inserisci la descrizione dell'immagine qui

Utilizzo dei tag di script:

  • aggiungi un blocco contenente il testo multilinea nel tag head ;
  • ottieni il tuo testo multilinea come è … (attenzione per la codifica del testo: UTF-8, ASCII)

       

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

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

Fare riferimento a questo caso di test per ulteriori dettagli relativi alle prestazioni

Aggiornare:

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

Esempio:

  `

{{title}}

{{hero.name}} details!

{{hero.id}}
{{hero.name}}
`

Mi piace questa syntax e indizione:

 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 lo rende bello:

https://github.com/sindresorhus/multiline

Prima

 var str = '' + '< !doctype html>' + '' + ' ' + ' 

❤ unicorns

' + ' ' + '' + '';

Dopo

 var str = multiline(function(){/* < !doctype html>   

❤ unicorns

*/});

Downvoters : questo codice viene fornito a solo scopo informativo.

Questo è stato testato in Fx 19 e Chrome 24 su Mac

DEMO

 var new_comment; /*< <  You   $text   2d   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')); 

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

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

Quindi raccomando l’approccio di lavoro per gli utenti JS 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 non poter commentare le singole risposte o modificare la risposta, lo farei immediatamente. Se ansible, qualcuno con privilegi più alti, fallo per me.

Aggiornato per il 2015 : sono passati sei anni più tardi: la maggior parte delle persone usa un caricatore di moduli, ei sistemi dei moduli principali hanno ciascuno dei modi per caricare i modelli. Non è in linea, ma il tipo più comune di stringa multilinea sono modelli, e in ogni caso i modelli dovrebbero essere tenuti fuori da JS .

require.js: ‘richiede testo’.

Usando il 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 in realtà creerà il tuo modello nel tuo codice HTML in bundle.

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

Facile.

Se sei disposto ad usare le newline evase, possono essere usate bene . Sembra un documento con un bordo di pagina .

inserisci la descrizione dell'immagine qui

Funziona su IE, Safari, Chrome e Firefox:

  

La mia estensione a https://stackoverflow.com/a/15558082/80404 . Si aspetta un commento in un modulo /*! any multiline comment */ /*! any multiline comment */ dove simbolo! è usato per prevenire la rimozione tramite minification (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() { /*!  */}.extractComment(); 

Puoi usare TypeScript (JavaScript SuperSet), supporta stringhe multiline e ritrasferisce a puro JavaScript senza sovraccarico:

 var templates = { myString: `this is a multiline string` } alert(templates.myString); 

Se vuoi realizzare lo stesso con un semplice JavaScript:

 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) 

ed è ansible utilizzare l’object multiline-string dalla variante JavaScript semplice, in cui si inseriscono i modelli in un altro file (che è ansible unire nel pacchetto).

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

L’equivalente in javascript è:

 var text = ` This Is A Multiline String `; 

Ecco le specifiche . Vedi il supporto del browser in fondo a questa pagina . Ecco alcuni esempi .

ES6 consente di utilizzare un apice per specificare una stringa su più righe. Si chiama Template Literal. Come questo:

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

L’utilizzo dell’anticipo funziona in NodeJS ed è supportato da Chrome, Firefox, Edge, Safari e Opera.

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

La mia versione di join basato su array per string concat:

 var c = []; //c stands for content c.push("
"); c.push("
"); $(body).append(c.join('\n'));

Questo ha funzionato bene per me, soprattutto perché spesso inserisco i valori nell’html costruito in questo modo. Ma ha molte limitazioni. L’indentazione sarebbe bella. Non dover trattare con virgolette annidate sarebbe davvero bello, e solo l’ingombrantezza mi infastidisce.

Il file .push () da aggiungere all’array occupa molto tempo? Vedi questa risposta correlata:

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

Dopo aver esaminato queste esecuzioni di test (opposti), sembra che .push () funzioni bene per gli array di stringhe che probabilmente non cresceranno più di 100 elementi: lo eviterò a favore degli incrementi indicizzati per gli array più grandi.

Puoi usare += per concatenare la tua stringa, sembra che nessuno abbia risposto, che sarà leggibile, e anche pulito … qualcosa come questo

 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 alla fine di ogni riga, qualsiasi carattere in più (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"; 

Si prega per l’amore di Internet utilizzare la concatenazione di stringhe e optare di non utilizzare le soluzioni ES6 per questo. ES6 NON è supportato su tutta la linea, proprio come i CSS3 e alcuni browser sono lenti ad adattarsi al movimento CSS3. Utilizza semplicemente JavaScript, 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>    Document   

Usando \n tuo codice sorgente sarà simile –

 Questo 
  
è
multilinea
stringa.

Usando il tuo browser, l’output sarà simile a:

 Questo
 è
 multilinea
 stringa.

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

Usando jQuery :

   

Usando Pure Javascript:

   

Saluti!!

Just tried the Anonymous answer and found there’s a little trick here, it doesn’t work if there’s a space after backslash \
So the following solution doesn’t work –

 var x = { test:'< ?xml version="1.0"?>\ < -- One space here ' }; 

But when space is removed it works –

 var x = { test:'< ?xml version="1.0"?>\< -- No space here now ' }; alert(x.test);​ 

Hope it helps !!

If you happen to be running in Node only, you could use the fs module to read in the multi-line string from a file:

 var diagram; var fs = require('fs'); fs.readFile( __dirname + '/diagram.txt', function (err, data) { if (err) { throw err; } diagram = data.toString(); }); 

The ES6 way of doing it would be by using template literals:

 const str = `This is a multiline text`; console.log(str);