Underscore.js使用のURLクエリパラメーター値の取得方法

Underscore.jsでURLパラメーターを簡単取得

URLパラメーター(?=foo&barのようなクエリー文字列)はJavaScriptを使用すれば取得できるがコードが若干煩雑で長くなってしまう。

Underscore.jsを使用すれば下記のように短いコードで簡単にパラメーターを取得できる。

// iwb.jp/s/p/?foo=bar&hoge=fuga
var getParam = function() {
  var ret = _.chain(location.search.slice(1).split('&'))
  .map(function(item) { return item.split('='); })
  .object()
  .value();
  return ret;
}
console.log(getParam());
// =>  Object { foo="bar",  hoge="fuga"}

メソッドで条件追加

_.chainでメソッドをつなげているのでメソッドを追加することで様々な条件で値を取得することができる。

例えば指定したキーが入っているオブジェクトを返す_.pick()を使用すれば…

// iwb.jp/s/p/?foo=bar&hoge=fuga
var getParam = function(key) {
  var ret = _.chain(location.search.slice(1).split('&'))
  .map(function(item) { return item.split('='); })
  .object()
  .pick(key)
  .value();
  return ret[key] ? ret[key] : '';
}
console.log(getParam('foo'));
// => 'bar'
}

このように値のほしいキーを指定して取得することができるようになる。

Underscore.js使用のURLクエリパラメーター値の取得サンプル

そのほかの便利なメソッド

_.omitで指定したキーを除外して返す

// iwb.jp/s/p/?foo=1&bar=2&un=3&ko=4
var getParam = function() {
  var ret = _.chain(location.search.slice(1).split('&'))
  .map(function(item) { return item.split('='); })
  .object()
  .omit('un', 'ko')
  .value();
  return ret;
}
console.log(getParam());
// =>  Object { foo="1",  bar="2"}