console.info log區別詳述

一、console.info和console.log的區別

console.info和console.log都是JavaScript控制台輸出信息的方法，它們有什麼區別呢？

首先看看它們的輸出表現形式，以一個簡單的字元串為例：

console.log('Hello, world!');
console.info('Hello, world!');

輸出結果如下：

Hello, world!
  Hello, world!

可以看到，console.log輸出的文本沒有前綴，而console.info輸出的前綴是一個信息圖標，一般是藍色的i字母。這個前綴的目的是用於區分不同類型的輸出信息，console.info一般用於輸出一些提示信息，而console.log則用於輸出普通信息。

其次，在Chrome瀏覽器中，console.info輸出的前綴是有區別的，如果是控制檯面板輸出的，則前綴是帶有黑色底色的白色i字母，如果是在元素麵板輸出的，則前綴是一個藍色的i字母。

最後，在輸出對象時，console.info與console.log也有一些細微的差別，console.log會直接輸出傳入的對象，而console.info則會將對象列印成詳細信息的格式。

二、console.info的使用場景

既然console.info與console.log有區別，那麼什麼時候應該使用console.info呢？下面從幾個方面做介紹：

1、輸出調試信息

在進行代碼調試的時候，console.info是非常有用的函數之一，如果我們需要輸出一些調試信息，但又不想影響代碼的執行，就可以用console.info函數。

例如：

const a = 10;
const b = 20;
console.info('a的值為：', a, '，b的值為：', b);

輸出結果如下：

   a的值為： 10 ，b的值為： 20

2、輸出警告信息

有時候，我們需要在控制台中輸出一些警告信息，提醒程序員注意，這個時候就可以使用console.info函數。

例如：

console.info('%cWarning!', 'color:red;font-weight:bold;');

輸出結果如下：

   Warning!

3、輸出操作指南信息

當我們開發某個Web應用時，需要引導用戶進行一些操作，可以使用console.info函數輸出操作指南信息，以提高用戶的使用體驗。

例如：

console.info('%c請按下面的步驟進行操作：', 'font-weight:bold;');
console.info('1. 點擊菜單按鈕');
console.info('2. 選擇下載選項');
console.info('3. 下載完成後進行安裝');

三、示例代碼說明

下面是一個綜合運用console.log和console.info函數的示例代碼，通過輸出日誌信息來幫助調試代碼：

function calc(a, b) {
  console.info('開始計算：a=', a, ', b=', b);
  console.log('正在進行加法運算...');
  const sum = a + b;
  console.info('a+b=', sum);
  console.log('正在進行乘法運算...');
  const product = a * b;
  console.info('a*b=', product);
  console.log('運算完成！')
  return sum + product;
}
console.log('調用計算函數：calc(2, 3)');
const result = calc(2, 3);
console.log('計算結果：', result);