前端提高篇(120):es6模板字符串和字符串拓展

模板字符串

1.传统字符串处理多行字符串时，需要手动添加换行符

let msg = "hellohellohellohellohello\n\
hellohellohellohellohello\n\
hellohellohellohellohellohellohellohellohellohellohello";
console.log(msg);

2.传统字符串处理字符串包含变量时，需要拼接：

let age = 10;
let msg2 = "hello " + age + " hello";
console.log(msg2); //hello 10 hello

3.es6提出了模板字符串的概念，用反引号来圈起字符串，处理多行字符串时：

let msg1 = `hello
hello
hello`
console.log(msg1);

效果：

4.模板字符串处理字符串包含变量时，用${}，花括号里还可以写表达式

let msg3 = `hello ${
       age+10} hello`;
console.log(msg3) //hello 20 hello

字符串拓展

1.String.prototype.startsWith
功能：查找字符串A是否以字符/字符串B开头
第一个参数：要匹配的字符B
第二个参数：从源字符串A的哪个位置往后开始找起
返回布尔型，是则返回true；否则返回false

2.String.prototype.endsWith
功能：查找字符串A是否以字符/字符串B结尾
第一个参数：要匹配的字符B
第二个参数：从源字符串A的哪个位置往前（不包含该位置）开始找起
返回布尔型，是则返回true；否则返回false

let msg = "hello";
console.log( msg.startsWith("e",1) ); // true
// 从下标1往后找，包含下标为1的'e'

console.log(msg.endsWith( "ll", 3)); //false
// 从下标3往前找，不包含下标为3的'l'，所以不以'll'结尾

3.String.prototype.includes
功能：字符串A是否包含某字符/某字符串B。
第一个参数为：要匹配的字段B；
第二个参数为：从源字符串A的哪个位置开始找起；
返回布尔型，包含则返回true；不包含则返回false

如果用es5来实现这个功能，来增加代码兼容性，用es5的indexOf：

if (!String.prototype.include){
     
    String.prototype.include = function(search, start){
     
        if (typeof start !== "number"){
     
            start = 0;
        }
        if ( start + search.length > this.length){
     
            return false;
        }else {
     
            return this.indexOf(search, start) !== -1;
        }
    }
}else {
     
    String.prototype.include(search, start);
}

4.String.prototype.repeat
功能：重复某字符串
参数：重复次数

let msg = "hello";
console.log(msg.repeat(3)); //输出：hellohellohello