Tworzenie ciągów wielowierszowych w JavaScript

Mam następujący kod w Ruby. Chcę przekonwertować ten kod na JavaScript. jaki jest równoważny kod w JS?

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

Aktualizacja:

ECMAScript 6 (ES6) wprowadza nowy typ literałów, mianowicie literały szablonów . Mają wiele cech, między innymi zmienną interpolację, ale co najważniejsze w przypadku tego pytania, mogą być wieloliniowe.

Literał szablonu jest ograniczony przez backticks :

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

(Uwaga: nie zalecam używania HTML w ciągach znaków)

Obsługa przeglądarki jest OK , ale można użyć transpilatorów, aby być bardziej kompatybilnym.

Oryginalna odpowiedź ES5:

JavaScript nie ma składni dokumentu tutaj. Możesz jednak uciec od dosłownego nowego wiersza, który jest zbliżony:

"foo \
bar"

Aktualizacja ES6:

Jak wspomniano w pierwszej odpowiedzi, za pomocą ES6 / Babel możesz teraz tworzyć wieloliniowe ciągi znaków, używając tylko backticks:

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

Zmienne interpolacyjne to popularna nowa funkcja, która zawiera ciągi rozdzielone znakami cofania:

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

To po prostu przenosi się do konkatenacji:

user.name + ' liked your post about strings'

Oryginalna odpowiedź ES5:

Przewodnik po stylu JavaScriptu Google zaleca stosowanie konkatenacji ciągów zamiast ucieczki od nowych wierszy:

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

Nie można bezpiecznie usunąć białych znaków na początku każdej linii w czasie kompilacji; spacja po ukośniku spowoduje podstępne błędy; i chociaż większość silników skryptowych obsługuje to, nie jest to część ECMAScript.

Zamiast tego użyj konkatenacji ciągów:

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 HEREnie jest dostępny w js (pamiętam, że używam go dużo w moich starych dobrych czasach Perla).

Aby zachować nadzór nad złożonymi lub długimi ciągami wielowierszowymi, czasami używam wzorca tablicowego:

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

lub wzorzec anonimowy już pokazany (escape newline), co może być brzydkim blokiem w 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 ciągi znaków obejmujące wiele wierszy 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: zostanie to utracone po zminimalizowaniu / zaciemnieniu kodu

Państwo może mieć multilinii sznurki 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 należy na nim polegać.

Korzystanie z następującej funkcji:

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

Możesz mieć tutaj takie dokumenty:

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

Metoda została pomyślnie przetestowana w następujących przeglądarkach (nie wspomniano = nie przetestowano):

• IE 4–10
• Opera 9,50 - 12 (nie w 9-)
• Safari 4-6 (nie w 3-)
• Chrome 1–45
• Firefox 17–21 ( nie w wersji 16– )
• Rekonq 0,7 - 0,8
• Nieobsługiwany w Konquerorze 4.7.4

Uważaj jednak na swój minizator. Ma tendencję do usuwania komentarzy. W przypadku kompresora YUI komentarz rozpoczynający się od /*!(jak ten, którego użyłem) zostanie zachowany.

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

AKTUALIZACJA ES6: Możesz użyć strzałki wstecz zamiast tworzyć funkcję z komentarzem i uruchamiać toString na komentarzu. Wyrażenie regularne musiałoby zostać zaktualizowane tak, aby zawierało tylko spacje. Możesz również mieć prototypową metodę łańcuchową, aby to zrobić:

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

To by było super. Ktoś powinien napisać tę metodę ciągu .removeIndentation ...;)

Możesz to zrobić...

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

Wymyśliłem tę bardzo jimmy sfałszowaną metodę sznurka z wieloma liniami. Ponieważ konwersja funkcji na ciąg zwraca również wszelkie komentarze wewnątrz funkcji, można używać komentarzy jako ciągów przy użyciu komentarza wielowarstwowego / ** /. Musisz tylko obciąć 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 mnie, że tego nie widziałem, ponieważ działa wszędzie, gdzie go przetestował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ś wie o środowisku, w którym jest HTML, ale on nie działa?

Rozwiązałem to, wypisując div, ukrywając go i wywołując div div przez jQuery, kiedy tego potrzebowałem.

na przykład

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

Następnie, gdy muszę uzyskać ciąg, po prostu używam następującego jQuery:

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

Co zwraca mój tekst w wielu wierszach. Jeśli zadzwonię

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

Dostaję:

Istnieje wiele sposobów na osiągnięcie tego

1. Slat konkatenacja

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

2. regularna konkatenacja

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

3. Szyk Dołącz do konkatenacji

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

Pod względem wydajności konkatenacja Slash (pierwsza) jest najszybsza.

Zapoznaj się z tym przypadkiem testowym, aby uzyskać więcej informacji dotyczących wydajności

Aktualizacja:

Dzięki ES2015 możemy skorzystać z funkcji ciągów szablonów. Dzięki temu musimy po prostu używać tyknięć wstecznych do tworzenia ciągów wieloliniowych

Przykład:

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

Korzystanie ze znaczników skryptu:

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

• uzyskaj tekst wielowierszowy taki, jaki jest ... (uważaj 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>

Podoba mi się ta składnia i indendacja:

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

(ale tak naprawdę nie może być traktowany jako ciąg wielowierszowy)

Jest taka biblioteka, która sprawia, że ​​jest piękna:

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.

Zostało to przetestowane w Fx 19 i Chrome 24 na Macu

PRÓBNY

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>

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

• ten nie działał: Tworzenie ciągów wielowierszowych w JavaScript
• działało to całkiem dobrze, wymyśliłem też, jak dobrze wyglądać w widoku źródła Notepad ++: Tworzenie ciągów wielowierszowych w JavaScript

Polecam więc podejście robocze użytkownikom JS użytkownika Opery. W przeciwieństwie do tego, co mówił autor:

Nie działa na Firefoxie ani Operze; tylko na IE, Chrome i Safari.

Działa w Operze 11. Przynajmniej w skryptach JS użytkownika. Szkoda, że ​​nie mogę komentować poszczególnych odpowiedzi ani głosować za odpowiedzią, zrobiłbym to natychmiast. Jeśli to możliwe, zrób to dla mnie z wyższymi uprawnieniami.

Moje rozszerzenie do https://stackoverflow.com/a/15558082/80404 . Oczekuje komentarza w postaci /*! any multiline comment */symbolu! służy do zapobiegania usuwaniu przez minimalizację (przynajmniej w przypadku kompresora 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();

Zaktualizowany do 2015 roku : teraz sześć lat później: większość osób korzysta z modułu ładującego moduły, a każdy z głównych systemów modułów ma sposoby ładowania szablonów. Nie jest on wbudowany, ale najpopularniejszym typem ciągu wielowierszowego są szablony, a szablony i tak powinny być ogólnie trzymane poza JS .

wymaga.js: „wymaga tekstu”.

Korzystanie z wtyczki „wymaganej” tekstu text.js z szablonem wielowierszowym w template.html

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

NPM / Browserify: moduł „brfs”

Browserify używa modułu „brfs” do ładowania plików tekstowych. To faktycznie zbuduje twój szablon w pakiecie HTML.

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

Łatwy.

Jeśli chcesz użyć uciekających nowych linii, można je ładnie wykorzystać . Wygląda jak dokument z ramką strony .

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 .

Działa to 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>

Możesz użyć TypeScript (JavaScript SuperSet), obsługuje ciągi wielowierszowe i transponuje z powrotem do czystego JavaScript bez narzutu:

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

alert(templates.myString);

Jeśli chcesz to zrobić za pomocą zwykłego 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)

