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

「文字列 で記載された 関数 を 実行 する」方法は eval を使いますが、 ここではその逆「関数 を 文字列化 する 方法」を記載します。

関数の文字列化

サンプルコード（関数 → 文字列）

var actFunc, strFunc;

// 関数の実態
actFunc = function (a, b) {
    return a * b;
}; 

// 関数の文字列化
strFunc = '' + actFunc;

// 試しに表示してみる...
window.alert(strFunc);

単純に文字列と関数を合成すると、関数は文字列に変換されます。 JavaScript だからこそできてしまう方法です。 IE10 と Chrome30 で、簡単な関数しか テスト していませんがとりあえずは使えそうです。

利用時の注意点

参考までに、DOM 要素 に追加して表示する場合の サンプルコード を以下に載せます。 DOM 要素 に追加して表示する場合、不要な処理が走ること（XSS）がないように注意します。 具体的には createTextNode を利用して完全な文字列として扱うようにします。 .innerHTML を使って表示すると危険なので、避けるようにします。

◎ サンプルコード（文字列化した関数の表示）

var targetElement, textElement;

// 表示したい要素を取得
targetElement = document.getElementById('target');

// 必ず TextNode として生成
textElement = document.createTextNode('' + actFunc);

// 表示したい要素へ TextNode を追加
target.appendChild(textElement);

念のため .innerHTML を使うと危険であることを示す サンプルコード を以下に載せます。

× サンプルコード（文字列化した関数の危険な表示）

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 の フォロー」 お願いします！！

• Facebook ページ
• twitter