Hay dos métodos para llamar a una función desde una string almacenada en una variable. El primero es usando el método de objeto de ventana y el segundo es usando el método eval(). El método eval() es más antiguo y está en desuso.
Método 1: usar el objeto de ventana: el objeto de ventana en HTML 5 hace referencia a la ventana actual y todos los elementos que contiene. Por lo tanto, podemos usarlo para ejecutar una función en una string junto con los parámetros de la función.
Sintaxis:
window[functionName](parameters)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to call function from string stored
in a variable using JavaScript
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to call function from string stored
in a variable using JavaScript
</b>
<p>
Click on the button to call the
function in the string
</p>
<p class="example">
GeeksforGeeks is a computer
science portal.
</p>
<button onclick="evaluateFunction()">
Click here
</button>
<script type="text/javascript">
function changeColor(color) {
document.querySelector('.example').style
= `color: ${color}`;
}
function evaluateFunction() {
stringFunction = "changeColor";
param = 'green';
window[stringFunction](param);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Usar el método eval(): El otro método que se puede usar es el método eval(). La string que se puede pasar a la función puede incluir una expresión, declaración o secuencia de declaraciones de JavaScript. También puede tener variables y propiedades de objetos existentes. El único problema con este método es que se considera inseguro y es posible que los navegadores más nuevos no lo admitan.
Sintaxis:
eval(stringFunction)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to call function from string stored
in a variable using JavaScript
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to call function from string stored
in a variable using JavaScript
</b>
<p>
Click on the button to call the
function in the string
</p>
<p class="example">
GeeksforGeeks is a computer
science portal.
</p>
<button onclick="evaluateFunction()">
Click here
</button>
<script type="text/javascript">
function changeColor(color) {
document.querySelector('.example').style
= `color: ${color}`;
}
function evaluateFunction() {
stringFunction = "changeColor('green')";
eval(stringFunction);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA