2009-10-19 19 views
25

To naprawdę nie musi dodawać nowych linii, tylko coś czytelnego.Jaki jest najczystszy sposób na napisanie ciągu wielowierszowego w JavaScript?

Coś lepszego niż to?

str = "line 1" + 
     "line 2" + 
     "line 3"; 
+1

Na pewno przykład na to pytanie jest bardziej czytelny niż odpowiedź @dreftymac nie? –

+0

Pozdrowienia @jasdeepkhalsa. Można na to spojrzeć na dwa sposoby. Powyższy przykład jest zdecydowanie czytelny dzięki temu, że ma mniej znaków. Problem pojawia się, gdy musisz * wchodzić w interakcje * z kodem, dodając lub usuwając linie lub zmieniając kolejność linii. Przykład dreftymac zawiera więcej znaków, ale o wiele łatwiej jest wchodzić w interakcje z kodem bez przypadkowego wywołania błędu składni. – dreftymac

Odpowiedz

18

Niemal identyczna odpowiedź NickFitz za:

var str = ["" 
    ,"line 1" 
    ,"line 2" 
    ,"line 3" 
].join(""); 
// str will contain "line1line2line3" 

Różnica kod jest nieco bardziej w utrzymaniu, ponieważ linie mogą być ponownie zamawiane bez względu na to, gdzie przecinki. Brak błędów składniowych.

+1

Dzięki temu wykonaj automatyczne łamanie linii, gdy znak łączenia jest \ n. Bardzo przydatny. –

12

Można zrobić

str = "\ 
line 1\ 
line 2\ 
line 3"; 

Jak wspomniano w komentarzach, javascript Parsery obsłużyć tego grzywny (działa we wszystkich głównych przeglądarkach), ale nie jest oficjalnie częścią składni ECMA Script. Jako taki może, ale nie musi współpracować ze sprężarkami, kontrolerami błędów i nie może działać w przeglądarkach.

Może to być bardziej czytelne, ale nie jest to "najlepszy" sposób na zrobienie tego. Być może skrypt ECMA będzie obsługiwał coś takiego jak C# 's @ "" pewnego dnia.

+0

Wow. To naprawdę działa. Dzięki Gordon! Nie wiedziałem, że możesz to zrobić w ogóle ... –

+2

czytelny, ale niepoprawny dla parserów błędów js! –

+0

@Thomas: "W każdym przykładzie, który widziałem, wstawiasz także \ after line3." Tylko bc artykuł, który łączyłeś z literówką, nie oznacza, że ​​jest właściwy. przeczytaj resztę artykułu, zrobił to tylko raz, w pierwszym przykładzie. – geowa4

2

Tak! Możesz use the \ character to have JavaScript ignore end of line characters.

str = 'line 1 \ 
line 2 \ 
line 3'; 

Jednakże, jak pointed out by Elzo Valugi, nie będzie to potwierdzić za pomocą JSLint.

+1

O ile pamiętam, to nie działa w niektórych przeglądarkach. Prawdopodobnie niektóre wersje IE. –

+0

Ionut: Tak, musiałbyś przetestować go we wszystkich przeglądarkach, które Cię interesują, a jeśli miałoby zawieść w przeglądarce, podejrzewam, że to byłoby IE. Ale testowałem to w Firefoksie i działa tam. –

12

FYI. Sposób, w jaki sugerujesz, jest poprawny i lepszy niż inne odpowiedzi. JsLint zatwierdza tylko twoją wersję.

+1

+1 dla jslint. – geowa4

+7

Wskazówka: pozostaw te linie krótkie. Jeśli rozciągają się poza ekranem, nie widzisz znaku + i staje się on nieczytelny. Lub umieść + na początku linii, jak sugeruje Ionut. –

6

Konsekwentnie.

Niezależnie od wybranej opcji, zrób to dokładnie w taki sam sposób w całej aplikacji. Jeśli pracujesz nad aplikacją, która ma już napisany kod, zaakceptuj konwencję, którą ustawił i przejdź z nią.

+0

