JavaScript で 関数 を 文字列化 する方法

0 件のコメント

「文字列 で記載された 関数 を 実行 する」方法は 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 の フォロー」 お願いします!!