web-dev-qa-db-fra.com

Comment faire une boucle dans l'alphabet avec underscoreJS

J'utilise la méthode template () de Underscore dans les vues BackboneJS. Je voudrais montrer une liste de lettres de l'alphabet à mon avis afin de trier une collection par lettre.

En conséquence, j’ai une liste de 26 liens (un lien = une lettre) à mon avis. Au lieu de copier-coller chaque lien (ce qui est très mauvais pour la maintenabilité du code), je me demandais s'il était possible de faire une boucle dans l'alphabet via underscoreJS.

Résultat à afficher: 

<li ><a href="#">a</a></li>
<li ><a href="#">b</a></li>
<li ><a href="#">c</a></li>
...
<li ><a href="#">z</a></li>
javascriptlistloopsbackbone.jsunderscore.js
14
JeremyW
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
_.each(alphabet, function(letter) {
  console.log(letter);
});

C'est comme ça que tu pourrais le faire.

41
jakee

  1. Créer une plage avec les charcodes

    var alphas = _.range(
    'a'.charCodeAt(0),
    'z'.charCodeAt(0)+1
); 
// [97 .. 122]

  2. Créer un tableau avec les lettres

    var letters = _.map(alphas, a => String.fromCharCode(a));
// see @deefour comment

// Non ES6 version
// var letters = _.map(alphas, function(a) {
//    return String.fromCharCode(a);
// });

// [a .. z]

  3. Injecter dans votre template

    var tpl = 
'<ul>'+
    '<% _.each(letters, function(letter) { %>'+
        '<li><%= letter %></li>'+
    '<% }); %>'+
'</ul>';
var compiled = _.template(tpl);
var html = compiled({letters : letters});

Et une démo http://jsfiddle.net/hPdSQ/17/

var alphas = _.range(
    'a'.charCodeAt(0),
    'z'.charCodeAt(0)+1
); 

var letters = _.map(alphas, a => String.fromCharCode(a));

var tpl = 
'<ul>'+
    '<% _.each(letters, function(letter) { %>'+
        '<li><%= letter %></li>'+
    '<% }); %>'+
'</ul>';
var compiled = _.template(tpl);

var html = compiled({letters : letters});

document.getElementById('res').innerHTML = html;
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id='res'></div>

12
nikoshr
for(var letter=65;letter<91;letter++)
{
var _char = String.fromCharCode(letter);
console.log(_char);
}

ou utiliser de 97 à 123 codes ASCII pour les lettres minuscules

4
Medo Medo

for (var i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++) {
  console.log(String.fromCharCode(i));
}

2
Artemius Pompilius

Utilisation de ES6 pour-of :

for( char of "abcdefghijklmnopqrstuvwxyz" ){
  console.log(char); // prints 'a' to 'z'
}

C'est assez facile à utiliser dans un modèle et vous pouvez utiliser Babel pour l'enregistrer en code pour les navigateurs qui ne prennent pas en charge cette syntaxe.

0
vsync

Voici une version * améliorée du code JS pur de @Medo Medo:

    var letters=[], letter_first = 'a', letter_last = 'z' // you can also use A and Z
    for (var letter=letter_first.charCodeAt(0);letter<=letter_last.charCodeAt(0);letter++)
      letters.Push(String.fromCharCode(letter))
    document.write(letters.join(''))

  • Correction de la déclaration "var"
  • Ajout de la détection de lettre directe
  • Recueilli le résultat dans un tableau afin d'avoir une seule sortie
  • Fait le code exécutable ici
0
LWC

Utiliser underscore.js et jQuery conjointement vous aidera à atteindre cet objectif (underscore.js est incapable d'effectuer l'insertion/manipulation DOM par lui-même).

var abc = ['a', 'b', 'c', 'd']; //i disregarded how you get the list of letters.

_.each(abc, function(letter){
    $('ul').append('<li><a href="#">'+letter+'</a></li>');
});

Fait aussi un violon pour vous

0
Henrik Andersson

Le soulignement n’a pas cette capacité, mais votre cas pourrait faire l’objet d’une astuce. changez votre template comme ceci:

<% for(var i=65; i<90; i++) { %>
<li ><a href="#"><% print(String.fromCharCode(i)); %></a></li>
<% } %>

cela devrait être ce que vous voulez.

0
Hetfield Joe