Tworzenie ciągów wielowierszowych w JavaScript

ES6 Update:

Jak wspomina pierwsza odpowiedź, za pomocą ES6 / Babel, możesz teraz tworzyć ciągi Wielowierszowe po prostu za pomocą backticks:

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

Interpolowanie zmiennych jest popularną nową funkcją, która jest dostarczana z ciągami rozdzielonymi tylnym kleszczem:

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

To po prostu sprowadza się do konkatenacji:

user.name + ' liked your post about strings'

Oryginalna odpowiedź ES5:

Google ' s JavaScript style guide zaleca stosowanie konkatenacji łańcuchów zamiast znaków specjalnych:

Nie rób tego:

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

Biała Spacja na początku każdej linii nie może być bezpiecznie usunięta podczas kompilacji; Biała spacja po ukośniku spowoduje trudne błędy; i chociaż większość silników skryptowych to obsługuje, nie jest częścią ECMAScript.

Zamiast tego użyj konkatenacji łańcuchowej:

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

Wzorzec text = <<"HERE" This Is A Multiline String HERE nie jest dostępny w js (pamiętam, że używałem go dużo w moich starych dobrych czasach Perla).

Aby zachować Nadzór ze złożonymi lub długimi ciągami wielowierszowymi czasami używam wzoru tablicy:

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

Lub pokazany już wzór anonymous (Escape newline) , który może być brzydkim blokiem w Twoim kodzie:

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

Oto kolejna dziwna, ale działająca sztuczka'¹:

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

edycja zewnętrzna: jsfiddle

ES20xx obsługuje rozciąganie łańcuchów na wiele linii za pomocą ciągów szablonów :

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

¹ Uwaga: Ta opcja zostanie utracona po minifikowaniu/zaciemnieniu kodu

Ty możesz mieć ciągi Wielowierszowe w czystym JavaScript.

Ta metoda opiera się na serializacji funkcji, która jest zdefiniowana jako zależna od implementacji . Działa w większości przeglądarek (patrz poniżej), ale nie ma gwarancji, że nadal będzie działać w przyszłości, więc nie polegaj na tym.

Używając następującej funkcji:

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

Możesz mieć tutaj-dokumenty takie jak:

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

• IE 4 - 10
• Opera 9.50-12 (nie w 9 -)
• Safari 4 - 6 (nie w 3 -)
• Chrome 1 - 45
• Firefox 17 - 21 (nie w 16-)
• Rekonq 0.7.0-0.8.0
• Brak wsparcia w Konquerorze 4.7.4

Myślę, że prawdziwym rozwiązaniem byłoby użycie CoffeeScript .

Dasz radę...

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

Wymyśliłem bardzo jimmy ' ego sfałszowanego metodę wielowarstwowego Sznurka. Ponieważ konwersja funkcji na ciąg znaków zwraca również wszelkie komentarze wewnątrz funkcji, możesz użyć komentarzy jako ciąg znaków za pomocą wielowarstwowego komentarza/**/. Musisz tylko przyciąć końce i masz swój sznurek.

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)

Dziwię się, że tego nie widziałem, bo działa wszędzie, gdzie go testowałem i jest bardzo przydatny np. dla szablonów:

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

Czy ktoś zna środowisko, w którym istnieje HTML, ale nie działa?

Rozwiązałem to, wysyłając div, czyniąc go ukrytym i wywołując identyfikator div przez jQuery, gdy tego potrzebowałem.

Np.

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

Następnie, gdy muszę uzyskać ciąg znaków, używam następującego jQuery:

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

Który zwraca mój tekst w wielu wierszach. If I call

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

Otrzymuję:

Używanie znaczników skryptu:

• dodaj <script>...</script> blok zawierający tekst wielowierszowy do znacznika head;

• Pobierz tekst wielowierszowy tak, jak jest... (uwaga na kodowanie tekstu: 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>
  

Istnieje wiele sposobów, aby to osiągnąć

1. Ukośnik

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

2. konkatenacja regularna

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

3. Array Join concatenation

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

Performance wise, Slash concatenation (pierwsza) jest najszybsza.

Refer ten przypadek testowy Aby uzyskać więcej szczegółów dotyczących wydajności

Update:

Z ES2015 możemy skorzystać z jego szablonu funkcje strun. Z nim, po prostu musimy użyć back-ticks do tworzenia ciągów wielowierszowych

Przykład:

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

Podoba mi się ta składnia i indendacja:

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

(ale w rzeczywistości nie może być uważany za ciąg wielowierszowy)

Jest taka biblioteka, która czyni ją piękną:

Https://github.com/sindresorhus/multiline

Przed

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

Po

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

Downvoters : Ten kod jest dostarczany wyłącznie w celach informacyjnych.

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

Podsumowując, wypróbowałem 2 podejścia wymienione tutaj w programowaniu javascript użytkownika (Opera 11.01):

• ten nie zadziałał: Tworzenie ciągów wielowierszowych w JavaScript
• to działało dość dobrze, mam również dowiedzieć się, jak to wygląda dobrze w Notepad++ source view: Tworzenie ciągów wielowierszowych w JavaScript

Więc polecam podejście do pracy dla użytkowników Opery JS. W przeciwieństwie do tego, co mówił autor:

It nie działa na Firefoksie ani operze; tylko na IE, chrome i safari.

Działa w Operze 11. Przynajmniej w skryptach js użytkownika. Szkoda, że nie mogę skomentować poszczególnych odpowiedzi, ani nie podam odpowiedzi, zrobiłbym to od razu. Jeśli to możliwe, ktoś z większymi przywilejami, proszę, zrób to za mnie.

Aktualizacja dla 2015: jest sześć lat później: większość ludzi używa modułu ładującego, a główne systemy modułów mają sposoby ładowania szablonów. Nie jest to inline, ale najczęstszym typem wielowierszowego ciągu są szablony, a Szablony powinny być generalnie trzymane z dala od JS.

Wymagaj.js: 'wymagaj tekstu'.

Using require.wtyczka js 'text' , z szablonem wielowierszowym w szablonie .html

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

NPM / browserify: the 'brfs' moduł

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

Jeśli chcesz użyć unikalnych nowych linii, mogą być użyte ładnie . wygląda jak dokument z obramowaniem strony .

To działa w IE, Safari, Chrome i 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>

Moje rozszerzenie do https://stackoverflow.com/a/15558082/80404 . Oczekuje komentarza w formie /*! any multiline comment */ gdzie symbol ! jest używany do zapobiegania usuwaniu przez minifikację (przynajmniej dla sprężarki 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));
};

