web-dev-qa-db-ja.com

JavaScriptで複数行の文字列を書く最もクリーンな方法は何ですか？

改行を追加する必要はなく、読みやすいものを追加するだけです。

これより良いものはありますか？

str = "line 1" +
      "line 2" +
      "line 3";
javascriptstringreadabilitymaintainability
34
Robinicks

NickFitzの答えとほぼ同じです：

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

違いは、コンマの場所に関係なく行を並べ替えることができるため、コードの保守性が少し向上することです。構文エラーはありません。

22
dreftymac

私はこのバージョンが好きです（コードのフォーマットだけがあなたのものとは異なります）：

var str = "line 1"
        + "line 2"
        + "line 3";
16
Ionuț G. Stan

あなたができる

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

コメントで述べたように、javascriptパーサーはこれをうまく処理します（すべての主要なブラウザーで機能します）が、正式にはECMAスクリプト構文の一部ではありません。そのため、コンプレッサー、エラーチェッカーで動作する場合と動作しない場合があり、ブラウザーでの動作が保証されていません。

これは読みやすいかもしれませんが、それを行うための「最良の」方法ではありません。たぶん、ECMAスクリプトはいつかc＃の@ ""のようなものをサポートするでしょう。

13
Gordon Tucker

ご参考までに。あなたがそれを提案する方法は正しい方法であり、他の答えよりも優れています。 JsLint バージョンのみを検証します。

12
Elzo Valugi
_var str = [
    "line 1",
    "line 2",
    "line 3"
].join("");
// str will contain "line1line2line3"
_

文字列に実際に改行が必要な場合は、.join("")を.join("\n") /に置き換えます。

10
NickFitz

一貫して。

どちらの方法を選択しても、アプリケーション全体でまったく同じ方法で実行してください。すでにコードが記述されているアプリケーションで作業している場合は、それらが設定した規則を受け入れて、それに従ってください。

6
Dean J

はい！ \文字を使用してJavaScriptに行末文字を無視させる 。

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

ただし、 Elzo Valugiが指摘 のように、これはJSLintを使用して検証されません。

2
Thomas Owens

これは E4X サポートを備えたブラウザでのみ機能します-IEで使用できればいいのですが

var str = <><![CDATA[

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

]]></>.toString();
2
user123444555621

これは、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);
}
*/});

これは、Chromeでは機能しますが、Firefoxでは機能しません。

使用例は、webglシェーダーの作成/テストです。開発中はこれを使用する方がはるかに優れており、後でその構文をクロスブラウザバージョンに変換する単純な正規表現を使用していつでもこれを実行できます。

1
Egon