第二十二节: ES6 字符串新增

1.模板字符串

1.1. ES5的字符串处理

es5的字符串模板输出通常是使用+拼接。

这样的缺点显然易见：字符串拼接内容多的时候，过于混乱，易出错。

let name = "wuwei";
let age = 18;
let str = "这个人叫XXX,年龄是111岁";
console.log(str); //这个人叫XXX,年龄是111岁

// 以前学的字符串模板
let str = "这个人叫" + name + ",年龄是" + age + "岁";
console.log(str);  //这个人叫wuwei,年龄是18岁

1.2. ES 6 字符串模板

为了解决之前字符串的问题,ES6 提供了一个大块人心的方法就是字符串模板,

`` 反斜杠

优点: 可以随意的换行

例子:

let name = "wuwei";
let age = 18;
let str = `这个人叫${name},年龄是${age}岁`;
console.log(str);  //这个人叫wuwei,年龄是18岁


function fun(){
  return "aaaaaa"
}
let name = "xiaoming";
let age = 29;  
//``反引号
let str =`   
hello 
${name.toUpperCase()}   //使用变量，给变量加字符串大写的方法
我是
${age *2}//加变量
world
${fun()}  //调用函数
`;
console.log(str);

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

1.3. 字符串模板注意

• 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
• 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
• 模板字符串中嵌入变量，需要将变量名写在${}之中。
• 大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
• 模板字符串之中还能调用函数。

带标签的字符串模板: 如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
function tag(){
   console.log(arguments)
}


    let name = "张三";
    num = 10;
    function fun(arr, num, name) {
      console.log(arguments);
      let str = arr[0] + (num * 2) + name + arr[2]   //重组字符串
      console.log(str);
    }
    fun`大家好，我是${num}号${name},欢迎大家！`  //函数名后面跟上ES6的字符串模板
// 函数接收的第一个参数是按${}切割的数组
// 第二个以后的参数是${}里面的内容，按顺序排列，
// 拿到这些参数就可以重组字符串

2. 字符串扩展

2.1.includes()、startsWith()、endsWith()

在之前我们想判断一个字符串中有没有某个子字符串,我们多使用indexOf() lastIndexOf()来判断

let str = "apple banana";
console.log(str.indexOf("apple"));   //索引为-1表示没有，返回索引表示有这个值

现在ES6 又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

2.1.1 includes()

1. 语法
   str.include( cstr ,[num])
2. 参数
   第一个参数:为你要查询的子字符串
   第二个参数; 开始查询的位置,可以省略,省略,默认从头查找
3. 返回值
   返回值 true/false
   true表示父字符串中包含子字符串

    let str = "apple banana";
    console.log(str.indexOf("apple"));

    // 从下标为3的位置开始查询
    console.log(str.includes("apple",3));

2.1.2 startsWith

检测字符串是否以谁开头

1. 语法
   str.startsWith(cstr[,num])
2. 参数
   第一个参数: 需要查询的字符串
   第二个参数; 开始查询的位置,可以省略,省略,默认从头查找
3. 返回值
   返回值 true/false
   true表示父字符串是否已子字符串开头

检测协议

let str = "http://www.baidu.com";
str.startsWith("http");      // true
str.startsWith("https");      // false

// 第二个参数为开始查询的位置,在此位置上是不是一子字符串开头
str.startsWith("www",7);      // true

1.3 endsWith

检测字符串是否以谁结尾

1. 语法
   str.endsWith(cstr[,num])
2. 参数
   第一个参数: 需要查询的字符串
   第二个参数; 检测前几个字符是否以第一个参数结尾
3. 返回值
   返回值 true/false
   true表示父字符串是否已子字符串结尾

检测你上传的图片是不是.jpg 或是png

let str = "http://www.baidu.com";
str.endsWith("com");      // true
str.endsWith("cn");      // false

// str的前16个字符是否是以'baidu'结尾的
str.endsWith("baidu",16);   // true


let str = "aaa.png";
str.endsWith("png");      // true
str.endsWith("jpg"); 

2.2. 重复字符串 repeat

repeat 方法返回一个新字符串，表示将原字符串重复n次。

1. 语法
   str.repeat(n)
2. 参数
   n为重复的次数

    let str = "wuwei";
    let repstr = str.repeat(3);
    console.log(repstr);  //wuweiwuweiwuwei

2.2.1 参数注意事项

1. 参数如果是小数，会被向下取整。
2. 如果repeat的参数是负数或者Infinity，会报错。
3. 0 到 1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。
4. 参数NaN等同于 0。参数是其他数据类型会转我数字类型，转不了就是NAN，返回空字符串。
5. 如果repeat的参数是字符串，则会先转换成数字。

2.3. 填充字符串 padStart padEnd

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

2.3.1 开始位置填充 padStart

1. 语法:
   str.padStart(num,pstr)
2. 参数
   接受两个参数
   num: 填充后整个字符串的长度
   pstr: 填充物

    let str = "wu";
    console.log(str.padStart(5,6));  // 666wu
    
    // 这么写很麻烦,我还得数填充后的字符串的总长度,也很累,我们可以这么干
    
    let str = "wu" ;
    let padStr = "666";
    console.log(str.padStart(str.length + padStr.length,padStr));
    // 666wu
    
    // 这个时候就可以随便改变值了,这就比较智能了
    let str = "wuwei
    let padStr = "66";
    console.log(str.padStart(str.length + padStr.length,padStr));
    // 66wuwei

2.3.2 结束位置填充: padEnd

1. 语法:
   str.padEnd(num,pstr)
2. 参数
   接受两个参数
   num: 填充后整个字符串的长度
   pstr: 填充物

    let str = "wuwei
    let padStr = "66";
    console.log(str.padEnd(str.length + padStr.length,padStr));
    // wuwei66

3.3.3 padStart()与padEnd()参数注意事项

1. 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。
2. 如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
3. 如果省略第二个参数，默认使用空格补全长度