最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】JS中如何用console.log打印出字符串中包含变量对象的值

JS crifan 5603浏览 0评论

之前一直以为:

要么是用console.log去直接打印出对象

要么是把对象放到console.log中,但是会多打印一行,

又或者是加上JSON.stringify

总之没有好的办法,可以在既输出文本信息,又同时输出对象信息,且可以点击查看细节数据结构的方法。

后来无意间看到别人又类似的写法,是可以实现这样的效果的,所以去整理如下:

    let someDict = {
      isLogin: false,
      loginTime: new Date(),
      logCount: 5,
      name: ‘crifan’,
      roleList : [
        1,
        2,
        3
      ]
    }
    
    //console.log中打印对象级别变量的信息的方法总结
    //方法1:把对象直接放到console.log中打印
    //优点:至少实现了可以在console.log中输出信息
    //缺点:但是对于对象来说,往往输出都是[object object],而打印不出详细的信息,所以基本上是无效的
    console.log(`current info: someDict=${someDict}`);
    //current info: someDict=[object Object]
    
    //方法2:用JSON.stringify输出对象的具体信息
    //优点:可以在console.log中输出对象的信息
    //缺点:但是对象已经被输出为字符串了,不容易看到对象的结构,尤其是数组,字典等变量,没了结构,字符串的数据看起来很费劲
    console.log(`current info: someDict=${JSON.stringify(someDict)}`);
    //current info: someDict={“isLogin”:false,”loginTime”:”2017-08-28T05:37:58.636Z”,”logCount”:5,”name”:”crifan”,”roleList”:[1,2,3]}
    //方法3:单独用console.log打印对象
    //优点:可以在终端中输出对象,且可以点击查看具体结构和数据
    //缺点:但是单个对象就要多出额外的一行,对于调试很多内容时,增加了打印的行数,不利于调试
    console.log(`current info: someDict=`);
    //current info: someDict=
    console.log(someDict);
    //{isLogin: false, loginTime: Mon Aug 28 2017 13:37:58 GMT+0800 (CST), logCount: 5, name: “crifan”, roleList: Array(3)}
    // and Clickable to see detail data structure:
    /*
      isLogin:false
      logCount:5
      loginTime:Mon Aug 28 2017 13:38:57 GMT+0800 (CST) {}
      name:”crifan”
      roleList:(3) [1, 2, 3]
      __proto__:Object
    */
    //方法4:把console.log中的对象用逗号单独分开
    //优点:既可以实现终端中打印出对象,且可以点击查看带结构的对象的信息
    //缺点:如果后序修改了该对象的值的话,则之前打印出来的对象,点击后查看的也是修改后的值,即:对象只存在一个最新的值,无法看到旧的值
    console.log(`current info`, someDict);
    //current info {isLogin: false, loginTime: Mon Aug 28 2017 13:41:51 GMT+0800 (CST), logCount: 5, name: “crifan”, roleList: Array(3)}
    // also the dict can clickable to see detail data structure
    /*
      isLogin:false
      logCount:5
      loginTime:Mon Aug 28 2017 13:38:57 GMT+0800 (CST) {}
      name:”crifan”
      roleList:(3) [1, 2, 3]
      __proto__:Object
    */

效果:

转载请注明:在路上 » 【已解决】JS中如何用console.log打印出字符串中包含变量对象的值

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.183 seconds, using 22.08MB memory