我們給定了一個字符串,需要將其轉換為 JavaScript 中的函數。有時,我們得到字符串形式的數學或函數表達式,執行該表達式需要將字符串轉換為函數表達式。在本教程中,我們將學習將給定字符串轉換為函數或數學表達式的不同方法。
使用 eval() 方法
eval() 方法將表達式作為參數并對表達式求值。例如,如果我們將“2 + 2”字符串作為 eval() 方法的參數傳遞,則在計算數學表達式 2+2 時,它會返回 4。
它還像數學表達式一樣計算函數表達式。
語法
用戶可以按照下面的語法使用 eval() 方法將字符串轉換為 JavaScript 中的函數。
eval("var func = () => { output.innerHTML = 'Hello Users!'; }";); func();
登錄后復制
在上面的語法中,我們將函數字符串作為 eval() 方法的參數傳遞。
示例 1
在下面的示例中,我們創建了包含函數表達式的字符串。函數表達式在網頁上打印消息。
之后,我們將字符串作為 eval() 方法的參數傳遞,然后我們就像調用普通函數一樣執行了 func() 函數。
func() 函數提供與普通函數相同的輸出。
<html> <body> <h2>Using the <i> eval() </i> method to convert a string into the function expression in JavaScript. </h2> <div id = "output"> </div> </body> <script> let output = document.getElementById('output'); let funcStr = "var func = () => { output.innerHTML = 'Hello Users!';}"; eval(funcStr); func(); </script> </html>
登錄后復制
示例 2
在下面的例子中,我們創建了對象,對象的 getHeight 屬性包含字符串格式的函數
我們使用 eval() 方法來計算 getHeight 屬性的字符串值,并將函數字符串轉換為表達式后再次將其存儲在 getHeight 屬性中。
之后,我們執行了 getHeight() 函數,該函數返回我們存儲在 height 變量中的高度。
<html> <body> <h2>Using the <i> eval() </i> method to convert a string into the function expression in JavaScript. </h2> <div id = "output"> </div> </body> <script> let output = document.getElementById('output'); let object = { name: "Shubham", "getHeight": "function func() { return '6 Feet';}", age: 22, } object.getHeight = eval("(" + object.getHeight + ")"); let height = object.getHeight(); output.innerHTML += "The height is " + height + "<br/>"; </script> </html>
登錄后復制
使用函數構造函數
Function() 構造函數允許我們從字符串創建一個函數。 Function() 構造函數可以帶 N 個參數。 Function constructor()的前N-1個參數作為要創建的函數的參數,第N個參數為函數表達式
語法
用戶可以按照以下語法使用 Function() 構造函數從字符串創建函數。
let func = new Function(expression);
登錄后復制
在上述語法中,func 是使用 Function() 構造函數創建的。表達式是包含函數表達式的字符串。
示例 3
在下面的示例中,我們創建了表達式字符串。我們還在表達式字符串中使用 eval() 方法評估數學表達式。
之后,我們像普通函數一樣調用 func() 函數,用戶可以觀察輸出
<html> <body> <h2>Using the <i> Function() </i> constructor to convert a string into the function expression in JavaScript. </h2> <div id = "output"> </div> </body> <script> let output = document.getElementById('output'); let expression = "output.innerHTML += 'The value of 10 + 10 is ' + eval(10 + 10);"; let func = new Function(expression); func(); </script> </html>
登錄后復制
示例 4
在下面的示例中,我們已將多個參數傳遞給 Function() 構造函數。前三個參數用作作為第四個參數傳遞的函數表達式的參數。
我們打印函數表達式中的參數值。在輸出中,用戶可以看到它打印了參數的默認值,因為我們在調用 concatString() 函數時沒有傳遞任何參數。
<html> <body> <h2>Using the <i> Function() </i> constructor to convert a string into the function expression in JavaScript. </h2> <div id = "output"> </div> </body> <script> let output = document.getElementById('output'); let expression = "output.innerHTML += 'The value of param1 + param2 + param3 is ' + param1 + param2 + param3;"; let concatString = new Function("param1 = 'Welcome '", "param2 = 'To the '", "param3 = ' TutorialsPoint!'", expression); concatString(); </script> </html>
登錄后復制
在本教程中,我們學習了使用兩種不同的方法將字符串轉換為函數表達式。在第一種方法中,我們使用了 eval() 方法,我們可以使用它來計算 JavaScript 中的任何表達式。
在第二種方法中,我們使用了 Function 構造函數,它將函數參數和函數表達式作為參數來創建一個新函數。
以上就是如何在 JavaScript 中將字符串轉換為函數?的詳細內容,更多請關注www.92cms.cn其它相關文章!