web-dev-qa-db-ja.com

underscoreJSでアルファベットをループする方法

BackboneJSビューでUnderscoreのtemplate（）メソッドを使用しています。コレクションを文字で並べ替えるために、ビューにアルファベット文字のリストを表示したいのですが。

その結果、26個のリンク（1つのリンク= 1つの文字）のリストが表示されます。各リンクをコピーして貼り付けるのではなく（コードの保守性にとって非常に悪い）、underscoreJSを介してアルファベットをループできるかどうか疑問に思いました。

表示する結果：

<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
16
JeremyW
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
_.each(alphabet, function(letter) {
  console.log(letter);
});

それはあなたがそれを行うことができる方法です。

46
jakee

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

そしてデモ 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>
13
nikoshr
for(var letter=65;letter<91;letter++)
{
var _char = String.fromCharCode(letter);
console.log(_char);
}

または小文字には97〜123のASCIIコードを使用

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

ES6の使用 for-of ：

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

これをテンプレートで使用するのは非常に簡単で、 Babel を使用して、その構文のサポートが不足しているブラウザー用のコードにトランスパイルできます。

1
vsync

下線（またはlodash）を使用した別のアプローチ：

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

// returns ['a', 'b', ..., 'z']
1
Justin Tanner

@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」宣言を修正
  • ダイレクトレター検出を追加
  • 出力を1つだけにするために結果を配列に収集しました
  • ここでコードを実行可能にした
0
LWC

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

あなたのためのフィドル も作成しました

0
Henrik Andersson

アンダースコアにはそのような機能はありませんが、あなたのケースはテンプレートにいくつかのトリックを行う可能性があります。次のようにテンプレートを変更します。

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

これはあなたが望むものでなければなりません。

0
Hetfield Joe