web-dev-qa-db-fra.com

"Variable" variables en Javascript?

Je sais qu'il est possible dans PHP d'avoir des variables "variables". Par exemple

$x = "variable";
$$x = "hello, world!";
echo $variable; // displays "hello, world!"

Est-il possible de faire référence à une variable par son nom comme une chaîne en javascript? Comment cela serait-il fait?

javascriptvariablesvariable-variables
91
ShoeLace1291

Il n'y a pas de solution unique pour cela (enfin, il y a eval, mais ne considérons pas cela sérieusement). Il est possible d'accéder aux variables globales de some de manière dynamique via window, mais cela ne fonctionne pas pour les variables locales à une fonction. Les variables globales qui do not deviennent une propriété de window sont des variables définies avec let et const et classes.

Il y a presque toujours une meilleure solution que d'utiliser des variables variables! Au lieu de cela, vous devriez regarder structures de données et choisir la bonne pour votre problème.

Si vous avez un ensemble fixe de noms, tels que

// BAD
var foo = 42;
var bar = 21;

var key = 'foo';
console.log(eval(key));

stockez ces noms/valeurs en tant que propriétés d'un objet et utilisez notation entre crochets pour les rechercher dynamiquement:

// GOOD
var obj = {
  foo: 42,
  bar: 21,
};

var key = 'foo';
console.log(obj[key]);

Dans ES2015 + , il est encore plus facile de le faire pour les variables existantes à l'aide de notation de propriété concise:

// GOOD
var foo = 42;
var bar = 21;
var obj = {foo, bar};

var key = 'foo';
console.log(obj[key]);

Si vous avez "consécutivement" des variables numérotées, telles que

// BAD
var foo1 = 'foo';
var foo2 = 'bar';
var foo3 = 'baz';

var index = 1;
console.log(eval('foo' + index));

alors vous devriez plutôt utiliser un tableau et simplement utiliser l'index pour accéder à la valeur correspondante:

// GOOD
var foos = ['foo', 'bar', 'baz'];
var index = 1;
console.log(foos[index - 1]);
124
Felix Kling

Si vous êtes désespéré, faites-le soit en utilisant eval ():

var data = "testVariable";
eval("var temp_" + data + "=123;");
alert(temp_testVariable);

Ou en utilisant l'objet window:

var data = "testVariable";
window["temp_" + data] = 123;
alert(window["temp_" + data]);

http://www.hiteshagrawal.com/javascript/dynamic-variables-in-javascript

42
Masterbuddha

Pour référencer une variable en javascript avec seulement une chaîne, vous pouvez utiliser

window['your_variable_name']

Vous pouvez également définir et référencer des variables, ainsi que des objets dans des variables.

3
Awesomeness01
var vars = {};
var var_name = "str";
vars[var_name] = "working";
console.log(vars["str"]);
2
lkdhruw

Contrairement à PHP, JavaScript n'offre pas d'accès au tableau globals (qui contient des références à tous les noms de variables déclarés à ce jour). En tant que tel, JavaScript n'offre pas de support natif pour les variables variables. Vous pouvez toutefois émuler cette fonctionnalité tant que vous définissez toutes vos variables dans le cadre d'un tableau ou d'un objet. Cela créera à son tour un tableau Gloabls pour vous. Par exemple, au lieu de déclarer la variable hello dans la portée globale, procédez comme suit:

var hello = 'hello world';

encapsulons-le dans un objet. Nous appellerons cet objet vv (variables variables):

var vv = {
    'hello': 'hello world',
    //Other variable variables come here.
},
referToHello = 'hello';

Maintenant, nous pouvons faire référence à la variable par son index, et comme les index de tableau peuvent être fournis en utilisant une variable, nous utilisons de fait une variable:

console.log(vv[referToHello]); //Output: hello world

La réponse à votre question

Appliquons ceci au code que vous avez fourni dans la question initiale:

    var vv = {
        'x': 'variable',
        'variable': 'hello world!'
    };
    console.log(vv[vv['x']]); //Displays "hello, world!"

n usage pratique

Bien que le code précédent puisse paraître ridiculement lourd et peu pratique, il existe des utilisations pratiques pour les variables variables en JavaScript utilisant ce type d’encapsulation. Dans l'exemple ci-dessous, nous utilisons le même concept pour obtenir l'ID d'un nombre indéfini d'éléments HTML.

var elementIds = [],
        elements = ['message','fillOrStroke','sizePicker','colorPicker']; //The items in this array could be defined automatically via an input, database query, event, etc.
        elements.forEach( (element) => {
            elementIds[element] = document.getElementById(element);
        });

Cet exemple déclare des variables variables (clés dans elementIds) en fonction de l'ID de chaque élément et affectera le nœud de cet élément à la valeur de chaque variable. Et étant donné que l’utilisation de variables globales en JavaScript est généralement déconseillée, attribuer à vos variables une étendue unique (dans ce cas, les déclarer à l’intérieur du tableau elementIds) est non seulement ordonné, mais également plus responsable.

2
Nadav

Bien sûr que vous pouvez, mais ne le faites pas. Les variables doivent être globales.

var killingFunction = 'alert'
var killMeNow = 'please'
var please = 'You have been killed!'
this[killingFunction](this[killMeNow])
1
Konrad Borowski

Vous pouvez utiliser la fonction JavaScript eval(str) .

Cette fonction convertit la chaîne fournie en code JS, puis l'exécute.

Par exemple:

eval("console.log('hello world')"); // Logs hello world

Donc, pour l'utiliser comme variable variable, vous pouvez faire ce qui suit:

var a = "hello";
var hello = "world";
console.log(a + " " + eval(a)); // Logs hello world

Cela produira exactement le même résultat que:

console.log(a + " " + hello); // Logs hello world

(Exemple tiré de le PHP manuel sur les variables variables .)

1
Abraham Murciano Benzadon