JavaScript で クエリストリング を 生成 する 方法

2015年8月23日 22:43 , 0 件のコメント

JavaScript で オブジェクト を クエリ文字列 に変換（シリアライズ）する サンプルコード を作成しました。 以前書いた "JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法" に対応する コード になります。

目次

関連記事

生成 する サンプルコード

サンプルコード

/**
* 受け取ったオブジェクトをクエリ文字列にシリアライズします。
*
* サンプル オブジェクト
*   var query = {
*     action: 'view',
*     id: '123',
*     debug: undefined,
*     arraylist: [
*       'val1',
*       'val2'
*     ],
*     hashlist: {
*       foo: 'foo',
*       bar: 'bar'
*     }
*   }
* サンプル シリアライズ結果
*   ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar
*/
var serialize = function (data) {
    var key, value, type, i, max;
    var encode = window.encodeURIComponent;
    var query = '?';

    for (key in data) {
        value = data[key];
        type = typeof(value) === 'object' && value instanceof Array ? 'array' : typeof(value);
        switch (type) {
            case 'undefined':
                // キーのみ
                query += key;
                break;
            case 'array':
                // 配列
                for (i = 0, max = value.length; i < max; i++) {
                    query += key + '[]';
                    query += '=';
                    query += encode(value[i]);
                    query += '&';
                }
                query = query.substr(0, query.length - 1);
                break;
            case 'object':
                // ハッシュ
                for (i in value) {
                    query += key + '[' + i + ']';
                    query += '=';
                    query += encode(value[i]);
                    query += '&';
                }
                query = query.substr(0, query.length - 1);
                break;
            default:
                query += key;
                query += '=';
                query += encode(value);
                break;
        }
        query += '&';
    }
    query = query.substr(0, query.length - 1);
    return query;
};

サンプルコード の 使い方

上記サンプルコードは基本的にコピペで利用できます。

  1. 上記 サンプルコード を コピペ して適当な名前で保存します。 ここでは "serialize.js" として保存したものとします。
  2. 保存した "serialize.js" を利用するより前に読み込みます。 serialize メソッド が グローバル な領域に生成されているので、 この メソッド を利用します。 
    <!DOCTYPE html>
<html>
  <head>
    <title>QueryString サンプルコード</title>
     
    <!-- コピペしたサンプルコードを実処理より前に読み込みます。1度だけで OK。 -->
    <script type="text/javascript" src="./serialize.js"></script>
     
    <!-- 具体的な利用方法は… query オブジェクト へのアクセスで OK。 -->
    <script type="text/javascript">
      // クエリ文字列に変換したいオブジェクト
      var obj = {
        'action': 'view',
        'id': '123',
        'debug': undefined,
        'arraylist': [
          'val1',
          'val2'
        ],
        'hashlist': {
          'foo': 'foo',
          'bar': 'bar'
        }
      };
      
      if (console) {
        // オブジェクトをクエリ文字列に変換します。
        var query = serialize(obj);
        
        console.log(query);
        // 以下のようなログが出力されます。
        // LOG> ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar
      }
    </script>
  </head>
  <body>
  </body>
</html>

対応している オブジェクト

今回、作成した サンプルコード では以下のような クエリストリング に対応しています。 いわゆる、上記 サンプルコード の仕様に相当します。 以前作成した クエリストリング→オブジェクト と対をなすものなので、基本的に仕様は同じです。

対応する クエリストリング の 種類

  • 単純なキーバリュー
    例：?key=value
  • キーのみ
    例：?key
  • 配列
    例：?key[]=value0&key[]=value1
  • ハッシュ
    例：?key[hoge]=hogevalue&key[foo]=foovalue

例えば、以下のような動作を行います。 受け取った オブジェクト を元に クエリストリング に展開される 文字列 を以下に示します。

受け取った オブジェクト

var query = {
  action: 'view',
  id: '123',
  debug: undefined,
  arraylist: [
    'val1',
    'val2'
  ],
  hashlist: {
    foo: 'foo',
    bar: 'bar'
  }
}

オブジェクト を元に生成する クエリストリング

?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！