字符串 includes, startsWith, endsWith

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战。

前言

ECMAScript 6.0 简称ES6 , 是 JavaScript 语言的新一代的标准，于在 2015 年 6 月发布，正式名称就是《ECMAScript 2015 标准》。一般情况，泛指， 5.1版以后的标准，涵盖了 ES2015、ES2016、ES2017、ES2018、ES2019、ES2020、ES2021 等等

我们一起来学习字符串的查找：

三个方法均返回布尔值

• String.prototype.includes
  被查找的字符串是否在原字符串中
• String.prototype.startsWith
  被查找的字符串是否在原字符串的头部
• String.prototype.endsWith 被查找的字符串是否在原字符串的尾部

ES6之前的查找

在ES6之前，只能通过String.pototype.indexOf是确定被查找字符串的位置，返回的是一个数字。 -1表示没找到。

所以需要一个布尔值的之后，还需要和0或者-1做个比较。

var text ="JavaScript Hello world!!!";
const includeJava =  text.indexOf("Java") >=0  // true

String.prototype.includes

被查找的字符串是否在原字符串中， 返回布尔值。

var text ="JavaScript Hello world!!!";
const includesJava = text.includes("Java")  // true

其实其还有第二个参数：

str.includes(searchString[, position])

position哪个索引位置开始搜寻子字符串, 当然默认值是0.

var text ="JavaScript Hello world!!!";
const includesJava = text.includes("Java", 1)  // false

postion如果是负数，会从0开始查找。

很简单，那么我们我们用ES5的语法实现一下：

if(!String.prototype.includes){
    String.prototype.includes = function (searchString, position){
        if(typeof position !== "number"){
            position  = 0
        }      
        return this.indexOf(searchString, position) !== -1;
    }
}

这里大家可能会担心postion为负数的情况，不用担心，因为indexOf自身已经考虑负数的情况。

String.prototype.startsWith

判断当前字符串是否以另外一个给定的子字符串开头。

语法如下，也有第二个参数position，表示开始搜索的位置。

str.startsWith(searchString[, position])

var text ="JavaScript Hello world!!!";
text.startsWith("Java") // true
text.startsWith("Java", 1) // false

ES6的实现：

if(!String.prototype.startsWith){
    String.prototype.startsWith = function (searchString, position){
        if(typeof position !== "number"){
            position  = 0
        } 
        return this.indexOf(searchString, position) === 0;
    }
}

MDN给出的却是使用substring来实现，自然性能会高一些， 其直接截取字符串进行比较、

if (!String.prototype.startsWith) {
    Object.defineProperty(String.prototype, 'startsWith', {
        value: function(search, pos) {
            pos = !pos || pos < 0 ? 0 : +pos;
            return this.substring(pos, pos + search.length) === search;
        }
    });
}

String.prototype.endsWith

判断当前字符串是否以另外一个给定的子字符串开头。

语法如下，也有第二个参数作为 str 的长度。默认值为 str.length。 这个是MDN的中文解释，不好理解。

length有值的时候，表示是进部分字符串进行搜索匹配：

1. 调用substring截取字符串
2. 对截取部分进行 endsWith

str.endsWith(searchString[, length])

var text ="JavaScript Hello world!!!";
text.endsWith("Hello") // false
text.endsWith("Hello", 16) // true

ES5的写法：

if(!String.prototype.endsWith){
    String.prototype.endsWith = function (searchString, length){
        if(typeof length !== "number" || length > this.length){
            length  = this.length
        } 
        return this.substring(0, length).indexOf(searchString) === length - searchString.length
    }
}

当然，利用substring和searchString.length有更高效的写法：(MDN)

if (!String.prototype.endsWith) {
  String.prototype.endsWith = function(search, this_len) {
    if (this_len === undefined || this_len > this.length) {
      this_len = this.length;
    }
    return this.substring(this_len - search.length, this_len) === search;
  };
}

小结

今天你收获了吗？

引用

String.prototype.includes