3.字符串拓展

1.ES6常用新方法：

1.includes

返回值是Boolean类型 true/false
判断字符串中有没有指定字符
includes(“指定字符”,”开始查找的位置(可选)”)
第二个参数转换的方法我们可以发现是用的 Number方法

let str = "abcdefg12345";
console.log(str.includes("a"));//true
console.log(str.includes("a", 2));//false 从索引2开始也就是第三个后查找"a"，是不存在的
console.log(str.includes("g", "2"));//true 第二个参数即使不是数字也会默认转为数字
console.log(str.includes("a", null));//true null默认转为0

2.startsWith endsWith

startsWith判断字符串是不是以指定字符作为开头
startsWith(“指定字符”，开始查找的位置(可选))
endsWith判断字符串是不是以指定字符作为结尾
endsWith(“指定字符”，num(可选)) 这里的num指的是：从前num个查看

console.log(str.startsWith("a"));//true
console.log(str.startsWith("a", 3));//false 索引3处应该是以d开头

console.log(str.endsWith("c"));//false
console.log(str.endsWith("c", 3));//true 前三个字符的结尾是c

例题：创建时间

padStart(2,0）字符串的方法，在前面补位，如果不满两位用0来补

padEnd(2,0）字符串的方法，在后面补位，如果不满两位用0来补

let date = new Date();
let hour = date.getHours().toString();
let m = date.getMinutes().toString()
let s = date.getSeconds().toString();

let result = `${hour.padEnd(2,0)}:${m.padStart(2,0)}:${s.padStart(2,0)}`
console.log(result)

3.repeat(num) 重复

将字符串重复num次，num必须是取整的，不可以是负数或者infinity

console.log(str.repeat(2));//"abcdefg12345abcdefg12345"
console.log(str.repeat(0));//什么都没打印出
// console.log(str.repeat(-1));//报错：Invalid count value 是一个无效的值
console.log(str.repeat(-0.3));//这里会取整为0  什么都不输出
console.log(str);//abcdefg12345 不会修改原字符串

4.padStart padEnd (ES7中的新方法)

按照指定字符补全字符串的指定长度
参数1.长度length 2.指定字符
padStart(length,”指定字符”)

let str1="ab";
console.log(str1.padStart(5, "g"));//"gggab"
console.log(str1.padStart(7, "ghk"));//这里ghk是三个字母，补一次不够7，补两次超过7. 结果输出 "ghkghab" 这个方法进行了自动截取

例题：创建时间

padStart(2,0）字符串的方法，在前面补位，如果不满两位用0来补

padEnd(2,0）字符串的方法，在后面补位，如果不满两位用0来补

let date = new Date();
let hour = date.getHours().toString();
let m = date.getMinutes().toString()
let s = date.getSeconds().toString();

let result = `${hour.padEnd(2,0)}:${m.padStart(2,0)}:${s.padStart(2,0)}`
console.log(result)

2.模板字符串

1.跟普通字符串一样使用但是他可以添加变量 ${}

let str = "Cyan";
let num = 1;
str += num;
console.log(str);//Cyan1  这里采用的是普通的拼接
// 要在页面上呈现'<h1 class="box">Aqing</h1>'
let class1 = "box1",name = "Cyan";
// document.body.innerHTML += '<h1 class='+class1+'>'+name+'</h1>';
document.body.innerHTML += `<h1 class="${class1}">${name}</h1>`;

2.模板字符串可以换行

let str = `<ul>
    <li>${name}</li>
    <li>${age}</li>
</ul>`
console.log(str);

2.1实现模板字符串(替换将替换的结果用eval执行)

let name = 'haha';
let age = 9;
let str = '<ul><li>${name}</li><li>${age}</li></ul>';
let newStr = str.replace(/\$\{([^}]+)\}/g,function(){
    return eval(arguments[1]);
});
console.log(newStr);

2.2带标签的模板字符串

let name = 'haha';
let age = 9;
function jw() { // 第一个参数是字符串的数组 第二个参数是第一个变量。。。
  let strings = arguments[0];
  // Array.prototype.slice.call()
  let values = [].slice.call(arguments, 1);
  let str = ''
  for (let i = 0; i < values.length; i++) {
    str += `${strings[i]}*${values[i]}*`;
  }
  str += strings[strings.length - 1];
  return str
}
let str = jw`hello~${name}今年${age}岁了`;

1.当console.log(argument)

第一个参数是字符串的数组
第二个参数是第一个变量

{'0':['hello~','今年','岁了'],'1':'haha','2':9}

先把字符串拼为三段，为0内的值，后面两个变量分别在1 和2 里面

2.return什么 str就是什么

function jw() {
    console.log(argument)；
    return 1000
}
let str = jw`hello~${name}今年${age}岁了`;

最后得到str为1000

3.取数组

1.取到了字符串的数组

let strings = arguments[0];

2.除了第一项把后面的很多个变为数组

 let values = [].slice.call(arguments, 1);

得到

['hello~'，'今年'，'岁了']['haha'，9]

4.循环strings，values拼接字符串

  let strings = arguments[0];
  // Array.prototype.slice.call()
  let values = [].slice.call(arguments, 1);
  let str = ''
for (let i = 0; i < values.length; i++) {
    str += `${strings[i]}*${values[i]}*`; //循环完毕了
  }
  str += strings[strings.length - 1];   //再加上最后的一项
  return str

3.如何自己实现一个类模板字符串的功能

let name = 'haha';
let age = 9;
let str = 'hello~${name}今年${age}岁了';
str = str.replace(/\$\{([^}]*)\}/g, function () {
  console.log(arguments)
  return eval(arguments[1]); // with
});
console.log(str);