如何通过下划线循环字母表

时间:2013-05-28 09:50:16

标签: javascript list loops backbone.js underscore.js

我在BackboneJS视图中使用了Underscore的template()方法。我想在我的视图中显示一个字母表列表,以便按字母对集合进行排序。

因此,我的视图中有26个链接列表(一个链接=一个字母)。而不是复制粘贴每个链接(这对代码可维护性来说非常糟糕),我想知道是否可以通过下划线来循环字母表。

要显示的结果:

<li ><a href="#">a</a></li>
<li ><a href="#">b</a></li>
<li ><a href="#">c</a></li>
...
<li ><a href="#">z</a></li>

9 个答案:

答案 0 :(得分:43)

var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
_.each(alphabet, function(letter) {
  console.log(letter);
});

你就是这样做的。

答案 1 :(得分:12)

  1. 使用charcodes创建范围

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

    创建一个数组
    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. 注入模板

    var tpl = 
    '<ul>'+
        '<% _.each(letters, function(letter) { %>'+
            '<li><%= letter %></li>'+
        '<% }); %>'+
    '</ul>';
    var compiled = _.template(tpl);
    var html = compiled({letters : letters});
    
  4. 演示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>

答案 2 :(得分:5)

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

或使用97 - 123 ascii代码表示小写字母

答案 3 :(得分:3)

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

答案 4 :(得分:0)

结合使用underscore.jsjQuery将帮助您实现此目标(underscore.js无法自行执行DOM插入/操作)。

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

还制作了fiddle for you

答案 5 :(得分:0)

下划线没有这样的能力,但你的情况可以在模板上做一些技巧。像这样更改你的模板:

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

这应该是你想要的。

答案 6 :(得分:0)

使用ES6 for-of

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

在模板中使用它非常简单,您可以使用Babel将其转换为不支持该语法的浏览器的代码。

答案 7 :(得分:0)

这是@Medo Medo的纯JS代码的改进*版本:

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

  • 修正了“var”声明
  • 添加直接字母检测
  • 将结果收集到一个数组中,以便只有一个输出
  • 让代码可以在这里运行

答案 8 :(得分:0)

带有下划线(或loadash)的另一种方法可以像这样使用_.range

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