ブッククリエーター (無効化)

JavaScript 標準ライブラリ Global

出典: フリー教科書『ウィキブックス（Wikibooks）』

目次

[編集] Global関数

[編集] eval(x)

文字列を評価してその結果を返す。

eval関数の意味は、この一言で解説可能な単一の関数であるが、実際には様々な役割があり非常に重要なのでさらに解説を行う。

eval関数は文字列をJavaScriptであるとして評価して、その結果を返す。 そのため

var v=eval('100');  // 数字型の100をvに代入

などとすると、その結果が返ってくる。 このことから、何らかのユーザーの入力があったときに、その結果をJavaScriptで扱うことができる状態に変換可能である。 例えば、次のコードはHTMLで作成した、選択ボックスの結果を、evalでJavaScriptに変換した結果を逐次代入している。

<form id="enquete">
  <select id="yes-no">
    <option value="true" selected="selected">はい</option>
    <option value="false">いいえ</option>
  </select>
</form>
<script>
var ret = true;
document.getElementById('yes-no').onchange=function(e){
  ret = eval(this[this.selectedIndex].value);
}
</script>

(ただし入力紹介する結果が数値である場合は、後で紹介するparseIntやparseFloatの方が安全である)

さらに一歩推し進めて考えると、次の様に、計算式等もeval関数は処理をして、変数を呼び出す事も出来る。

document.write( eval('100+100'), '<br />' );  // 200を表示
var s='Hello';
eval('s +=",Workd!"');
document.write( s, '<br />' );  // Hello,World!を表示

ちなみにevalで呼び出せる変数の値は、グローバル変数(何処の関数のスコープにも属していない変数)で無ければならないのを知っておくべきである。

ここまでを知っていると、eval関数はまた新たな使い道を考えることが出来る。 外部から取り出したテキストを評価して、データとして取り出す手法である。

var s = '{ "住所":"東京都", "年齢":28, "性別":"男" }';  // 仮に外部から取り出したとしたデータ
var o = eval('('+s+')');  // データを評価してJavaScriptデータに変換
document.write( o['年齢'] );

Webページ等で、外部と通信しながら、その結果を動的反映していくAjaxという手法では、この手法を使って主にデータの取り出しを行っている。 この様に、JavaScriptのデータ形式を文字列化して、データのフォーマットして使われ出している。 この形式をJSON(JavaScript Object Notation)と言う。

実際には、コントロールされていない外部から文字列を受け取る場合には正しいJSONオブジェクトではなく評価に失敗することが多いため。 エラーチェックのためにtry～catch文で囲うのが一般的である

var o;
try{
  o=eval('('+s+')');
} catch(e){
  // エラー処理
}

近年の流れとして、一部のJavascript使用環境では、このJSON形式のデータを設定ファイルの保存形式等として使う流れも存在している。 その際の拡張子としては、.txtや.js等も使われたが、ゆっくりと.jsonを出来るだけ使うのが主流になりつつある。

これらの処理に、共有しているのはeval関数というのはJavaScriptでの入力結果を何の疑問も持たず処理するため、強力ではあるが非常に危険でもあることである。

そのため、eval関数を実行する際には不正なコードを実行してしまわないように、その実行前にコードをチェックする必要がある。

[編集] 数値処理関数

[編集] parseInt(string , radix)

与えられた文字列を、先頭から解釈して整数に変換する。第2引数では、何進法とみなして変換を行うのかを指定する。 規格上、第2引数は必要なもののはずだが、どの実装でも省略した場合10進法とみなして自動で変換を行っている。

document.write( parseInt('10') );       // 10を表示
document.write( parseInt('10', 8 ) );   // 8進法として解釈、8を表示
document.write( parseInt('0x10') );     // 0xで始まる場合は16進数として、解釈。16を返す

[編集] parseFloat(string)

与えられた文字列を、JavaScriptのNumber型のオブジェクトに変換する。

document.write( parseFloat('10') );     // 10が表示
document.write( parseFloat('10.00') );  // 10が表示
document.write( parseFloat('0x10') );   // 16進数としては評価されない。最初の数字の「0」まで表示
document.write( parseFloat('10e+4') );  // 1000が表示される
document.write( parseFloat('10E-3') );  // 0.01が表示される

[編集] isNaN(number)

引数の値がNaN(Not-a-Number)であればtrueを、それ以外はfalseを返す。

document.write( isNaN(NaN) );	// trueが表示
document.write( isNaN(Math.sqrt(-1)) );	// trueが表示
document.write( isNaN(Math.sqrt( Infinity/Infinity )) );  // trueが表示

[編集] isFinite(number)

引数の値が±∞のいずれかであればfalseを、そうでない場合はtrueを返す。 これは、通常の判別とtrueとfalseの結果が逆であるのに注意をする。

document.write( isFinite(Infinity) );	// falseが表示
document.write( isFinite(100) );	// trueが表示

[編集] URLエンコード関連関数

例えば次の様なリンクが存在したとしよう

http://ja.wikipedia.org/wiki/ネットスケープコミュニケーションズ

このリンクは日本語文字列を含んでいるため、実際にはURLとして利用できない。 そのため、これを英語と記号のASCII文字列の範囲の文字列で一度変換を行う必要がある。 これがURLエンコードと呼ばれる技術である。 (ただしこれは古い話で、現在はURLとして必要な文字列は多言語に対応している)

どの文字コードを基準とのするかは、実装によるがJavaScriptは文字列がUTF8と考えて処理を行う。

実際にURLエンコードを行う関数にはencodeURIとencodeURIComponentの2つがあるが、これらは微妙に実装が違う。 実際に先ほどのURLをそれぞれの関数で変換してみる。

document.write( 'http://ja.wikipedia.org/wiki/ネットスケープコミュニケーションズ' );
document.write( encodeURI('http://ja.wikipedia.org/wiki/ネットスケープコミュニケーションズ') );
document.write( encodeURIComponent('http://ja.wikipedia.org/wiki/ネットスケープコミュニケーションズ') );

実行結果は次の様に表示された。

http://ja.wikipedia.org/wiki/ネットスケープコミュニケーションズ
http://ja.wikipedia.org/wiki/%E3%83%8D%E3%83%83%E3%83%88%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%BA
http%3A%2F%2Fja.wikipedia.org%2Fwiki%2F%E3%83%8D%E3%83%83%E3%83%88%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%BA

日本語文字列以外にも、スラッシュ(/)等の一部の文字がencodeURIComponentでは変換されているのが分かる。 これらの変換の結果は次の様な法則が共通している。

  • 文字の中でも[0-9][a-z][A-Z]の文字列は変換されない
  • 日本語等の非ASCII文字列は基本的に変換される

なので、その外の記号文字列は変換結果の違うものなのでこれらを比較する。

無変換  ! " # $  % & ' ( ) * + , - . /  :  ; < = >  ? @ [ \ ] ^ _ ` { ｜ } ~
encodeURI  !  %22 # $  %25 & ' ( ) * + , - . /  :  ;  %3C =  %3E  ? @  %5B  %5C  %5D  %5E _  %60  %7B  %7C  %7D ~
encodeURIComponent  !  %22  %23  %24  %25  %26 ' ( ) *  %2B  %2C - .  %2F  %3A  %3B  %3C  %3D  %3E  %3F  %40  %5B  %5C  %5D  %5E _  %60  %7B  %7C  %7D ~

少し図が見づらいかもしれないが、結果は一定の傾向があり、 encodeURIでは変換をされない文字は"#","/","&",":",";"等、URLで使用したり、CGIでパラメータを指定するときに特別な意味があるものである。

なので、これらの使い分けは次の様に分けるのが一つの基準となる。

  • URLを変換するときはencodeURI
  • データをcookieや外部のテキストとして出力するとき、CGIで入力された文字の安全な変換等はencodeURIComponent

このように変換した文字は、encodeURI、encodeURIComponentに対応するdecodeURI、decodeURIComponentという関数で元の文字列に戻すことができる。

[編集] encodeURI(uri)

URL(URI)として有効な範囲で、文字列をURLエンコードする。

// 変換して「JavaScript%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA」
encodeURI('JavaScript標準ライブラリ');

[編集] encodeURIComponent(uriComponent)

文字列をURLエンコードする。

// 変換して「JavaScript%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA」
encodeURIComponent('JavaScript標準ライブラリ');

[編集] decodeURI(encodedURI)

encodeURIで行った変換を元に戻す。

// 「JavaScript標準ライブラリ」に戻す
encodeURI('JavaScript%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA');

[編集] decodeURIComponent(encodedURIComponent)

encodeURIComponentで行った変換を元に戻す

// 「JavaScript標準ライブラリ」に戻す
encodeURI('JavaScript%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA');
"http://ja.wikibooks.org/wiki/JavaScript_%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA_Global" より作成
ヘルプ