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

Question

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

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

score 4071 · Accepted Answer

アップデート：

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

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

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

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

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

元のES5の回答：

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

"foo \
bar"

score 1469 · Accepted Answer

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

score 718 · Accepted Answer

このパターン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.`;

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

score 216 · Accepted Answer

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

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

score 180 · Accepted Answer

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

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)

score 93 · Accepted Answer

私はこれを見なかったことに驚いています。なぜなら、私がテストしたどこでも機能し、テンプレートなどに非常に役立つからです:

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

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

score 58 · Accepted Answer

div を出力して非表示にし、必要なときに jQuery で div id を呼び出すことでこれを解決しました。

例えば

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

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

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

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

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

私は得る：

ここに画像の説明を入力

score 33 · Accepted Answer

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

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

score 31 · Accepted Answer

スクリプトタグの使用:

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

score 25 · Accepted Answer

私はこの構文とインデントが好きです:

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

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

score 19 · Accepted Answer

反対票: このコードは情報提供のみを目的としています。

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

score 18 · Accepted Answer

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

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>
*/});

score 12 · Accepted Answer

JavaScript で同等のものは次のとおりです。

var text = `
This
Is
A
Multiline
String
`;

これが仕様です。このページの下部にあるブラウザのサポートを参照してください。ここにもいくつかの例があります。

score 11 · Accepted Answer

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

score 11 · Accepted Answer

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

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

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

Firefox や Opera では動作しません。IE、クロム、サファリのみ。

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

score 10 · Accepted Answer

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

score 9 · Accepted Answer

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

require.js: 'require text'.

template.htmlの複数行のテンプレートでrequire.js 'text' pluginを使用する

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

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

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

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

簡単。

score 9 · Accepted Answer

エスケープされた改行を使用する場合は、適切に使用できます。 ページ罫線のあるドキュメントのように見えます。

ここに画像の説明を入力

score 7 · Accepted Answer

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 バリアントから複数行文字列オブジェクトを使用して、テンプレートを別のファイル (バンドルにマージできます) に入れることができます。

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

score 3 · Accepted Answer

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

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

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

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

console.log(hello);

score 3 · Accepted Answer

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

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 項目を超える可能性が低い文字列配列には適しているように見えます。より大きな配列のインデックス付きの追加を優先して、.push() を避けます。

score 2 · Accepted Answer

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

<!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>ブラウザの出力を使用すると、次のようになります-

これ
は
マルチライン
ストリング。

score 1 · Accepted Answer

この回避策は 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>

乾杯！！

score 0 · Accepted Answer

これは、少なくともソースコードに関しては、かなり経済的なアプローチの1つです。

function s() {
    var args = [],index;
    for (index = 0; index< arguments.length; index++) {
        args.push (arguments [index]);
    }
    return args.join ("\n");
}
console.log (s (
    "This is the first line",
    "and this is the second",
    "finally a third"
));

function s() {return arguments.join ("\n")}

もちろん、「arguments」プロパティが適切な配列であれば、より良いでしょう。

2番目のバージョンでは、非常に長い文字列の改行を制御する場合に、「」を使用して結合を行う場合があります。

score 0 · Accepted Answer

私はこのようにプログラムします：

sys = {
    layout: null,
    makeLayout: function (obCLS) {
        this.layout = $('<div />').addClass('editor').appendTo($(obCLS)).append(

            /* Cargador */
            /* @this.layout.find('> div:nth-of-child(1)'); */
            '<div>' +
            '   <p>Seleccione la imagen que desea procesar.</p>' +
            '   <input type="button" value="Seleccionar" class="btn btn-xlarge btn-success" />' +
            '   <span></span>' +
            '</div>' +

            /* Cargador - Progreso */
            /* @this.layout.find('> div:nth-of-child(2)'); */
            '<div>' +
            '   <div>' +
            '       <div></div>' +
            '       <div>' +
            '           <div></div>' +
            '       </div>' +
            '   </div>' +
            '</div>' +

            /* Editor */
            /* @this.layout.find('> div:nth-of-child(3)');
             * @sidebar = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(1)');
             * @body    = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(2) > div'); */
            '<div>' +
            '   <div>' +
            '       <div>' +
            '           <div></div>' +
            '           <div>' +
            '               <div></div>' +
            '           </div>' +
            '       </div>' +
            '   </div>' +
            '</div>'
        );
    }
}

sys.makeLayout('#div');

score 0 · Accepted Answer

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

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

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

score -13 · Accepted Answer

それは非常にエレガントではありませんが、私にとっては十分にきれいです:

var myString = "First line" + "\n";
var myString = myString + "Second line" + "\n";
var myString = myString + "Third line" + "\n";

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

43 に答える 43

アップデート：

元のES5の回答：

ES6アップデート：

元のES5の回答：

前

後

require.js: 'require text'.

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

Related

Reference