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 文字セットの表示と変更のチュートリアル

推薦する

JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...

MySQL初心者はグループ化や集計クエリの煩わしさから解放されます

目次1. グループクエリの概略図2. groupbyキーワード構文の詳細な説明3. 簡単なグループク...

Linuxにおけるselinuxの基本設定チュートリアルの詳細な説明

selinux ( Security-Enhanced Linux)は、Linux カーネル モジュ...

Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...

ウェブサイト標準の検証方法を通じてFlashページを共有する方法

1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...

MySQL 8.0.13 手動インストールチュートリアル

この記事では、MySQL 8.0.13の手動インストールチュートリアルを参考までに紹介します。具体的...

Dockerコンテナの構築と実行のプロセスの詳細な説明

イメージをプルし、コンテナを作成してコンテナを実行するだけです。 docker run -d --r...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

Navicat for SQLite で中国語データを CSV にインポートする方法

この記事では、参考までに、csv中国語データをNavicat for SQLiteにインポートする具...

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...

MySQL DDL による同期遅延を解決する方法

目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...

vite を使用して vue3 アプリケーションを構築する方法

1. インストールヒント: 現在、VUE3.0 の公式翻訳ドキュメントはありません。しかし、すでに誰...

フロントエンドブラウザのフォントサイズが12px未満のソリューション

序文最近プロジェクトに取り組んでいたとき、UI デザインのフォント サイズは 10 ピクセルでした。...