ES6字符串模板和手动封装字符串新增方法:includes、startsWith、endsWith、repeat、padStart、padEnd

在ES6之前,字符串拼接工作都是直接使用"+"进行拼接的,当数据复杂或者要拼接的东西很多时,都会觉得比较麻烦。ES6出来后,使用``字符串模板来做"+"的拼接工作
格式:

`stringxxx...${js代码}stringxxx...`

例如

let obj = {
    name: "alice",
    age: 18,
    sex: 'famale'
}
const me = `
    我的名字叫${obj.name},我今年${obj.age},我的性别是${obj.sex} 
`
console.log(me);

字符串模板的好处是,可以根据需要随意的换行,中间插入变量使用${xxx},{ }里面能识别js代码

关于ES6字符串新增方法
由于用法比较简单,我就不写使用的例子,直接讲完用法就手动实现封装

  1. 新增字符串查找方法

★includes(要找的东西)
用于查找字符串是否包含要找的东西,返回 true/false

String.prototype._includes = function (findStr) {
    return this.indexOf(findStr) == -1 ? false : true;
}
let test = "abcd"._includes("abc");
console.log(test)//true

★startsWith(检测的东西)
用于检测 字符串是否已谁开头,返回 true/false

String.prototype._startsWith=function(str){
    return this.slice(0,str.length) == str
}
console.log("abcd"._startsWith("ab"));

★endsWith(检测的东西)
是否已什么结尾,返回 true/false

String.prototype._endsWith = function(str){
    return this.slice(-str.length) == str
}
console.log("abcd"._endsWith("ab"));//false
console.log("abcd"._endsWith("cd"));//true
  1. 字符串重复

★repeat(n)
参数n表示字符串重复n次
返回一个重复包含n个初始字符串的新字符串

String.prototype._repeat = function (n) {
    let self =  this.valueOf();
    let res = "";
    let temp = Number(n) || 0;
    if (temp) {
        for (let i = 0; i < temp; i++) {
            res +=self;
        }
        return res;
    }
}
console.log("abc"._repeat(2));
  1. 填充字符串

★padStart(整个填充后的字符串的长度,填充的东西)
往字符串前面填充插入字符串,返回填充后的字符串

String.prototype._padStart = function (len, padString) {
    let str = this;
    padString = padString.toString();
    if (padString.length > len - this.length) {
        padString = padString.toString().slice(0, len - this.length);
        while (str.length < len) {
            str += padString;
        }
    }
    //padString.length小于len - this.length情况:
    // 如果padString没有内容,则每一位填充位置用空格填充;
    // 如果有内容,则重复填充(有点像图片repeat填充)
    else if(padString.length == 0){
        while (str.length < len) {
            str = " " + str;
        }
    }else{
        //padString中的字符可能需要重复出现
        // 前面需要填充len-this.length位,而我填充的字符串只有padString.length
        while (str.length < len) {
            str = padString + str;
        }
    }       
    return str;
}
console.log("abc"._padStart(6, "122111"));

★padEnd(整个字符串的长度,填充的东西)
往字符串后面填充插入字符串

String.prototype._padEnd = function (len, padString) {
    let str = this;
    padString = padString.toString();
    if (padString.length > len - this.length) {
        padString = padString.toString().slice(0, len - this.length);
        while (str.length < len) {
            str = str + padString;
        }
    }
    else if (padString.length == 0) {
        while (str.length < len) {
            str += " ";
        }
    } else {
        while (str.length < len) {
            str += padString;
        }
    }
    return str;
}
console.log("abc"._padEnd(6, "122111"));

以上就是ES6中字符串新增的东西!

你可能感兴趣的:(ES6字符串模板和手动封装字符串新增方法:includes、startsWith、endsWith、repeat、padStart、padEnd)