【連載】

いまからはじめるPrototype.js

2 数値と文字列の拡張メソッド

    沖林正紀  [2007/12/25]

    Prototype.jsでは、数値(Number)や文字列(String)のオブジェクトに拡張メソッドを追加している。今回は、その中からいくつかのメソッドを紹介しよう。バージョンは引き続き1.6だ。

    数値(Number)のメソッド

    Numberのメソッドには、Mathから取り込んだもの(abs/round/ceil/floor)とライブラリにより拡張したものとがある。ここでは後者の一部を取り上げる。詳細はAPIドキュメントを参照していただきたい。

    (数値).toColorPart();
    数値を16進数に変換する。JavaScriptやCSSで色を表すために#ccff66などの16進表現が用いられることが多く、メソッドの名称もそれに合わせている。

    (204).toColorPart();                       // 戻り値 : 'cc'
    var a = 11;  a.toColorPart();              // 戻り値 : '0b'
    [ 204, 255, 51 ].invoke( 'toColorPart' );  // 戻り値 : [ 'cc', 'ff', '33' ]

    (数値).toPaddedString( 全体の長さ, 基数 );
    基数が8なら8進数の文字列に変換される。変換後の文字列の長さが全体の長さより少ない場合は左に0が追加される。前述の toColorPart() は toPaddedString( 2, 16 ) で実現されている。

    var a = 25;  a.toPaddedString( 3, 8 );  // 戻り値 : '031'

    (数値).times( function( n ) {
      // n = 0 から (数値)-1 までの数値を用いた処理
    } );

    function( n ) { ... } において、nを 0 から (数値) - 1 まで1ずつ増やしながら処理を行う。

    var c = 3;
    c.times( function( n )  {
      document.write( 'n = ' + n + '<br />' );
    } );
    
    実行結果
    n = 0<br />
    n = 1<br />
    n = 2<br />


    文字列(String)のメソッド

    文字列はWebアプリケーションで扱うことが多いことから、さまざまなメソッドが拡張されている。ここではその一部を紹介しよう。詳細はAPIドキュメントを参照していただきたい。なお、特別なことがない限り、省略可能な記述は[ ~ ]で表す。

    '文字列'.blank();
    文字列が空白(正規表現の¥s)のみであればtrueとなる。空の文字列('')かどうかはempty()で判定できる。文字列が全角の空白のみの場合を筆者の環境で試したところ、Firefox2.0.0.11ではtrueだが、IE7ではfalseとなった。

    '文字列'.strip();
    両端の空白を削除する。たとえば、' JavaScript ''JavaScript'となり、' Java Script ''Java Script'となる。両端が全角の空白の場合を筆者の環境で試したところ、Firefox2.0.0.11では削除できたが、IE7では削除できなかった。

    '文字列'.camelize();
    -(ハイフン)の次のアルファベットを大文字にする。たとえば'border-width'は'borderWidth'となる。

    '文字列'.escapeHTML(); 文字列をHTMLエスケープする
    '文字列'.unescapeHTML(); HTMLエスケープを元に戻す
    escapeHTML()は&, <, >をそれぞれ&amp; &lt; &gt;にエスケープする。unescapeHTML()はその逆の動作を行う。

    '<ドラッグ&ドロップ>'.escapeHTML();
    // 戻り値 : '&lt;ドラッグ&amp;ドロップ&gt;'
    '&lt;ドラッグ&amp;ドロップ&gt;'.unescapeHTML();
    // 戻り値 : '<ドラッグ&ドロップ>'

    '文字列'.stripTags(); 文字列からHTMLタグを削除
    '文字列'.stripScripts(); 文字列からスクリプトを削除
    stripTags()は<p>や</p>などのHTMLタグを削除し、タグ間のテキストは残る。stripScripts()は<script>から</script>までのすべての文字列が削除される。

    var s = '<p>画像<img src="noimage.png" />は<u>表示できません</u><p>';
    s.stripTags();
    // 戻り値 : '画像は表示できません'
    var s = '<p>スクリプトは削除<script>alert( "スクリプトだよ!" );</script>されます</p>';
    s.stripScripts();
    // 戻り値 : '<p>スクリプトは削除されます</p>'

    '文字列'.sub( パターン, '置き換え後の文字列' [, 合致する回数 ] );
    '文字列'.gsub( パターン, '置き換え後の文字列' );
    '文字列'.scan( パターン, function( match ) {
      // パターンに合致した部分(match)を用いた処理
    } );

    いずれもパターンは文字列か/正規表現/という形式で記述する。sub()は文字列中のパターンに合致した部分のうち、最初から指定された回数(デフォルトは1)だけ文字列を置き換える。gsub()はすべての合致した部分を指定された置き換える。置き換え後の文字列を表す際に、$1にあたる部分を#{1}のように記述する。

    scan()はパターンに合致した部分が出現すると関数が実行される。関数の引数matchは、match[ 1 ] == $1, match[ 2 ] == $2, ...となる。

    var s = '1234abcd-567def';
    s.sub( /(\d+)|(\w+)/, '*', 2 );   // 戻り値 : '**-567def'
    s.gsub( /(\d+)|(\w+)/, '#{2}' );    // 戻り値 : 'abcd-def'
    var s = '1234abcd-567def';
    s.scan( /(\d+)|(\w+)/, function( match ) {
      document.write( match.join() + '<br />' );
    } );
    
    実行結果
    1234,1234,<br />
    abcd,,abcd<br />
    567,567,<br />
    def,,def<br />

    '文字列'.isJSON(); JSON形式かを判定する(JSON in JavaScript参照)
    '文字列'.evalJSON(); JSONをオブジェクトに変換
    '文字列'.toJSON(); JSONで利用可能な形式に変換

    var s = '{ name : "コーヒー", price : 350 }';
    s.isJSON();          // 戻り値 : false
    
    var s = '{ "menu" : ['
            + '{ "name" : "コーヒー", "price" : "350" },'
            + '{ "name" : "サンドイッチ", "price" : "450" }'
            + '] }';
    s.isJSON();          // 戻り値 : true
    var s = '{ "name" : "コーヒー", "price" : "350" }';
    s.evalJSON().name    // 戻り値 : 'コーヒー'
    var s = '飲むならどっち "コーヒー"か"お茶"';
    s.toJSON();          // 戻り値 : '飲むならどっち \"コーヒー\"か\"お茶\"'

    (URL).toQueryParams(); GETパラメータ(URLの?以降)をオブジェクトに変換
    URLのGETパラメータはkey1=value1&key2=value2&...という形式になっているが、これを{ key1 : value1, key2 : value2, ... }というオブジェクトに変換する。valueが日本語であっても、UTF-8でURIエンコードされていればオブジェクトのプロパティ値になる。

    var url = 'index.cgi?greeting=%E3%81%93%E3%82%93%E3%81%B0%E3%82%93%E3%81%AF&hour=19#main';
    var obj = url.toQueryParams();
    obj.greeting;
    // 戻り値 : 'こんばんは'

    NumberとStringに関するメソッドは他にも定義されているので、APIドキュメントで確認していただきたい。

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン