字符串模板基础应用

• 字符串模板取代了原有的字符串拼接的写法
• 字符串模板通过 " ` " 符号将需要拼接的字符串直接包起来（tab键上方的这个键）

//js 字符串拼接
let name = 'cometang';
let age = 24;
let str = `我的名字叫${name},我的年龄有${age}岁了`;
console.log(str);
// 我的名字叫cometang,我的年龄有24岁了

// html Dom节点拼接
let name = 'cometang'
let age = 24
let box =`
    <p> 我的名字：${name}</p>
    <p>我的年龄：${age}</p>
` 
console.log(box)
/*
*   <p> 我的名字：cometang</p>
*   <p>我的年龄：24</p>
*/

自定义字符串模板返回值

let name = 'cometang'
let age = 24
//自定义模板的返回值通过函数的重写
// 将每个值前后都加上破折号
// 我的名字叫——cometang——,我的年龄有——24——岁了
function valFilter(){
    console.log(arguments);   // { '0': [ '我的名字叫', ',我的年龄有', '岁了' ], '1': 'cometang', '2': 24 }
    let strs = arguments[0];  //  [ '我的名字叫', ',我的年龄有', '岁了' ]
    let vals = [].slice.call(arguments,1)  // [ 'cometang', 24 ]
    let str = '';
    for(let i =0 ; i<vals.length;i++){
        str+= `${strs[i]}——${vals[i]}——`;
    }
    str += strs[strs.length-1];
    return str;
}

let str =  valFilter`我的名字叫${name},我的年龄有${age}岁了`;
console.log(str);
// 我的名字叫——cometang——,我的年龄有——24——岁了

字符串新增的方法

• includes 是否包含
• startsWith 是否以xxx开头
• endsWith 是否以xxx结尾
• padStart 在前面补齐
• padEnd 在后面补齐

let url = 'http://gotang.cn/logo.png';
console.log(url.includes('gotang.cn'));  // true
console.log(url.startsWith('http://'));  // true
console.log(url.endsWith('logo.png'));   // true

//将获取的时分秒不足两位的前面添0补齐
let date  = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
let str = `${h.toString().padStart(2,'0')}:`;
str += `${m.toString().padStart(2,'0')}:`;
str += `${s.toString().padStart(2,'0')}`;
console.log(str);
// 22:05:03