JavaScriptで複数行の文字列を作成する

Rubyには次のコードがあります。このコードをJavaScriptに変換したいと思います。JSの同等のコードは何ですか？

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

更新：

ECMAScript 6（ES6）では、新しいタイプのリテラル、つまりテンプレートリテラルが導入されています。彼らは多くの機能、とりわけ変数補間を持っていますが、この質問にとって最も重要なのは、複数行になる可能性があることです。

テンプレートリテラルはバッククォートで区切られています：

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

（注：文字列でHTMLを使用することは推奨していません）

ブラウザのサポートは問題ありませんが、トランスパイラを使用して互換性を高めることができます。

元のES5の回答：

Javascriptにはヒアドキュメントの構文はありません。ただし、文字通りの改行はエスケープできます。

"foo \
bar"

ES6アップデート：

最初の回答で述べたように、ES6 / Babelでは、バックティックを使用するだけで複数行の文字列を作成できます。

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

変数の補間は、バックティック区切りの文字列に付属する人気のある新機能です。

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

これは連結に移ります。

user.name + ' liked your post about strings'

元のES5の回答：

GoogleのJavaScriptスタイルガイドでは、改行をエスケープする代わりに文字列連結を使用することを推奨しています。

こんなことしないで：

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

各行の先頭の空白は、コンパイル時に安全に取り除くことができません。スラッシュの後の空白は、トリッキーなエラーになります。ほとんどのスクリプトエンジンはこれをサポートしていますが、ECMAScriptの一部ではありません。

代わりに文字列連結を使用します。

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

このパターンtext = <<"HERE" This Is A Multiline String HEREはjsでは使用できません（私は古き良きPerlの時代によく使用したことを覚えています）

複雑な、または長い複数行の文字列を監視するために、配列パターンを使用することがあります。

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

または、すでに匿名で示されているパターン（改行をエスケープします）。

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

ここに別の奇妙ですが機能している「トリック」があります¹：

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

外部編集：jsfiddle

ES20xxは、テンプレート文字列を使用して、複数行にわたる文字列のスパンをサポートしています。

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

¹注：これは、コードを縮小/難読化すると失われます

あなたはできる純粋なJavaScriptで複数行の文字列を持っています。

このメソッドは、実装に依存するように定義されている関数のシリアル化に基づいています。ほとんどのブラウザで動作します（以下を参照）が、今後も動作するという保証はありませんので、それに依存しないでください。

次の関数を使用します。

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

あなたはこのようなヒアドキュメントを持つことができます：

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（9-ではありません）
• Safari 4-6（3-ではない）
• Chrome 1〜45
• Firefox 17-21（16-ではない）
• Rekonq 0.7.0-0.8.0
• Konqueror 4.7.4ではサポートされていません

ただし、ミニファイアには注意してください。コメントを削除する傾向があります。YUIコンプレッサー、で始まるコメント/*!（私が使用したものなど）が保持されます。

実際の解決策は、CoffeeScriptを使用することだと思います。

ES6の更新：コメント付きの関数を作成し、コメントに対してtoStringを実行する代わりに、バックティックを使用できます。正規表現は、スペースのみを削除するように更新する必要があります。これを行うための文字列プロトタイプメソッドを使用することもできます。

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

いいですね。誰かがこの.removeIndentation文字列メソッドを書く必要があります...;）

あなたはこれを行うことができます...

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

私はマルチラインストリングのこの非常にジミーなリギング方法を思いつきました。関数を文字列に変換すると、関数内のコメントも返されるため、複数行コメント/ ** /を使用して、コメントを文字列として使用できます。あなたは端を切り落とす必要があり、あなたはあなたのひもを持っています。

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)

私がこれをテストしたすべての場所で機能し、テンプレートなどに非常に役立つので、これが表示されなかったことに驚いています。

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

HTMLはあるが動作しない環境を知っている人はいますか？

これを解決するには、divを出力して非表示にし、必要に応じてjQueryでdiv idを呼び出します。

例えば

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

次に、文字列を取得する必要がある場合は、次のjQueryを使用します。

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

これは私のテキストを複数行で返します。私が電話したら

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

私は得ます：

これを達成するには複数の方法があります

1.スラッシュ連結

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

2.通常の連結

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

3.配列結合連結

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

パフォーマンスに関しては、スラッシュ連結（最初のもの）が最も高速です。

パフォーマンスに関する詳細については、このテストケースを参照してください

更新：

ES2015、我々はそのテンプレートの文字列機能を利用することができます。これで、複数行の文字列を作成するためにバックティックを使用するだけです

例：

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

スクリプトタグの使用：

• <script>...</script>マルチラインテキストを含むブロックをheadタグに追加します。

• マルチラインテキストをそのまま取得します（テキストエンコーディングに注意してください：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>

私はこの構文とインデンションが好きです：

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

（しかし、実際には複数行の文字列と見なすことはできません）

それを美しくするこのライブラリがあります：

https://github.com/sindresorhus/multiline

前

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

後

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

Downvoters：このコードは情報提供のみを目的としています。

これはMacのFx 19とChrome 24でテストされています

デモ

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>

要約すると、ユーザーJavaScriptプログラミング（Opera 11.01）でここにリストされている2つのアプローチを試しました。

• これは機能しませんでした：JavaScriptで複数行の文字列を作成する
• これはかなりうまくいきました。Notepad++のソースビューで見栄えをよくする方法もわかりました。JavaScriptで複数行の文字列を作成する

したがって、OperaユーザーのJSユーザーには実用的なアプローチをお勧めします。著者が言っていたのとは異なり：

Firefoxやオペラでは機能しません。IE、Chrome、Safariのみ。

Opera 11では機能します。少なくともユーザーのJSスクリプトでは機能します。残念ながら、個々の回答にコメントしたり、回答に賛成投票したりすることはできません。すぐに回答します。可能であれば、より高い権限を持つ誰かが私のためにそれをしてください。

https://stackoverflow.com/a/15558082/80404への私の拡張。これは、フォームにコメントを見込んで/*! any multiline comment */いるシンボル！縮小による削除を防ぐために使用されます（少なくとも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));
};

