javascript - 为什么我无法获取字符串形式的变量名称？我想创建自己的 '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});

这使用 short object notation ES2015中引入，相当于

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

(短符号在旧版浏览器中不起作用)

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

<小时/>

Is it possible for me to add this feature to 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