search

Home >Web Front-end >JS Tutorial >How to convert string to function in JavaScript?

How to convert string to function in JavaScript?

WBOY
WBOYforward
2023-09-11 11:01:111847browse

如何在 JavaScript 中将字符串转换为函数？

We are given a string and need to convert it into a function in JavaScript. Sometimes we get a mathematical or functional expression in the form of a string, and executing the expression requires converting the string into a function expression. In this tutorial, we will learn different ways to convert a given string into a function or mathematical expression.

Use eval() method

The eval() method takes an expression as a parameter and evaluates the expression. For example, if we pass the string "2 2" as an argument to the eval() method, when the mathematical expression 2 2 is evaluated, it will return 4.

It also evaluates function expressions like mathematical expressions.

grammar

Users can use the eval() method according to the following syntax to convert a string into a function in JavaScript. 

eval("var func = () => { output.innerHTML = 'Hello Users!'; }";);
func();

In the above syntax, we pass the function string as a parameter of the eval() method.

Example 1

In the following example, we create a string containing a function expression. Function expression prints a message on the web page.

After that, we pass the string as a parameter of the eval() method, and then we execute the func() function just like calling a normal function.

func() function provides the same output as a normal function. 

<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>

Example 2

In the following example, we create an object whose getHeight property contains a function in string format

We use the eval() method to calculate the string value of the getHeight property and convert the function string into an expression before storing it in the getHeight property again.

After that, we execute the getHeight() function, which returns the height we stored in the height variable. 

<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>

Use function constructor

Function() constructor allows us to create a function from a string. The Function() constructor can take N parameters. The first N-1 parameters of Function constructor() are used as parameters of the function to be created, and the Nth parameter is the function expression

grammar

Users can create functions from strings using the Function() constructor following the following syntax. 

let func = new Function(expression);

In the above syntax, func is created using the Function() constructor. expression is a string containing a function expression.

Example 3

In the example below, we create an expression string. We also use the eval() method in the expression string to evaluate the mathematical expression.

After that, we call the func() function like a normal function, and the user can observe the output

<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>

Example 4

In the example below, we have passed multiple parameters to the Function() constructor. The first three parameters are used as parameters for the function expression passed as the fourth parameter.

We print the parameter values ​​in the function expression. In the output, the user can see that it prints the default values ​​of the parameters because we did not pass any parameters while calling the concatString() function. 

<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>

In this tutorial, we learned about using two different methods to convert a string into a function expression. In the first method, we used the eval() method, which we can use to evaluate any expression in JavaScript.

In the second method, we use the Function constructor, which takes function parameters and function expressions as parameters to create a new function.

The above is the detailed content of How to convert string to function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript 构造函数 字符串 function 对象 constructor
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：FabricJS - How to center Line object horizontally on canvas?Next article：FabricJS - How to center Line object horizontally on canvas?

Related articles

See more