为什么我不能将变量名称作为字符串？我想创建自己的'console.log'函数

Question

我是一个初学者,我经常需要查看变量的值,以确保我为jQuery选择正确的方法/属性/选择器,或者只是为了查看值是什么或一般调试.所以我通常做的是

console.log("phone_number: " + phone_number);

我想创建自己的'console.log'函数,我只需将变量(或许多变量)作为参数,并巧妙地打印出结果.

mylog(phone_number, name, address);

将输出到控制台:

phone_number: 911
name: stanek
address: undefined

第一种方式输入并不是一件大事,但我觉得必须有一个更好的方法来做这件事......我想节省时间.

以前相关问题的答案通常包括诸如"你已经知道名字"或"你有什么理由这样"的评论.我觉得这个场景显示了对此请求的特定需求.

我有一种感觉,这不是内置于Javascript中,或者它本来是在某个地方的答案.

我的好奇心问题是:为什么这不是Javascript的功能？

我确定的问题:我可以将此功能添加到Javascript中吗？我愿意花费无数个小时来节省20秒.

Answer 1

如果不对源代码进行额外处理,则无法执行此操作.在运行时,函数传递一个值,它无法知道值的来源.

您可以让它接受一个对象,然后可以调用它:

mylog({phone_number, name, address});

这使用ES2015中引入的短对象表示法,相当于

mylog({phone_number: phone_number, name: name, address: address});

(简短表示法在旧版浏览器中不起作用)

这使您可以访问变量的值和名称(作为对象属性).

我可以将此功能添加到Javascript中吗？

除非你想编写自己的JavaScript引擎,否则没有.

但是,您可以使用诸如Babel之类的源代码转换器来检测代码,然后再执行它.以下是Babel插件的外观示例:

export default function ({types: t}) {
  return {
    visitor: {
      CallExpression(path) {
        if (path.node.callee.name !== 'mylog') {
          return;
        }
        path.node.arguments = [
          t.objectExpression(
            path.node.arguments.map(arg => t.objectProperty(
              t.StringLiteral(arg.name),
              path.scope.hasReference(arg.name) ?
                arg :
                t.identifier('undefined')
            ))
          ),
        ];
      }
    }
  };
}

这转换

var phone_number = 42;
var name = 'foo';

mylog(phone_number, name, address);

成

var phone_number = 42;
var name = 'foo';

mylog({
  'phone_number': phone_number,
  'name': name,
  'address': undefined
});

现场演示:http://astexplorer.net/#/0Ph74qUjvL