Underscore.js 1.7の使い方 Utility編

Underscore.js 1.7の使い方 Utility編

noConflict

_(アンダースコア)以外の文字を割り振る

var r = document.getElementById("r");
var _u = _.noConflict();
r.innerHTML = _u.isBoolean(1 === 1);
//=> true

サンプル

identity

引数と同じものを返す

var r = document.getElementById("r");
var data = {name: 'sato'};
r.innerHTML = (data === _.identity(data));
//=> true

サンプル

constant

引数として使用されているのと同じ値の関数を返す

var r = document.getElementById("r");
var data = {name: 'sato'};
r.innerHTML = (data === _.constant(data)());
//=> true

サンプル

noop

渡される引数に関わらずundefinedを返す

var r = document.getElementById("r");
var obj = {};
obj.initialize = _.noop;
r.innerHTML = obj.initialize;
//=> function() {}

サンプル

times

指定した回数分処理を繰り返す

var r = document.getElementById("r");
_(3).times(function(n) {
  r.innerHTML += 'A';
});
// => AAA

サンプル

random

指定した最小値と最大値の間の数をランダムで返す

var r = document.getElementById("r");
r.innerHTML = _.random(1, 6);
// => 1 ~ 6

最小値を省略すると0が最小値になる

var r2 = document.getElementById("r2");
r2.innerHTML = _.random(6);
// => 0 ~ 6

サンプル

mixin

アンダースコアにfunction関数を追加

var r = document.getElementById("r");
_.mixin({
  double: function(num) {
    return num * 2;
  }
});
r.innerHTML = _(10).double();
// => 20

サンプル

iteratee

文字列であればキーの値を返す

var data = [{name: 'sato', age: 20}, {name: 'suzuki', age: 30}];
var r = document.getElementById("r");
r.innerHTML = _.map(data, _.iteratee('name'));
// => ["sato", "suzuki"]

オブジェクトであればキーと値が一致すればtrueを返す

var data = [{name: 'sato', age: 20}, {name: 'suzuki', age: 30}];
var r2 = document.getElementById("r2");
r2.innerHTML = _.map(data, _.iteratee({name: 'sato'}));
// => [true, false]

サンプル

uniqueId

文字列のうしろにユニークIDを付けて返す

var r = document.getElementById("r");
for(var i=0; i<5; i++) {
  r.innerHTML += _.uniqueId('id') + ' ';
}

サンプル

escape

HTMLの&, <, >, “, `, ‘ をエスケープして返す

var r = document.getElementById("r");
console.log(_.escape('& < > " ` \''));
// => &amp; &lt; &gt; &quot; &#x60; &#x27;

サンプル

unescape

&amp; &lt; &gt; &quot; &#x60; &#x27;をアンエスケープして返す

※公式サイトでは&#96;と書かれているが&#96;は存在しないためこれは間違い。

var r = document.getElementById("r");
console.log(_.unescape('&amp; &lt; &gt; &quot; &#x60; &#x27;'));
// => & < > " ` '

サンプル

result

キーが関数の場合その返り値を返し、関数でなければ値を返す

var obj = {dog: 'bow', cat: function(){ return 'mew'; }};
var r = document.getElementById("r");
r.innerHTML = _.result(obj, 'dog');
// => 'bow'
var obj = {dog: 'bow', cat: function(){ return 'mew'; }};
var r2 = document.getElementById("r2");
r2.innerHTML = _.result(obj, 'cat');
// => 'mew'

サンプル

now

現在の日時をタイムスタンプ(ミリ秒)で返す

var r = document.getElementById("r");
r.innerHTML = _.now();
// => 1417530708195

サンプル

template

<%= hoge %>を変数として使用するテンプレートを作成

var r = document.getElementById("r");
var test = _.template("Hello <%= str %>");
r.innerHTML = test({str: 'world!'});
// => "Hello world";

<%= hoge %>内に文字列を入れる場合はprint()を使用する

var test = _.template("<% print('Hello ' + str); %>");
r.innerHTML = test({str: "world!"});
// => Hello world!

サンプル

ほかのUnderscore.jsの記事