将变量作为参数传递给另一个函数后，能否以字符串形式访问变量的名称？

Question

Perhaps a slightly dim question but I'm trying to design something where I'm using javascript / jquery to change the layout of a website and I'd like to see the values of both a variable name and it's current value in another div.

I was just doing $test.append('example string' + exampleVar) a lot so I thought I would make a function called test().

So far I have:

function test (test) {
    $test = $('.test');
    $test.append(test+"<br>");
}

and then would pass it a variable name as an argument but I can't find any way of making it display the name as a string. I know about making it as an object to access the key and value but that doesn't really seem to work here?

Answer 1

Bit of a long-winded way to do it, but here's an example using an object:

function tester(options) {
  var keys = Object.keys(options);
  console.log(keys[0] + ': ' + options[keys[0]]); // test: My value
}

tester({ test: 'My value' });

DEMO

Answer 2

In a function you will be using a parameter. So in that case the "variable name" will always be the name of the parameter. In this case getting the string value will always be test. I would assume this is not what you want. You were correct that the best way to do this is to use an object and iterate over the key, values. You would do this like:

var test = {
    "test" : "value"
};
function test (test) {
    var k, $test = $('.test');
    for(k in test){
        $test.append(k + "<br>");
    }
}

Also, I do not think there is a way to get the variable string name. So the above would be the way to get the name of a variable.

Answer 3

You could use a feature of javascript where obj["prop"] is the same as obj.prop

So instead of passing the variable as a variable and hoping to get its name, you use the name as a string to get the variable's value.

If you aren't using namespaces/variables and want to a global/root variable, pass window, eg:

function test(obj, val) {
    console.log(val + ": " + obj[val]);
}

var val1 = 1;
var val2 = 2;

test(window, "val1");
test(window, "val2");

(obviously you don't get the name of 'obj' - but maybe it's a start)

if you only have root/global variables (as in the example provided in the question) then you could remove obj:

function test(val) {
    console.log(val + ": " + window[val]);
}

var val1 = 1;
var val2 = 2;

test("val1");
test("val2");

Answer 4

It seems what you want to do something like this:

var argumentName = /([^\s,]+)/g;
// fu is a function
// fu.toString look like: function myFunction (param[, param]*)  { code }
function getParamNames(fu) {
    var f = fu.toString();
    return f.slice(f.indexOf('(')+1,f.indexOf(')')).match(argumentName);
}

Then you might want to create an helper which will take every functions:

// I choosed the console as an output, but you can set anything
function displayParameters(fu) {
    var _params = getParamNames(fu);
    if(_params!==null) {
        for(var i=0;i<_params.length; i++) {
            console.log(_params[i]);
        }
    } else { console.log('no parameters'); }
}

And, you will need to call: displayParameters(test);