模板语法 `${}`
在渲染的时候使用原本的字符串的拼接是十分不利于我们开发的,在拼接的时候我们的书写很容易出错,而且出错后不易查找所以ES6引入了新的模板语法来更好的解决字符串拼接
<script>
const name = '张三';
const age = 24;
console.log(`大家好,我叫${name},今年${age}岁了`);
// 等价于
console.log('大家好,我叫' + name + ',今年' + age + '岁了');
//模板语法最大的特点是可以换行
const url = 'https://www.baidu.com/'
const text = '百度一下'
document.write(`
<div>
<a href="${url}">${text}</a>
</div>
`)
</script>
startsWith()
判断字符串是否以某个字符串开头,返回boolean
{
// str.startsWith(内容):判断字符串是否以某个字符串开头,返回boolean
let url = "/login/aa/bb";
console.log(url.startsWith('/login')); //true
console.log(url.startsWith("/aa")); //false
console.log(url.startsWith('/lo')); //true
}
endsWith()
判断字符串是否以某个字符串结尾,返回boolean
最常用的就是判断文件的格式
{
// str.endsWith(内容):判断字符串是否以某个字符串结尾,返回boolean
let str = "1,2,3,45"
console.log(str.endsWith("45"));
console.log(str.endsWith("1"));
//判断文件的是否是图片
let fileName = "0914.jpg";
if (fileName.endsWith(".jpg")) {
console.log("是图片");
} else {
console.log("不是图片");
}
}
repeat()
将字符串循环几次,返回新的字符串
{
// str.repeat(次数);将字符串循环几次,返回新的字符串
let str = "abc";
console.log(str.repeat(3)); //abcabcabc
}
padStart()
在前面补字符串
常用于时间补零 排序补从内容
{
// str.padStart(位数,'补字符串'):在前面补字符串
let str = "5";
console.log(str.padStart(2, '0')); //05
// 案例
let time = new Date()
let year = time.getFullYear();
let month = (time.getMonth() + 1 + '').padStart(2, '0')
let date = (time.getDate() + '').padStart(2, '0')
console.log(`${year}-${month}-${date}`);
let str3 = "ab";
console.log(str3.padStart(5, 'xy'));
let num = 400;
console.log((num + '').padStart(3, '0'));
}
padEnd()
在后面补字符串
{
// str.padEnd(位数,'补字符串') :在后面补字符串
let str="5";
console.log(str.padEnd(2,'0'));//50
}
includes()
之前可以用indexOf判断 但是返回的是下标 includes()可以直接获取判断一个字符串是否包含另外一个字符串,包含返回true,不包含返回false
{
// str.includes(内容):判断一个字符串是否包含另外一个字符串,包含返回true,不包含返回false
let str = "嘻嘻嘻哈哈哈嘿嘿嘿";
console.log(str.includes("哈哈哈")) //true
if (str.includes("哈哈哈")) {
console.log("包含");
} else {
console.log("不包含");
}
}