Chrome JavaScript开发者控制台:是否可以在不使用换行符的情况下调用console.log()?


91

我想使用console.log()记录消息,而不必在每次调用console.log()之后添加新行。这可能吗?


10
答案之一正确吗?
newenglander 2012年

我认为@minitech的答案是正确的:不可能。其他答案为我们对console.log()的理解提供了有趣的,甚至有些正交的深度。
Dave Land

1
@DaveLand我相信这是完全有可能通过维护自己的显示缓冲区,并通过组合会同步显示缓冲区实际控制台console.clear()和,如console.log()
John Weisz

1
@JohnWeisz:谢谢,但是为每个“内联”更新擦除整个控制台并不是解决99%应用程序的解决方案。仍然,有一个updoot。
Dave Land

@DaveLand是的,它更像是一种黑客-现在环顾四周,我意识到它已经被提出过。无论哪种方式,它有时都会有用。
John Weisz

Answers:


43

不,不可能。如果您希望将所有内容都放在一行中,则必须保留一个字符串并进行连接,或者将输出放置在其他位置(例如,另一个窗口)。


2
实际上,这是可能的,但可能并非每个人都想使用。就我而言,我只是试图打印问题以从命令行终端获取输入。请参阅此问题的答案以获取答案:stackoverflow.com/questions/26683734/…–
deltaray

2
@deltaray readline question不是console.log。问题还与浏览器控制台有关,而不是Node.js。
Ry-

@minitech,您可以使用扩展运算符在一行中进行打印。参见示例jsfiddle.net/imranqau5373/7m65at9L/2
imran khan

@imrankhan:这不是问题所在。与传递多个参数/ using相比,spread运算符在此处不添加任何新内容apply
Ry-

40

在NodeJS中,您可以使用process.stdout.write,并且可以添加'\ n'。

console.log(msg)等价于process.stdout.write(msg + '\n')


13
NodeJS 不是 Chrome。该答案与“您是否可以在不使用换行符的情况下console.log吗?”这一问题无关
Alex

18

您可以根据需要放入尽可能多的东西arguments

console.log('hi','these','words','will','be','separated','by','spaces',window,document)

您将在一行内获得所有输出,而对象引用为内联,然后可以从此处下拉其检查器。


61
这如何回答这个问题?
JohnAllen

16
我认为这个答案很有用。

12
这很有用。即使它不能回答问题,也可以为大多数人找到该问题时想要的解决方案提供解决方案。
肖恩·林奇

任何人都想在没有换行的情况下进行打印的原因是,以下输出未知。或者只是想象一个使用例如点的“加载器栏”。
卡尔·阿德勒

使用多个参数会破坏console.log的样式,因为您只能在第一个参数内设置样式。
Qwerty

16

是的,有可能(请查看下面的演示)-通过在本机浏览器控制台之上实现自己的虚拟控制台,然后将其同步到真实的控制台。

这比听起来容易得多:

  1. 维护显示缓冲区(例如,每个代表一行的字符串数组)
  2. console.clear()写入之前先进行呼叫以擦除之前的所有内容
  3. 调用console.log()(或警告,错误等)以将显示缓冲区中的内容填充到控制台

实际上,我已经这样做了一段时间。这个想法的简短而基本的实现可以遵循以下几方面,但是仍然可以使控制台内容具有动画效果:

// =================================================
// Rudimentary implementation of a virtual console.
// =================================================

var virtualConsole = {
    lines: [],
    currentLine: 0,
    log: function (msg, appendToCurrentLine) {
        if (!appendToCurrentLine) virtualConsole.currentLine++;
      
        if (appendToCurrentLine && virtualConsole.lines[virtualConsole.currentLine]) {
            virtualConsole.lines[virtualConsole.currentLine] += msg;
        } else {
            virtualConsole.lines[virtualConsole.currentLine] = msg;
        }
        
        console.clear();
        
        virtualConsole.lines.forEach(function (line) {
            console.log(line);
        });
    },
    clear: function () {
        console.clear();
        virtualConsole.currentLine = 0;
    }
}

