Tworzenie ciągów wielowierszowych w JavaScript

Odpowiedzi:

3315

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"
Anonimowy
źródło
231
Ostrzegamy: niektóre przeglądarki będą wstawiać nowe wiersze z kontynuacją, niektóre nie.
staticsan 30.04.2009
35
Wydaje się, że Visual Studio 2010 jest również mylone przez tę składnię.
jcollum 17.04.2011
47
@Nate Jest określony w ECMA-262, wydanie 5., sekcja 7.8.4 i nazywa się LineContinuation : „Znak końca linii nie może występować w literałach łańcuchowych, z wyjątkiem części LineContinuation w celu wygenerowania pustej sekwencji znaków. Prawidłowy sposób spowodowania znakiem końca linii, który ma być częścią wartości ciągu literału ciągu, jest użycie sekwencji zmiany znaczenia, takiej jak \ n lub \ u000A. "
jakieś
16
Nie rozumiem, dlaczego miałbyś to robić, gdy przeglądarki traktują to niekonsekwentnie. „linia1 \ n” + „linia2” w wielu wierszach jest wystarczająco czytelna i masz zagwarantowane spójne zachowanie.
SamStephens
11
„Obsługa przeglądarki jest OK” ... nieobsługiwany przez IE11 - nie OK
Tom Andraszek
1317

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.';
Devin G. Rhode
źródło
19
Nie rozumiem rekomendacji Google. Wszystkie przeglądarki, z wyjątkiem bardzo starych, obsługują odwrotny ukośnik, a następnie podejście nowej linii, i będą to robić w przyszłości w celu zapewnienia zgodności z poprzednimi wersjami. Jedynym momentem, kiedy musisz tego uniknąć, jest upewnienie się, że na końcu każdego wiersza została dodana jedna lub tylko nowa linia (lub żadna nowa linia) (patrz także mój komentarz do zaakceptowanej odpowiedzi).
Matt Browne
6
Zauważ, że ciągi szablonów nie są obsługiwane w IE11, Firefox 31, Chrome 35 lub Safari 7. Zobacz kangax.github.io/compat-table/es6
EricP
29
@MattBrowne Rekomendacja Google jest już przez nich udokumentowana w kolejności ważności: (1) Biała spacja na początku każdej linii [w tym przykładzie nie chcesz tej białej spacji w łańcuchu, ale ładniej wygląda w kodzie ] (2) spacja po ukośniku spowoduje podstępne błędy [jeśli kończysz wiersz \ zamiast `\ 'trudno zauważyć] i (3), podczas gdy większość silników skryptowych obsługuje to, nie jest to część ECMAScript [tzn. Dlaczego korzystać z niestandardowych funkcji?] Pamiętaj, że to przewodnik po stylu, który ułatwia czytanie kodu + utrzymanie + debugowanie: nie tylko „działa” poprawnie.
ShreevatsaR
1
zdumiewające, że po tylu latach łączenie strun jest nadal najlepszą / najbezpieczniejszą / najbardziej zgodną z tym drogą. dosłowne szablony (powyżej odpowiedzi) nie działają w IE, a unikanie wierszy to po prostu bałagan, którego wkrótce będziesz żałować
Tiago Duarte
1
Dowiedz się, w jaki sposób starsze wersje Androida nie obsługują backticków, więc jeśli masz aplikację na Androida korzystającą z Internetu, zobacz, jak działają backticksy!
Michael Fever
684

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

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

1 Uwaga: zostanie to utracone po zminimalizowaniu / zaciemnieniu kodu

KooiInc
źródło
34
Nie używaj wzorca tablicy. W większości przypadków będzie on wolniejszy niż zwykłe łączenie łańcuchów.
BMiner
73
Wzorzec macierzy jest bardziej czytelny, a utrata wydajności aplikacji jest często pomijalna. Jak pokazuje ten test perf, nawet IE7 może wykonywać dziesiątki tysięcy operacji na sekundę.
Benjamin Atkin,
19
+1 za elegancką alternatywę, która działa nie tylko w taki sam sposób we wszystkich przeglądarkach, ale jest również przyszłościowa.
Pavel
26
@KooiInc Twoje testy zaczynają się od tablicy już utworzonej, która wypacza wyniki. Jeśli dodasz inicjalizację tablicy, proste łączenie jest szybsze jsperf.com/string-concat-without-sringbuilder/7 Zobacz stackoverflow.com/questions/51185/... Jako sztuczka dla nowych linii może być OK, ale zdecydowanie wykonując więcej pracy niż powinno
Juan Mendes
9
@BMiner: 1) „Przedwczesna optymalizacja jest źródłem wszelkiego zła” - Donald Knuth, oraz 2) „czytelność” zależy od obserwatora
Paul Bennett
348

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

Jordão
źródło
232
Co!? tworzenie i dekompilowanie funkcji służącej do zhakowania komentarza wielowierszowego w celu utworzenia łańcucha wielowierszowego? Teraz to jest brzydkie.
czw.
4
jsfiddle.net/fqpwf działa w Chrome 13 i IE8 / 9, ale nie w FF6. Nienawidzę tego mówić, ale podoba mi się to, a jeśli mogłaby to być celowa funkcja każdej przeglądarki (aby nie zniknęła), skorzystałbym z tego.
Jason Kleban
2
@ uosɐſ: aby było celowe, musiało być w specyfikacji; lub tak powszechnie stosowane, że twórcy przeglądarek nie chcieliby usunąć tej „przypadkowej” funkcji. Dzięki za eksperymenty ... Wypróbuj kawę.
Jordão,
1
a.toString (). substring (15, a.toString (). length-4) również działa i nie musi skanować całego łańcucha (chociaż najprawdopodobniej zadziała, a zliczanie spowoduje i tak kolejne skanowanie. .)
Lodewijk
2
Niezwykle przydatny. Używam go do testów jednostkowych (Jasmine), ale unikam go w kodzie produkcyjnym.
Jason
207

Możesz to zrobić...

var string = 'This is\n' +
'a multiline\n' + 
'string';
Alex
źródło
Pierwszy przykład jest świetny i prosty. Znacznie lepsze niż podejście \, ponieważ nie jestem pewien, jak przeglądarki poradzą sobie z odwrotnym ukośnikiem jako znak zmiany znaczenia i jako znak wieloliniowy.
Matt K
e4x.js byłoby dobrym, przyszłościowym rozwiązaniem
Paul Sweatte,
139

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)
Łukasz
źródło
37
To jest absolutnie przerażające. Uwielbiam to (chociaż może być konieczne dopasowanie wyrażenia regularnego, ponieważ nie jestem pewien, jak precyzyjne są białe znaki toString())
Kevin Cox
To rozwiązanie nie działa w Firefoksie, może jest to funkcja bezpieczeństwa przeglądarki? EDYCJA: Nieważne, to nie działa tylko w przeglądarce Firefox w wersji 16.
Bill Software Engineer
45
Uważaj również na minizery, które usuwają komentarze ...: D
jondavidjohn
3
Dlatego nie możemy mieć miłych rzeczy.
Danilo M. Oliveira,
4
Możesz robić dziwne rzeczy w javascript land. Chociaż szczerze mówiąc, nigdy nie powinieneś tego używać.
Łukasz
88

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?

Peter V. Mørch
źródło
23
Gdziekolwiek nie chcesz umieszczać swoich ciągów w oddzielnych i odległych elementach skryptu.
Lodewijk
9
Ważny sprzeciw! To nie jest idealne. Ale w przypadku szablonów ta separacja jest nie tylko dobra, ale może nawet zalecana.
Peter V. Mørch
1
Wolę podzielić wszystko ponad 80/120 znaków na wielowierszowe, obawiam się, że to coś więcej niż tylko szablony. Wolę teraz składnię „line1” + „line2”. Jest także najszybszy (choć może to konkurować z naprawdę dużymi tekstami). To niezła sztuczka.
Lodewijk
27
w rzeczywistości jest to HTML, a nie JavaScript: - /
CpILL
5
jednak zadanie uzyskania ciągu wieloliniowego w javascript można wykonać w ten sposób
Davi Fiamenghi
52

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

wprowadź opis zdjęcia tutaj

Tom Beech
źródło
2
Dzięki za to! To jedyna znaleziona przeze mnie odpowiedź, która rozwiązuje mój problem, który obejmuje nieznane ciągi znaków, które mogą zawierać dowolną kombinację pojedynczych i podwójnych cudzysłowów bezpośrednio wstawianych do kodu bez możliwości wstępnego kodowania. (pochodzi z języka szablonów, który tworzy JS - wciąż z zaufanego źródła, a nie z formularza, więc nie jest CAŁKOWICIE szalony).
octern
To była jedyna metoda, która faktycznie działała dla mnie, aby utworzyć wielowierszową zmienną łańcucha javascript z ciągu Java.
beginner_
4
Co jeśli ciąg jest HTML?
Dan Dascalescu
4
$ ('# UniqueID'). Content ()
mplungjan 24.01.2014
1
@Pacerier Wszystko, co przeczytałem, zarówno od Google, jak i innych witryn, mówi, że obecnie Google indeksuje display:nonetreści, najprawdopodobniej ze względu na popularność interfejsów w stylu JavaScript. (Na przykład strona z najczęściej zadawanymi pytaniami z funkcją ukrywania / pokazywania.) Musisz jednak zachować ostrożność, ponieważ Google twierdzi, że mogą cię ukarać, jeśli ukryta treść wydaje się być zaprojektowana w celu sztucznego zawyżania pozycji w rankingu SEO.
Gavin
31

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>
  `
Vignesh Subramanian
źródło
11
Myślę, że po prostu zwróciłeś uwagę na to, co jest już na stronie przez pięć lat, ale w czystszy sposób.
RandomInsano
czy ukośnik konkatenacji nie będzie zawierał również białych znaków na początku linii?
f
29

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>
jpfreire
źródło
Myślę, że ta strategia jest czysta i znacznie niewykorzystana. jsrender używa tego.
xdhmoore
Używam tego z iso innerText iso innerHTML, ale jak mogę się upewnić, że białe spacje są zachowane?
David Nouls,
Także zapytania ajaxowe, jeśli ich używasz. Możesz spróbować zmienić nagłówki. xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");Nie pamiętam innych problemów niż błędne wpisywanie komentarzy w JS. Miejsca, w których nie ma problemów.
jpfreire
24

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)

