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

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

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

#console.log()

構文:

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

機能: 今後のデバッグを容易にするために、「内容」をコンソールに出力する、非常に頻繁に使用される機能です。 (コンソールの場合は、ブラウザで F12 を押して開発者モードの 2 番目の項目 (コンソール) を開くだけです。コンソール タブでインスタント テストを実行することもできます)

console.log() は主に次の目的に使用されます。利便性 JavaScriptのデバッグに使用され、ページ上に出力された内容が確認できます アラートと比較して構造化されたものを見ることができます アラートでフェードアウトしたオブジェクトは[obujctオブジェクト]ですが、コンソールではオブジェクトの内容が確認できますページの操作を中断しないでください。

アラートと比較した場合、その利点は次のとおりです:

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

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

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

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

Web ページに関するさまざまなヒントが記載されています。

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

後で使用するパラメータが以前のプレースホルダーを置き換えていることがわかります。簡略化された文字列連結操作。たとえば、es5 での文字列スプライシング:

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

es6 には、より強力な文字列テンプレートがすでにあります:

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

es6 string テンプレートには、 %c プレースホルダーのみが使用でき、他のプレースホルダーは効果がありません。

#

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

##%f は効果がありません。png

%c

プレースホルダーはまだ少し興味深いものです:

<pre class="brush:php;toolbar:false">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);</pre>

Google プリント効果.png

これらの印刷コンテンツにスタイルが追加されていることがわかります。

[推奨学習:

JavaScript ビデオ チュートリアル

]

以上がconsole.log()の機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。