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

推薦する

CSS 境界線の長さ制御機能の実装

以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、div ネストを使用していました...

CentOS 6.8 に MySQL 8.0.18 をインストールするチュートリアルの簡単な分析 (RPM 方式)

今日は、CentOS 6.8 サーバーに MySQL 8.0.18 をインストールする方法を記録しま...

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

Tudou.com フロントエンドの概要

1. 分業とプロセス<br />Tudou.comでは、プロジェクト開発が中核であり、誰...

Linuxで大きなファイルを素早くコピーする方法

データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

HTML 初心者のためのベストプラクティス 15 選

HTML 初心者向けのベストプラクティスを 30 個紹介します。 1. タグを閉じたままにする過去に...

ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...

Linux のファイル システム タイプの表示方法の例

Linux でパーティションのファイル システム タイプを確認する方法。パーティションのファイル シ...

ES5とES6の違いを分析する

目次概要関数シグネチャオプションパラメータ非厳密モード例外処理実用要約する概要ご存知のとおり、ES6...

Dockerの動作モードと原理の詳細な説明

次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...

Linux での MongoDB のインストールに関するチュートリアル

MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...

React Native が「NSArray<id<RCTBridgeModule>>型のパラメータを初期化できません」というエラーを報告する (解決方法)

最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...

Dockerコンテナはルーティングを介して直接通信し、ネットワーク通信を実現します。

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

Dockerを使用してLaravel開発環境を構築するための完全な手順

序文この記事では、Docker を使用して、ローカル コンピューターにインストールされている開発スイ...