12

JavaScriptコード内のHTMLのスニペットをフォーマット（美化、整頓、片付け..名前を付ける）しようとしています。つまり、1行に記述するのではなく、複数行に広げて、簡単に読めます。

基本的に、これは jQuery の.append();メソッドを呼び出してページに追加しようとしている html コードです。

そして、これが私がやろうとしていることです:

$('.videos').append('<li>
                    <span>' + count + '</span> - 
                    <a href="' + vList[i].player + '">
                        <span class="title">' + videoTitle + '</span>
                    </a>
                    </li>');

どうやら、そのようには機能しません。私は得ていますUncaught SyntaxError: Unexpected token >

次のように書くと、すべてうまくいきます。

$('.videos').append('<li><span>' + count + '</span> - <a href="' + vList[i].player + '"><span class="title">' + videoTitle + '</span></a></li>');

ここで正確にやろうとしたとき、

var albumURL = API + '/video.get?=owner_id=' + userID +
                     '&album_id=' + aList[i].album_id +
                     '&access_token=' + accessToken;

まったく問題ありませんでした。

この問題はそれほど大きな問題ではないことはわかっていますが、簡単にするために、この問題を回避しようとしています。

助言がありますか？

4

6 に答える 6

21

複数行の文字列がある場合は、複数行の文字列構文を使用する必要があります。

ただし、HTML はコードではなくテンプレートに保存する方がよいでしょう :) これにより、HTML は読みやすく、再利用しやすく、保守しやすくなります。

次のようなものはどうですか-HTMLで：

<script type="text/template" id="videoTemplate">
    <li>
      <span>{{count}}</span>
      <a href="{{videoURL}}">
        <span class="title">{{videoTitle}}</span>
      </a>
    </li>
</script>

次に JavaScript で

var template = $("#videoTemplate").html();
$(".videos").append(template.replace("{{count}}",count).
                             replace("{{videoURL}}",vList[i].player).
                             replace("{{videoTitle}}",videoTitle));

そうすれば、使用しているテンプレートとコードをより明確に分離できます。HTML を個別に変更して、コードの他の部分で簡単に再利用できます。

コードはテンプレートの変更を認識する必要さえなく、デザイナーは JavaScript を知らなくてもデザインを変更できます。

もちろん、これを頻繁に行う場合は、.replaceチェーンを使用せずにテンプレート エンジンを使用できます。

ES2015 では、テンプレート文字列も導入されています。これも一種の優れた機能であり、原則として同じ目的を果たします。

 const videoTemplate = `<li>
      <span>${count}</span>
      <a href="${vList[i].player}">
        <span class="title">${videoTitle}</span>
      </a>
    </li>`;
于 2013-10-11T08:03:08.880 に答える
10

複数行の文字列を書きたい場合は、「\」を使用する必要があります。

例：

$('.videos').append('<li> \
                <span>' + count + '</span> - \
                <a href="' + vList[i].player + '"> \
                    <span class="title">' + videoTitle + '</span> \
                </a> \
                </li>');
于 2013-10-11T08:02:46.270 に答える
7

新しい答え:

ES6 では、改行を認識しない文字列連結を実際に使用できます。

var html = `
    <li>
        ${count}
    </li>
`;

改行は問題になりません。ES6 より前は、主に配列を使用してそれらを連結していました。その高速：

var html = [
    '<li>',
        count
    '</li>'
].join('');

古い答え:

+JavaScript では、または を使用して連結しないと改行できません\。これを試して：

$('.videos').append('<li>' +
    '<span>' + count + '</span> - ' +
    '<a href="' + vList[i].player + '">' +
    '<span class="title">' + videoTitle + '</span>' +
    '</a>' +
    '</li>');
于 2013-10-11T07:58:54.313 に答える
1

レンダリングされた出力を単に新しい行に分割したい場合は、次のように、改行を表示する場所に \n を追加します...

$('.videos').append('<li>\n<span>' + count + '</span> -\n<a href="' + vList[i].player + '">\n<span class="title">' + videoTitle + '</span>\n</a>\n</li>\n');

JS の見栄えを良くしたい場合は、これを試すことができます。これにより、レンダリングされた HTML が確実にインデントされます。

var item = '';

item += '<li>\n';
item += '    <span>' + count + '</span> -\n';
item += '    <a href="' + vList[i].player + '">\n';
item += '        <span class="title">' + videoTitle + '</span>\n';
item += '    </a>\n';
item += '</li>\n';

$('.videos').append(item);
于 2013-10-11T08:15:02.183 に答える
0

あなたはこのように試すことができます

$('.videos').append( ['<li>',
    '<span>' + count + '</span> - ' ,
    '<a href="' + vList[i].player + '">' ,
        '<span class="title">' + videoTitle + '</span>' ,
    '</a>' ,
'</li>'].join('') );
于 2013-10-11T08:03:19.537 に答える