Home >> Blog >> 如何在 JavaScript 中使用 includes 方法
如何在 JavaScript 中使用 includes 方法
includes() 方法是 Array 和 String 原型的一部分。此方法接受搜尋值作為參數，如果該值包含在調用它的數組中，或者它作為調用它的字符串對象的子字符串存在，則返回 true。
本文介紹了每個原型的includes()方法的基礎知識，並探討了兩者之間的差異。
一個基本的 String.includes() 範例
以下範例演示了使用String時include()的基本用法：
const str = 'This String includes the word includes';
console.log(str.includes('includes'));
// Expected output: true
在上面的範例中，includes()方法用於在字符串變量 const str中搜尋單詞“ includes ”。由於 const str的值包含搜尋字符串（作為字符組合包含在內），該方法返回true。
重要提示： includes()區分大小寫！！
用大寫搜尋“包含”我將返回false。搜尋字符串或數組時也會考慮空格。
includes()方法使用字符組合匹配搜尋字符串。這就是為什麼空格算作要檢測的模式的一部分，以及為什麼可以搜尋單詞的一部分——甚至是單個字符，如下所示：
console.log(str.includes('u'));
// Expected output: true
console.log(str.includes('u '));
// Expected output: false/p>
在上面的範例中，使用include()搜尋字符 'u' 會返回true，因為該字符存在於字符串中。
是，搜尋帶有空格的字符 'u' 會導致includes()返回false ，因為 const str中不存在這種字符組合。
Array.includes() 基本範例
下一個範例演示如何使用數組版本的includes()：
const furniture = ['table', 'chair', 'cupboard', 'wardrobe', 'stool'];
console.log(furniture.includes('chair'));
// Expected output: true
在上面的範例中，數組 const家具包括項目chair。因此，includes()方法返回true。
與上面的String.includes()類似，搜尋方法也是區分大小寫的。這意味著搜尋帶有大寫“C”的“Chair”將返回false。這同樣適用於包含空格的搜尋字符串——因為數組的所有元素都不包含空格，所以任何帶有空格的搜尋字符串都將返回false作為結果。
與其配套的String.includes()方法不同，Array.includes()不允許您搜尋項目的一部分：
console.log(furniture.includes('cha'));
// Expected output: false
在上面的範例中，雖然搜尋詞“cha”確實作為第一組字符出現在元素“chair”中，但此方法仍將返回 false。這是因為Array.includes()只允許您搜尋整個項目。
句法
如上所示，includes()方法的語法很簡單——只需將includes()方法應用於String或Array，並將searchValue作為參數傳入。
includes()方法還接受第二個參數——startIndex——它指示搜尋應該開始的位置。
include()的語法如下：
字符串或數組.includes( searchValue , startIndex )
搜尋值：
searchValue參數表示要搜尋的值。
對於String.includes – 參數必須是字符串。
對於Array.includes – 參數可以是任何原始數據類型（符號除外）和函數。更多詳細資訊將在下面的Arrays 的可能搜尋值部分中介紹。
startIndex： startIndex參數指定開始搜尋的字符串或數組的索引。此參數接受一個數字，默認值為零 (0)。
console.log(str.includes('includes', 16));
// Expected output: true
上面的範例使用了我們之前範例中的 const str，但是從索引16開始搜尋，而不是從開頭開始。由於這是在源字符串中第一次出現“包含”一詞的中間，因此第一個實例不計為匹配項。但是，因為 const str以字符組合 include 結尾，所以該方法仍然返回true。
提示：String.charAt()方法告訴哪個字符出現在某個索引處。
console.log(str.charAt(16));
// Expected output: u
const str的索引 16 處的字符是單詞“包括”第一次出現的字符u。
負指數
Array.includes()可以接收startIndex參數的負索引。這會導致搜尋起始位置從數組的末尾開始計數，而不是從開頭開始。
注意： 負索引只能用於Array.includes() - 它們不適用於 String.includes()！
console.log(furniture.includes('chair', -2));
// Expected output: false
在上面的範例中，家具數組的搜尋從索引 -2開始。這表示數組中的倒數第二個元素。在 const 家具的定義中，這表示項目“衣櫃”。由於const家具中的“衣櫃”項之後沒有出現“椅子”項，因此include()方法返回false。
Array.includes() 和 String.includes() 的區別
對於String和Array原型， includes()方法的行為方式有兩個主要區別：
Array.includes()可以接受startIndex的負索引，而String.includes()不能。
Array.includes()允許您搜尋多種數據類型，而String.includes()允許您僅搜尋字符串。
數組的可能搜尋值
讓我們更詳細地探討Array.includes()。為了提供幫助，我們將首先定義四個變量：
const bigNum = 235326n;
const word = 'word';
const x = Symbol('foo');
const y = Symbol('bar');
在上面的範例代碼中， const bigNum是BigInt類型， const word是String類型，另外兩個（const x和 const y）是Symbols。
接下來，我們將定義一個混合數組以用於我們的搜尋：
const mix = [56, true, undefined, null, 235326n, Symbol('foo'), y, word];
數組 const mix表示各種數據類型的組合。
如上所述，用於搜尋數組的數據類型可以是任何原始數據類型（不包括符號）和函數。
下面的範例突出顯示了在 const mix數組中搜尋不同數據類型的返回值：
console.log(mix.includes(56)); // Expected output: true
console.log(mix.includes(true)); // Expected output: true
console.log(mix.includes(undefined)); // Expected output: true
console.log(mix.includes(null)); // Expected output: true
變量 const bigNum存儲一個BigInt值。此變量 ( 235326n ) 的值作為值出現在 Array const mix中。如以下範例所示，我們可以使用該值或存儲該值的變量（即bigNum）來搜尋該值：
console.log(mix.includes(235326n)); // Expected output: true
console.log(mix.includes(bigNum)); // Expected output: true
無法使用includes()方法驗證符號的包含，既不能通過搜尋值本身 ( Symbol('foo') ) 也不能通過搜尋引用該值的變量 ( x )。
console.log(mix.includes(Symbol('foo'))); // Expected output: false
console.log(mix.includes(x)); // Expected output: false
然而，因為數組包含一個引用Symbol('bar')的變量 y ，所以可以使用includes()方法來搜尋這個變量的存在並驗證它的包含：
console.log(mix.includes(y)); // Expected output: true
類似地，如果一個變量是數組中的一個項目（如上 const word所示），則使用Array.includes()搜尋存儲在該變量中的值（即“ word ”）：
console.log(mix.includes('word')); // Expected output: true
注意：您不能使用Array.includes()搜尋子數組或對象。