Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

プレースホルダーの置き換え

コンソール出力(conlose.log())またはスプライシング文字の置換は、プレースホルダの助けを借りて解決できます。

%s 文字列
%d / %i 整数
%f 小数点(整数と小数点の両方が使用可能、推奨)
%o オブジェクト
%c 文字列のスタイル

コード例:

// %s 例 let s1 = 'love'
s2 = '母国'とする
console.log('001--I%s my%s', s1, s2) // -> 私は祖国を愛しています // %f と %i、%d の例/*
    %f の使用をお勧めします。整数と小数の両方が OK です。%d は整数のみを出力でき、小数はそのまま無視されます*/
n1 = 100とする
n2 = 5.8とする
console.log('002--あと %d ポイントで %d ポイントです', n1, n2) // -> 100 ポイントまであと 5 ポイントですconsole.log('002--あと %i ポイントで %i ポイントです', n1, n2) // -> 100 ポイントまであと 5 ポイントですconsole.log('003--あと %f ポイントで %f ポイントです', n1, n2) // -> 100 ポイントまであと 5.8 ポイントです// %oExamplelet o = { name: 'Kakashi', age: 25 }
console.log('004--任務遂行中の忍者の情報は%oです', o) // -> 任務遂行中の忍者の情報は{name: "Kakashi", age: 25}です        
//%c の例 var str = '005--私は %c の例です'
st = '色: #000; 背景色: オレンジ; パディング: 5px;);'
コンソールログ(str, st)
コンソール.log(
    '006--%c----------------------------私はセパレーターです-----------------',
    '色:赤;フォントサイズ:10px'
)
破裂>

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-fHD9IthG-1627465023483)(conlose/image-20210728170625837.png)]

コンソール印刷

ブラウザでの印刷はconlose.log()に限定されません。

consoleオブジェクトは JavaScript のネイティブ オブジェクトであり、コンソール ウィンドウと対話するためのさまざまなメソッドを提供します。

このセクションでは、一般的に使用されていると思われる方法のみをリストします。

テーブル()

console.table メソッドは、複合データをテーブルに変換して表示できます。

o = {とする
    ユーザー名: "kakashi",
    年齢: 25歳
    スキル:['千鳥'、'地流壁'、'写輪眼']
}
コンソール.table(o);

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-9cbDkCtF-1627465023486)(conlose/image-20210728172629214.png)]

ログ、情報、警告、エラー

console.log('001--私は通常の出力ステートメントです');
console.info('002--私は通常の情報出力文です');
console.warn('003--私は警告出力ステートメントです');
console.error('004--エラー出力ステートメントです');

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-jluA4C5G-1627465023487)(conlose/image-20210728172305658.png)]

グループ()、グループ折りたたみ()、グループ終了()

console.group()console.groupend()は、表示される情報をグループ化するために使用され、大量の情報を出力するのに適しています。

console.group()デフォルトでこのグループの出力情報を拡張します。

console.groupend()デフォルトでこのグループの出力情報を閉じます。

console.group('出力の最初のラウンド')
console.log('私は出力文1の第一ラウンドです')
console.log('私は出力文2の1回目です')
console.log('私は出力文3の最初のラウンドです')
console.log('私は出力文3の最初のラウンドです')
コンソール.groupEnd()

console.groupCollapsed('出力の最初のラウンド')
console.log('1が再度出力されます')
console.log('2が再度出力されます')
console.log('さらに3が出力されます')
コンソール.groupEnd()

console.log('最後の出力')

[外部リンク画像の転送に失敗しました。ソースサイトにはアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-XZN4LuIZ-1627465023489)(conlose/image-20210728173352647.png)]

上記は、Web 文字列連結プレースホルダーと連結オブジェクト API の詳細な内容です。Web 文字列連結プレースホルダーと連結オブジェクト API の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Webpack4プラグインの実装原理についての簡単な説明
  • Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード
  • ウェブ開発におけるクロスドメインの理由に対する複数のソリューション
  • ウェブメッセージボード機能を実現するjs
  • JavaScriptの記事では、Webフォームの操作方法を説明します。
  • JavaScript ウェブページ入門開発詳細説明

<<:  Nginx リバース プロキシと負荷分散を実装する方法 (Linux ベース)

>>:  MySQL 文字セットの表示と変更のチュートリアル

推薦する

デプロイから基本操作までDocker Swarm

Docker SwarmについてDocker Swarm は次の 2 つの部分で構成されます。 D...

Ubuntu16.04 インストール mysql5.7.22 グラフィックチュートリアル

VMware12.0+Ubuntu16.04+MySQL5.7.22 インストールチュートリアルの詳...

MySQLデータベースとOracleデータベース間のバックアップをインポートする

OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...

nginx で第 3 レベルドメイン名を設定する方法の例

問題の説明nginx を設定することで、異なるポートを介して異なる Web アプリケーションにアクセ...

スペース均等互換性の問題を解決する2つの方法についての簡単な説明

flex は 2009 年のリリース以来、ほぼすべてのブラウザでサポートされています。シンプルでレス...

ウェブデザインの初心者に役立つ学習教材をいくつかお勧めします

勉強中に読んだ本についてもよく聞かれます。以下は初心者におすすめの本です(私が勉強中に読んだ本です。...

LinuxにPython 3.6をインストールして落とし穴を避ける

Python 3のインストール1. 依存環境をインストールするPython3 はインストール プロセ...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...

Dockerはプロセス操作を管理するためにSupervisorを使用する

Docker コンテナは、起動時に、たとえば ssh または apache デーモン サービスなどの...

レンダリング関数を使用して、拡張性の高いコンポーネントをカプセル化する

必要:バックグラウンド管理では、次のようなレイアウトでデータを表示する必要があることがよくあります。...

Vueプロジェクトでパラメータジャンプ機能を実装する

ページの説明:​ メインページ: 名前 —> shishengzuotanhuichaxun ...

Vueのsync修飾子の詳細な説明

目次1. 手順2. 修飾語3. .sync 修飾子4. まとめ1. 手順指示とは命令です。文字通りの...

MySQL ディープ ページング (数千万のデータを素早くページ分割する方法)

目次序文場合最適化まとめ序文バックエンド開発では、一度に大量のデータがロードされ、メモリやディスク ...

MySQL 8.0 の非表示列に対する基本操作

目次01 非表示の列を作成する02 非表示の列に対する基本操作03 非表示の列メタデータ04 主キー...

JSブラウザストレージの詳しい説明

目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...