如何在 JavaScript 中從字串建立函數？-js教程-PHP中文網

如何在 JavaScript 中從字串建立函數？

王林

發布： 2023-08-28 12:49:10

轉載

1321 人瀏覽過

如何在 JavaScript 中从字符串创建函数？

當您需要在運行時動態生成函數或您有一個包含您希望執行的函數程式碼的字串時，在 JavaScript 中從字串建立函數會很有幫助。

從字串建構函數的能力是 JavaScript 的有用功能，它允許在運行時動態建立函數。 eval() 函數和 new Function() 函數 Object() [本機程式碼] 是執行此操作的兩種最受歡迎的方法，儘管兩者都存在重大安全缺陷。

Function.prototype.constructor 是更安全的選擇，儘管它不太為人所知。在選擇從字串建立函數的 JavaScript 方法之前，考慮風險和用例至關重要。

方法 1：使用 eval() 函數

JavaScript eval() 方法是從字串建立函數最簡單的方法之一。這個強大的 eval() 函數可以運行以字串形式提供給它的任何 JavaScript 程式碼。

範例

<html>
<body>
   <p id="result"></p>
   <script>
      let functionString = "function add(a, b) { return a + b; }";
      let add = eval("(" + functionString + ")");
      document.getElementById("result").innerHTML = "Sum of 1 and 2: " + add(1, 2);
   </script>
</body>
</html>

登入後複製

在這裡我們可以看到，我們有一個函數，它接受兩個參數並傳回它們的和。現在，這個函數包含在一個字串中。 eval() 函數接收此字串作為參數，並在返回函數之前對其進行評估。然後將傳回的函數指派給名為 add 的變量，該變數可以像任何其他函數一樣使用。

但是，它運行提供給它的任何 JavaScript 程式碼，因此在生產程式碼中使用它可能存在風險，因為可能會導致安全缺陷。

方法 2：使用 new Function() 建構子

在 JavaScript 中從字串建立函數的另一種方法是使用 Function() 建構子。 Function() 建構子從包含函數程式碼的字串建立一個新的函數物件。以下是如何使用 Function() 建構子從字串建立函數的範例 -

範例

<html>
<body>
   <p id="print"></p>
   <script>
      let functionString = "function add(a, b) { return a + b; }";
      let functionBody = functionString.substring(
         functionString.indexOf("{") + 1,
         functionString.lastIndexOf("}")
      );
      let add = new Function("a", "b", functionBody);
      document.getElementById("print").innerHTML = "Sum of 1 and 2: " + add(1, 2);
   </script>
</body>
</html>

登入後複製

在此範例中，我們將包含函數程式碼的字串傳遞給 Function() 建構函數，該建構函數從該字串建立一個新的函數物件。然後，我們將傳回的函數指派給變數 add，該變數可以像任何其他函數一樣使用。

由於它只能建立函數，因此它的風險比 eval() 小，但仍具有類似的風險

方法 3：使用 Function.prototype.constructor

這會產生一個函數，除了作為字串傳遞的函數體之外，無法執行任何其他程式碼。但是，它的使用不太廣泛，並且不像其他兩種方法那樣受到舊版瀏覽器的支援。

範例

<html>
<body>
   <p id="result"></p>
   <script>
      let add = Function.prototype.constructor('a', 'b', 'return a+b')(1, 2);
      document.getElementById("result").innerHTML = "Sum: " + add;
   </script>
</body>
</html>

登入後複製

在這個例子中，函數參數和函數體被提供給建構子。我們使用 Function.prototype.constructor 建立一個具有給定參數和給定函數體的新函數，然後透過使用給定參數呼叫函數來立即呼叫該函數

請記住，您從字串建構的函數將有權存取全域範圍，並且不會包含在您建立它的程式碼範圍內。

要記住的另一件重要事情是，從字串建立函數可能會減慢應用程式的速度，特別是在函數體很長的情況下。

此外，如果函數很複雜，從字串建立函數會使理解和偵錯程式碼變得更加困難。

由於安全性問題，一般不建議在生產程式碼中使用 eval() 和 new Function() 方法。相反，您應該考慮其他選項，例如預先編譯函數或使用 Babel 等 JavaScript 預處理器將程式碼轉換為等效的、更安全的版本。

以上是如何在 JavaScript 中從字串建立函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！