Web development js string concatenation placeholder and conlose object API detailed explanation

Web development js string concatenation placeholder and conlose object API detailed explanation

Placeholder replacement

Console printing (conlose.log()) or splicing character replacement can be solved with the help of placeholders

%s string
%d / %i integer
%f Decimal (integers and decimals are both acceptable, recommended)
%o Object
%c The style of the string after

Example code:

// %s Example let s1 = 'love'
let s2 = 'Motherland'
console.log('001--I%s my%s', s1, s2) // -> I love my motherland // %f and %i, %d examples/*
    It is recommended to use %f, both integers and decimals are OK. %d can only output integers, and decimals will be ignored directly*/
let n1 = 100
let n2 = 5.8
console.log('002--I'm %d points away from %d points', n1, n2) // -> I'm 5 points away from 100 pointsconsole.log('002--I'm %i points away from %i points', n1, n2) // -> I'm 5 points away from 100 pointsconsole.log('003--I'm %f points away from %f points', n1, n2) // -> I'm 5.8 points away from 100 points// %oExamplelet o = { name: 'Kakashi', age: 25 }
console.log('004--The information of the ninja performing the mission is %o', o) // -> The information of the ninja performing the mission is {name: "Kakashi", age: 25}        
//%c example var str = '005--I am a %c example'
let st = 'color: #000; background-color: orange; padding: 5px;);'
console.log(str, st)
console.log(
    '006--%c---------------I am a separator-----------------',
    'color:red;font-size:10px'
)
ript>

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-fHD9IthG-1627465023483)(conlose/image-20210728170625837.png)]

Console Printing

Printing in the browser is not limited to conlose.log() ;

console object is a native object of JavaScript, which provides a variety of methods for interacting with the console window;

This section only lists the methods that I think are commonly used.

table()

The console.table method can convert composite data into a table for display.

let o = {
    username: "kakashi",
    age: 25,
    Skill:['Chidori', 'Earth Flow Wall', 'Sharingan']
}
console.table(o);

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-9cbDkCtF-1627465023486)(conlose/image-20210728172629214.png)]

log, info, warn, error

console.log('001--I am a normal output statement');
console.info('002--I am a normal information output statement');
console.warn('003--I am a warning output statement');
console.error('004--I am an error output statement');

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-jluA4C5G-1627465023487)(conlose/image-20210728172305658.png)]

group(), groupCollapsed(), groupend()

console.group() and console.groupend() are used to group displayed information, which is suitable for outputting a large amount of information.

console.group() will expand the output information of this group by default

console.groupend() will close the output information of this group by default

console.group('First round of output')
console.log('I am the first round of output statement 1')
console.log('I am the first round of output statement 2')
console.log('I am the first round of output statement 3')
console.log('I am the first round of output statement 3')
console.groupEnd()

console.groupCollapsed('First round of output')
console.log('1 is output again')
console.log('2 is output again')
console.log('Another 3 is going to be output')
console.groupEnd()

console.log('last output')

[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-XZN4LuIZ-1627465023489)(conlose/image-20210728173352647.png)]

The above is the detailed content of the web string concatenation placeholder and conlose object API. For more information about web string placeholders and conlose object API, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • A brief discussion on the implementation principle of Webpack4 plugins
  • Web project development JS function anti-shake and throttling sample code
  • Multiple solutions for cross-domain reasons in web development
  • js to realize web message board function
  • JavaScript article will show you how to play with web forms
  • JavaScript web page entry-level development detailed explanation

<<:  How to implement Nginx reverse proxy and load balancing (based on Linux)

>>:  MySQL character set viewing and modification tutorial

Recommend

Writing and understanding of arrow functions and this in JS

Table of contents Preface 1. How to write functio...

Installation steps of mysql under linux

1. Download the mysql tar file: https://dev.mysql...

Complete Tutorial on Deploying Java Web Project on Linux Server

Most of this article refers to other tutorials on...

The first step in getting started with MySQL database is to create a table

Create a database Right click - Create a new data...

Summary of the use of Datetime and Timestamp in MySQL

Table of contents 1. How to represent the current...

CSS to achieve single-select folding menu function

Don’t introduce a front-end UI framework unless i...

Various methods to implement the prompt function of text box in html

You can use the attribute in HTML5 <input="...

Example of how to configure the MySQL database timeout setting

Table of contents Preface 1. JDBC timeout setting...

How to use Dockerfile to create a mirror of the Java runtime environment

The current environment is: Centos 7.5 docker-ce ...

XHTML tutorial, a brief introduction to the basics of XHTML

<br />This article will briefly introduce yo...

MySql 5.7.20 installation and configuration of data and my.ini files

1. First download from the official website of My...

Detailed tutorial on using VMware WorkStation with Docker for Windows

Table of contents 1. Introduction 2. Install Dock...

Bootstrap 3.0 study notes buttons and drop-down menus

The previous article was a simple review of the B...

Use iframe to submit form without refreshing the page

So we introduce an embedding framework to solve th...