Solve string concatenation problem

${name} this year ${age} is old

//es5
let name='aa',age=18;
let desc=name+'this year'+age+'old'

//es6
let name='aa',age=18;
let desc=`${name}This year,${age}At the age of `
// Compile to ES5
var name = 'aa',
    age = 18;
var desc = "".concat(name, "\u4ECA\u5E74").concat(age, "\u5C81\u4E86");
Copy the code

2. Template strings can be wrapped

let users=[
    {
        name:'aaa'.id:1
    },
    {
        name:'bbb'.id:2}]//map mapping: Maps each element in the old array to each item in the new array
let str=users.map((item,index) = >{
    return `<li>${item.id}:${item.name}</li>`
}).join(' ')
let ul=(
    `
    <ul>
    ${str}
    </ul>
    `
)
console.log(ul);

/ * results < ul > < li > 1: aaa < / li > < li > 2: BBB < / li > < / ul > * * /
Copy the code

3. Tagged template string

A tagged template string, like a function call, can take many arguments

Parameter 1: Array of text (collection of all text separated by ${})

Subsequent arguments: are all the variables in ${} sorted backwards

The text set always has one more length than the variable set

function desc(strs,name,age){
    console.log(strs);// Array of text (all text separated by ${})
    console.log(name);
    console.log(age);
}

let name='aa',age=18;
let str=desc`${name}This year,${age}At the age of `
console.log(str);
/* ['', '1 ',' 1 '] aa 18 undefined */
Copy the code

Using the residual operator is more intuitive

let name='aa',age=18;
let str=desc2`${name}This year,${age}At the age of `;
function desc2(strs,... arr){
    console.log(strs);
    console.log(arr);
}

// ['', 'this year ',' age '] a collection of all text separated by ${}
// ['aa', 18] all variables in ${}
// STRS is always one more length than arR
Copy the code

Es6 new string methods: startsWith, endsWith, includes, repeat,

Str.startswith (‘xx’), check whether STR startsWith ‘xx’

let str='lixiang';
console.log(str.startsWith('l'));   //true
Copy the code

Str.endswith (‘xx’) to check whether STR endsWith ‘xx’

let str='lixiang';
console.log(str.endsWith('li'));   //false
Copy the code

STR. Includes (‘xx’), check if STR contains ‘xx’

let str='lixiang';
console.log(str.includes('li'));   //true
Copy the code

Str.repeat (Number), concatenating STR with Number times

let str='lixiang';
console.log(str.repeat(3));   //lixianglixianglixiang
Copy the code

Str.padstart (targetLength, padString), padding at the beginning of the original string

TargetLength targetLength: when STR length is less than targetLength, fill the beginning of the string with padString to complete it. Return the string if the length of STR is greater than or equal to targetLength

PadString: padding string. If the string is too long and the length of the filled string exceeds the target length, only the leftmost part is retained and other parts are truncated. Do not pass padString, default “”

let str='lixiang';
console.log(str.padStart(5.'ojbk')); //lixiang

let str='lixiang';
console.log(str.padStart(10.'ojbk')); //ojblixiang

let str='liyapei';
console.log(` (${str.padStart(10)}) `); //( lixiang)
Copy the code

Str.padend (targetLength, padString), at the end of the original string

TargetLength targetLength: if STR length is less than targetLength, fill the end of the string with padString. Return the string if the length of STR is greater than or equal to targetLength

PadString: padding string. If the string is too long and the length of the filled string exceeds the target length, only the leftmost part is retained and other parts are truncated. Do not pass padString, default “”

let str='lixiang';
console.log(str.padEnd(5.'ojbk')); //lixiang

let str='lixiang';
console.log(str.padEnd(10.'ojbk')); //lixiangojb

let str='liyapei';
console.log(` (${str.padEnd(10)}) `); //(lixiang )
Copy the code