いまからはじめるPrototype.js(2) 数値と文字列の拡張メソッド

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()は&, <, >をそれぞれ& < >にエスケープする。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ドキュメントで確認していただきたい。