console.log()の機能は何ですか

console.log() の機能: コードのデバッグを容易にするために、パラメーターで指定された内容をコンソールに出力します。 console.log()はalertと比較して構造化されたものを見ることができ、alertでフェードアウトしたオブジェクトは「[obujct object]」ですが、console.log()はオブジェクトの内容を見ることができ、コンソールはその操作を中断しません。ページ。 。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

#console.log()

console.log("コンテンツ");

• アラートの場合、色褪せたオブジェクトはオブジェクト オブジェクトですが、コンソールからは構造物を見ることができます。それをオブジェクトのコンテンツに追加します。

• コンソールはページの操作を中断しません。アラートを使用してコンテンツをポップアップすると、ページは停止しますが、コンソールがコンテンツを出力した後でも、ページは引き続き実行できます。正常に動作します。

• コンソールのコンテンツは非常に充実しており、コンソールに「console」と入力すると表示されます。

Console {memory: MemoryInfo, debug:  function , error:  function , info:  function , log:  function …}

ログイン後にコピー

console.log() のプレースホルダー

console.log( ) について話します。プレースホルダー。プレースホルダは 5 つあります

%s 文字列
%d または %i 整数
%f 浮動小数点数
%o オブジェクト リンク
%c CSS フォーマット文字列 メソッドの最初のパラメータでプレースホルダが使用されている場合、後続のパラメータが置換に使用されます。

const name = 'chinaBerg';
const age = 88;
const money = 12.88;
const obj = {
    status: '很积极'
}

console.log('我叫%s，%d岁，有%f元，状态：%o', name, age, money, obj.status, '又打印一句话')

Google print results.png

console.log('我叫' +  name + ' ,' + age +'岁，有' + money + '元')

console.log(`我叫${name}，${age}岁, 有${money}元`);

#

// 注意这里字符串模板的最后插入了%f
console.log(`我叫${name}，${age}岁, 有%f元`, 12.88);

%c

const css1 = 'font-size: 22px;font-weight: bold';
const css2 = 'border: 1px solid green';
const css3 = 'color: #fff;background: #f00';

// 占位符填入                
console.log('%c %s + %s = %s', css1, 1, 2, 3);
// 字符串拼接形式中插入%c占位符
console.log('%c我的名字叫' + name + ', 今年' + age + '岁', css2);
// es6字符串模板中插入%c占位符
console.log(`%c我叫${name}，${age}岁, 有%f元`, css3);