web-dev-qa-db-fra.com

Casser une chaîne en plusieurs lignes dans un code javascript

J'essaie de formater (embellir, ranger, éclaircir, etc.) un extrait de code HTML dans mon code javascript ou, en d'autres termes, de l'étaler sur plusieurs lignes plutôt que de l'écrire sur une ligne lis facilement.

En gros, c'est un morceau de code HTML que j'essaye d'ajouter à la page en appelant la méthode .append(); de jQuery.

Et voici ce que j'essaie de faire:

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

Apparemment, ça ne marchera pas comme ça. Je reçois Uncaught SyntaxError: Unexpected token >

Quand il est écrit comme suit, tout fonctionne bien.

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

C'est un peu bizarre que lorsque j'ai essayé de faire la chose exacte ici,

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

Je n'ai eu aucun problème du tout.

Je sais que le problème n’est pas si grave, mais j’essaie de régler le problème simplement par souci de simplicité.

Aucune suggestion?

javascriptjqueryhtmlembedded-resource
12
Simone

Si vous avez une chaîne multiligne, vous devez utiliser la syntaxe multiline string .

Cependant, il est préférable de stocker votre code HTML dans des modèles et non du code :) Cela les rend plus lisibles, plus réutilisables et plus faciles à gérer.

Qu'en est-il quelque chose comme - dans votre code HTML:

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

Puis en JavaScript

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

De cette façon, vous obtenez une séparation plus claire du modèle que vous utilisez et de votre code. Vous pouvez modifier le code HTML indépendamment et le réutiliser plus facilement dans d’autres parties du code.

Il n'est même pas nécessaire que le code soit conscient des modifications de modèle et un concepteur peut modifier la conception sans connaître JavaScript.

Bien sûr, si vous faites souvent cela, vous pouvez utiliser un moteur de templates et ne pas avoir de chaîne .replace.

ES2015 introduit également des modèles de chaînes qui sont également une sorte de Nice et servent en principe le même but:

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

Si vous voulez écrire une chaîne multiligne, utilisez le "\":

exemple:

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

Nouvelle réponse:

Avec ES6, vous pouvez réellement utiliser une concaténation de chaînes insensible à la rupture de ligne:

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

et les sauts de ligne ne seront pas un problème. Avant ES6, j'utilisais principalement des tableaux et les concat. C'est plus rapide:

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

Ancienne réponse:

En javascript, vous ne pouvez pas séparer des lignes sans les concaténer avec un + ou en utilisant \. Essaye ça:

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

Si vous voulez simplement diviser la sortie rendue en nouvelles lignes, ajoutez\n où vous voulez que la nouvelle ligne apparaisse, comme ceci ...

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

Et si vous voulez que votre JS ait l'air sympa, vous pouvez essayer ceci, ce qui garantira également que votre HTML rendu est en retrait.

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

tu peux essayer comme ça 

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