ES6(2)模板字符串

解决字符串拼接问题

1. 字符串里可以嵌套变量:`${name}今年${age}岁了`

//es5
let name='aa',age=18;
let desc=name+'今年'+age+'岁了'

//es6
let name='aa',age=18;
let desc=`${name}今年${age}岁了`
//编译为es5
var name = 'aa',
    age = 18;
var desc = "".concat(name, "\u4ECA\u5E74").concat(age, "\u5C81\u4E86");

2. 模板字符串可以换行

let users=[
    {
        name:'aaa',
        id:1
    },
    {
        name:'bbb',
        id:2
    }
]
//map映射：把老数组中的每一个元素映射为新数组的每一项
let str=users.map((item,index)=>{
    return `<li>${item.id}:${item.name}</li>`
}).join('')
let ul=(
    `
    <ul>
    ${str}
    </ul>
    `
)
console.log(ul);

/*
    结果
    <ul>
    <li>1:aaa</li><li>2:bbb</li>
    </ul>
* */

3. 带标签的模板字符串

带标签的模板字符串，就像一个函数调用，可以有很多参数

参数1：文本的数组(所有被${}隔开的文本的集合)

以后的参数:是所有${}中的变量向后依次排开

文本集合永远比 变量集合的length多一个

function desc(strs,name,age){
    console.log(strs);//文本的数组(所有被${}隔开的文本的集合)
    console.log(name);
    console.log(age);
}

let name='aa',age=18;
let str=desc`${name}今年${age}岁了`
console.log(str);
/*
[ '', '今年', '岁了' ]
aa
18
undefined
*/

使用剩余运算符更直观

let name='aa',age=18;
let str=desc2`${name}今年${age}岁了`;
function desc2(strs,...arr){
    console.log(strs);
    console.log(arr);
}

// [ '', '今年', '岁了' ]  所有被${}隔开的文本的集合
// [ 'aa', 18 ]		所有${}中的变量集合
//strs 永远比arr 的length多一个

es6 新加字符串方法：startsWith、endsWith、includes、repeat、

str.startsWith('xx'),判断str是不是以'xx'开头

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

str.endsWith('xx'),判断str是不是以'xx'结束

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

str.includes('xx'),判断str是不是 包含'xx'

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

str.repeat(Number),将str重复Number拼接次

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

str.padStart(targetLength , padString),在原字符串开头填充

targetLength目标长度:当str的长度小于targetLength在原字符串开头填充padString来补齐；当str的长度大于等于targetLength时返回原字符串

padString:填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断；不传padString，默认' '

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)

str.padEnd(targetLength , padString),在原字符串末尾填充

targetLength目标长度:当str的长度小于targetLength在原字符串末尾填充padString来补齐；当str的长度大于等于targetLength时返回原字符串

padString:填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断；不传padString，默认' '

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   )