英文 | https://www.javascripttutorial.net/

譯文 | 楊小愛(ài)

在上節(jié)，我們學(xué)習(xí)了如何使用 JavaScript split() 方法將字符串拆分為子字符串?dāng)?shù)組，錯(cuò)過(guò)的小伙伴可以點(diǎn)擊文章《【JavaScript 教程】第五章 字符串06— split()：將字符串拆分為子字符串?dāng)?shù)組 》進(jìn)行學(xué)習(xí)。

那么，在今天的教程中，我們將一起來(lái)學(xué)習(xí)如何使用 JavaScript 的indexOf()方法來(lái)查找字符串中子字符串的索引。

String.prototype.indexOf() 返回字符串 (str) 中第一次出現(xiàn)子字符串 (substr) 的索引：

let index = str.indexOf(substr, [, fromIndex]);

如果 str 不包含 substr，則返回 -1。

fromIndex 是一個(gè)可選參數(shù)，用于指定搜索開(kāi)始的索引。它默認(rèn)為零 (0)，這意味著如果您省略 fromIndex，搜索將從字符串的開(kāi)頭開(kāi)始。

indexOf() 始終執(zhí)行區(qū)分大小寫(xiě)的搜索。

要查找字符串中子字符串最后一次出現(xiàn)的索引，請(qǐng)使用 lastIndexOf() 方法。

JavaScript String indexOf() 示例

讓我們舉一些使用 indexOf() 方法的例子。

1) 使用 indexOf() 方法示例

以下示例使用 indexOf() 獲取字符串 'finding substring in string' 中第一次出現(xiàn)子字符串 'str' 的索引：

let str = 'finding substring in string';let index = str.indexOf('str');
console.log(index); // 11

2) 使用 indexOf() 計(jì)算字符串中子字符串的出現(xiàn)次數(shù)

下面的示例使用 indexOf() 方法計(jì)算字符串 'You don't know what you don't know until you know.' 中子字符串 'know' 的出現(xiàn)次數(shù)：

let str = 'You do not know what you do not know until you know.';let substr = 'know';
let count = 0;
let index = str.indexOf(substr);while(index !== -1) {    count++;    index = str.indexOf(substr, index + 1);}
console.log(count);

程序是怎么運(yùn)行的：

首先，使用 indexOf() 方法查找 str 中第一次出現(xiàn)的 substr。

然后，使用while循環(huán)，從最后找到的位置+1開(kāi)始，在str中重復(fù)查找substr的下一個(gè)位置。

3) indexOf() 和區(qū)分大小寫(xiě)

indexOf() 區(qū)分大小寫(xiě)。請(qǐng)參閱以下示例：

let str = 'JS indexOf';let substr = 'js';
let index = str.indexOf(substr);
console.log(index); // -1

在這個(gè)例子中， indexOf() 返回 -1，因?yàn)樽址?JS IndexOf 不包含子字符串 js 而是 JS。

要對(duì)字符串中子字符串的索引執(zhí)行不區(qū)分大小寫(xiě)的搜索，您可以在使用 indexOf() 方法之前將子字符串和字符串都轉(zhuǎn)換為小寫(xiě)，如下所示：

let str = 'JS indexOf';let substr = 'js';
let index = str.toLocaleLowerCase().indexOf(substr.toLocaleLowerCase());
console.log(index); // 0

總結(jié)

• indexOf() 返回字符串中子字符串第一次出現(xiàn)的索引，如果字符串不包含子字符串，則返回 -1。

• indexOf() 區(qū)分大小寫(xiě)。

如果你還想學(xué)習(xí)更多的內(nèi)容，請(qǐng)點(diǎn)擊下文鏈接進(jìn)行學(xué)習(xí)。

【JavaScript 教程】第五章 字符串03— trim()、trimStart() 和 trimEnd()

【JavaScript 教程】第五章 字符串02— 字符串類型

【JavaScript 教程】第五章 字符串01— JavaScript 字符串

【JavaScript 教程】第四章 程序流程08— JavaScript continue 語(yǔ)句

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)