Pamiętaj, ż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 TypeScript (do celów czyszczenia):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

i możesz użyć obiektu wielowierszowego z prostego wariantu JavaScript, w którym umieścisz szablony w innym pliku (który możesz scalić w pakiecie).

Możesz wypróbować TypeScript na
stronie http://www.typescriptlang.org/Playground

Sposób ES6 polegałby na użyciu literałów szablonów:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Więcej informacji tutaj

ES6 umożliwia użycie ciągu wstecznego do określenia ciągu w wielu wierszach. To się nazywa dosłowny szablon. Lubię to:

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

Korzystanie z backticka działa w NodeJS i jest obsługiwane przez Chrome, Firefox, Edge, Safari i Opera.

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

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

Przykład:

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

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

my age is: ${age}
`;

console.log(multilineString);

zgodność :

• Zostało wprowadzone w ES6//es2015
• Jest teraz natywnie obsługiwany przez wszystkich głównych dostawców przeglądarek (z wyjątkiem przeglądarki Internet Explorer)

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

Moja wersja łączenia opartego na macierzy dla konkatacji ciągów:

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

Działa to dla mnie dobrze, zwłaszcza, że ​​często wstawiam wartości do tak skonstruowanego HTML. Ale ma wiele ograniczeń. Wcięcie byłoby fajne. Naprawdę miło byłoby nie mieć do czynienia z zagnieżdżonymi cudzysłowami, a sama masowość przeszkadza mi.

Czy dodanie .push () do tablicy zajmuje dużo czasu? Zobacz tę pokrewną odpowiedź:

( Czy istnieje powód, dla którego programiści JavaScript nie używają Array.push ()? )

Po spojrzeniu na te (przeciwne) przebiegi testowe, wygląda na to, że .push () jest odpowiedni dla tablic łańcuchowych, które prawdopodobnie nie wzrosną powyżej 100 elementów - uniknę tego na korzyść indeksowanych dodatków dla większych tablic.

Możesz użyć +=do połączenia swojego łańcucha, wygląda na to, że nikt nie odpowiedział na to, 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);

Zauważ też, że podczas przedłużania ciągu na wiele linii za pomocą odwrotnego ukośnika na końcu każdego wiersza wszelkie dodatkowe znaki (głównie spacje, tabulatory i komentarze dodane przez pomyłkę) po odwrotnym odwrotnym ukośniku spowodują nieoczekiwany błąd znakowy, którego znalezienie zajęło mi godzinę na zewnątrz

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

Z miłości do Internetu korzystaj z konkatenacji łańcuchów i nie używaj do tego rozwiązań ES6. ES6 NIE jest obsługiwany na całym forum, podobnie jak CSS3, a niektóre przeglądarki powoli dostosowują się do ruchu CSS3. Używaj zwykłego kodu JavaScript, użytkownicy końcowi będą Ci wdzięczni.

Przykład:

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

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>

Za pomocą \nkodu źródłowego będzie wyglądać -

To 
 <br> jest
 <br> multiline
 <br> ciąg.

Za pomocą <br>przeglądarki dane wyjściowe będą wyglądać następująco:

To
jest
wielowierszowy
strunowy.

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

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

Twoje zdrowie!!

Po prostu wypróbowałem Anonimową odpowiedź i okazało się, że jest tu mała sztuczka, nie działa, jeśli jest odstęp po odwrotnym ukośniku, \
więc następujące rozwiązanie nie działa -

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

Ale gdy przestrzeń zostanie usunięta, działa -

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

alert(x.test);​

Mam nadzieję, że to pomoże !!