list 如何通过underscoreJS循环字母表

How to loop through the alphabet via underscoreJS

提问by JeremyW

I'm using Underscore's template() method in BackboneJS views. I'd like to show a list of alphabet letters in my view in order to sort a collection by letter.

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

As a result, I have a list of 26 links (one link = one letter) in my view. Instead of copy-pasting each link (which is very bad for code maintainability), I was wondering if it was possible to loop through the alphabet via underscoreJS.

因此，在我看来，我有一个包含 26 个链接（一个链接 = 一个字母）的列表。我没有复制粘贴每个链接（这对代码可维护性非常不利），我想知道是否可以通过 underscoreJS 遍历字母表。

Result to display :

显示结果：

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

回答by jakee

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

That's how you could do it.

那就是你可以做到的。

回答by nikoshr

1. Create a range with the charcodes

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

2. Create an array with the letters

   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. Inject into your template

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

1. 使用字符代码创建一个范围

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

And a demo http://jsfiddle.net/hPdSQ/17/

还有一个演示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>

回答by Medo Medo

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

or use from 97 - 123 ascii code for lowercase letters

或使用 97 - 123 ascii 代码作为小写字母

回答by Artemius Pompilius

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

回答by Justin Tanner

Another approach with underscore (or loadash):

另一种带下划线（或 loadash）的方法：

_.map(_.range(26), function(i) { return String.fromCharCode(97 + i) });

// returns ['a', 'b', ..., 'z']

回答by vsync

Using ES6 for-of:

使用 ES6 for-of：

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

Pretty easy to use that in a template, and you could use Babelto transpile it to code for browsers which lack support for that syntax.

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

回答by LWC

Here's an improved* version of @Medo Medo's pure JS code:

这是@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(''))

• Fixed the "var" declaration
• Added direct letter detection
• Collected the result into an array in order to have only one output
• Made the code runnable right here

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

回答by Henrik Andersson

Using underscore.jsand jQueryin conjunction will help you acheive this (underscore.js is incapable of doing DOM insertion/manipulation by itself).

使用underscore.js和jQuery结合使用将帮助您实现这一点（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>');
});

Also made a fiddle for you

还为你做了一个小提琴

回答by Hetfield Joe

Underscore don't have such ability, but your case could do some trick on the template. change your template like this:

下划线没有这样的能力，但你的案例可以在模板上做一些技巧。像这样改变你的模板：

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

this should be what you want.

这应该是你想要的。