console.log() в JavaScript — вивід у консоль

Загальний опис

console.log() - статичний метод консолі в мові програмування JavaScript, що використовується для виведення інформації у консоль розробника. Цей метод є основним інструментом для відлагодження, моніторингу та виведення даних під час виконання програми.

Метод console.log() використовується для виведення різних типів даних, таких як рядки, числа, об'єкти, масиви та багато іншого, у консоль. Його використання дозволяє розробникам отримувати важливу інформацію про виконання програмного коду та виявлення можливих помилок.

Використання методу console.log()

1. Виведення рядкового повідомлення:

    console.log("Привіт, світ!");
   

2. Виведення значень змінних:

    let number = 42;
    console.log("Значення змінної:", number);
   

3. Виведення стану об'єкту:

    let person = { name: "Марія", age: 30 };
    console.log("Стан об'єкту:", person);
   

Метод console.log() є невід'ємним інструментом у розробці, надаючи зручний спосіб виводу інформації у консоль, що полегшує відлагодження, аналіз та вдосконалення коду в процесі розробки JavaScript-програм.

правити

Порада

Однією з ключових переваг console.log() є можливість виводити різні типи даних, що допомагає розробникам в аналізі та відлагодженні коду. Від рядків і чисел до об'єктів і масивів - цей метод дозволяє виводити їх у консоль зручним способом.

автор: Bond правити

Порада

Використання console.log() є невід'ємною частиною процесу відлагодження. Розміщення відлагоджувальних виразів у коді та виведення їх результатів у консоль допомагає виявити помилки та зрозуміти стан програми.

автор: Bond правити

Порада

При роботі з складними структурами даних, такими як об'єкти з вкладеними об'єктами, console.log() виводить їхній вміст у читабельному форматі, полегшуючи аналіз і розуміння структури даних.

автор: Bond правити

Порада

Для зручності можна використовувати форматування, вставляючи змінні та текст у виведені повідомлення. Це робить вивід більш інформативним і зрозумілим.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

log(obj1)
log(obj1, /* …, */ objN)
log(msg)
log(msg, subst1, /* …, */ substN)

Параметри

obj1

Список об'єктів JavaScript для виводу. Об'єкти виводяться в порядку, в якому вони вказані. Зверніть увагу, що у деяких версіях Chrome та Firefox, виведення об'єктів може бути посиланням на об'єкт, а не його поточним значенням на момент виклику console.log().

автор: Bond

правити

msg

Рядок JavaScript, який містить один чи декілька підстановочних рядків.

автор: Bond

правити

subst1

Об'єкти JavaScript, які замінюють підстановочні рядки у msg. Це надає додатковий контроль над форматом виводу.

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	4	3	10.5	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Метод console.log()</h2>
  <p class="description">Виводить повідомлення у консоль для налагодження та відладки коду.</p>
</header>

<main>
  <div class="result" id="output">
    <!-- Результат роботи буде виведений тут -->
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  display: inline-block;
  margin-top: 16px;
  padding: 5px;
  cursor: pointer;
}

// JavaScript код тут
const resultDiv = document.getElementById('output');
let counter = 0;

function logMessage() {
  counter++;
  console.log(`Це повідомлення номер ${counter}`);

  // Виведення повідомлення у результат
  resultDiv.textContent = `Лог: Це повідомлення номер ${counter}`;
}

// Виклик функції при кліці на кнопку (для демонстрації)
const logButton = document.createElement('button');
logButton.textContent = 'Записати у консоль';
logButton.addEventListener('click', logMessage);
document.body.appendChild(logButton);
//# sourceURL=pen.js

// У цьому прикладі ми виводимо значення змінних та об'єкта у консоль для відлагодження
let num1 = 10;
let num2 = 20;

// Виводимо значення змінних
console.log(`Значення num1: ${num1}`);
console.log(`Значення num2: ${num2}`);

// Об'єкт для виведення його в консоль
let person = { name: 'John', age: 30, occupation: 'developer' };

// Виводимо значення об'єкта
console.log('Інформація про особу:', person);

// У цьому прикладі ми використовуємо console.log() для виведення повідомлення
let message = "Привіт, світ!";
console.log(message);