第二十二节: 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岁

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

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)
}

2. 字符串扩展

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

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

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

现在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。
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. 如果省略第二个参数，默认使用空格补全长度