Szkoda, że ​​nie można głosować więcej niż jeden raz. To jest ostateczne rozwiązanie, aby tracić energię i czas na spory w "One Right Way ™", aby robić rzeczy (tak powszechne w naszej branży). – dreftymac

16

Lubię tę wersję (inny niż twój tylko w formatowaniu kodu):

var str = "line 1" 
     + "line 2" 
     + "line 3"; 
+1

Tak - łatwiej to zrozumieć na pierwszy rzut oka. –

+1

to również nie sprawdza. Miałem kiedyś skrypt z jakimś takim html i musiałem go przerobić. –

+2

Musisz uciec z HTML, sposób w jaki napis jest skonstruowany nie ma nic wspólnego z walidacją. –

10
var str = [ 
    "line 1", 
    "line 2", 
    "line 3" 
].join(""); 
// str will contain "line1line2line3" 

Jeśli rzeczywiście chcesz newlines w ciągu, a następnie zastąpić .join("") z .join("\n")/

+0

ta metoda jest jeszcze szybsza niż alternatywa "str" ​​+ "str" ​​konkatenacji czy nie ma znaczenia dla dzisiejszych przeglądarek? Łączenie –

+0

jest szybsze, jeśli masz części do połączenia, ponieważ "+" zostanie wykonane (n-1) razy, tworząc tymczasowe wyniki w każdym kroku. Szczegółowe informacje można znaleźć na stronie http://video.yahoo.com/watch/4141759/11157560 at 23:08 – user123444555621

+2

Mamy skrypt, który tworzy całą stronę przez "str" ​​+ "str" ​​i był dość powolny (około 30 sekund strony obciążenie). Zmieniliśmy tak, aby używał systemu dołączania opartego na tablicach i spadł do mniej niż jednej sekundy. Tak, tak, to jest szybsze :) –

2

Będzie działać tylko w przeglądarkach z obsługą E4X - Szkoda, że ​​nie możemy jej użyć w IE

var str = <><![CDATA[ 

    Look, a multi-line 
    string! < " // ' ? & 

]]></>.toString(); 
+0

Nie potrzebujesz literału XMLList ('<> ..'). Możesz po prostu zrobić '. ToString()' –

+1

Testowałeś? Z jakiegoś powodu nie działa w Firefoksie. Zgodnie ze standardem sekcja XMLCDATA to XMLMarkup, w związku z czym jest XMLInitialiser, który powinien być rozpoznawany przez silnik jako PrimaryExpression (?) – user123444555621

+1

To nie jest już obsługiwane w Firefoksie od wersji 17. Nie wierzę, ŻE Dowolna przeglądarka obsługuje teraz. –

1

Oto jedna z nich, która może być pomocna podczas programowania w przeglądarce Chrome.

function FSTR(f) { 
    // remove up to comment start and trailing spaces and one newline 
    s = f.toString().replace(/^.*\/\* *\r?\n/,""); 
    // remove the trailing */} with preceeding spaces and newline 
    s = s.replace(/\n *\*\/\s*\}\s*$/,"") 
    return s; 
} 

s = FSTR(function(){/* 
uniform vec2 resolution; 
uniform float time; 

void main(void) 
{ 
    vec2 p = -1.0 + 2.0 * gl_FragCoord.xy/resolution.xy; 
    vec2 cc = vec2(cos(.25*time), sin(.25*time*1.423)); 
    ... 
    float color = sqrt(sqrt(dmin))*0.7; 
    gl_FragColor = vec4(color,color,color,1.0); 
} 
*/}); 

ta nie działa dla Firefox, chociaż działa w Chrome.

Przykład użycia będzie do pisania/testowania shaderów webgl. Podczas pracy z tą aplikacją jest o wiele przyjemniej i po później zawsze możesz to zrobić, korzystając z prostego wyrażenia , które konwertuje tę składnię do wersji z różnymi przeglądarkami.

+0

To działa teraz w przeglądarce Firefox i najnowszych przeglądarkach. Zobacz [tę odpowiedź] (http://stackoverflow.com/a/5571069/331508). –

Powiązane problemy