例：

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

2015年に更新：それは6年後です。ほとんどの人がモジュールローダーを使用し、メインモジュールシステムにはそれぞれテンプレートをロードする方法があります。インラインではありませんが、複数行の文字列の最も一般的なタイプはテンプレートであり、通常、テンプレートはJSから除外する必要があります。

require.js：「テキストが必要」。

require.js 'text'プラグインを使用し、template.htmlの複数行テンプレート

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

NPM / browserify： 'brfs'モジュール

Browserify は「brfs」モジュールを使用してテキストファイルをロードします。これにより、テンプレートがバンドルされたHTMLに実際に組み込まれます。

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

簡単です。

エスケープされた改行を使用する場合は、それらをうまく使用できます。 これは、ページ境界線があるドキュメントのように見えます。

JavaScriptでこれに相当するものは次のとおりです。

var text = `
This
Is
A
Multiline
String
`;

こちらが仕様です。このページの下部にあるブラウザのサポートをご覧ください。ここにもいくつかの例があります。

これはIE、Safari、Chrome、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>

TypeScript（JavaScript SuperSet）を使用でき、複数行の文字列をサポートし、オーバーヘッドなしで純粋なJavaScriptにトランスパイルします。

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

alert(templates.myString);

単純な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)

iPad / Safariはサポートしていません 'functionName.toString()'

多くのレガシーコードがある場合、TypeScriptでプレーンなJavaScriptバリアントを使用することもできます（クリーンアップの目的で）。

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

また、プレーンなJavaScriptバリアントの複数行ストリングオブジェクトを使用して、テンプレートを別のファイル（バンドルにマージできます）に配置できます。

TypeScriptはhttp://www.typescriptlang.org/Playgroundで試すことができ
ます

ES6でこれを行うには、テンプレートリテラルを使用します。

const str = `This 

is 

a

multiline text`; 

console.log(str);

詳細はこちら

ES6では、バックティックを使用して複数行の文字列を指定できます。これはテンプレートリテラルと呼ばれます。このような：

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

バックティックの使用はNodeJSで機能し、Chrome、Firefox、Edge、Safari、Operaでサポートされています。

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

Javascripsで複数行の文字列を作成する最も簡単な方法は、バックティック（ ``）を使用することです。これにより、で変数を挿入できる複数行の文字列を作成できます${variableName}。

例：

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

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

my age is: ${age}
`;

console.log(multilineString);

互換性：

• ES6// で紹介されましたes2015
• 現在、すべての主要なブラウザーベンダー（Internet Explorerを除く）でネイティブにサポートされています。

Mozillaドキュメントの正確な互換性をこちらで確認してください

文字列連結のための配列ベースの結合の私のバージョン：

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

これは、特にこの方法で作成されたhtmlに値を挿入することが多いので、うまくいきました。しかし、それには多くの制限があります。インデントはいいです。ネストされた引用符を処理する必要がないことは本当に素晴らしいことであり、そのかさばりだけが気になります。

配列に追加する.push（）に時間がかかりますか？この関連する回答を参照してください：

（JavaScript開発者がArray.push（）を使用しない理由はありますか？）

これらの（反対の）テスト実行を確認すると、文字列配列の場合、.push（）は100アイテムを超えない可能性が高いように見えます。大きな配列の場合は、インデックス付きの追加を優先して回避します。

あなたは+=あなたの文字列を連結するために使用でき、誰もそれを答えていないようです、それは読みやすく、そしてまたきちんと...このようなもの

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

次のように書くこともできます

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

console.log(hello);

また、各行の終わりにバックスラッシュを使用して文字列を複数行に拡張する場合、バックスラッシュの後に余分な文字（ほとんどの場合、スペース、タブ、コメントが追加されている）があると予期しない文字エラーが発生し、1時間ほどかかってしまうことに注意してください。アウト

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

インターネットが大好きな文字列連結を使用し、ES6ソリューションを使用しないことを選択してください。ES6は、CSS3やCSS3の動きへの対応が遅い特定のブラウザーと同様に、全面的にサポートされているわけではありません。プレーンオールJavaScriptを使用してください。エンドユーザーに感謝します。

例：

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

連結演算子 '+'を使用する必要があります。

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

\nソースコードを使用すると、次のようになります-

この 
 <br>は
 <br>マルチライン
 <br>文字列。

<br>ブラウザの出力を使用すると、次のようになります-

この
です
マルチライン
ストリング。

この回避策はIE、Chrome、Firefox、Safari、Operaで機能するはずです。

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>

純粋な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>

乾杯！！

匿名の答えを試してみて、ここに小さなトリックがあることがわかりました、バックスラッシュの後にスペースがある場合は機能しません。\
したがって、次の解決策は機能しません-

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

しかし、スペースが削除されても機能します-

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

alert(x.test);​

それが役に立てば幸い ！！