wake-up-neo.com

Eine Zeichenfolge in mehrere Zeilen innerhalb eines Javascript-Codes aufteilen

Ich versuche, ein HTML-Snippet in meinem Javascript-Code zu formatieren (verschönern, aufräumen, klarstellen ... Sie nennen es) oder mit anderen Worten, es auf mehrere Zeilen zu verteilen, anstatt es in eine Zeile schreiben zu lassen einfach lesen.

Im Grunde ist es ein Stück HTML-Code, den ich versuche, an die Seite anzuhängen, indem ich die .append();-Methode von jQuery aufrufe.

Und hier versuche ich zu tun:

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

Anscheinend wird es nicht so funktionieren. Ich bekomme Uncaught SyntaxError: Unexpected token >

Wenn es wie folgt geschrieben ist, funktioniert alles gut.

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

Es ist irgendwie komisch, dass, wenn ich versuchte, genau das zu tun,

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

Ich hatte überhaupt kein Problem.

Ich weiß, dass dieses Thema keine große Sache ist, aber ich versuche, nur aus Gründen der Einfachheit damit umzugehen.

Irgendwelche Vorschläge?

12
Simone

Wenn Sie eine mehrzeilige Zeichenfolge haben, müssen Sie die mehrzeilige Zeichenfolgensyntax verwenden.

Es ist jedoch besser, Ihren HTML-Code in Vorlagen und nicht in Code zu speichern. Das macht sie lesbarer, wiederverwendbarer und wartbarer.

Was ist mit so etwas - in Ihrem HTML:

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

Dann in JavaScript

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

Auf diese Weise erhalten Sie eine klarere Trennung der verwendeten Vorlage und Ihres Codes. Sie können den HTML-Code unabhängig voneinander ändern und ihn in anderen Teilen des Codes leichter wiederverwenden.

Der Code muss nicht einmal Vorlagenänderungen berücksichtigen, und ein Designer kann das Design ändern, ohne JavaScript zu kennen.

Wenn Sie dies häufig tun, können Sie natürlich eine Template-Engine verwenden und keine .replace-Kette haben.

ES2015 führt auch Template-Strings ein, die ebenfalls Nizza sind und grundsätzlich denselben Zweck haben:

 const videoTemplate = `<li>
      <span>${count}</span>
      <a href="${vList[i].player}">
        <span class="title">${videoTitle}</span>
      </a>
    </li>`;
21

Wenn Sie eine mehrzeilige Zeichenfolge schreiben möchten, sollten Sie das "\" verwenden:

beispiel:

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

Neue Antwort:

Mit ES6 können Sie tatsächlich eine String-Verkettung verwenden, die für Zeilenumbrüche unempfindlich ist:

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

und die Zeilenumbrüche sind kein Problem. Vor ES6 habe ich meistens Arrays und Concat verwendet. Es ist schneller:

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

Alte Antwort:

In Javascript können Sie Zeilen nicht brechen, ohne sie mit einem + zu verketten oder \ zu verwenden. Versuche dies:

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

Wenn Sie die gerenderte Ausgabe einfach in neue Zeilen aufteilen möchten, hängen Sie\n an der Stelle an, an der die neue Zeile erscheinen soll, wie hier ...

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

Wenn Sie möchten, dass Ihre JS-Datei schön aussieht, können Sie dies auch versuchen. Dadurch wird auch sichergestellt, dass das gerenderte HTML-Dokument eingerückt ist.

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

sie können es so versuchen 

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