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

CentOS7.5 installation of MySQL8.0.19 tutorial detailed instructions

1. Introduction This article does not have screen...

Mini Programs enable product attribute selection or specification selection

This article shares the specific code for impleme...

IE conditional comments for XHTML

<br />Conditional comments are a feature uni...

7 Best VSCode Extensions for Vue Developers

Adding the right VS Code extension to Visual Stud...

Vue realizes the function of uploading photos on PC

This article example shares the specific code of ...

MySQL master-slave configuration study notes

● I was planning to buy some cloud data to provid...

Analyze the usage and principles of Vue's provide and inject

First, let's talk about why we use provide/in...

Solutions to common problems using Elasticsearch

1. Using it with redis will cause Netty startup c...

Solution to the Multiple primary key defined error in MySQL

There are two ways to create a primary key: creat...

How to implement Docker container self-start

Container auto-start Docker provides a restart po...

Solution to the Docker container being unable to access the host port

I recently encountered a problem at work. The doc...

Detailed explanation of padding and abbreviations within the CSS box model

As shown above, padding values ​​are composite at...

MySQL 8.0.3 RC is about to be released. Let’s take a look at the changes

MySQL 8.0.3 is about to be released. Let’s take a...

Vue uses custom instructions to add watermarks to the bottom of the page

Project Scenario Add a custom watermark to the en...