// =================================================
// Little demo to demonstrate how it looks.
// =================================================

// Write an initial console entry.
virtualConsole.log("Loading");

// Append to last line a few times.
var loadIndicatorInterval = setInterval(function () {
    virtualConsole.log(".", true); // <- Append.
}, 500);

// Write a new line.
setTimeout(function () {
    clearInterval(loadIndicatorInterval);
    virtualConsole.log("Finished."); // <- New line.
}, 8000);

当与直接控制台交互混合使用时,它肯定有其缺点,并且看起来确实很丑陋-但它确实具有其有效的用途,没有它,您将无法实现。


2
这是最好的答案。您甚至可以使用“最大行数”来进行初始化,以使日志堆栈足够短,以免最终记录大量数据。
Matt Way

12

最简洁的答案是不。

如果您的用例涉及尝试记录永久更改的数据同时避免控制台膨胀,那么一种实现此目的的方法(在某些浏览器中)将是使用 console.clear()在每次输出之前。

function writeSingleLine (msg) {

  console.clear();
  console.log(msg);

}

writeSingleLine('this');
setTimeout( function () { writeSingleLine('is'); }, 1000);
setTimeout( function () { writeSingleLine('a'); }, 2000);
setTimeout( function () { writeSingleLine('hack'); }, 3000);

请注意,这可能会破坏应用程序中发生的任何其他日志记录功能。

免责声明:我将其归类为黑客。


3
非常hack,但很聪明。如果您跟踪已经记录到控制台的内容(例如,通过维护某种虚拟缓冲区),则可以重建缓冲区并在每次清除时添加新的字符串。
danShumway '16

2

如果您唯一的目的是停止在多行上打印,则一种方法是将值分组,如果您不希望它们填满整个控制台

PS:-请参见浏览器控制台的输出

let arr = new Array(10).fill(0)


console.groupCollapsed('index')

arr.forEach((val,index) => {
  console.log(index)
})

console.groupEnd()

console.group

console.groupCollapsed


1

关于@shennan的想法:


1

将输出收集到数组中,然后将join函数与首选分隔符一起使用

function echo(name, num){
    var ar= [];
    for(var i =0;i<num;i++){
        ar.push(name);
    }
    console.log(ar.join(', '));
}

echo("apple",3)

另请检查Array.prototype.join()以获取模式详细信息

var elements = ['Fire', 'Wind', 'Rain'];

console.log(elements.join());
// expected output: Fire,Wind,Rain

console.log(elements.join(''));
// expected output: FireWindRain

console.log(elements.join('-'));
// expected output: Fire-Wind-Rain

0

您可以使用扩展运算符在单行中显示输出。javascript ES6的新功能。见下面的例子

   for(let i = 1; i<=10; i++){
        let arrData = [];
        for(let j = 1; j<= 10; j++){
            arrData.push(j+"X"+i+"="+(j*i));
        }
        console.log(...arrData);
    }

那将在单行中打印1到10表。


0

例如,如果您想要控制台日志数组元素而没有换行符,则可以这样做

const arr = [1,2,3,4,5];

Array.prototype.log = (sep='') => {
    let res = '';
    for(let j=0; j<this.lengthl j++){
        res += this[j];
        res += sep;
    }
    console.log(res);
}

// console loging

arr.log(sep=' '); // result is: 1 2 3 4 5 

-3
// Source code for printing 2d array
window.onload = function () {
    var A = [[1, 2], [3, 4]];
    Print(A);
}

function Print(A) {
    var rows = A.length;
    var cols = A[0].length;
    var line = "";
    for (var r = 0; r < rows; r++) {
        line = "";
        for (var c = 0; c < cols; c++) {
            line += A[r][c] + " ";
        }
        console.log(line);
    }
}

1
A.forEach(row => console.log(row.join(' ')))
vp_arth
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.