前言

ES6新增了很多属性、方法以及某些特性，本系列主要通过模拟实现的方式来重学ES6,以便帮助自己更深入的的理解那些新增的东西。

本文目标：通过模拟实现，深入理解ES6字符串新增方法

说明：文中对各个方法只做简单介绍，然后模拟实现

模拟实现

新增字符串查找方法

includes()

介绍

参数：接受一个子串，表示要找的东西

作用：用于查找字符串是否包含要找的东西

返回值：返回 true或false，true表示找到，false表示未找到

模拟实现：_includes方法

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

startsWith()

介绍

参数：接受一个子串，表示要检测的东西

作用：用于检测字符串是否已谁开头

返回值：返回 true或false

模拟实现：_startsWith方法

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

endsWith()

介绍

参数：接收一个子串，表示要检测的东西

作用：用于检测是否已什么结尾

返回值：返回 true或false

模拟实现：_endsWith方法

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

字符串重复

repeat(n)

介绍

参数：接收一个数字n作为参数，表示重复的次数

作用：用于将字符串重复n次

返回值：返回包含n个初始字符串的新字符串

模拟实现：_repeat方法

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

填充字符串

padStart()

介绍

参数：接收两个参数，第一个参数表示整个填充后的字符串的长度，第二个表示填充的东西

作用：往字符串前面填充插入字符串

返回值：返回填充后的字符串

模拟实现：_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()

介绍

参数：跟padStart一样，接收两个参数，第一个参数表示整个字符串的长度，第二个表示填充的东西

作用：往字符串后面填充插入字符串

返回值：返回填充后的字符串

模拟实现：_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"));

trim()、trimStart()、trimEnd()

介绍

参数：无

作用：trim用于去除字符串两边的空格、trimStart用于除去左边空格、trimEnd用于去除右边空格！为了好记忆，浏览器还是实现了trimLeft()和trimRight()分别对应trimStart()和trimEnd()

返回值：都返回去除空格之后的新字符串，不改变原字符串

模拟实现：_trim()、_trimStart()、_trimEnd()

String.prototype._trim = function () {
    let reg = /(^\s*)|(\s*$)/g
    return this.replace(reg, '')
}

String.prototype._trimStart = function () {
    let reg = /(^\s*)/g
    return this.replace(reg, '')
}

String.prototype._trimEnd = function () {
    let reg = /(\s*$)/g
    return this.replace(reg, '')
}

let arr = "   abc   "
console.log(arr._trim(),arr._trimStart(),arr._trimEnd());

END

以上是一些ES6字符串身上新增方法的模拟实现!

真正的实现可能跟我写的不一样，不过没有关系，我们只要熟知这些方法具体干了什么，也就达到了这次学习的目的了！

如有疑问或建议，希望可以留言告知，感谢你！！