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

推薦する

複数のフィールドをグループ化するMySQLグループ

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

HTMLタグのデフォルトスタイルの配置

html、address、blockquote、body、dd、div、dl、dt、fieldset...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

USE DB 輻輳に対する MySQL ソリューションの詳細な説明

障害に遭遇すると、障害の根本的な原因を考えるのではなく、障害を解決する方法を考えることがよくあります...

Dockerを使用してphabricatorをインストールする方法

ここでは Ubuntu 16.04 システムを使用しています。 dockerを使用したインストールh...

純粋なHTML+CSSでタイピング効果を実現

この記事は主に、一定の参考値を持つ純粋な HTML + CSS によって実現されるタイピング効果を紹...

MySQL マスタースレーブレプリケーションの実践の詳細説明 - ログポイントに基づくレプリケーション

ログポイントベースのレプリケーション1. マスターデータベースとスレーブデータベースに専用のレプリケ...

MySQLシリーズ15 MySQL共通設定とパフォーマンスストレステスト

1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...

IDEA 2020 で Tomcat サーバーを構成するための詳細な手順

IDEA 2020 で Tomcat を構成する手順は次のとおりです。最初のステップはTomcatを...

MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル (一般)

MySQLサービス8.0.14のインストール(一般)の参考までに、具体的な内容は次のとおりです。イ...

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

CSS3のボックスサイズプロパティの興味深いボックスモデルについての簡単な説明

誰もがボックス モデルの構成を、内側から外側まで、コンテンツ、パディング、境界線、マージンについて知...

MySQLデータベースのマスタースレーブ同期構成と読み取り書き込み分離

MySQL マスター スレーブ レプリケーションを使用する利点は次のとおりです。 1. 安定性を向上...

nginxのインストールと設定の詳細なプロセス記録

目次1 nginxの紹介1 nginxとは何か2 つのアプリケーション シナリオ2 nginxのイン...

nginx を使用して 1 つのドメイン名で複数の Laravel プロジェクトを構成する方法の例

背景会社のサブプロジェクトが増えるにつれて、さまざまなサイズのプロジェクトが10個以上になります(バ...