配列 - javascript 長い文字列




JavaScriptでの複数行文字列の作成 (20)

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

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

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

更新:

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

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

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

(注:私は文字列でHTMLを使うことを主張していません)

ブラウザーのサポートはOKですがtranspilersをより互換性のあるものにすることができます。

元のES5の答え:

Javascriptにはhere-document構文はありません。 しかし、リテラル改行はエスケープすることができます。

"foo \
bar"

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のドキュメントの正確な互換性を確認する


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

例えば

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

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

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

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

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

私は得る:


2015年に更新されました :6年後です:ほとんどの人はモジュールローダーを使い、メインモジュールシステムはそれぞれテンプレートを読み込む方法を持っています。 これはインラインではありませんが、最も一般的な複数行の文字列の型はテンプレートであり、 テンプレートは一般にJSからは除外されるべきです

require.js: '必須テキスト'。

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

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

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

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

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

簡単です。


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

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

DEMO

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>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

https://.com/a/15558082/80404への私の拡張。 それは/*! any multiline comment */形式のコメントを期待してい/*! any multiline comment */ /*! 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();

あなたは、 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()'サポートしていないことに注意してください。

レガシーコードが大量にある場合は、単純なJavaScriptバリアントをTypeScriptで使用することもできます(クリーンアップ用)。

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

プレーンJavaScriptバリアントの複数行文字列オブジェクトを使用することができます。ここでは、テンプレートを別のファイル(バンドル内でマージできます)に配置します。

あなたはTypeScriptをで試すことができます
TypeScript


あなたは文字列を連結するために+=を使うことができます。誰もそれに答えなかったようですが、これは読みやすくなります。

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

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

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

console.log(hello);

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

それを美しくするこの図書館があります:

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

また、各行の最後にフォワードバックスラッシュを使用して複数行にわたって文字列を拡張すると、フォワードバックスラッシュの後に余分な文字(ほとんどの場合スペース、タブ、およびコメント)が予期しない文字エラーを引き起こすことに注意してください。でる

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

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


スクリプトタグの使用:

  • あなたの複数行テキストを含む<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>
    

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

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()を使用しない理由はありますか?

これらの(反対の)テストを見た後では、100個以上のアイテムが成長しない文字列配列の場合、.push()はうまくいくように見えます。


私は、この非常にジミーのリギングされた複数のストリングのメソッドを考え出しました。 関数を文字列に変換すると、関数内の任意のコメントも返されるので、複数のコメント/ ** /を使用してコメントを文字列として使用できます。 あなたはちょうど端を切り取り、あなたの文字列を持っている必要があります。

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)

私はこの構文とindendationが好きです:

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

(しかし、実際には複数行の文字列として考えることはできません)


私はこれを見ていなかったのに驚いています。なぜなら、どこでも動作していてテストしていて、テンプレートなどには非常に便利だからです。

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

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


要約すると、ここではユーザのJavaScriptプログラミング(Opera 11.01)で2つのアプローチを試してみました:

だから私は、OperaユーザーのJSユーザーのための作業アプローチをお勧めします。 著者が言っていたこととは違って:

ファイヤーフォックスやオペラでは機能しません。 IE、クロム、サファリでのみ使用できます。

これはOpera 11で動作します。ユーザーJSスクリプトでは少なくともです。 あまりにも私は個々の答えにコメントすることはできませんまたは答えをupvote、私はすぐにそれをやるだろう。 可能であれば、より高い特権を持つ人は私のためにそれをしてください。


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

<!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あなたのソースコードを使ってみると -

This 
 <br>is
 <br>multiline
 <br>string.

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

This
is
multiline
string.




heredoc