Semente
źródło
3
Używam tego, tyle że umieszczam znak „+” na końcu poprzedniego wiersza, aby wyjaśnić, że instrukcja jest kontynuowana w następnym wierszu. Twoja droga wyrównuje wcięcia bardziej równomiernie.
Sean
@Sean Też tego używam i nadal wolę umieszczać znak „+” na początku każdej dodanej nowej linii i na końcu „;” w nowej linii, bo uznałem, że jest bardziej „poprawna”.
AgelessEssence
7
umieszczenie znaku + na początku umożliwia komentowanie tego wiersza bez konieczności edytowania innych wierszy, gdy jest to pierwszy / ostatni wiersz sekwencji.
moliada
3
Wolę też + z przodu, ponieważ wizualnie nie muszę skanować do końca linii, aby wiedzieć, że następny jest kontynuacją.
Daniel Sokołowski
18

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>
*/});
Mightyiam
źródło
1
To wsparcie w nodejskorzystaniu z przeglądarki musi być godne uwagi.
Huei Tan
3
@HueiTan Docs stwierdza, że ​​działa również w przeglądarce. Co ma sens - to po prostu Function.prototype.String().
mikemaccana
ya, ale powiedział: „Chociaż działa dobrze w przeglądarce, jest przeznaczony głównie do użytku w Node.js. Używaj na własne ryzyko. Chociaż działa dobrze w przeglądarce, jest głównie przeznaczony do użytku w Node.js. na własne ryzyko." (Tylko beareful XD)
Huei Tan
@HueiTanYep Przeczytałem tę część. Ale Function.prototype.toString () jest dość stabilny i dobrze znany.
mikemaccana
1
Najlepsza odpowiedź dla mnie, ponieważ przynajmniej osiąga multilinię bez wszystkich śmieci w środku (śmieci na początku i na końcu mogę sobie poradzić).
Damien Golding
14

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>

