【連載】
Prototype.jsでは、数値(Number)や文字列(String)のオブジェクトに拡張メソッドを追加している。今回は、その中からいくつかのメソッドを紹介しよう。バージョンは引き続き1.6だ。
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 />
文字列は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();
// 戻り値 : '<ドラッグ&ドロップ>'
'<ドラッグ&ドロップ>'.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ドキュメントで確認していただきたい。
| トマトを食べれば痩せられる!? -京大ら、新発見の成分で肥満改善効果を実証 [21:00 2/10] |
| JAXA、液体シリコン中に残存する共有結合を観察 -大口径ウェハの実現に期待 [20:11 2/10] |
| NEDOなど、熱膨張が小さな樹脂複合材料ペレットの量産化に成功 [19:22 2/10] |
| 理研、一般顕微鏡を蛍光顕微鏡に強化できるアダプタを試作して性能を実証 [19:15 2/10] |
| 天の川のブラックホールが小惑星を飲み込んでいる - NASAが発表 [18:08 2/10] |
|
坂本教授、木の光合成に着目した不思議な音楽的挑戦!『ETV特集』 [10:08 2/11] キャリア |
|
バロックで異端!水墨画の巨匠、雪村周継の神業に迫る! [10:07 2/11] キャリア |
|
元・宝塚の真琴つばさ、ドラマ初主演で小学生の母親役に挑戦! [10:07 2/11] キャリア |
|
「四大陸フィギュア」今夜は連覇のかかった高橋、昨年末復活した浅田、村上に注目! [10:07 2/11] キャリア |
|
【EU発!Breaking News】精神疾患治療のため?マラリア患者の血液を注射された男性。(オーストリア) [10:05 2/11] キャリア |