「文字列 で記載された 関数 を 実行 する」方法は eval
を使いますが、
ここではその逆「関数 を 文字列化 する 方法」を記載します。
関数の文字列化
サンプルコード(関数 → 文字列)
1 2 3 4 5 6 7 8 9 10 11 12 | var actFunc, strFunc; // 関数の実態 actFunc = function (a, b) { return a * b; }; // 関数の文字列化 strFunc = '' + actFunc; // 試しに表示してみる... window.alert(strFunc); |
単純に文字列と関数を合成すると、関数は文字列に変換されます。 JavaScript だからこそできてしまう方法です。 IE10 と Chrome30 で、簡単な関数しか テスト していませんがとりあえずは使えそうです。
利用時の注意点
参考までに、DOM 要素 に追加して表示する場合の サンプルコード を以下に載せます。
DOM 要素 に追加して表示する場合、不要な処理が走ること(XSS)がないように注意します。
具体的には createTextNode
を利用して完全な文字列として扱うようにします。
.innerHTML
を使って表示すると危険なので、避けるようにします。
◎ サンプルコード(文字列化した関数の表示)
1 2 3 4 5 6 7 8 9 10 | var targetElement, textElement; // 表示したい要素を取得 targetElement = document.getElementById( 'target' ); // 必ず TextNode として生成 textElement = document.createTextNode( '' + actFunc); // 表示したい要素へ TextNode を追加 target.appendChild(textElement); |
念のため .innerHTML
を使うと危険であることを示す サンプルコード を以下に載せます。
× サンプルコード(文字列化した関数の危険な表示)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var actFunc, strFunc; // 関数の実態 actFunc = function (a, b) { // ↓以下のコメントアウトされたコードが実行される // <script type="text/javascript">window.alert('hoge');</script> return a * b; }; // 関数の文字列化 strFunc = '' + actFunc; // 表示 document.getElementById( 'target' ).innerHTML = strFunc; |
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!