Maison >interface Web >js tutoriel >Comment convertir une chaîne en fonction en JavaScript ?

Comment convertir une chaîne en fonction en JavaScript ?

WBOYavant: 2023-09-11 11:01:111809parcourir

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

Nous recevons une chaîne et devons la convertir en fonction en JavaScript. Parfois, nous obtenons une expression mathématique ou fonctionnelle sous la forme d'une chaîne, et l'exécution de l'expression nécessite de convertir la chaîne en une expression fonctionnelle. Dans ce didacticiel, nous apprendrons différentes manières de convertir une chaîne donnée en fonction ou en expression mathématique.

Utilisez la méthode eval()

La méthode

eval() prend une expression comme paramètre et évalue l'expression. Par exemple, si nous passons la chaîne "2 + 2" comme argument à la méthode eval(), elle renverra 4 lorsque l'expression mathématique 2+2 sera évaluée.

Il évalue également les expressions de fonction comme les expressions mathématiques.

Grammaire

Les utilisateurs peuvent utiliser la méthode eval() selon la syntaxe ci-dessous pour convertir une chaîne en fonction en JavaScript.

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

Dans la syntaxe ci-dessus, nous passons la chaîne de fonction en paramètre de la méthode eval().

Exemple 1

Dans l'exemple ci-dessous, nous avons créé une chaîne contenant une expression de fonction. L'expression de fonction imprime un message sur la page Web.

Après cela, nous avons passé la chaîne en tant que paramètre à la méthode eval(), puis nous avons exécuté la fonction func() comme si nous appelions une fonction normale.

La fonction

func() fournit le même résultat qu'une fonction normale.

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

Exemple 2

Dans l'exemple ci-dessous, nous créons un objet dont la propriété getHeight contient une fonction au format chaîne

Nous utilisons la méthode eval() pour calculer la valeur de chaîne de la propriété getHeight et convertir la chaîne de fonction en expression avant de la stocker à nouveau dans la propriété getHeight.

Après cela, nous exécutons la fonction getHeight(), qui renvoie la hauteur que nous avons stockée dans la variable 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>

Utiliser le constructeur de fonctions

Le constructeur Function() nous permet de créer une fonction à partir d'une chaîne. Le constructeur Function() peut prendre N paramètres. Les N-1 premiers paramètres de Function constructor() sont utilisés comme paramètres de la fonction à créer, et le Nième paramètre est l'expression de la fonction

Grammaire

Les utilisateurs peuvent créer des fonctions à partir de chaînes à l'aide du constructeur Function() en suivant la syntaxe suivante.

let func = new Function(expression);

Dans la syntaxe ci-dessus, func est créé à l'aide du constructeur Function(). expression est une chaîne contenant une expression de fonction.

Exemple 3

Dans l'exemple ci-dessous, nous créons une chaîne d'expression. Nous utilisons également la méthode eval() dans la chaîne d'expression pour évaluer l'expression mathématique.

Après cela, nous appelons la fonction func() comme une fonction normale et l'utilisateur peut observer le résultat

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

Exemple 4

Dans l'exemple ci-dessous, nous avons passé plusieurs paramètres au constructeur Function(). Les trois premiers paramètres sont utilisés comme paramètres pour l'expression de fonction passée comme quatrième paramètre.

Nous imprimons les valeurs des paramètres dans l'expression de la fonction. Dans la sortie, l'utilisateur peut voir qu'il imprime les valeurs par défaut des paramètres car nous n'avons transmis aucun paramètre lors de l'appel de la fonction 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>

Dans ce tutoriel, nous avons appris à convertir une chaîne en expression de fonction en utilisant deux méthodes différentes. Dans la première méthode, nous avons utilisé la méthode eval(), que nous pouvons utiliser pour évaluer n'importe quelle expression en JavaScript.

Dans la deuxième méthode, nous avons utilisé le constructeur Function qui prend les paramètres de fonction et l'expression de fonction comme paramètres pour créer une nouvelle fonction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript 构造函数字符串 function 对象 constructor

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：FabricJS - Comment centrer un objet Line horizontalement sur le canevas ?Article suivant：FabricJS - Comment centrer un objet Line horizontalement sur le canevas ?

Articles Liés

Voir plus