JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

文字列をJavaScriptの関数呼び出しに変換する方法

JavaScriptでは、文字列として保持されている関数名を使って、実際に関数を呼び出すことができます。最もシンプルで安全な方法は、グローバルオブジェクトである window のブラケット記法（角括弧記法）を利用するアプローチです。

文字列から関数を呼び出す基本の方法

JavaScriptでは、グローバルスコープで宣言された関数は window オブジェクトのプロパティとして登録されます。そのため、window["関数名"] の形式で、文字列から直接関数にアクセスして実行できます。

サンプルコード

以下のコードを実行すると、文字列で指定した関数名を使って関数が呼び出されます。

<html>
   <body>
      <script>
         // 関数を定義
         function myFunction(argument) {
            alert('My function ' + argument);
         }

         // 呼び出したい関数名を文字列で指定
         var functionName = 'myFunction';

         // windowオブジェクト経由で関数を呼び出す
         window[functionName]('is working.');
      </script>
   </body>
</html>

実行結果

このコードを実行すると、アラートで「My function is working.」と表示されます。文字列 'myFunction' が window[functionName] によって実際の関数に変換され、引数付きで呼び出されているのがわかります。

注意点

eval() を使えば文字列をそのままJavaScriptコードとして実行することもできますが、任意のコードが実行される危険性があるため、セキュリティ上の理由から避けるべきとされています。文字列から関数を呼び出したい場合は、上記のように window[関数名] の形式を使うのが安全で推奨される方法です。

また、ESモジュールや strict モードでは関数が必ずしも window オブジェクトに登録されない場合があります。そのような環境では、関数をオブジェクトにまとめて管理する方法も有効です。

const functions = {
   myFunction: function(argument) {
      console.log('My function ' + argument);
   }
};

const functionName = 'myFunction';
functions[functionName]('is working.'); // My function is working.
  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