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

推薦する

MacにMySQLをインストールするときに忘れたパスワードを変更する方法

1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...

Windows 上で Zookeeper サーバーを構築するチュートリアル

インストールと設定Apacheの公式ウェブサイトには多くのミラーダウンロードアドレスが用意されており...

SHTML 簡潔なチュートリアル

SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...

CSSはletter-spacingプロパティを通じて単語間の間隔を制御します。

letter-spacing プロパティ: 文字間のスペース (文字間隔) を増減します。このプロ...

MySQL テーブルの読み取り、書き込み、インデックス作成、その他の操作の SQL ステートメントの効率最適化の問題を分析します。

前回は、Explain 実行プランの表示、インデックスの分析など、MySQL での SQL クエリの...

XHTML Web ページ チュートリアル

この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...

ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...

MySQL インデックスの設計と最適化の方法

目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...

MySQL グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

MySql SQL最適化のヒントの共有

ある日、内部結合を含む SQL ステートメントの実行速度はそれほど遅くはない (0.1 ~ 0.2)...

文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...

Javascript Echarts 空気質マップ効果の詳細な説明

まず、空気質データと地図データを組み合わせる必要があります。マップデータには属性名があるさまざまな都...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...