Przykład:

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

Możesz użyć TypeScript (JavaScript SuperSet), obsługuje ciągi Wielowierszowe i przenosi się z powrotem do czystego JavaScript bez napowietrznych:

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

alert(templates.myString);

Jeśli chcesz osiągnąć to samo z prostym 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)

Zauważ, że iPad / Safari nie obsługuje 'functionName.toString()'

Jeśli masz dużo starszego kodu, Możesz również użyć zwykłego wariantu JavaScript w maszynopisie (do czyszczenia):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

I możesz użyć obiektu multiline-string z zwykły wariant JavaScript, w którym umieszczasz szablony w innym pliku (który możesz scalić w pakiecie).

Możesz spróbować maszynopisu na
http://www.typescriptlang.org/Playground

Odpowiednikiem w javascript jest:

var text = `
This
Is
A
Multiline
String
`;

Oto specyfikacja . Zobacz obsługę przeglądarki na dole tej Strony . Oto kilka przykładów .

ES6 pozwala na użycie backtic ' a do określenia ciągu znaków w wielu wierszach. Nazywa się to szablonem dosłownym. Tak:

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

Używanie backticka działa w NodeJS i jest obsługiwane przez Chrome, Firefox, Edge, Safari i operę.

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

Moja wersja array-based join dla 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'));

To działa dobrze dla mnie, zwłaszcza, że często wstawiam wartości do HTML skonstruowanego w ten sposób. Ale ma wiele ograniczeń. Wcięcie byłoby miłe. Nie mając do czynienia z zagnieżdżonymi cudzysłowami, byłoby naprawdę miło, a po prostu jego nieporęczność mnie martwi.

Jest .push() aby dodać do tablicy zajmuje dużo czasu? Zobacz tę pokrewną odpowiedź:

(czy istnieje powód, dla którego Programiści JavaScript nie używaj tablicy.push ()?)

Po obejrzeniu tych (przeciwstawnych) przebiegów testowych, wygląda na to .push() jest dobre dla tablic string, które prawdopodobnie nie będą rosły ponad 100 pozycji - uniknę tego na rzecz zindeksowanych dodań dla większych tablic.

Możesz użyć +=, aby połączyć swój ciąg, wygląda na to, że nikt na to nie odpowiedział, co będzie czytelne, a także schludne... coś takiego

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

Można również zapisać jako

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

console.log(hello);

Należy również pamiętać, że podczas przedłużania ciągu znaków na wiele linii za pomocą ukośnika do przodu na końcu każdej linii, wszelkie dodatkowe znaki (głównie spacje, tabulatory i komentarze dodane przez pomyłkę) po ukośniku do przodu spowoduje nieoczekiwany błąd znaków, który zajęło mi godzinę, aby dowiedzieć się

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

Proszę z miłości do Internetu używać ciągów konkatenacji i zdecydować się nie używać do tego rozwiązania ES6. ES6 nie jest obsługiwany na całym świecie, podobnie jak CSS3 i niektóre przeglądarki są powolne w dostosowywaniu się do ruchu CSS3. Użyj zwykłego języka JavaScript, Twoi użytkownicy końcowi Ci podziękują.

Przykład:

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

Najprostszym sposobem tworzenia ciągów wielowierszowych w Javascripts jest użycie backticks ( ` ). Pozwala to na tworzenie ciągów wielowierszowych, w których można wstawiać zmienne za pomocą ${variableName}.

Przykład:

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

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

my age is: ${age}
`;

console.log(multilineString);

Zgodność:

• został wprowadzony w ES6//es2015
Obecnie jest ona natywnie obsługiwana przez wszystkich głównych dostawców przeglądarek (z wyjątkiem internet Explorera).]}

Sprawdź dokładną zgodność w dokumentach Mozilli tutaj

Musisz użyć operatora konkatenacji'+'.

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

Używając \n twój kod źródłowy będzie wyglądał jak -

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

Używając <br> twoje wyjście przeglądarki będzie wyglądać tak: -

This
is
multiline
string.

Myślę, że to obejście powinno działać w IE, Chrome, Firefox, Safari, Opera-

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

Korzystanie Z Czystego Javascript:

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

Po prostu próbowałem anonimowej odpowiedzi i okazało się, że jest tu mała sztuczka, to nie działa, jeśli jest spacja po ukośniku \
Więc poniższe rozwiązanie nie działa -

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

Ale po usunięciu spacji działa -

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

alert(x.test);​

Jeśli zdarzy ci się, że jesteś uruchomiony tylko w Node, możesz użyć modułu fs do odczytu wielowierszowego łańcucha z pliku:

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