Console do desenvolvedor JavaScript do Chrome: é possível chamar console.log () sem uma nova linha?

91

Eu gostaria de usar console.log () para registrar mensagens sem acrescentar uma nova linha após cada chamada para console.log (). Isso é possível?

MitchellSalad
fonte
10
Uma das respostas estava correta?
newenglander
Acho que a resposta da @minitech está correta: não é possível. As outras respostas fornecem profundidade interessante, embora um tanto ortogonal, para nosso entendimento de console.log ().
Dave Land
1
@DaveLand Eu acredito que é perfeitamente possível mantendo seu próprio buffer de exibição e sincronizando esse buffer de exibição com o console real por uma combinação de console.clear()e, por exemplo console.log().
John Weisz
1
@JohnWeisz: Obrigado, mas limpar o console inteiro para cada atualização "inline" não é uma solução para cerca de 99% dos aplicativos. Ainda assim, tenha um updoot.
Dave Land
@DaveLand Sim, é mais como um hack - e agora que olhei em volta, percebi que já havia sido proposto antes. De qualquer maneira, às vezes pode ser útil.
John Weisz

Respostas:

43

Não, não é possível. Você terá que manter uma string e concatenar se quiser tudo em uma linha ou colocar sua saída em outro lugar (digamos, outra janela).

Ry-
fonte
2
Na verdade, é possível, mas talvez não seja para o uso que todos têm em mente. No meu caso, estava apenas tentando imprimir uma pergunta para obter entrada de um terminal de linha de comando. Veja a resposta a esta pergunta para obter a resposta: stackoverflow.com/questions/26683734/…
deltaray
2
@deltaray readline, questionnão console.log. A questão também é sobre o console do navegador, não o Node.js.
Ry-
@minitech você pode usar o operador spread para imprimir em uma linha. veja no exemplo jsfiddle.net/imranqau5373/7m65at9L/2
imran khan
@imrankhan: Essa não era a questão. O operador de propagação não adiciona nada de novo aqui vs. passar vários argumentos / usando apply.
Ry-
40

No NodeJS você pode usar process.stdout.write e adicionar '\ n' se quiser.

console.log(msg)é equivalente a process.stdout.write(msg + '\n').

Pablo Yabo
fonte
13
NodeJS não é Chrome. Essa resposta é irrelevante para a pergunta 'você pode consolar.log sem uma nova linha?' .
Alex
18

Você pode colocar quantas coisas argumentsquiser:

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

Você obterá toda a saída em uma linha com as referências de objeto embutidas e poderá então abrir seus inspetores a partir daí.

tkone
fonte
61
Como isso responde à pergunta?
JohnAllen de
16
Eu acho que essa resposta é útil.
12
Isso é útil. Mesmo que não responda à pergunta, ele fornece uma solução para o que a maioria das pessoas estaria procurando ao encontrar essa pergunta.
Sean Lynch
O motivo pelo qual alguém deseja imprimir sem uma nova linha é que a saída a seguir não é conhecida. Ou apenas imagine uma "barra de carregamento" usando, por exemplo, pontos.
Karl Adler
Usar vários argumentos quebra o estilo do console.log, pois você só pode definir o estilo dentro do primeiro argumento.
Qwerty
17

Sim, é possível (verifique a demonstração abaixo) - implementando seu próprio console virtual em cima do console do navegador nativo e sincronizando-o com o real.

Isso é muito mais fácil do que parece:

  1. manter um buffer de exibição (por exemplo, uma matriz de strings representando uma linha cada)
  2. ligue console.clear()antes de escrever para apagar qualquer conteúdo anterior
  3. chamar console.log()(ou avisar, erro, etc) para preencher o console com o conteúdo de seu buffer de exibição

Na verdade, já faço isso há algum tempo. Uma implementação curta e rudimentar da ideia seria algo nas seguintes linhas, mas ainda capaz de animar o conteúdo do console:

// =================================================
// 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);

Com certeza tem suas desvantagens quando se mistura com a interação direta do console e pode definitivamente parecer feio - mas certamente tem seus usos válidos, que você não conseguiria sem ele.

John Weisz
fonte
2
Esta é a melhor resposta aqui. Você pode até mesmo iniciar com, digamos, linhas máximas que mantém a pilha de log suficientemente curta, para que você não termine registrando um grande conjunto de dados.
Matt Way
12

A resposta curta é não.

Mas

Se o seu caso de uso envolver a tentativa de registrar dados que mudam perpetuamente, evitando o inchaço do console, uma maneira de conseguir isso (em certos navegadores) seria usar console.clear()antes de cada saída.

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);

Observe que isso provavelmente interromperia qualquer outra funcionalidade de registro que estivesse ocorrendo em seu aplicativo.

Aviso: Eu classificaria isso como um hack.

Shennan
fonte
3
Muito hack, mas inteligente. Se você rastreou o que já foi registrado no console (digamos, mantendo algum tipo de buffer virtual), pode reconstruir o buffer e anexar uma nova string sempre que limpar.
danShumway de
2

Se o seu único propósito é parar de imprimir em muitas linhas, uma maneira é agrupar os valores se você não quiser que eles ocupem todo o console

PS: - Veja o console do seu navegador para saída

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


console.groupCollapsed('index')

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

console.groupEnd()

console.group

console.groupCollapsed

Code Maniac
fonte
1

Algo sobre a ideia @shennan:

vp_arth
fonte
1

colete sua saída em uma matriz e, em seguida, use a função de junção com um separador preferido

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

echo("apple",3)

verifique também Array.prototype.join () para detalhes do modo

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
Ahmed Younes
fonte
0

Você pode usar um operador de propagação para exibir a saída em uma única linha. O novo recurso do javascript ES6. veja o exemplo abaixo

   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);
    }

Isso imprimirá de 1 a 10 tabelas em uma única linha.

imran khan
fonte
0

se você quiser, por exemplo, elementos da matriz de log do console sem uma nova linha você pode fazer assim

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 
alguns veem uma caneta eu vejo um arpão
fonte
-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);
    }
}
Yas
fonte
1
A.forEach(row => console.log(row.join(' ')))
vp_arth