模板字符串

模板字符串取代了原有的字符串拼接功能

let name = 'qsqs';
let age = 9;
let str = `hello,${name}今年${age}岁了`;
console.log(str);//hello,qsqs今年9岁了
-----------------------------------------------------------

//可以支持换行
let ul = 
`<ul>
    <li>${name}</li>
    <li>${age}</li>
</ul>`;
console.log(ul);
//<ul>
//    <li>qsqs</li>
//    <li>9</li>
//</ul>


---------------------------------------

// 如何自己实现一个类模板字符串的功能
let a='qsqsqsqs';
let b =99;
let str = `hello${a}今年${b}岁了`;
str = str.replace(/\$\{([^}]*)\}/g, function(){
    return eval(arguments[1]);
})
console.log(str);

---------------------------------------------------------------------
// 带标签的模板字符，自定义模板字符串的实现
// 让模板字符创取出来的前后都加*
let a='qsqsqsqs';
let b =99;
function qs(){//
    // console.log(arguments);//[Arguments] { '0': [ 'hello', '今年', '岁了' ], '1': 'qsqsqsqs', '2': 99 }
    let strings = arguments[0];
    let values = [].slice.call(arguments, 1);//除了第一项，把后面的变成一个数组
    // console.log(strings, values);
    let str ='';
    for(let i = 0; i < values.length; i++){
        str+=`${strings[i]}*${values[i]}*`;
    }
    str += strings[strings.length - 1];
    return str;
}
let str = qs`hello${a}今年${b}岁了`;//前面加上一个标签，然后写上一个函数就可以自定义标签
console.log(str);

---------------------------------------------------------------------
//字符串的一些方法：
//include 是否包含
// startsWith 以XXX开头
// endsWith 以XXX结尾
// padStart padEnd补全 （下面的例子就是时间的补0）
let url = 'http://www.dnajndkjdk.cn/log.png';
console.log(url.includes('dna'));
console.log(url.startsWith('http://'));
console.log(url.endsWith('.png'));

setInterval(() => {
    let date = new Date();
    let hour = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    let str = `${hour.toString().padStart(2,0)}`; 
    str += `:${minutes.toString().padStart(2,0)}`; 
    str += `:${seconds.toString().padStart(2,0)}`;
    console.log(str);
}, 1000);

// 15:15:57
// 15:15:58
// 15:15:59
// 15:16:00
// 15:16:01
// 15:16:02
// 15:16:03
// 15:16:04
// 15:16:05
// 15:16:06