为什么不能将变量名作为字符串获取?我想创建自己的"console.log"功能 [英] Why can't I get the variable name as a string? I want to create my own 'console.log' function

问题描述

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

Im a beginner and I often need to see a variable's value to make sure I am picking the right method / property /selector for jQuery or just to see what the value is or debugging in general. So what I usually do is

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

我想创建我自己的'console.log'函数，只需将变量(或多个变量)作为参数并整齐地打印出结果即可.

I want to create my own 'console.log' function where I simply put the variable(or many variables) as parameters and neatly print out the results.

mylog(phone_number, name, address);

将输出到控制台:

phone_number: 911
name: stanek
address: undefined

第一种方法的输入并不是很多，但是我觉得必须有更好的方法...而且我想节省时间.

Its not a huge deal typing out the first way but I feel like there must be a better way of doing it... and I want to save time.

对先前相关问题的回答通常包括诸如您已经知道这个名字"或您有什么充分理由的意思"之类的言论.我觉得这种情况显示了对此请求的特定需求.

The answers to previous related questions usually involve remarks such as 'you already know the name' or 'what good reason do you have for this'. I feel this scenario shows a specific need for this request.

我觉得这不是Javascript内置的，或者它应该在某个地方的答案中.

I have a feeling that this isn't built into Javascript or it would have been in an answer somewhere.

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

My curious question is: Why isn't this a feature of Javascript?

我确定的问题:是否可以将此功能添加到Javascript?我愿意花无数小时来节省20秒.

My determined question: Is it possible for me to add this feature to Javascript? I'm willing to spend countless hours to save 20 seconds.

推荐答案

如果不对源代码进行额外处理，则无法做到这一点.在运行时，该函数将传递一个 value ，它不知道该值来自何处.

It's not possible to do this without additional processing of the source code. At runtime, the function gets passed a value, it cannot know where the value came from.

您可以改为使其接受一个对象，然后可以使用以下命令对其进行调用:

You can make it accept an object instead and then it can be called with:

mylog({phone_number, name, address});

这使用短对象符号在ES2015中引入，等同于

This uses short object notation introduced in ES2015 which is equivalent to

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

(简写在旧版浏览器中不起作用)

(short notation won't work in older browsers)

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

This gives you access the value and the name of the variable (as object property).

我是否可以将此功能添加到Javascript中?

Is it possible for me to add this feature to Javascript?

除非您想编写自己的JavaScript引擎，否则.

Unless you want to write your own JavaScript engine, no.

但是，在执行代码之前，可以使用诸如 Babel 之类的源代码转换器来检测代码.以下是Babel插件的外观示例:

However you can use a source code transformer such as Babel to instrument your code before executing it. Here is an example of how such as Babel plugin could look like:

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

这篇关于为什么不能将变量名作为字符串获取?我想创建自己的"console.log"功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！