wake-up-neo.com

Wie man das Alphabet mit UnterstrichenJS durchläuft

Ich verwende die Vorlage () - Methode von Underscore in BackboneJS-Ansichten. Ich möchte eine Liste von Buchstaben in meiner Ansicht anzeigen, um eine Sammlung nach Buchstaben zu sortieren.

Als Ergebnis habe ich eine Liste von 26 Links (ein Link = ein Buchstabe) in meiner Ansicht. Anstatt jeden Link zu kopieren (was für die Wartbarkeit des Codes sehr schlecht ist), habe ich mich gefragt, ob es möglich ist, das Alphabet mit UnderscoreJS zu durchlaufen.

Ergebnis der Anzeige:

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

So kannst du es machen.

41
jakee
  1. Erstellen Sie einen Bereich mit den Zeichencodes

    var alphas = _.range(
        'a'.charCodeAt(0),
        'z'.charCodeAt(0)+1
    ); 
    // [97 .. 122]
    
  2. Erstellen Sie ein Array mit den Buchstaben

    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. Injizieren Sie Ihre Vorlage

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

Und eine Demo 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);
}

oder verwenden Sie den ASCII-Code 97 - 123 für Kleinbuchstaben

4
Medo Medo

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

2

Verwenden von ES6 für-von :

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

Das ist ziemlich einfach in einer Vorlage zu verwenden, und Sie könnten Babel verwenden, um es für Browser zu codieren, der diese Syntax nicht unterstützt.

0
vsync

Hier ist eine verbesserte * Version von @Medo Medos reinem JS-Code:

    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(''))

  • Die "var" -Deklaration wurde behoben
  • Direkte Brieferkennung wurde hinzugefügt
  • Das Ergebnis in einem Array gesammelt, um nur eine Ausgabe zu erhalten
  • Hier ist der Code lauffähig
0
LWC

Die Verwendung von underscore.js und jQuery hilft Ihnen dabei, dies zu erreichen (underscore.js kann die DOM-Einfügung/Manipulation nicht selbst durchführen).

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>');
});

Auch eine Geige für Sie gemacht

0

Unterstriche verfügen nicht über eine solche Fähigkeit, aber Ihr Fall könnte einen Trick mit der Vorlage bewirken. Ändern Sie Ihre Vorlage folgendermaßen:

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

das sollte sein, was du willst.

0
Hetfield Joe

Ein anderer Ansatz mit Unterstrich (oder Loadash) könnte _.range wie so:

_.map(_.range(26), function(i) { return String.fromCharCode(97 + i) });
// returns ['a', 'b', ..., 'z']
0
Justin Tanner