es6 字符串新增

一.模板字符串

1. ES 6 字符串模板

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

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

2. 字符串模板注意

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

二 . 字符串扩展

1.includes()、startsWith()、endsWith()

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

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

ES6 又提供了三种新方法。

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

1.1 include()

1. 语法

str.include(cstr[,num])

2. 参数

第一个参数:为你要查询的子字符串

第二个参数; 开始查询的位置,可以省略,省略,默认从头查找

3. 返回值

返回值 true/false

true表示父字符串中包含子字符串

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

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

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

2. 重复字符串 repeat

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

1. 语法

str.repeat(n)

2. 参数

n为重复的次数

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

2.1 参数注意事项

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

3. 填充字符串 padStart padEnd

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

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

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 padStart()与padEnd()参数注意事项

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