console.log()の機能は何ですか-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2023-03-10 10:52:34

オリジナル

23055 人が閲覧しました

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

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 つあります

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

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

ログイン後にコピー

console.log()の機能は何ですか Google print results.png

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

console.log(&#39;我叫&#39; +  name + &#39; ,&#39; + age +&#39;岁，有&#39; + money + &#39;元&#39;)

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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

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

ログイン後にコピー

Google プリント効果.pngこれらの印刷コンテンツにスタイルが追加されていることがわかります。 
[推奨学習: JavaScript ビデオ チュートリアル 
]
以上がconsole.log()の機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。