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()
语法
str.include( cstr ,[,num])
参数
第一个参数:为你要查询的子字符串
第二个参数; 开始查询的位置,可以省略,省略,默认从头查找
返回值
返回值 true/false
true表示父字符串中包含子字符串
let str = "apple banana";
console.log(str.indexOf("apple"));
// 从下标为3的位置开始查询
console.log(str.includes("apple",3));
2.1.2 startsWith
检测字符串是否以谁开头
语法
str.startsWith(cstr[,num])
参数
第一个参数: 需要查询的字符串
第二个参数; 开始查询的位置,可以省略,省略,默认从头查找
返回值
返回值 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
检测字符串是否以谁结尾
语法
str.endsWith(cstr[,num])
参数
第一个参数: 需要查询的字符串
第二个参数; 检测前几个字符是否以第一个参数结尾
返回值
返回值 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次。
语法
str.repeat(n)
参数
n为重复的次数
let str = "wuwei";
let repstr = str.repeat(3);
console.log(repstr); //wuweiwuweiwuwei
2.2.1 参数注意事项
- 参数如果是小数，会被向下取整。
- 如果
repeat的参数是负数或者Infinity，会报错。 - 0 到 1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于
-0，repeat视同为 0。 - 参数
NaN等同于 0。 - 如果
repeat的参数是字符串，则会先转换成数字。
2.3. 填充字符串 padStart padEnd
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
2.3.1 开始位置填充 padStart
语法:
str.padStart(num,pstr)
参数
接受两个参数
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
语法:
str.padEnd(num,pstr)
参数
接受两个参数
num: 填充后整个字符串的长度
pstr: 填充物
let str = "wuwei
let padStr = "66";
console.log(str.padEnd(str.length + padStr.length,padStr));
// wuwei66
3.3.3 padStart()与padEnd()参数注意事项
- 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。
- 如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
- 如果省略第二个参数，默认使用空格补全长度