mplungjan
źródło
13
To okropne. +1. I możesz użyć document.currentScript zamiast getElement ...
Orwellophile
1
Niezdefiniowane „ty” w chrome dla osx
mplungjan
1
jsfiddle-fixed - musiałem mieć „ciebie” zdefiniowanego globalnie w mojej konsoli. Działa teraz (chrome / osx). Zaletą dodawania komentarza do var jest to, że nie jesteś w kontekście funkcji, jsfiddle-function-heredoc, chociaż funkcja ta byłaby fajna dla metod klasowych. i tak może być lepiej przekazać obiekt replace {this: that}. fajnie jest wcisnąć coś szalonego do końca :)
Orwellophile
1
Nie zwracaj uwagi na nienawistników. To jedyny poprawny pasek odpowiedzi ES6. Wszystkie pozostałe odpowiedzi wymagają konkatenacji, obliczeń lub ucieczki. To jest naprawdę całkiem fajne i zamierzam użyć go jako sposobu na dodanie dokumentacji do gry, nad którą pracuję jako hobby. Tak długo, jak ta sztuczka nie jest używana do czegokolwiek, co mogłoby wywołać błąd (widzę, jak ktoś by powiedział: „Semicolon, derp. Pozwala umieścić komentarz w następnym wierszu.”, A następnie łamie kod.) Ale jest to naprawdę wielka sprawa w mojej grze hobby? Nie, i mogę użyć tej fajnej sztuczki do czegoś użytecznego. Świetna odpowiedź.
Thomas Dignan
2
Nigdy nie byłem wystarczająco odważny, aby użyć tej techniki w kodzie produkcyjnym, ale tam, gdzie ją często używam, są testy jednostkowe, w których często najłatwiej jest zrzucić wartość jakiejś struktury jako (dość długiego) ciągu i porównać ją z co to powinno być.
Ben McIntyre
10

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

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.

