ES6+ includes()

1. 前言

字符串查找一直都是程序中的常用操作，在 ES5 中查找一個(gè)字符串是否包含另一個(gè)字符串，一般有兩種思維。一是使用正則的方式來(lái)匹配，二是使用 ES5 的方式，如 indexOf、lastIdexOf、search。使用正則比較簡(jiǎn)單，但是需要對(duì)正則語(yǔ)法有一定的了解。一般使用 indexOf() 來(lái)進(jìn)行字符串的查找 ，它會(huì)返回查詢(xún)后第一次出現(xiàn)的指定值的索引，如果未找到該值，則返回 -1。

ES6 新增方法 includes() 方法，來(lái)替代 indexOf() 彌補(bǔ)它的不足。而 ES6 提供了新的方法 includes() 可以更好地進(jìn)行判斷，而不需要根據(jù)返回的索引進(jìn)行判斷。

2. 方法詳情

includes() 方法主要用于查詢(xún)字符串，判斷一個(gè)字符串是否包含另外一個(gè)字符串，其返回值是如果包含該字符串則返回 true 否則返回 false。

使用語(yǔ)法：

str.includes(searchString[, position])

參數(shù)說(shuō)明：

實(shí)例：

var str = 'hello world';

console.log(str.includes('hello'));     // true
console.log(str.includes('hello', 3));  // false

在沒(méi)有傳入確切的查詢(xún)字符串時(shí)，searchString 會(huì)被強(qiáng)制設(shè)置成 “undefined”，然后在當(dāng)前字符串中查找這個(gè)值。

'undefined'.includes('');			// 返回 true
'undefined'.includes(); 	  	// 返回 true
'undefine'.includes();		  	// 返回 false
'imooc ES6 wiki'.includes();	// 返回 false

上面的代碼最容易在面試中出現(xiàn)，考察你對(duì) includes() 方法的理解程度。第 1 行返回 true 很容易理解，查詢(xún)一個(gè)空字符串嘛這個(gè)沒(méi)問(wèn)題，但第 2 行返回的結(jié)果也是 true，這說(shuō)明查詢(xún)的字符串在 “undefined” 字符串中，還不能說(shuō)被設(shè)置成了字符串 “undefined” 。
第 3 、 4 行代碼中也沒(méi)有傳值，但返回的結(jié)果為 false，從而證明了在沒(méi)有傳值時(shí)，第一個(gè)參數(shù)的值被設(shè)置成字符串 “undefined”。

在沒(méi)傳值時(shí)和 indexOf() 的查詢(xún)結(jié)果是一致的。下面我們看 indexOf() 在沒(méi)有參數(shù)時(shí)是一個(gè)什么樣的結(jié)果。

'undefined'.indexOf();		// 返回 0
'undefine'.indexOf();		  // 返回 -1

上面的代碼中，第 1 行返回的結(jié)果是 0，是查詢(xún)結(jié)果的位置，第 2 行返回的是 -1，說(shuō)明沒(méi)有查詢(xún)到。雖然返回的結(jié)果不一樣，但是意義是一樣的。includes() 可以替換 indexOf() 使用，includes() 好處在于它可以直接判斷，而 indexOf() 還需要對(duì)結(jié)果進(jìn)行對(duì)比，如下實(shí)例：

const str = 'imooc ES6 wiki';
if (str.includes('ES6')) {
  // todo

if (str.indexOf('ES6') !== -1) {
  // todo
}

上面代碼中的兩個(gè) if 判斷是一個(gè)意思，但是使用 includes() 很簡(jiǎn)潔，這也是 ES6 設(shè)計(jì)的初衷。

3. 使用場(chǎng)景

includes() 方法的引入是為了代替 indexOf() 作為字符串的查詢(xún)的方法使用。

3.1 區(qū)分大小寫(xiě)

includes() 方法是區(qū)分大小寫(xiě)的。

'imooc es6'.includes('imooc');  // true
'imooc es6'.includes('Imooc');  // false

3.2 一個(gè)參數(shù)

includes() 在只有一個(gè)參數(shù)時(shí)，會(huì)從字符串的第一個(gè)字符開(kāi)始查找。

var str = "I love imooc.";

console.log(str.includes("I love"));    // true
console.log(str.includes("imooc"));     // true
console.log(str.includes("eimooc"));    // false

3.3 兩個(gè)參數(shù)

當(dāng) includes() 有第二個(gè)參數(shù)的時(shí)候，會(huì)從第二個(gè)參數(shù)作為索引的位置開(kāi)始。

var str = "I love imooc.";

console.log(str.includes("love", 3));  // false
console.log(str.includes("ove", 3));   // true

第二個(gè)參數(shù)的意思是，查找字符串開(kāi)始的位置，例子中的 3 就是查找的位置，所以查找的目標(biāo)字符串是 ove imooc.。

當(dāng)?shù)诙€(gè)參數(shù)是負(fù)數(shù)時(shí)，只要查找的字符串在目標(biāo)字符串里，無(wú)論是多少，都會(huì)返回 true。

var str = "I love imooc.";

console.log(str.includes("love", -1));    // true
console.log(str.includes("ove", -100));   // true
console.log(str.includes("Love", -1));    // false

4. 注意事項(xiàng)

在使用 includes() 時(shí)需要注意類(lèi)型轉(zhuǎn)換的一些問(wèn)題：

4.1 includes 會(huì)做類(lèi)型轉(zhuǎn)換

let numStr = '2020';
 
numStr.includes('2');  // true
numStr.includes(2);    // true

在這個(gè)例子中 numStr 是一個(gè)字符串，判斷字符串 2 和數(shù)字 2 都是能返回正確的結(jié)果，這里 includes() 會(huì)把數(shù)字轉(zhuǎn)換成字符串 ‘2’ 然后再執(zhí)行查詢(xún)操作。

4.2 不能對(duì) Number 類(lèi)型直接使用

let numStr = 2020;

numStr.includes(2);    // Uncaught TypeError: numStr.includes is not a function

從這個(gè)例子可以看出，includes 是字符串上的方法，而這里直接使用在數(shù)值類(lèi)型上所以會(huì)報(bào)語(yǔ)法錯(cuò)誤。如果要使用 includes 來(lái)查詢(xún)，就必須把數(shù)字轉(zhuǎn)化成字符串，然后進(jìn)行查詢(xún)。

let numStr = 2020;
("" + numStr).includes(0) // true

這里對(duì) numStr 前加一個(gè)空字符串可以進(jìn)行類(lèi)型轉(zhuǎn)換。

5. 小結(jié)

本節(jié)講解了字符串的 includes() 方法的使用，總結(jié)以下幾點(diǎn)：

1. 在沒(méi)有傳參時(shí)，查詢(xún)字符串會(huì)被設(shè)置成 “undefined”；
2. includes() 區(qū)分大小寫(xiě)；
3. 當(dāng)有第二個(gè)參數(shù)時(shí)，則會(huì)從第二個(gè)參數(shù)作為索引的位置開(kāi)始查找，并包含當(dāng)前位置的字符；
4. 當(dāng)?shù)诙€(gè)參數(shù)是負(fù)數(shù)時(shí)，只要查找的字符串在目標(biāo)字符串里，無(wú)論是多少，都會(huì)返回 true；
5. 判斷數(shù)字時(shí)，需要把數(shù)字轉(zhuǎn)換成字符串類(lèi)型才能查詢(xún)。