Tyler
źródło
To jest mój pierwszy faktyczny komentarz. Zyskałem przywilej głosowania 2 dni temu, więc natychmiast głosowałem za jedną odpowiedzią, o której wspomniałem powyżej. Dziękuję wszystkim, którzy głosowali za moją słabą próbą pomocy.
Tyler
Dziękujemy wszystkim, którzy rzeczywiście głosowali za odpowiedzią: mam teraz wystarczające uprawnienia do publikowania normalnych komentarzy! Jeszcze raz dziękuję.
Tyler
10

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();
pocheptsov
źródło
9

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.

mikemaccana
źródło
9

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

wprowadź opis zdjęcia tutaj

seo
źródło
2
Czy to nie dodałoby obcych pustych miejsc?
tomByrer,
1
@tomByrer Tak, dobra obserwacja. Jest dobry tylko dla ciągów znaków, które nie dbają o białe znaki, np. HTML.
seo
9

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 .

Lonnie Best
źródło
8

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>
stillatmycomputer
źródło
6
Po prostu o tym pomyśl. Myślisz, że to jest ważne? Nie sądzisz, że może to powodować problemy z wyświetlaniem?
Sk8erPeter
5
Dlaczego opinie negatywne? To twórcza odpowiedź, jeśli nie bardzo praktyczna!
dotancohen
2
nie, nie jest. Należy raczej używać szablonów: $ .tmpl () ( api.jquery.com/tmpl ) lub EJS ( embeddedjs.com/getting_started.html ), itp. Jednym z powodów negatywnych opinii jest to, że naprawdę nie jest to poprawny kod i użycie może to powodować ogromne problemy z wyświetlaniem.
Sk8erPeter
Mam nadzieję, że nikt nigdy nie użyje tej odpowiedzi w praktyce, ale to fajny pomysł
DCShannon
7

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

Stefan Steiger
źródło
Jakaś dokumentacja dotycząca ograniczeń na iPadzie / Safari? MDN wydaje się uważać, że wszystko jest w porządku - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Campbeln
@Campbeln: CoWorker powiedział mi to (użył kodu). Sam tego nie testowałem. Może również zależeć od wersji na iPada / Safari - więc prawdopodobnie zależy.
Stefan Steiger,
6

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

Jenil Christo
źródło
Ta odpowiedź jest nie tylko niewielka, niekompletna i źle sformatowana, ale również nie dodaje absolutnie niczego do poprzednich odpowiedzi. Oznaczanie go i przeskakiwanie do usunięcia.
Victor Schröder
5

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

Earl3s
źródło
4

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

Willem van der Veen
źródło
Czy jest to teraz zgodne ze wszystkimi najnowszymi przeglądarkami? A może istnieją przeglądarki, które nadal nie obsługują tej składni?
cmpreshn
Przepraszam za mój bardzo późny komentarz, zredagowałem odpowiedź dodałem informacje o kompatybilności;)
Willem van der Veen
3

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.

KTys
źródło
3

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);
Pan Alien
źródło
3

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";
Prakash GPz
źródło
3

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

Pragmatiq
źródło
3
choć zgadzam się z twoją
tezą
2

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.
Sonevol
źródło
1

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

Aditya Hajare
źródło
<xmp>jest przestarzałe. Może to być dozwolone w HTML, ale nie powinno być używane przez żadnego autora. Zobacz stackoverflow.com/questions/8307846/…
Bergi
@Bergi, masz rację .. i używanie <pre>;z ucieczkami nie pomoże w moim rozwiązaniu .. Natknąłem się dzisiaj na podobny problem i próbuję wymyślić obejście .. ale w moim przypadku znalazłem jeden bardzo n00bish sposób na rozwiązanie tego problemu przez umieszczanie danych wyjściowych w komentarzach HTML zamiast <xmp> lub dowolnego innego znacznika. lol. Wiem, że nie jest to standardowy sposób, ale jutro rano będę pracować nad tym zagadnieniem. Pozdrawiam !!
Aditya Hajare
Niestety nawet z style="display:none"Chrome próbuje załadować dowolne <img>obrazy wymienione w przykładowym bloku.
Jesse Glick,
0

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

Anmol Saraf
źródło
7
oczywiście jeśli masz spację po odwrotnym ukośniku, odwrotny ukośnik ucieka przed spacją. Ma uciec przed łamaniem linii, a nie spacją.
Sejanus,